Les essentiels des livres d’histoires / Blogs / Perficient

Introduction:

Storybook fonctionne parallèlement à votre application, vous offrant une zone distincte pour créer et tester des composants d’interface utilisateur sans être lié au code principal et au contexte de votre application. C’est comme organiser un atelier spécial juste pour créer et essayer différentes parties de votre site Web ou de votre application.

Quoi et pourquoi ?

C’est un endroit où vous pouvez :

• Créez et testez vous-même différentes parties de votre site Web (comme les boutons ou les menus).
• Découvrez à quoi ressemblent et fonctionnent ces pièces sans avoir besoin de l’ensemble du site Web.
• Partagez ces parties avec d’autres pour obtenir des commentaires.

Ce que cela signifie pour vous :

Storybook fonctionne séparément de votre site Web principal. Cela signifie que vous pouvez :

• Concentrez-vous sur la perfection de chaque partie sans vous soucier du reste du site Web.
• Voyez facilement quelles pièces ont déjà été fabriquées.
• Voyez quelles options (appelées accessoires) chaque pièce peut avoir.
• Montrez ces parties à d’autres (comme votre équipe ou vos clients) pour avoir leur avis.
• Vous pouvez également tester des éléments tels que la facilité avec laquelle tout le monde peut utiliser vos pièces.

Comprenons cela avec un exemple :

Imaginez que vous construisez une maison. Storybook est comme un atelier où vous pouvez fabriquer chaque meuble (comme une chaise ou une table) séparément de la maison.

Vous pouvez créer et tester ces éléments (composants d’interface utilisateur) sans vous soucier de leur intégration dans la maison (application React principale). De cette façon, vous pouvez vous concentrer sur la perfection de chaque pièce avant de tout assembler.

Guide de démarrage rapide : configuration de React et Storybook

• Commencez par créer un dossier pour votre projet React à l’aide de la commande : npx create-react-app votre_nom_projet.
• Ensuite, pour installer Storybook, utilisez la commande : npx sb init.
• Démarrez Storybook en exécutant la commande : livre d’histoires d’exécution npm.

Après avoir installé l’application React et configuré Storybook, la structure des répertoires ressemblera à ceci.

Écrire des histoires:

Ici, nous allons créer des histoires pour le composant Button, chacune présentant différentes variantes.

• Pour créer des histoires pour le composant Button, créez d’abord un dossier nommé Button à l’intérieur du src dossier.
• Dans ce dossier Button, créez trois fichiers : un pour JavaScript (pour écrire le code du composant Button, réutilisable pour différentes versions), un pour les histoires (pour définir des variantes) et un pour CSS (pour le style des boutons).

//Path: src/Button/Button.js
import React from 'react';
import './Button.css';

function Button(props) {
  const { variant="Primary", children, ...rest } = props;
  return (
    <button className={`button ${variant}`} {...rest}>
      {children}
    </button>
  );
}

export default Button;

//Path: src/Button/Button.stories.js
import React from 'react';
import Button from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const Primary = () => <Button variant="primary">Primary</Button>;
export const Secondary = () => <Button variant="secondary">Secondary</Button>;
export const Success = () => <Button variant="success">Success</Button>;
export const Danger = () => <Button variant="danger">Danger</Button>;

//Path: src/Button/Button.css
button{
    display: inline-block;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
}
.primary{
    background-color: #008CBA;
}
.secondary{
    background-color: #8d8787d3;
}
.success{
    background-color: #4CAF50;
}
.danger{
    background-color: #f44336;
}

Sortir:

­

Ce code crée un composant Button réutilisable dans React.

Dans ‘Bouton.js’:

• Il importe React et un fichier CSS pour le style.
• Définit un composant fonctionnel nommé Button qui prend en charge les accessoires.
• Déstructure les accessoires pour obtenir la variante (la valeur par défaut est « Primaire ») et les enfants (contenu à l’intérieur du bouton).
• Rend un élément bouton avec une classe dynamique basée sur la variante prop.
• Exporte le composant Button.

Dans `Bouton.stories.js` :

• Il importe React et le composant Button.
• Exporte un objet par défaut qui configure les paramètres du livre d’histoires pour le composant Button.
• Définit plusieurs histoires (variantes) pour le composant Button, chacune avec une variante différente (Primaire, Secondaire, Succès, Danger).

Ces histoires aident les développeurs à tester visuellement le composant Button dans différents scénarios.

Conclusion:

Storybook permet aux développeurs de créer et de tester les composants du site Web séparément, améliorant ainsi la concentration et la collaboration. C’est comme un atelier où les pièces sont perfectionnées avant l’assemblage, ce qui rend le développement plus efficace. Le guide et l’exemple de Button montrent ses avantages pratiques pour créer de meilleurs sites Web.