Développement de composants d'interface utilisateur avec Storybook et KendoReact

Storybook fournit un excellent environnement pour expérimenter des composants d'interface utilisateur de manière isolée et dans différentes configurations. Dans cet article, je vais vous montrer comment démarrer avec Storybook, mettre en évidence quelques add-ons et présenter un Storybook construit pour KendoReact.

Je travaille avec Storybook depuis quelques mois. Je trouve que c'est un excellent environnement pour tester les composants de l'interface utilisateur de manière isolée. Mais qu'est-ce que Storybook? De Learn Storybook :

Storybook est un environnement de développement d'interface utilisateur et un terrain de jeu pour les composants de l'interface utilisateur. Cet outil permet aux développeurs de créer des composants de manière indépendante et de les présenter de manière interactive dans un environnement de développement isolé.

Il est compréhensible que vous choisissiez un outil tel que Storybook lorsque vous travaillez avec des composants, en particulier si vous les créez vous-même. Supposons une application Web typique construite avec un certain nombre de composants:

Dans une application comme celle-ci, de nombreux composants fonctionnent ensemble. Dans certains cas, certaines données sous-jacentes sont partagées par ces composants. Dans d'autres cas, des messages sont échangés entre eux. L'application représente une symphonie de concert avec des composants jouant différents rôles.

Dans un scénario où vous construisez une application telle que celle-ci, il peut être difficile de travailler avec des composants de manière isolée. Peut-être souhaitez-vous voir comment un composant peut fonctionner avec des données non valides? Vous souhaitez également voir comment les composants fonctionnent avec des cultures difficiles? Il est souvent difficile d'extraire ces composants après coup. Supposons que vous souhaitiez examiner un composant de calendrier que vous avez intégré à votre application:

Comment procéderiez-vous? Encore plus, existe-t-il un environnement qui vous permet d’explorer ces domaines et d’autres domaines d’intérêt pouvant découler de votre examen? Il se trouve que la réponse est oui. C'est ici qu'intervient Storybook.

Explorons le fonctionnement de Storybook. Pour commencer, nous allons construire un livre de contes pour le composant Button de KendoReact . Le composant Button est facile à comprendre et vous permet de montrer comment formuler des histoires dans Storybook.

Prise en main de Storybook

Dans un premier temps, nous allons utiliser Créer une application React (CRA) pour générer un projet qui servira de base au livre de contes que nous construirons:

 npx créer-réagir-app livre de contes-pour-kendoreact 

Conseil: Si vous êtes N'ayant jamais utilisé KendoReact auparavant, consultez la page Mise en route qui fournit un guide étape par étape indiquant comment démarrer votre projet à l'aide de l'application Create React.

L'étape suivante consiste à installer Storybook. dans notre projet à travers son outil de ligne de commande automatisé:

 cd storybook-for-kendoreact
npx -p @ storybook / cli sb init 

L'outil en ligne de commande inspectera package.json détectera que nous utilisons React et installera toutes les dépendances liées à React pour Storybook:

Une fois installé, vous pouvez exécuter Storybook via le fil :

 le livre de contes de fils 

Ceci chargera Storybook dans le navigateur à l'adresse localhost: 9009 [1599]. :

Interface utilisateur de Storybook

L'interface utilisateur de Storybook comprend trois (3) zones principales: composants, récits et modules complémentaires:

[1965].

L'interface Storybook comporte d'autres zones et éléments, mais nous en traiterons plus loin dans cet article.

Les composants s'affichent dans un document séparé. et zone isolée. Ils sont représentés à travers des histoires, qui sont comme des permutations d'un composant. Autrement dit, ils sont capables de représenter un composant dans différents états en plus de celui par défaut, comme être non initialisé, désactivé, lié à un jeu de données vide, etc. Une implémentation robuste d'un composant tiendra compte de ces états à l'avance.

C'est ici que la valeur de Storybook commence à apparaître. en construisant des histoires qui ciblent les cas extrêmes. Chaque histoire écrite est répertoriée dans une arborescence et peut être classée en groupes. Les utilisateurs sélectionnent des histoires pour voir les composants dans différents états. Les modules complémentaires sont une fonctionnalité d'extensibilité puissante de Storybook et peuvent fournir des informations sur les composants et un contrôle accru des utilisateurs sur l'environnement Storybook.

Storybook inclut un ensemble d'histoires prédéfinies qui ciblent un élément . Ces récits sont répertoriés dans le nœud «Bouton» de la vue arborescente.

