Storybook : des addons sur mesure đź‘Ś
Storybook permet de construire un guide des composants existants dans une application, au sein duquel on peut les documenter, les prévisualiser mais aussi les tester (de manière automatisée). Ainsi, les infographistes, les intégrateurs, les développeurs, les testeurs, etc. peuvent accéder à l’ensemble des composants disponibles, de manière simple et lisible.
Storybook est un outil idéal pour avoir une vue d’ensemble sur les éléments existants et pouvant être utilisés dans différents projets. Cela permet ainsi d’éviter la duplication de code et de maintenir une charte graphique cohérente. Il présente également l’avantage d’avoir une documentation agréable, générée automatiquement et facilement maintenable. Différents types de test permettent d’assurer l’accessibilité des composants mais également de vérifier qu’il n’y ait pas de régressions visuelles ou liées aux interactions utilisateurs.
Il est possible d’ajouter à Storybook des modules complémentaires appelés addons qui permettent d’ajouter de nouvelles fonctionnalités (par exemple, simulation de la taille de l’écran, ajout d’arrière-plan, tests d’accessibilité, etc.). Les addons sont créés par les contributeurs et la communauté mais il est possible de créer ses propres addons pour enrichir son catalogue selon ses besoins. Et c’est plutôt rapide !
Le contexte :
Des composants partagés avec des styles différents
Younited a regroupé une partie de ses applications Angular dans un monorepo. Ce qui nous permet de partager facilement des composants entre les différentes applications.
Pour ces éléments la structure HTML reste la même (avec la possibilité d’ajouter des options). Quant au CSS il est externe aux composants et s’adapte à la structure en fonction des projets.
Dans notre cas, il nous fallait donc un moyen de visualiser ces différents composants, dans Storybook, en passant d’un style à un autre en un clin d’oeil.
Le code :
Construire un addon dans un monorepo Angular
1. Configuration
Une fois Storybook installé dans le projet, il faut installer le package : @babel/preset-react avec la commande ci-dessous.
npm install -D @babel/preset-reactCe package va permettre d’utiliser du code React dans le projet.
Le fichier babel.config.js , situé à la racine du projet, doit également être mis à jour :
Dans le dossier .storybook situé à la racine du projet, il faut ajouter un dossier avec, à l’intérieur, un fichier nommé register.js. Ce dossier pourra, si besoin, être par la suite transformé en package.
Pour importer l’addon dans le projet et y accéder dans les stories (les pages où sont affichés les composants), il suffit de l’ajouter à la liste des addons du projet storybook/addons.js :
2. Afficher l’addon dans la vue Storybook
Dans le fichier register.js, le code ci-dessous va permettre d’initialiser l’addon. Dans cet exemple, nous ajoutons une liste déroulante dans la barre d’outil supérieure de Storybook mais il est possible d’ajouter un addon à d’autres endroits comme la console inférieure par exemple.
3. Afficher le menu
L’addon est maintenant visible dans Storybook mais il n’est pas encore fonctionnel. Pour cela on va ajouter le paramètre tooltip dans le composant WithTooltip et faire appel au composant TooltipLinkList.
Conclusion
Storybook est un outil déjà très complet lors de l’installation mais la possibilité d’y ajouter et de créer facilement des addons pour répondre à chaque besoin est un vrai plus.
Pour aller plus loin : https://storybook.js.org/docs/angular/api/addons
