Formation Storybook

Description

Cette formation Storybook vous apprend à développer, tester et documenter vos composants UI en isolation en 2 jours.

Vos composants sont difficiles à maintenir indépendamment de l'app ? Créez des stories interactives et construisez un design system robuste.

Pendant 2 jours, vous apprendrez à :

• Installer et configurer Storybook
• Écrire des stories interactives
• Intégrer Storybook dans un projet front-end (React, Vue ou Angular) et l'adapter à vos besoins
• Utiliser Storybook pour optimiser le développement collaboratif de votre design system
• Effectuer des tests visuels et 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.

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

Public

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

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

Télécharger le programme

Formations associées

• 

  Software Craftsmanship Front-End

  2 jours
• 

  Figma avancé

  3 jours
• 

  Claude Code

  2 jours
• 

  Vitest

  1 jour
• 

  React Avancé

  3 jours
• 

  Accessibilité Numérique

  2 jours

Formateur

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.

FAQ

8 raisons de participer à une formation Human Coders

• Satisfaction client élevée : Un taux de satisfaction de 4,6/5 depuis 2012 (sur 1968 sessions réalisées). 99% des participants se disent satisfaits de nos formations
• Approche pédagogique unique : Des formations en petit groupe, des formateurs passionnés et expérimentés, de véritables workshops... (Plus d'infos sur notre manifeste)
• Catalogue de formations complet : 277 formations au catalogue, de quoi vous accompagner sur tout vos projets
• Écosystème dynamique : Nous accompagnons les dev depuis 14 ans avec des initiatives comme Human Coders News, les Human Talks, le podcast ou encore notre serveur Discord
• Financement facilité : Organisme certifié Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• Références clients prestigieuses : De nombreux clients qui nous font confiance depuis des années
• Accompagnement sur mesure : Nous vous proposons un accompagnement personnalisé par nos consultants pour vous aider dans vos projets au-delà de la formation
• Valorisation professionnelle : Remise d'un diplôme, d'une attestation et d'une certification, suivant les formations effectuées, que vous pourrez afficher sur vos CV et réseaux sociaux