Adding storybook to react project

Storybook is this incredible tool that provides a playroom for creating react components, it facilitates the tests and interactions between design and development and is highly recommended to design systems.

How to setup storybook in a React project

1. Add the library

yarn add @storybook/react --save-dev

2. The NPM script

{
  "scripts": {
    "storybook": "start-storybook"
  }
}

3. Storybook main file

The library requires an entry point like this .storybook/main.js, then configure the module to export the stories

module.exports = {
  stories: ["../src/**/*.stories.[tj]s"],
}

4. Organizing stories

I highly recommend to keep all the files related to the component inside the folder, that way is easier to delete or change the component, making more modular

Button.js
  ├── Form.js
  └── Form.test.js
  └── Form.stories.js

6. Creating story

Is important to create notes on the components, as they are use by developers and designers just code comments are not the default for both parts

import React from "react"
import Form from "./Form"

export default {
  component: Form,
  title: "Form",
  parameters: { notes: "Contact form design 1.0" },
}

export const form = () => <Form />

5. Run

yarn run storybook