Introduction
Storybook est un outil open source qui vous permettra de développer vos composants UI en complète isolation et il est compatible avec la plupart des frameworks front-end (Vue, React, Angular ...).
Cette manière de procéder devrait vous permettre de rester focus et organisé lors de la création de vos composants UI.
Storybook s'exécute dans son propre environnement (dans un dossier à part de votre projet, typiquement .storybook). Vous pouvez ainsi créer vos composants UI sans vous préoccuper des dépendances de ceux-ci et vous concentrer uniquement sur leur rendu.
Dans quels cas utiliser Storybook
- Bibliothèque de composants : besoin d'une bibliothèque de composants ? Centralisez tous vos composants en un seul endroit avec la possibilité de les tester en isolation
- Design systems : le design system correspond à un ensemble de composants qui peuvent être utilisé individuellement. Ou bien au contraire assemblez les pour produire des templates pour vos pages
- Test visuel : Visualisez le rendu de vos composants ainsi que leur comportement
- Travail en équipe : Partagez votre Storybook avec votre équipe en l’exportant au format statique
Ecrire des stories avec Storybook
Storybook repose sur un système de stories. Ainsi chaque composant de votre application aura donc une “story” qui correspond à une fonction censée le retourner à l’écran. Ci-dessous un exemple de story :
import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from './Button';
export default {
component: Button,
title: 'Button',
};
export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
export const emoji = () => (
<Button onClick={action('clicked')}>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
);Conclusion
Storybook est donc un outil formidable qui vous permettra à la fois de documenter vos projets , construire votre bibliothèque de composants réutilisables et développer des composants en isolation.
Dans cet article nous avons découvert Storybook et dans quel cas il peut nous être utile. Et dans un prochain article nous verrons concrètement comment l'utiliser dans un projet.
