📖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)

Minimal setup

If you use Storybook as an internal devloppement tool only. You don't need to customize much.

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

Install Storybook • Storybook docsstorybookjs

Here are the edit you need to apply to the default setup:

package.json

{
    // ...
    "scripts": {
        // ...
        "storybook": "storybook dev -p 6006",
        "build-storybook": "storybook build",
        "prestorybook": "react-dsfr update-icons",
        "prebuild-storybook": "react-dsfr update-icons"
    }
}

.storybook/preview.tsx

import type { Preview } from "@storybook/react";
import "@codegouvfr/react-dsfr/main.css";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";

startReactDsfr({
    "defaultColorScheme": "system",
    "useLang": () => "fr",
});


const preview: Preview = {
    parameters: {
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i
            }
        }
    }
};

export default preview;

Bells and whistles

If you wish to publish your storybook as component library showecase you might want to go the extra miles and customize the Manager to add top level darkMode switch, load the Marianne font, provide a language switch ect.

If you want a fully DSFRised Storybook setup you can use this setup as reference:

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

You can see it live here: https://inseefr.github.io/Lunatic-DSFR/storybook/

Don't forget to add this extra dependency:

npm

npm install --save-dev storybook-dark-mode

yarn

yarn add --dev storybook-dark-mode

pnpm

pnpm add -D storybook-dark-mode

bun

bun add --dev storybook-dark-mode

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.