Leçon 4 : variantes et composition — un composant, plusieurs formes
Tu as `PrimaryButton`, `SecondaryButton`, `GhostButton` — trois composants avec le même balisage copié-collé. Le PM demande des coins arrondis sur tous, et tu dois modifier trois fichiers. Cette leçon t'apprend à construire un seul `Button` avec une prop `variant` qui se traduit en classes basées su
Les variantes, c'est comme une carte de café : il y a une seule machine, et tu choisis la taille et le lait. Tu n'achètes pas une machine séparée par boisson — tu composes ce dont tu as besoin à partir des mêmes éléments.
- component variant
- L'une des formes possibles d'un même composant — `primary`, `secondary`, `ghost` — sélectionnée via une prop au lieu d'un composant séparé par forme.
- variant map
- Un objet qui associe chaque valeur de prop à ses classes (souvent via `cva`) — une source de vérité unique pour toutes les formes du composant.
- composition
- Construire un comportement à partir d'éléments composables (props, variantes) au lieu de dupliquer du code — ajouter une forme est une nouvelle entrée dans la map, pas un nouveau fichier.
- prop-driven styling
- Choisir le style à partir des valeurs de props (`variant`, `size`) traduites en classes — pour que l'API du composant décrive une intention, pas une liste de classes.
