Image fusée

Storybook : développement de composants

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

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.

storybook-composant

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.

06/04/2020
Image auteur
James Richard
Directeur Technique

Laissez nous un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous aimerez aussi ...

Image POC me I'm Famous

POC me I'm Famous

Connaissez-vous la différence entre une preuve de concept (POC) et un prototype ? Dans…

02/07/2019 | 0
Icone fusée

Démarrez votre projet digital !

Je me lance