Cette formation Storybook vous permettra de concevoir, documenter et tester vos composants UI de manière efficace et professionnelle.

En deux jours, vous découvrirez comment intégrer Storybook dans un projet front-end (React, Vue ou Angular) et l’utiliser pour optimiser le développement collaboratif de votre design system.

Grâce à une approche axée sur la pratique, vous serez en mesure d’installer et configurer Storybook, d’écrire des stories interactives, d’effectuer des tests visuels et d’intégrer cet outil dans un workflow moderne avec CI/CD.

À la fin de cette formation, vous maîtriserez les bonnes pratiques pour organiser une librairie de composants robuste et maintenable.

Cette formation s’adresse aux développeur·euse·s front-end souhaitant améliorer la qualité et la collaboration autour de leurs composants UI.

Ce programme peut être adapté selon le framework utilisé (React, Vue ou Angular).

Vous souhaitez optimiser votre workflow front-end ?

Voici quelques informations qui pourraient également vous être utiles :
- formation aux tests End to End avec Playwright
- formation aux bonnes pratiques en accessibilité a11y

Les objectifs

• Comprendre et installer Storybook dans un projet front-end
• Créer, documenter et tester des composants UI
• Organiser et optimiser sa librairie Storybook pour un projet collaboratif
• Intégrer Storybook dans un workflow moderne avec CI/CD

Pré-requis

• Maîtrise des bases du JavaScript (ES6+)
• Expérience avec un framework front-end (React, Vue ou Angular)
• Connaissance de HTML et CSS
• Notions sur les composants réutilisables
• Ordinateur portable à apporter

Le programme de la formation Storybook

Jour 1 : Introduction et mise en place

• Présentation de Storybook
  • Qu’est-ce que Storybook et pourquoi l’utiliser
  • Cas d’usage (documentation, design system, tests visuels)
  • Comparaison avec d’autres outils
    • Styleguidist
    • Docz
    • Histoire
• Installation et configuration
  • Installation de Storybook dans un projet (React, Vue, Angular)
  • Structure d’un projet Storybook
  • Configurer Storybook (main.js, preview.js)
  • Comprendre le format des stories (.stories.js|.tsx)
• Création de premières stories
  • Création d’un composant et ses stories
  • Définition d’args et de controls pour gérer les props
  • Gestion des états (chargement, erreur, succès...)
• Organisation et personnalisation des stories
  • Structurer ses stories en dossiers et catégories
  • Ajouter des variantes avec args et argTypes
  • Personnaliser l'affichage (Backgrounds, Viewport)
• Interaction et documentation avancée
  • Utilisation des addons
    • Actions
    • Controls
    • Viewport
    • Backgrounds
  • Ajouter une documentation interactive avec MDX

Mises en pratique :
- Installer et configurer Storybook sur un projet existant
- Documenter et tester des composants courants (bouton, modal, formulaire...)
- Améliorer l’UX avec les addons Storybook

Jour 2 : Test, validation et intégration dans un workflow

• Tests visuels et automatisation
  • Introduction aux tests visuels
  • Intégration avec Jest et Testing Library
  • Détection des régressions avec Chromatic
• Accessibilité et bonnes pratiques
  • Utilisation de l’addon A11y pour tester l’accessibilité
  • Vérification des contrastes et compatibilité clavier
  • Application des bonnes pratiques UI/UX
• Intégration avec un Design System
  • Création et gestion d’une bibliothèque de composants
  • Storybook comme documentation de design system
  • Partage des composants avec une équipe
• Déploiement et CI/CD
  • Héberger Storybook
    • GitHub Pages
    • Vercel
    • Netlify
  • Automatiser les tests et le build
    • GitHub Actions
    • GitLab CI

Mises en pratique :
- Ajouter des tests visuels et d’accessibilité à un projet Storybook
- Création d’un mini-design system avec Storybook
- Rédaction d’une documentation complète et de tests
- Déploiement en ligne et intégration dans un projet réel

Le(s) formateur(s)

Romain PETIT

Romain est consultant indépendant sur des technologies web front-end depuis 2012.
Il utilise le framework JavaScript Vue.JS et Nuxt au quotidien pour développer des applications. Il croit en un web accessible, et défend la JAMstack.

Romain donne des formations depuis 6 ans pour différentes structures: Le Campus Numérique in The Alps sur des formations innovantes, avec l'Université de Grenoble Alpes et Oxiane.

Il monté le collectif d'indépendants et espace de travail Le Médiastère au centre ville de Grenoble, son camp de base.
Depuis 2020, il a rejoint l'équipe de BackMarket.

Voir son profil détaillé

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

• une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• de nombreux clients qui nous font confiance depuis des années
• un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
• 153 formations au catalogue, 1629 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
• la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation