Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. React
  3. Introduction à Storybook
Extrait - React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition)
Extraits du livre
React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition) Revenir à la page d'achat du livre

Introduction à Storybook

Découverte et installation

Très souvent utilisé dans les entreprises qui disposent d’un design system, Storybook est un outil qui a connu une forte croissance ces dernières années. Nous n’allons pas développer un design system en entier car ce serait un long processus. En revanche, nous allons voir comment initier un projet avec Storybook et créer un premier composant. Il faudrait idéalement ensuite étoffer le nombre de composants, fixer des règles d’utilisation, et travailler plusieurs autres aspects.

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 

 Indiquez un nom de projet, choisissez React puis JavaScript aux questions suivantes.

Ces instructions ont été testées pour la version 4.4.9 de Vite.js.

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

Création d’un composant

Dans cette section, nous allons voir comment créer un composant dans Storybook. 

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; 

 Dans le même dossier, créez un fichier pour les stories de votre composant (par exemple, Title.stories.js).

 Implémentez une ou plusieurs stories pour votre composant dans le fichier des stories.

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

Utiliser des stories

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

Utiliser des add-ons

Les add-ons sont des modules complémentaires qui ajoutent des fonctionnalités à Storybook. Ils vous permettent d’enrichir votre expérience de développement d’interface utilisateur avec des outils, des fonctionnalités et des intégrations.

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.

 Ouvrez le terminal et accédez au répertoire de votre projet. Utilisez la commande suivante pour installer un addon spécifique.

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

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

 Une fois l’addon installé, ajoutez-le à la configuration de Storybook dans le fichier .storybook/main.js :

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

Conclusion

Bien que ne faisant pas partie de React, Storybook aide de nombreuses entreprises à élaborer et maintenir un design system. Il était donc important de mentionner cet outil.

Voici quelques points importants à retenir et à approfondir si vous souhaitez aller plus loin. La documentation et la communauté autour de Storybook vous aideront.

Storybook est souvent présenté comme une plateforme efficace pour la conception, la visualisation, les tests et la documentation des éléments d’interface utilisateur.

Les stories illustrent différentes variations et états d’un composant, facilitant ainsi les tests visuels et la documentation.

Enfin, les add-ons complètent l’expérience de développement, introduisant des fonctionnalités supplémentaires, y compris la documentation enrichie, les tests d’accessibilité et bien plus. Les add-ons les plus importants et qui couvrent la majorité des besoins sont préinstallés.