Storybook permet de créer des composants d'interface utilisateur indépendamment de la logique métier, des données et du contexte d'une application.
Je l'utilise pour isoler chacun de mes composants et les visualiser indépendamment des autres.
Ça m'incite à développer et debugger chaque composant une seule fois plutôt que de devoir le refaire plusieurs fois à 10 endroits différents.
Installation
Exécutez la commande suivante depuis un projet existant :
npx sb init
Utilisation
npm run storybook
Rendez-vous sur http://localhost:6006
Exemple de storybook
// components/header.stories.jsximport Header from './header';export default {title: 'Components/Header',component: Header,};const Template = (args) => <Header {...args} />;export const Default = Template.bind({});
Installer le plugin storybook-tailwind-dark-mode
yarn add -D storybook-tailwind-dark-mode
N'oubliez pas d'activer le darkMode en attribuant la valeur class
au fichier tailwind.config.js
, cela permettra de prendre en compte les classes html dark:
:
// tailwind.config.jsmodule.exports = {darkMode: 'class',};
Ajouter le support des CSS modules
Pour ajouter le support des CSS Modules, ajouter les lignes suivantes :
module.exports = {stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],addons: ['storybook-tailwind-dark-mode','@storybook/addon-links','@storybook/addon-essentials',{name: '@storybook/addon-postcss',options: {postcssLoaderOptions: {implementation: require('postcss'),},+ cssLoaderOptions: {+ modules: {+ auto: true,+ },+ },},},],framework: '@storybook/react',};
Ajouter le support des images sur Next.js
Pour ajouter le support des images sur Next.js, ajoutez les lignes suivantes :
import '../styles/globals.css';+ import * as nextImage from 'next/image';+ Object.defineProperty(nextImage, 'default', {+ configurable: true,+ value: (props) => <img {...props} />,+ });export const parameters = {actions: { argTypesRegex: '^on[A-Z].*' },controls: {matchers: {color: /(background|color)$/i,date: /Date$/,},},};
Ajouter des décorateurs
Pour toutes le stories d'un composant :
export default {title: 'Components/Layout',component: Layout,decorators: [(Story) => <div id="storybook">{Story()}</div>],};
Pour chaque stories d'un composant :
export const Default = Template.bind({});Default.args = {...Layout.defaultProps,children: <section className="pt-20 px-4 container mx-auto lg:max-w-screen-lg">Hello world</section>,};Default.decorators = [(Story) => <div id="storybook">{Story()}</div>];
Références :