Storybook – Chromatic – Loki
Tour d’horizon de solutions pour collaborer autour d’une bibliothèque de composants custom.
Intro
Les applications front-end modernes se veulent modulaires, grâce à une architecture suivant les principes de la Programmation Orientée Composant (POC). C’est une tendance omniprésente dans les frameworks JavaScript modernes comme VueJS, Angular, etc.
Les composants sont particulièrement intéressants quand ils sont réutilisés, soit quand il s’agit de composants génériques au sein d’une application, soit à plus grande échelle dans un design system. Un design system permet de créer une bibliothèque de composants avec un design unifié, l’image de marque en tête (branding). Certains sont publics, comme Material Design ou le design system de WordPress.
Cependant, il y a de nombreux enjeux pour bien partager, documenter et surtout collaborer autour d’un design system (comme l’a bien expliqué Cécile Freyd-Foucault dans sa conférence au Devoxx 2022 “Petit guide pratique pour commencer un design system”). Heureusement, il existe des outils pour nous faciliter la tâche : nous allons voir en particulier le couple Storybook – Chromatic.
Au-delà de l’envie de bien faire et de mettre en place un design system car c’est considéré comme une bonne pratique, il y a une grosse plus-value immédiate.
Plus précisément :
- Lister et partager les composants
- Tester
- Revoir
- Approuver ou non
- Documenter
- Maintenir
- Intégrer plusieurs composants dans une page
Storybook, le premier outil que nous allons voir, est la base des autres solutions présentées dans cet article.
Storybook
C’est une application web permettant de construire des bibliothèques de composants et de pages de manière isolée. Des milliers d’équipes l’utilisent pour le développement, les tests et la documentation d’interface utilisateur. C’est une solution gratuite et open source.
C’est un moyen simple de partager une bibliothèque de composants, voire un design system entier. Storybook permet aussi de visualiser et d’interagir avec les composants hors de leur écosystème applicatif habituel, et donc de les tester dans un contexte neutre.
En effet, il peut être parfois fastidieux de développer un composant qui doit être intégré dans une application, car il y a de nombreux freins : la complexité de l’application, l’environnement de développement, celui de test, la nécessité de se connecter à un back-end. Avoir des composants isolés facilite le travail de la vérification, aux tests manuels et à la distribution.
Pour rendre la documentation et visualisation de la bibliothèque disponible en temps réel, et sans développer de pages particulières, il suffit d’héberger l’application pour faire un showcase. C’est un gain de temps considérable puisqu’il n’y a plus besoin de maintenir une application supplémentaire.
Stories
Ainsi, les stories constituent des exemples dynamiques de composants. Une documentation vivante et interactive permettant à la fois de voir des cas d’utilisation, mais aussi de visualiser les variantes d’un même composant.
Il suffit de l’ajouter dans les dépendances de votre projet, d’importer vos composants et de leur associer un fichier <name>.stories.js qui contiendra ses arguments possibles et des liens avec son template.
Par exemple pour une Story avec un composant VueJS : un bouton avec plusieurs options (type primary ou secondary, taille, etc.)
Fichier button.vue