Why?

How?

now with styling

styled-components​

𝙛 := make blue

Keep components dumb and separated

How much separated?

How much separated?

Separate repository

Downsides

• Updating subprojects
• Breaking changes in new versions
• Version tracking

How to manage this?

CI with reverse testing

Shared Components

Project A

Project B

Project C

Style guides

Motivations behind style guides

Solutions

Solutions

• electrode-explorer
• atellier
• react-storybook
• react-styleguidist

Solutions

• electrode-explorer
• atellier
• react-storybook
• react-styleguidist

react-storybook in action

How does it work

• Separate webpack dev server
• User defined "stories"
• Stories represent component 
  • Keep all passed props
  • Keep notes

But why not to autoimport?

Knobs

Knobs and props

stories.add('with a button', () => (
  <button disabled={boolean('Disabled', false)} >
    {text('Label', 'Hello Button')}
  </button>
))

const propTypes = {
  active: PropTypes.bool,
  disabled: PropTypes.bool,
  block: PropTypes.bool,
  onClick: PropTypes.func,
  componentClass: elementType,
  href: PropTypes.string,
  /**
   * Defines HTML button type attribute
   * @defaultValue 'button'
   */
  type: PropTypes.oneOf(['button', 'reset', 'submit']),
};

react-storybook-importer

https://asciinema.org/a/RsT6b8aa9NgseouHyrvxcDLax

Styleguides advises

Let user change props

Show all possible states

Add executable to run style guide from common components

TLDR;

• Make sure all project use the same version of components

• Host/export style guides

• Don't create different versions of one component

  • wrap them

• Create repository/directory with shared components