Storybook : des addons sur mesure đź‘Ś

Ava Noilhetas
Sep 28 · 3 min read
Image for post
Image for post

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 !

Image for post
Image for post

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.

Image for post
Image for post
Architecture du projet

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.

Image for post
Image for post

Le code :

Construire un addon dans un monorepo Angular

Une fois Storybook installé dans le projet, il faut installer le package : @babel/preset-react avec la commande ci-dessous.

Ce 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 :

Configuration du fichier .babel.config.js

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 :

Importer l’addon dans le projet

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.

Initialisation de l’addon
Image for post
Image for post
Apparition du bouton de la tooltip avec l’icon

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.

Code complet utilisé pour cet addon
Image for post
Image for post
Démo de l’utilisation de l’addon

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

YounitedTech

Le blog Tech de Younited, où l’on parle de développement…

Thanks to Thomas Goldstein, hugo mercier, and Etienne Delattre. 

Ava Noilhetas

Written by

YounitedTech

Le blog Tech de Younited, où l’on parle de développement, d’architecture, de microservices, de cloud, de data… Et de comment on s’organise pour faire tout ça. Ah, et on recrute aussi, on vous a dit ?

Ava Noilhetas

Written by

YounitedTech

Le blog Tech de Younited, où l’on parle de développement, d’architecture, de microservices, de cloud, de data… Et de comment on s’organise pour faire tout ça. Ah, et on recrute aussi, on vous a dit ?

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store