Storybook

During the creation of a new component, you'll want to test it on browser. Usually, you'll render it in a top level component with every possible state so you can check if it's working properly:

const HomePage = () => (
  <PageTemplate>
    ...
    <MyNewAwesomeComponent />
    <MyNewAwesomeComponent brilliant />
    <MyNewAwesomeComponent sexy />
    <MyNewAwesomeComponent brilliant sexy />
    ...
  </PageTemplate>
)

Once you've finished the work, you need to remove that component from HomePage. But, as we all know, 2 weeks later you'll come back to change something, add a new state, fix some bugs etc. And, when that happens, you'll need to repeat that task, rendering every state of that component, to make sure the new and the old states are working.

Fortunately, storybook solves this problem by letting you to write every state of your component on a file and keep it there so you can always use it.

storiesOf('MyNewAwesomeComponent', module)
  .add('default', () => (
    <MyNewAwesomeComponent />
  ))
  .add('brilliant', () => (
    <MyNewAwesomeComponent brilliant />
  ))
  .add('sexy', () => (
    <MyNewAwesomeComponent sexy />
  ))
  .add('brilliant and sexy', () => (
    <MyNewAwesomeComponent brilliant sexy />
  ))

Then, just use npm run storybook.

Removing storybook

If you don't want that, just run:

rm -rf .storybook # remove .storybook folder
npm un -D @storybook/react # remove storybook dependency