# Storybook

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](https://components.react-dsfr.codegouv.studio/?path=/story/%F0%9F%87%AB%F0%9F%87%B7-introduction--page) is powered by Storybook.  \
\
Let's see how to setup Storybook 8 in your project.  

<figure><picture><source srcset="/files/FrnStKS2WJUYGvtriDXr" media="(prefers-color-scheme: dark)"><img src="/files/swElErQVUKUdhe9YzRpR" alt=""></picture><figcaption><p>The storybook of Lunatic-DSFR (INSEE, <a href="https://github.com/InseeFr/Lunatic-DSFR">https://github.com/InseeFr/Lunatic-DSFR</a>)</p></figcaption></figure>

## Minimal setup

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

First follow the official instruction to setup Storybook in your meta framework of choice: &#x20;

{% embed url="<https://storybook.js.org/docs/get-started/install>" %}

Here are the edit you need to apply to the default setup:  &#x20;

<pre class="language-json" data-title="package.json"><code class="lang-json">{
    // ...
    "scripts": {
        // ...
        "storybook": "storybook dev -p 6006",
        "build-storybook": "storybook build",
<strong>        "prestorybook": "react-dsfr update-icons",
</strong><strong>        "prebuild-storybook": "react-dsfr update-icons"
</strong>    }
}
</code></pre>

<pre class="language-tsx" data-title=".storybook/preview.tsx"><code class="lang-tsx">import type { Preview } from "@storybook/react";
<strong>import "@codegouvfr/react-dsfr/main.css";
</strong><strong>import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
</strong>
<strong>startReactDsfr({
</strong><strong>    "defaultColorScheme": "system",
</strong><strong>    "useLang": () => "fr",
</strong><strong>});
</strong>

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

export default preview;
</code></pre>

## 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. &#x20;

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

{% embed url="<https://github.com/InseeFr/Lunatic-DSFR/tree/main/.storybook>" %}
You can see it live here: <https://inseefr.github.io/Lunatic-DSFR/storybook/>
{% endembed %}

Don't forget to add this extra dependency: &#x20;

{% tabs %}
{% tab title="npm" %}

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

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add --dev storybook-dark-mode
```

{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm add -D storybook-dark-mode
```

{% endtab %}

{% tab title="bun" %}

```bash
bun add --dev storybook-dark-mode
```

{% endtab %}
{% endtabs %}

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. &#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://react-dsfr.codegouv.studio/storybook.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.