React-

It's long to navigate to the location of my component in my app after making a change

What if my visual change break other components?

I wasn't aware that this component was even existing

How can I enable people to quickly contribute to my component?

I'd like to have a visual documentation of my component

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:

I got warnings and had to manually add react-dom to package.json

ūü§Ē

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?

Visual test cases

Living styleguide to improve consistency

Allow your product owner to validate design

Advantages over a home-made solution

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

knob

Edit props dynamically

storyshots

Snapshot testing of your stories for free

time

DEMO

Shortcomings?

Introduction to react-storybook

By Florian Rival

Introduction to react-storybook

Internal training at BAM and Renault Digital about react-storybook. Based on examples like https://github.com/4ian/GD

  • 537
Loading comments...

More from Florian Rival