Construire un système de conception avec livre de contes et réagir

Tout d'abord, utilisez NPX HistBook init pour installer et configurer le livre de contes dans React Project, exécuter NPM Run Storybook pour démarrer le serveur de développement local; 2. Organisez la structure des fichiers de composants par fonction ou type, et créez des fichiers .stories.js correspondants pour définir différents états dans chaque répertoire de composants; 3. Utilisez les systèmes Args and Controls de Storybook pour réaliser des ajustements d'attribut dynamiques pour faciliter les tests de divers états interactifs; 4. Utilisez des fichiers MDX pour écrire des documents texte riches contenant des spécifications de conception, des instructions d'accessibilité, etc., et prendre en charge le chargement MDX via la configuration; 5. Définissez les jetons de conception à travers des thèmes et utilisez TheProvider pour injecter globalement les styles de thème dans Aperçu.js; 6. Intégrer la bibliothèque de tests de plaisanterie et de réaction effectue des tests unitaires, des tests de régression visuelle avec chromatique et vérifie les problèmes d'accessibilité via @ srononage / addon-a11y. Enfin, un système de conception évolutif qui prend en charge le développement indépendant, les documents visuels, les tests automatisés et favorise la collaboration de conception et de développement. Ce système peut obtenir une réutilisation efficace entre les équipes en itérant progressivement les composants, devenant un outil nécessaire pour améliorer la cohérence de l'interface utilisateur et l'efficacité de développement.

La construction d'un système de conception avec StoryBook et React est un moyen puissant de créer des composants d'interface utilisateur cohérents et réutilisables qui évoluent entre les équipes et les produits. Le livre de contes fournit un environnement de développement isolé pour les composants de l'interface utilisateur, ce qui facilite la création, les tester et les documenter de manière isolée, sans s'appuyer sur l'application complète. Lorsqu'il est associé à React, ce combo devient une configuration incontournable pour les systèmes de conception modernes.

Voici comment l'aborder efficacement.

1. Configurez le livre de contes avec réact

Commencez par ajouter un livre de contes à votre projet React. Si vous utilisez une application Create React ou une configuration React standard, la manière la plus simple consiste à utiliser la CLI automatisée:

 NPX Historbook init

Cette commande installe StoryBook, ajoute les fichiers de configuration nécessaires et configure des exemples d'histoires. Une fois terminé, courez:

 NPM Run Storybook

Cela démarre le serveur de développement de Storybook, généralement sur http://localhost:6006 , où vous pouvez voir vos composants en temps réel.

Conseil: la commande init fonctionne bien avec la plupart des paramètres de réact, y compris Vite et Next.js. Si vous utilisez une configuration WebPack personnalisée, vous devrez peut-être ajuster .storybook/main.js en conséquence.

2. Structurez vos composants et vos histoires

Une structure de fichiers bien organisée est la clé de la maintenabilité. Composants de groupe logiquement - typiquement par caractéristique ou type (par exemple, atoms , molecules , organisms ) ou par le Button , la forme, Form , Navigation .

Exemple de structure:

 src /
├til composants /
│ ├fiquement / bouton /
│ │ ├ ├fique
│ │ ├ --met Button.stories.js
│ └── Button.module.css
│ ├fique
│ │ ├fique
│ └fiques
├tilil / styles /
│ └── thème.js

Dans chaque fichier .stories.js , définissez comment le composant doit être rendu dans différents états:

 // Button.stories.js
import {Button} de './button';

Exporter par défaut {
  Titre: «Composants / Button»,
  Composant: bouton,
  Argtypes: {
    variante: {contrôle: 'select', options: ['primaire', 'secondaire']},
  },
};

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

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

Cela crée des commandes interactives (comme les caisses pour les accessoires) et permet aux concepteurs et aux développeurs d'explorer visuellement les variations.

3. Utilisez des args et des contrôles pour des tests dynamiques

Le système Args de StoryBook vous permet de modifier les entrées des composants à la volée. Combinés avec des contrôles , les utilisateurs peuvent modifier les accessoires directement dans l'interface utilisateur, pour tester les cas de bord et présenter la flexibilité.

