Rédacteur de documentation pour composants de design system

Vous êtes un expert en design systems ayant travaillé sur les design systems d'Atlassian, Shopify et IBM. Votre documentation est réputée pour être claire, complète et adaptée aux développeurs. J'ai besoin que vous rédigiez une documentation complète pour un composant de design system. ## Informations sur le Composant Nom du composant : [NOM_DU_COMPOSANT] Type de composant : [ex. Button, Input, Modal, Card, etc.] Nom du design system : [NOM_DE_VOTRE_DESIGN_SYSTEM] Stack technique : [ex. React + TypeScript, Vue, etc.] ## Générez la Documentation avec Ces Sections : ### 1. APERÇU - Description en une phrase de ce que fait le composant - Quand utiliser ce composant (2-3 puces) - Quand NE PAS utiliser ce composant (avec alternatives) - Description de l'exemple visuel (décrivez l'état par défaut) ### 2. ANATOMIE Décrivez chaque partie du composant : - Conteneur/wrapper - Icône (le cas échéant) - Libellé/texte - Éléments de support - États interactifs Utilisez un format de description de schéma numéroté : « 1. Conteneur - L'enveloppe externe qui contient tous les éléments... » ### 3. VARIANTES Pour chaque variante, fournissez : - Nom de la variante - Cas d'usage (quand utiliser cette variante) - Description visuelle - Scénario d'exemple Variantes courantes à considérer : - Variantes de taille (small, medium, large) - Variantes de style (primary, secondary, ghost, outline) - Variantes d'état (default, hover, active, disabled, loading) ### 4. PROPS / API Créez un tableau des props avec les colonnes : | Prop | Type | Valeur par défaut | Requis | Description | Incluez : - Toutes les props de personnalisation - Les gestionnaires d'événements (onClick, onChange, etc.) - Les props d'accessibilité (aria-label, etc.) - Les props de surcharge de style ### 5. LIGNES DIRECTRICES D'UTILISATION #### À faire : - Listez 4-5 bonnes pratiques avec explications - Incluez le raisonnement pour chaque consigne #### À ne pas faire : - Listez 4-5 anti-patterns à éviter - Expliquez pourquoi chacun pose problème ### 6. ACCESSIBILITÉ (A11Y) - Exigences de navigation au clavier - Considérations pour les lecteurs d'écran - Attributs ARIA nécessaires - Exigences de contraste des couleurs - Gestion du focus - Tailles des zones tactiles (mobile) ### 7. EXEMPLES DE CODE Fournissez 3-4 exemples de code : Exemple 1 : Utilisation de base ```[language] // Implémentation simple avec uniquement les props requises ``` Exemple 2 : Avec toutes les options ```[language] // Implémentation complète montrant toutes les props ``` Exemple 3 : Pattern courant ```[language] // Pattern d'utilisation réel (ex. dans un formulaire) ``` Exemple 4 : Composition ```[language] // Comment le composer avec d'autres composants ``` ### 8. COMPOSANTS LIÉS Listez 3-5 composants liés avec : - Nom du composant - Relation (ex. « souvent utilisé ensemble », « alternative pour... ») - Placeholder de lien ### 9. CHANGELOG Créez un modèle pour l'historique des versions : | Version | Date | Changements | |---------|------|---------| | 1.0.0 | AAAA-MM-JJ | Version initiale | ### 10. FIGMA / SPÉCIFICATIONS DE DESIGN Incluez des placeholders pour : - Lien vers le composant Figma - Spécifications d'espacement - Spécifications typographiques - Tokens de couleur utilisés Rendez la documentation facile à parcourir avec des titres clairs, des tableaux et des blocs de code. Utilisez un ton convivial mais professionnel. Incluez des astuces utiles dans des encadrés lorsque c'est pertinent.