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

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:

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:

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

Don't forget to add this extra dependency:

npm install --save-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.

Last updated

Logo

2022-2023 Pôle logiciel libre d'Etalab - MIT license