React-

react-storybook

A Development and Testing environment that displays your components

Installation (React.js)

npm i -g @storybook/cli
cd my-react-app
getstorybook

Installation (React.js)

• Add @storybook dependency to your package.json
• Create .storybook with config files (~4 lines)
• Create a stories folder with index.js (the entry point) and an example story.

This will:

Installation (React Native)

npm i -g @storybook/cli
cd my-react-native-app
getstorybook

Installation (React Native)

• Add @storybook  dependency to your package.json
• Create storybook with config files (~4 lines)
• Create storybook/stories folder with index.js (the entry point) and an example story.

This will:

Write stories

import React from 'react';
import { storiesOf } from '@storybook/react';

storiesOf('SearchBar', module)
  .add('default', () => (
    <SearchBar 
      value="Blabla" 
      hint="Enter your search keyword"
    />
  ));

storiesOf('SearchBar', module)
  .add('default', () => ...)
  .add('display an error', () => (
    <SearchBar error="No internet connection"/>
  ));

Log actions

//...
import { action } from '@storybook/addon-actions';

storiesOf('SearchBar', module)
  .add('default', () => (
    <SearchBar 
      value="Blabla" 
      onSearch={action('search launched')}
    />
  ));

Decorators

// Decorator to allow material-ui components
// to read the app theme
const muiDecorator = (story) => (
  <MuiThemeProvider muiTheme={defaultTheme}>
    {story()}
  </MuiThemeProvider>
)

// Add you decorator to any story using material-ui
storiesOf('AboutDialog', module)
  .addDecorator(muiDecorator)
  .add('default', () => <AboutDialog open />);

Or just components

// You can create a helper component and reuse it:
const Serializer = props => (
  <div>{props.children} {JSON.stringify(props.object)}</div>
);

storiesOf('ProfilePage', module).add('default', () => (
  <Serializer object={profile}>
    <ProfilePage profile={profile} />
  </Serializer>
));

storiesOf('CartItemsList', module).add('default', () => (
  <Serializer object={items}>
    <CartItemsList items={items} />
  </Serializer>
));

Fixtures/mocking data

// Create fixtures, or better, share them with your unit tests :)
import complexFakeData from './fixtures/my-complex-data.json';

storiesOf('Dashboard', module)
  .add('default', () => <Dashboard data={complexFakeData} />);

When

to use it?

Advantages over a home-made solution

• 10min installation from zero to a component exposed
• Ecosystem of addons

time

DEMO

Shortcomings?