Dernière mise à jour le .

Un compte-rendu succint de notre travail de veille technologique pour un outil de documentation des composants React

Site officiel : https://storybook.js.org/
Github : https://github.com/storybooks/storybook

Idée : avoir un outil pour la documentation des composants React de Tracim. Le but étant qu'elle soit autogénérée.

Storybook génère une documentation intéractive des composants d'une application. C'est à dire que l'on peut faire une recherche parmis tous les composants de l'application et obtenir leur api ainsi qu'un exemple de leur rendu dans différents cas (bouton actif ou inactif, en hover, disabled ...).

Liste des exemples officiels : https://storybook.js.org/examples/

L'outil est très intéressant et l'est d'autant plus que l'application grandi. Cependant, cette documentation n'est pas autogénérée, il faut coder chaque cas : c'est à dire appeler chaque composant d'une manière différente pour chaque cas. De plus, il impose de parfaitement compartimenter les composants, css compris. Or actuellement, notre utilisation de Stylus ne nous permet pas cela ; ce qui est probablement plus un problème lié à notre génération du style des composants qu'à un problème de Storybook.

Il nous faut donc se tourner vers des outils de documentation vraiment autogénérées, même si le rendu est de moins bonne qualité.