Présentation du projet
Bibliothèque de composants React développée avec Storybook pour une interface de borne tactile de restauration rapide (1080×1920).
11 composants React reproduisant les designs Figma avec 33 stories Storybook.
Architecture
La librairie est conçue pour être indépendante de toute logique métier. Elle ne gère ni les traductions, ni le state global, ni la navigation. Tout est passé via props et callbacks, ce qui permet à l'application consommatrice de garder le contrôle
Défis techniques résolus
- Configuration complète de Storybook pour documentation professionnelle
- Build en mode library avec vite
- Architecture de composants React modulaires avec props et variantes dynamiques
- Résolution des conflits CSS via nommage scopé par composant
- Reproduction fidèle des designs Figma (dimensions, espacements, typographies)
Apprentissages
Storybook
Maîtrise de Storybook comme outil de documentation et développement isolé. Configuration d'un environnement professionnel pour component library.
Design System
Principes de création d'une bibliothèque de composants : modularité, réutilisabilité, système de variantes, documentation interactive.
Workflow Professionnel
Méthodologie Figma → Storybook → Production. Traduction fidèle de designs en code avec extraction des tokens de design.
Architecture CSS
Gestion du scope CSS, conventions de nommage, organisation des styles pour éviter les conflits dans une bibliothèque multi-composants.
Publication et versioning npm
Gestion du versioning sémantique et configuration des packages pour une distribution optimisée.