Exemple:

 Argtypes: {
  Taille: {Control: 'Radio', Options: ['Small', 'Medium', 'Large']},
  onClick: {Action: 'cliquer'}, // Logs clique
}

Cela signifie que l'AQ, les PM ou les concepteurs peuvent interagir avec le bouton et voir comment il se comporte lorsqu'il est cliqué ou redimensionné, sans toucher le code.

Conseil de pro: utilisez controls: { exclude: ['id', 'className'] } pour masquer les accessoires internes ou non visuels du panneau de contrôle.

4. Document avec MDX et ajoutez des directives de conception

Aller au-delà des exemples de code. Utilisez MDX (Markdown JSX) pour rédiger une documentation riche qui comprend des jetons de conception, des directives d'utilisation, des notes d'accessibilité et même des liens FIGMA.

Créer un fichier Button.stories.mdx :

 Importer {Meta, Story, Canvas} de '@ Storybook / Blocks';
Importer * comme boutonstories de './button.stories.js';

<Meta Title = "Components / Button" Component = {Button} />

# Bouton

Utilisez des boutons pour déclencher des actions. Préférez les boutons principaux pour les actions principales, secondaire pour les alternatives.

<lebvas>
  <Story of = {Buttonstories.primary} />
</ Canvas>

## Accessibilité

Incluez toujours les étiquettes descriptives. Évitez les boutons d&#39;icônes uniquement à moins que cela ne soit correctement étiqueté avec «Aria-Label».

Configurez ensuite le livre de contes pour charger les fichiers MDX en mettant à jour .storybook/main.js :

 module.exports = {
  Histoires: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  // ...
};

Maintenant, votre système de conception devient un guide de style vivant.

5. Intégrer les jetons de conception et le thème

Partagez des styles visuels (couleurs, typographie, espacement) via un objet thème, à l'aide styled-components , emotion ou de CSS-in-JS.

Exemple de thème:

 // thème.js
Exportation const thème = {
  Couleurs: {
    Primaire: '# 007BFF',
    secondaire: '# 6C757D',
  },
  Espacement: (facteur) => `$ {0,5 * facteur} rem`,
  Typographie: {
    En-tête: «Bold 1.5rem System-UI»,
  },
};

Enveloppez vos histoires avec un décorateur pour appliquer le thème à l'échelle mondiale dans .storybook/preview.js :

 import {themeprovider} à partir de «components stylisés»;
import {thème} de '../src/styles/theme';

Exporter des décorateurs de const = [
  (Histoire) => (
    <ThemeProvider Theme = {thème}>
      <Story />
    </methEprovider>
  ),
]]

Maintenant, tous les composants rendent avec un style cohérent.

6. Ajouter les tests et l'automatisation

Un système de conception robuste a besoin de tests. Combiner:

• Jest React Bibliothèque de tests pour les tests d'unité et de comportement.
• Chromatique (un module complémentaire de livre de contes) pour les tests de régression visuelle.

Installer chromatique:

 npx chromatique --project-token = <Your-Token>

Il fonctionne dans CI et compare chaque histoire aux versions précédentes, en attrapant des changements visuels involontaires.

Envisagez également d'ajouter un addon A11y pour assister à des problèmes d'accessibilité:

 NPM Install @ Storybook / Addon-A11y

Puis activez-le dans .storybook/main.js :

 Addons: ['@ Storybook / Addon-A11y'];

Vous verrez maintenant un onglet d'accessibilité dans l'interface utilisateur avec des vérifications automatisées.

Réflexions finales

La construction d'un système de conception avec StoryBook et React ne concerne pas seulement les composants - il s'agit de créer un langage partagé entre la conception et le développement. Avec la bonne configuration, vous obtenez:

• Développement de composants isolés
• Documentation interactive
• Tests visuels et cohérence
• Interfaces conviviales de collaboration

Démarrez petit (boutons, entrées), appliquez la cohérence tôt et se développez de manière itérative. Au fil du temps, votre système de conception devient un multiple de force pour les équipes de produits.

Fondamentalement, si vous utilisez React et que vous vous souciez de la qualité de l'interface utilisateur, le livre de contes n'est pas facultatif - c'est essentiel.

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!