Rangez et organisez vos composants avec Storybook

Avec la montée en popularité des frameworks Javascript comme Vue ou React, le monde du développement front-end s'oriente de plus en plus dans l'utilisation massive de composants et customs éléments, ce qui est à mon avis une bonne chose : il n'a jamais été aussi simple de combiner ensemble HTML, CSS et JS en un bloc homogène, simple à réutiliser à plusieurs endroits dans son application, ou même à déplacer de projets en projets.

Malheureusement pour nous, beaucoup de nos anciens outils et habitudes ne sont plus vraiment adaptés et vont devoir changer. Parmi ceux-là, on retrouve les anciens outils de génération de styles guides, malheureusement mal adaptés. Pour les remplacer, je vous propose de découvrir Storybook.

Rangez et organisez vos composants avec Storybook

Storybook est une application vous permettant de ranger et organiser vos components Vue, React ou React native (attention, il vous faudra des installations diférentes de storybook our chacun des types de composants !).

L'installation, archi-simple, compose de la simple ligne suivante.

npm i -g @storybook/cli

Une fois installé sur votre machine, démarrez simplementstorybook depuis le dossier de votre application en lançant getstorybook. une fois fait, vous vous retrouvez avec l'interface suivante organisant tout vos composants.

Enfin, sachez que le site de Storybook héberge une grosse liste d'exemples : Airbnb, react native, Wix, il y a l'embaras du choix !