Composants
Apprenez l'anatomie des composants, les attentes en matiere d'accessibilite, les modeles de composition et la couverture de tests.
Composants
Les composants VLLNT UI sont concus comme des primitives accessibles pour de vraies surfaces applicatives. Chaque composant devrait exposer un DOM previsible, un etat semantique et suffisamment de points de composition pour s'adapter aux flux de travail produit.
Anatomie
La plupart des composants se trouvent sous :
packages/ui/src/components/<name>/Les fichiers courants incluent :
[name].tsxpour le code source.[name].test.tsxpour la couverture Vitest.[name].stories.tsxpour les exemples Storybook.[name].visual.tsxpour les captures d'ecran de test de composant lorsque cela s'applique.index.tspour les exports.
Composition
Preferez des sous-composants explicites lorsqu'un composant comporte plusieurs regions. Gardez les elements racines semantiques : les boites de dialogue sont des boites de dialogue, les listes sont des listes, la navigation est de la navigation, et les controles exposent un comportement natif de bouton ou de champ de saisie chaque fois que possible.
Accessibilite
Chaque composant interactif devrait prendre en charge l'utilisation au clavier, un focus visible, l'ARIA uniquement lorsque la semantique native ne suffit pas, et des libelles stables pour les technologies d'assistance. Les composants construits sur les primitives Radix devraient preserver le contrat d'accessibilite de la primitive.
Tests
Les tests devraient couvrir le rendu, la transmission des props, les interactions cles et l'etat critique pour l'accessibilite. Lorsqu'un composant conserve un etat ou ecoute des evenements du navigateur, incluez des tests de regression pour le stockage et le comportement des evenements.
Copies du registre
Les fichiers du registre sont generes a partir du code source du paquet. Corrigez d'abord la source, puis regenerez la sortie du registre au lieu de modifier manuellement apps/registry/registry/default.