Construire une bibliothèque de composants avec livre de contes

Commencez par installer Storybook à l'aide de NPX Storybook @ Derniter init pour configurer des dépendances, des configurations et des exemples d'histoires. 2. Organisez des composants dans des dossiers isolés avec des histoires, des tests et des fichiers d'index colocalisés pour l'évolutivité. 3. Écrivez des histoires complètes couvrant divers états (chargement, handicapés, etc.), en utilisant des args et des contrôles pour la manipulation interactive des accessoires. 4. Activer les essentiels addon pour générer des onglets de documents, des contrôles visuels, des actions et des bascules de la fenêtre pour un guide de style de vie. 5. Suivez les meilleures pratiques: utilisez une dénomination cohérente (par exemple, composants / bouton), gardez les histoires à jour, adoptez proprement les composants et exportations. 6. Améliorer avec les tests A11Y, chromatique pour la régression visuelle et publier en ligne pour l'accès à l'équipe. 7. Traitez la bibliothèque comme un système en évolution - commencez petit avec des composants de base et ajoutez de manière itérative des documents, des tests et des jetons de conception pour construire un langage d'interface utilisateur partagé et durable entre les équipes.

Vous songez donc à construire une bibliothèque de composants - un excellent mouvement. Si vous travaillez dans une équipe ou sur plusieurs projets, une bibliothèque de composants solides maintient votre interface utilisateur cohérente, accélère le développement et facilite les tests. L'un des meilleurs outils pour vous aider à créer et à présenter cette bibliothèque? Livre de contes.

Voici comment commencer et ce qui compte réellement lors de la configuration.

Pourquoi utiliser le livre de contes pour une bibliothèque de composants?

Le livre de contes vous donne un bac à sable pour développer des composants d'interface utilisateur isolément. Cela signifie pas besoin de tourner votre application complète juste pour modifier un bouton. Vous écrivez des histoires pour chaque composant, qui sont essentiellement des états ou des cas d'utilisation différents (comme un bouton de chargement, un bouton désactivé, etc.).

Ce n'est pas seulement pour les développeurs - des concepteurs, QA et les produits peuvent l'utiliser pour voir ce qui est disponible et comment les choses se comportent. De plus, il s'intègre aux outils de test, aux documents et aux systèmes de conception.

Configuration du livre de contes

Si vous démarrez frais (ou ajoutez à un projet React, Vue ou Frontend existant), la manière la plus simple consiste à utiliser la CLI automatisée:

 NPX Storybook @ Derniter init

Ce sera:

• Installez les dépendances du livre de contes
• Configurer les paramètres de base ( main.js , preview.js )
• Ajouter des exemples d'histoires
• Configurez les scripts pour l'exécuter localement

Après la configuration, exécutez:

 NPM Run Storybook

Et vous verrez l'interface utilisateur par défaut avec des exemples de composants.

Organisation de votre bibliothèque de composants

La structure est importante. Une configuration de dossier propre rend votre bibliothèque évolutive.

Voici un modèle pratique:

 src /
├til composants /
│ ├fiquement / bouton /
│ │ ├ ├fique
│ │ ├ --met Button.stories.js
│ │ ├ ├fique
│ │ └fique
│ ├fique
│ │ ├fique
│ │ ├── modal.stories.js
│ │ └fique
│ └fique

Chaque composant a son propre dossier, avec son fichier d'histoire juste à côté. Cette co-localisation facilite la recherche et la mise à jour des histoires à mesure que le composant évolue.

Dans votre fichier .stories.js :

 // Button.stories.js
Exporter par défaut {
  Titre: «Composants / Button»,
  Composant: bouton,
};

exportation const primaire = {
  args: {
    Étiquette: «cliquez sur moi»,
    Primaire: vrai,
  },
};

Export const Disabled = {
  args: {
    Étiquette: «handicapé»,
    Désactivé: vrai,
  },
};

Maintenant, vous verrez «Button» sous «Composants» dans la barre latérale du livre de contes, avec deux états.

Écrire des histoires utiles

Ne montrez pas simplement le chemin heureux. Penser à:

• Différents accessoires
• States de chargement
• Conditions d'erreur
• Comportement réactif (le cas échéant)

Utilisez des args et des contrôles afin que les non-DEVS puissent modifier les accessoires dans l'interface utilisateur:

 Exporter par défaut {
  Titre: «Composants / entrée»,
  Composant: entrée,
  Argtypes: {
    variante: {
      Contrôle: «Sélectionner»,
      OPTIONS: [«Couchée», «REMPL», «Standard»],
    },
  },
};

Exporter const default = {
  args: {
    étiquette: «nom»,
    Placeholder: «Entrez votre nom»,
  },
};

Maintenant, vous obtenez une liste déroulante dans le panneau de commandes du livre de contes pour changer de variantes en direct.

Ajout de documents et de contrôles

Le livre de contes génère automatiquement un onglet «Docs» pour chaque composant à l'aide de MDX ou de génération de DOC intégrée.

Activez-le dans main.js :

 // .storybook / main.js
module.exports = {
  Histoires: ['../src/components/**/*.stories.@(js|jsx|ts|tsx)'],
  Addons: [
    '@ Storybook / Addon-Essentials', // Comprend des contrôles, des documents, des actions, etc.
  ],
};

Avec @storybook/addon-essentials , vous obtenez:

• Contrôles visuels des accessoires
• Docs générés automatiquement
• Panneau d'actions pour voir les événements
• Commutation de la fenêtre (mobile / bureau)
• Antécédents

Cela transforme votre livre de contes en guide de style vivant.

Meilleures pratiques pour le maintenir maintenable

• Noms Stories cohérente - Utilisez une hiérarchie claire comme Components/Button ou Forms/Input
• Utilisez des noms d'histoire descriptifs - «avec icône» est meilleur que «Exemple 2»
• Gardez les histoires synchronisées avec le code - des histoires obsolètes induites en erreur les utilisateurs
• Utiliser TypeScript - Améliore la saisie semi-automatique et réduit les erreurs dans les histoires
• Composants d'exportation proprement - facilitez l'importation de votre bibliothèque ailleurs

Considérez également:

• Ajout de tests d'accessibilité avec @storybook/addon-a11y
• Intégrer à chromatique pour les tests de régression visuelle
• Publier votre livre de contes en ligne (pages GitHub, Vercel, etc.) pour l'accès à l'équipe

Réflexions finales

Construire une bibliothèque de composants avec un livre de contes ne concerne pas simplement l'affichage des boutons. Il s'agit de créer une langue partagée pour votre équipe. Lorsque tout le monde peut voir ce qui est disponible et comment cela fonctionne, vous réduisez la duplication et améliorez la qualité.

Commencez petit - quelques composants de base avec de bonnes histoires. Répéter. Ajoutez des documents, des tests et des jetons de conception au fil du temps.

Et rappelez-vous: une bibliothèque de composants n'est jamais «terminée». Mais avec Storybook, vous avez le bon outil pour le développer de manière durable.

Fondamentalement, commencez simplement à construire - le reste suit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!