📖Storybook

Setting up Storybook in your react-dsfr project.

Storybook is an open-source tool for developing and testing UI components in isolation, allowing you to create and refine components independently from the app's business logic.

For example the components website of react-dsfr is powered by Storybook. Let's see how to setup Storybook 8 in your project.

The storybook of Lunatic-DSFR (INSEE, https://github.com/InseeFr/Lunatic-DSFR)

First follow the official instruction to setup Storybook in your meta framework of choice:

Install Storybook • Storybook docsstorybookjs

Then you want to add a couple of scripts that should be run before starting of building Storybook:

package.json

{
    // ...
    "scripts": {
        // ...
        "storybook": "storybook dev",
        "build-storybook": "storybook build",
        "prestorybook": "copy-dsfr-to-public --publicDir .storybook/static && only-include-used-icons --publicDir .storybook/static",
        "prebuild-storybook": "yarn prestorybook"
    }
}

Next update your .gitignore:

.gitignore

/storybook-static
/.storybook/static/dsfr

Next add storybook-dark-mode to your dev dependencies:

yarn add --dev storybook-dark-mode # Or the equivalent with pnpm, npm or bun ...

Lastly apply the following reference .storybook directory in your setup. Be sure to carefully merge the .storybook/main.ts so you don't overwrite specific configuration required by your meta framework.

https://github.com/InseeFr/Lunatic-DSFR/tree/main/.storybook