Écrivons une histoire pour KendoReact

KendoReact est une bibliothèque d'interface utilisateur spécialement conçue pour React. Il comporte un vaste ensemble de composants natifs de React. Pour cet article mettant en avant Storybook, construisons un exemple d'histoire en utilisant le composant Button de KendoReact.

Pour lancer le débat, nous ajouterons le @ progress / kendo-react- boutons dans le projet, qui contient de nombreux composants différents, y compris le composant Button :

 fil add @ progress / kendo-react-buttons
fils add @ progress / kendo-theme-default 

Veuillez consulter la vue d'ensemble des boutons KendoReact pour obtenir des informations et des démonstrations sur les composants du package @ progress / kendo-react-buttons . .

Créons maintenant une histoire pour le composant Button de KendoReact. Ceci est accompli en définissant un ensemble d'histoires représentant différents états pour le composant Button de KendoReact:

 import React from 'react';
importer {storiesOf} de '@ storybook / react';
importer {Button} depuis '@ progress / kendo-react-buttons';

storiesOf ('Button', module)
  .add ('default', () =>  Bonjour, livre de contes! )
  .add ('vide', () => )
  .add ('disabled', () =>  Disabled )
  .add ('with icon', () =>  Refresh ); 

Ici, la fonction storiesOf () enregistre le composant et utilise le premier paramètre (c'est-à-dire 'Button' ) comme nom d'affichage dans le livre de contes. Ce paramètre permet également aux délimiteurs qui peuvent être utilisés par Storybook de structurer l'arborescence affichée. (Plus d'informations à ce sujet plus tard.) La fonction add () est utilisée pour définir une histoire avec un nom (c'est-à-dire 'With Text ) et une fonction utilisée pour créer l'histoire dans Storybook. . Cette fonction prend en charge un argument supplémentaire pour une liste de paramètres, mais nous l'ignorerons pour l'instant.

Storybook se mettra à jour et affichera ces histoires via son interface utilisateur:

. Avec quelques expériences avec Storybook, vous serez capable de construire un ensemble complet d’histoires pouvant mettre en évidence différents aspects d’une bibliothèque de composants. Voici un exemple de livre de contes contenant de nombreux composants de KendoReact:

Modules complémentaires: la sauce secrète du livre de contes

Comme mentionné précédemment, l'interface utilisateur du livre de contes est composée de trois (3) domaines principaux: composants, récits et modules complémentaires. Les modules complémentaires sont une fonctionnalité d'extensibilité puissante de Storybook et peuvent fournir des informations sur les composants et un contrôle accru des utilisateurs sur l'environnement de ce dernier.

Avant de pouvoir utiliser un module complémentaire, il doit être enregistré dans addons.js . Ce fichier se trouve dans le répertoire .storybook créé par l'outil de ligne de commande Storybook. L'enregistrement d'un add-on est simple:

 // import '@ storybook / addon- [name] / register'; 

L'outil en ligne de commande Storybook ajoute les actions Actions et add-ons à ce fichier par défaut:

 import '@ storybook / addon-actions / register';
import '@ storybook / addon-links / register'; 

Une fois un module ajouté, il peut être ajouté à une histoire individuelle ou globalement à toutes les histoires d'un livre d'histoire. La configuration des modules complémentaires globaux s'effectue via config.js et varie d'un module à l'autre.

Jetons un coup d'œil à trois (3) modules complémentaires pour voir leur fonctionnement : Actions Boutons et Arrière-plans .

Module complémentaire Storybook: Actions

Les actions données via des gestionnaires d'événements. Il offre une capacité de journalisation similaire à celle que vous trouverez dans les outils de développement de navigateurs tels que Chrome. Les actions sont disponibles via le module @ storybook / addon-actions qui fournit une fonction permettant d'acheminer des données vers cet add-on.

Voici un exemple utilisant l'histoire définie précédemment pour le bouton . ] composant de KendoReact:

 import Réagissez à partir de 'réagit';
importer {storiesOf} de '@ storybook / react';
importer {action} depuis '@ storybook / addon-actions';
importer {Button} depuis '@ progress / kendo-react-buttons';

storiesOf ('Button', module) .add ('Avec texte', () =>
   C'est le texte ... 
) 

Avant de pouvoir être utilisé, le complément Actions doit être enregistré dans addons.js du .storybook du dossier:

. import '@ storybook / addon-actions / register'; 

Par défaut, cet add-on est enregistré par l'outil de ligne de commande Storybook.

