Introduction à Storybook

1. Qu’est-ce que Storybook ?

Storybook est une plateforme de développement qui permet de créer, visualiser, documenter et tester des composants d’interface utilisateur de manière indépendante. Il crée un environnement isolé pour chaque composant, ce qui donne la possibilité de les développer et de les tester un à un de manière interactive et visuelle.

2. Installation de Storybook

Pour installer Storybook, nous devons d’abord créer un projet. Le plus simple est d’utiliser Vite et donc de taper la commande suivante dans un terminal :

npm create vite@latest 

Vous pouvez désormais entrer dans le répertoire...

1. Création d’un composant

Pour créer un composant dans Storybook, créez un dossier pour vos composants (par exemple, src/components). À l’intérieur du dossier des composants, créez un nouveau fichier pour votre composant (par exemple, Title.js). Enfin, implémentez votre composant dans le fichier.

Voici un exemple de composant :

// src/components/Title.js 
import React from 'react'; 
 
const Title = ({ children, variant }) => { 
  const classNames = `title ${variant}`; 
 
  return ( 
    <h1 className={classNames}> 
      {children} 
    </h1> 
  ); 
}; 
 
export default Title; 

Le composant title pourrait éventuellement avoir un style primary et un style secondary qui l’afficherait d’une manière ou d’une autre. En passant l’une ou l’autre de ces valeurs en tant que prop du composant...

1. Visualisation et test de la story

Une fois que vous avez créé une ou plusieurs stories pour votre composant, vous pouvez les visualiser dans l’interface Storybook en exécutant la commande suivante dans le terminal :

npm run storybook 

Cela lancera l’interface Storybook dans votre navigateur, où vous pourrez voir et interagir avec les différents états et variantes de votre composant, ainsi que consulter la documentation générée automatiquement.

2. Avantages de la création de stories

Dans un contexte de développement agile, Storybook s’avère être un atout précieux pour la création de composants React.

C’est un outil qui favorise une approche modulaire, permettant d’examiner et d’affiner chaque composant séparément afin de faciliter le débogage et la conception.

Il sert également de plate-forme de documentation interactive, simplifiant considérablement le partage d’informations entre les développeurs et accélérant ainsi le processus collaboratif.

Enfin, Storybook offre des possibilités robustes pour les tests visuels, aidant à identifier rapidement les problèmes d’interface utilisateur avant qu’ils ne deviennent des obstacles majeurs.

En intégrant Storybook dans votre processus de développement, vous facilitez...

1. Installation d’add-ons

Pour utiliser des add-ons dans Storybook, vous devez les installer et les configurer dans votre projet. Certains sont déjà préinstallés avec Storybook, souvent les plus populaires.

Par exemple, pour installer l’addon pour afficher les notes de documentation, vous pouvez exécuter :

npm install @storybook/addon-notes --save-dev 

module.exports = { 
  addons: [ 
    '@storybook/addon-notes/register', // Ajoutez le nom 
de l'add-on ici 
    // Autres add-ons 
  ], 
}; 

Le fichier main.js est en quelque sorte le chef d’orchestre de votre projet Storybook. Situé dans le dossier .storybook à la racine de votre projet, il vous permet de contrôler divers aspects de votre environnement....