buildo / react-components

Collection of general React components used in buildo projects.

React Components

This is a collection of reusable React components used at buildo.

Its purpose is to give access to all these components through a single npm dependency so to improve the development experience and make eventual changes of library easier, faster and centralized.

Install

npm install --save buildo-react-components

Showroom

http://react-components.buildo.io/

Usage

Each component is stored inside its own folder (useful for small bundles). You can import each package directly from the main lib:

import { Panel, SingleDropdown, Popover } from 'buildo-react-components';

Or from the package folder:

import Button from 'buildo-react-components/lib/Button';

NOTE: If you installed it as a GitHub dependency (npm i --save buildo/react-component) then import from /src:

import Button from 'buildo-react-components/src/button';

Semver

Until buildo-react-components reaches a 1.0 release, breaking changes will be released with a new minor version. For example in 0.5.1, and 0.5.4 every component will have the same expected output, but in 0.6.0 at least one component will have breaking changes.

Every change (new features, fixes and breaking changes) is listed in CHANGELOG.md. To know more read the changelog section

Publish on npm

To publish a new version you must:

• be authenticated in npm and authorized to publish buildo libraries
• run npm run release

a powerful node script will do the rest for you :)

• throw error if not on "master"
• throw error if not in sync with "remote"
• automatically detect if release should be "breaking"
• run linters and tests
• increase version (breaking|patch)
• publish new version on npm
• push work on origin

Changelog

CHANGELOG.md

CHANGELOG.md is updated after every commit on master automatically by the CI.

Closed issues are grouped in one of these three sections:

• "Breaking"
• "Fixes (bugs & defects)"
• "New features"

In order to separate issues in the above groups the script uses their labels.

IMPORTANT: Please remember to mark any breaking issue with the label "breaking".

react-components's Issues

Add FlexView to KitchenSink

[Popover] rename misleading type props "absolute" and "relative"

remove absolute and relative in favor of attachToBody={true/false}

/cc @giogonzo @francescogior

[Popover] - Statelessness

REQS

• Popover should be able to act as a stateless component
• it should accept an isOpen prop or something

toaster (notifications manager)

requirements

discussed here: https://github.com/buildo/labonline/issues/730 + offline with pretty much everyone
final behavior: same as: http://igorprado.com/react-notification-system/ (but with a much nicer api!)

• display a list of dismissable notifications
• the list should be positioned at one of the corners top-left, top-right, etc (but we can start with top-right only), and stacking of toast notifications behave accordingly
  • e.g. for top-right, new notifications appear at the top of the stack and disappear at the bottom (FIFO) after a certain timeout.
• possible interaction is just "pausing" a specific item in the stack from disappearing automatically, how this interaction is initiated is delegated to the user / user component
  • when an item is paused, it will not disappear automatically, but other toasts in the stack behaves as they would so the entire stack can slide, including the "paused" toast
• items should be placed on top of everything and not interfer with the rest of the layout

specs

• Toaster should have a stateless interface accepting ~ a list of children (all the toasts to be rendered / animated)
• internally, it is stateful and handles a timeout and a state (paused true/false) for each toast
• it should be able to accept a container element (id?) to be used as the container to render in
• should apply arbitrary animations (OSX?) for sliding and enter/leave, but consider this should be easily customizable in the future

api draft

EDIT: old. look at comment below