Module Storybook: boutons

L'un de mes modules préférés pour Storybook est le module Knobs . Cet add-on vous permet d'interagir de manière dynamique avec les entrées de composant via une section de l'interface utilisateur de Storybook. Les boutons sont disponibles via le module @ storybook / addon-knobs et fournissent un certain nombre de fonctions pour différents types de valeurs.

Il est facile de définir un bouton. Voici un exemple utilisant l'histoire définie précédemment pour le composant Button de KendoReact:

 import React from 'react';
importer {storiesOf} de '@ storybook / react';
importer {texte} de '@ storybook / addon-knobs';
importer {Button} depuis '@ progress / kendo-react-buttons';

storiesOf ('Button', module) .add ('Avec texte', () =>
   {text ('text', 'Ceci est le texte ...']} 
); 

Avant de pouvoir être utilisé, le module Knobs doit être enregistré dans addons.js du .storybook du dossier:

. import '@ storybook / addon-knobs / register'; 

Enfin, l'add-on Knobs peut être appliqué à l'ensemble du livre de contes jusqu'à addDecorator () dans config .js :

 import {addDecorator} depuis '@ storybook / react';
importer {withKnobs} depuis '@ storybook / addon-knobs';

addDecorator (withKnobs);

// configuration supplémentaire ici ... 

Les décorateurs sont des composants d'emballage qui encapsulent les histoires que vous écrivez. Dans ce cas, nous configurons Storybook pour qu'il utilise l'add-on Knobs dans tous les récits.

Une fois que l'add-on Knobs a été enregistré et configuré pour être appliqué à l'ensemble. le livre de contes entier, il apparaîtra dans la zone des add-ons de l'interface utilisateur de ce dernier:

Toute mise à jour de cette valeur sera reflétée dans le composant. Cela permet aux utilisateurs de bricoler diverses propriétés d'un composant et de voir comment certaines valeurs affecteront son comportement.

Module complémentaire Storybook: Arrière-plans

Ce module complémentaire permet de modifier les couleurs d'arrière-plan de Storybook. l'impact de ces modifications sur les composants. Tout comme le module complémentaire Knobs, le module complémentaire Backgrounds doit être enregistré dans le dossier addon.js du dossier .storybook :

 import '@ storybook / addon-backgrounds / register '; 

L'add-on de Backgrounds est configuré un peu différemment de celui de Knobs:

 import {addParameters} de' @ storybook / react ';

addParameters ({
  milieux: [
    { name: 'White', value: '#fff' },
    { name: 'Black', value: '#000' },
    { name: 'Twitter', value: '#00aced' },
    { name: 'Facebook', value: '#3b5998' },
  ]
  // configuration supplémentaire ici ...
}); 

La ​​fonction addParameters () fait partie de l'API Storybook. Il permet de contrôler les aspects de Storybook pour l’initialisation et la configuration de l’exécution. Il faut un littéral d'objet pouvant être annoté avec une collection de définitions d'arrière-plan. Dans l'extrait ci-dessus, j'ai défini quatre (4) fonds par une propriété nommée et valeur qui désigne une couleur. Celles-ci apparaissent dans l'interface utilisateur de Storybook via un élément distinct:

Présentation de Storybook for KendoReact

Au cours des derniers mois, les clients qui construisaient des applications avec React ont demandé à voir un livre de contes hébergeant nos composants KendoReact. Storybook fournit un excellent environnement pour expérimenter ces composants de manière isolée et à travers différentes configurations. Et bien que nous fournissions un grand ensemble de démos il ne s'agit pas du même type d'environnement pour le test de fonctionnalités telles que celle fournie par Storybook. Ainsi, Storybook pour KendoReact a été créé:

Le Storybook présente les add-ons décrits ci-dessus, ainsi que d’autres comme l’extension Accessibility à tester a11y compliance:

Ce livre de contes héberge de nombreux composants de KendoReact et comporte un certain nombre d’add-ons intégrés que les utilisateurs peuvent expérimenter. Par exemple, il y a quatre (4) paramètres régionaux intégrés dans le livre de contes, ce qui vous permet de voir comment les composants répondent à différentes entrées de culture. Voici le composant Calendar avec une culture de-DE spécifiée:

Un exemple en direct de ce livre de contes est disponible à l'adresse kendoreact-storybook.netlify .com . Le code source de ce projet est disponible sur GitHub: kendoreact-storybook .

Découvrez le livre de contes de KendoReact