📖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:
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:
Don't forget to add this extra dependency:
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