<Toaster attachTo="#dasd">
  {(activeOn: fn, activeOff: fn, dismiss: fn) => errors.map(e => (
    <MyToastComponent
      key={uniqueToastKey(i)}
      onHover={activeOn}
      onHoverOut={activeOff}
      onDismissClick={dismiss(uniqueToastKey(i))}
    />
  )}
</Toaster>

[Toaster] add custom positioning

requirements

user should be able to easily position Toaster in each one of the window corners

specs

• add prop position: oneOf(['top-left', 'top-right', 'bottom-left', 'bottom-right'])
• modify ToastWrapper absolute positioning based on position

wooops (restore webbpack.build)

implement TextOverflow component

refer to https://github.com/buildo/labonline/issues/622 for specs (only the part about ellipsis and popover)

add state class to Popover

requirements

custom children style for open/close Popover

specs

add "is-open" / "is-close" class to main div wrapper

[FlexView] add flex components to README

FlexView.grow should be either number or bool

remove semantic from popover

sub-issues

• publish on npm #1

implement window EventHandler utility component

[Popover] margin offset should be customizable inline

new props:

• offsetX -> [ t.maybe(t.Num) ] add custom offset in px to x positioning
• offsetY -> [ t.maybe(t.Num) ] add custom offset in px to y positioning
• distance -> [ t.maybe(t.Num) ] set distance in px from element (handles positive/negative switch if bottom/top automatically)

lodash should be a required dependency (not devDependency)

also replace lodash with object-assign in dev-dependencies to avoid conflicts

and replace
var assign = require('lodash/object').assign;
with
var assign = require('object-assign');

in webpack config files

[popover] fix children propType

I mistakenly changed it in this commit df8aa82#diff-cd613c5f86f6e8b9cdffc30317bbc593R7 (which wasn't even related with Popover ... weird)

custom sass importer to resolve ~ to node_modules/

[Toaster] grained imports from react/addons

requirements

reduce bundle size

specs

we should import TransitionGroup and cloneWithProps directly as done in ModalManager:

import ReactTransitionGroup from 'react/lib/ReactTransitionGroup';

add checkbox

← #2

update react-select

• update react-select to latest version
• be more flexible with components versions (use ^)

create Scrollable wrapper component

requirements:

• accept function content callback as children
  • pass scrollTo function to callback
    • args: (x, y, time)
    • should also work on mobile
• wrap content in div (so as usual accept className, style, id)
• stop scroll event propagation (optional)
• scroll should work properly on mobile
  • enable gravity scroll for iOS by default
• customizable scrollbar (also optional)
• support every scroll direction (overflow)
  • only x
  • only y
  • both (default)

/cc @giogonzo @francescogior

[modal] implement modal manager

requirements

simple stateless modal manager to switch between available modals and show only one at a time. it should provide a basic animation for entering/leaving modals

specs

• ModalManager should be stateless: the parent should pass it the data it needs through props
• renders null and create + populate div outside main tree with current Modal(if any)
• accepts three props:
  • activeModal: t.maybe(t.Str) // the uniqueID of the active modal
  • data: t.maybe(t.Obj) // the data passed to the modal as {...data}
  • modals: t.list( t.struct( { id: t.Str, modal: t.ReactElement } ) )
• semantic free
  • desktop
  • mobile (copy from OXWAY?)
• basic enter/leave animations (custom animation support will be added in future)

Popover crashes if isOpen={true} from start

add MobileDetector from oxway

additional requirements:

• should accept optional prop userAgent to use instead of window.navigator.userAgent

[FlexView] about aligning things

situation that brought this thiking up:

how to approach this situation? possibilities:

• margin-left: auto on the right child works well (http://stackoverflow.com/questions/22429003/right-aligning-flex-item)
• align-self ?? couldn't get it to work..

@FrancescoCioria @giogonzo

[Popover] add dismissOnClickOut

REQS

• When the popover is activated by a click event, it would be useful to dimiss the content on click-out
• Optional dimming overlay (? as discussed offline, this would be more like a modal)

[Dimmer] implement background dimmer component

requirements

when using ModalManager and sometimes also Popover we want the whole page in background to be dimmed so to force the user to concentrate on the open modal/menu/popover. we might also want to stop the scrolling of the window and to close the modal/popover/... when the user click on the dimmed area

specs

new wrapper component BackgroundDimmer which:

• renders a whole page fixed dimmed div and after (important for z-index issues) the passed children node
• may stop scroll but only if outside children
• accept callback for onClickOutside for clicks outside children
• style easy to customize:
  • color
  • alpha

usage example:

<BackgroundDimmer color='yellow' alpha={0.6} stopScrollPropagation onClickOutside={this.handleEvent}>
  <MyComponent />
</BackgroundDimmer>

/cc @francescogior

add "events" object prop and pass it to first child

publish on npm

← #2

@giogonzo should we make it private or public

[Toaster] add support for appearing children

requirements

Toaster should handle (show animation + render) children existing since the first render

specs

listen to componentWillAppear and componentDidAppear and treat them as "enter" counterpart

add scrollable mode

refer to https://github.com/buildo/labonline/issues/462

extract TransitionWrapper from modal/toaster

requirements

ModalWrapper and ToastWrapper are 99% the same component. we should generalize them into a new TransitionWrapper to be used together with ReactTransitionGroup.

specs

• add prop component: t.maybe(t.ReactElement) (useful to replace div with FlexView)
• pass down to component || div any additional prop

components should accept 'id'

EDIT: for now only the components for which we have the source (flex and loadingSpinner)

remove outside libraries from package

I think it's more painful then useful to export external libraries. Right now we're exporting these:

• rc-datepicker
• react-input-link
• react-autosize-textarea
• react-cookie-banner

We should import them in our projects directly from their npm packages so to remove one step of synchronization

( right now I'm having problem with npm shrinkwrap on hailadoc because of a dffference in react-input-link version between global and buildo-react-components ... )

[Modal] use BackgroundDimmer

use new BackgroundDimmer to:

• disable outside scroll
• handle onClickOutside
• show dimmed background

Explicit react in peerDependencies

Add Popover from labonline (semantic free!)

add simple export tests

add shrink to FlexView

@FrancescoCioria

I would need to set all the flex components for a specific view, ex: flex: 1 1 100%;.
Could we add a shrink prop to achieve this?

Come back soon, we miss you!

Add wrap prop to FlexView

Requirements

• FlexView should optionally let content wrap in lines
  • to avoid this
  • and let this happen
    

Specs

• FlexView should have an optional wrap prop

Prop	Type	Required	Default
wrap	bool	no	false

better import of sass-flex-mixins

remove basis=100% default when auto or shrink are set

Currently we force basis=100% when grow is set. This looks not safe as a default, as for instance it will break in basic layout like the following:

<FV row flexBasis={1000} >
  <FV flexBasis={100} />
  <FV grow shrink auto />
</FV>

(second FV will be 1000px wide instead of 900px as it "should" be)

@FrancescoCioria Probably related to #25 . I'm just slightly modifying grow and basis interaction for now (which shouldn't break anything major - briefly verified in LOL), basically just removing the default to 100% for grow when either auto or shrink are set.

[FlexView] add centerHorizontally to FlexView

currently only centerVertically is handled

/cc @francescogior

add FlexView

Shrinkwrap

add link state mixins and utility functions

Test all the things

add LoadingSpinner from LOL

fix confusion between "Dropdown" and "Select"

• rename SelectChildren to Dropdown
• rename SelectMenu to DropdownMenu

[Popover] Improve positioning

• add left and right to position
• anchor/offset more flexible

package import is too verbose

right now this is the standard way to import a package:

import LoadingSpinner from 'buildo-react-components/lib/loading-spinner';

require('buildo-react-component/lib/loading-spinner/style.css');

I think we should:

• export each lib directly from the main index.js so to achieve: import {LoadingSpinner} from 'buildo-react-components';