Interface utilisateur et formulaires
Sur cette page
L’interface permet à la personne qui utilise l’application de suivre son workflow. OwlMeans Common associe des bibliothèques d’interface courantes à des conventions pour les formulaires, la navigation et l’identité.
Bibliothèques par usage
| Bibliothèque ou standard | Usage | Package public OwlMeans |
|---|---|---|
| React et React DOM | Afficher les écrans interactifs de l’application. | @owlmeans/web-client |
| shadcn/ui | Fournir les composants d’interface utilisés par la famille actuelle de panneaux web. | @owlmeans/web-panel |
| Radix UI | Fournir des primitives d’interface comme les boîtes de dialogue, les menus et les contrôles de sélection. | @owlmeans/web-panel |
| Tailwind CSS | Assurer la cohérence des styles au moyen de classes utilitaires. | @owlmeans/web-panel |
| Lucide | Fournir des icônes d’interface réutilisables. | @owlmeans/web-panel |
| React Hook Form et adaptateurs de résolution | Gérer les champs des formulaires et les relier à la validation. | @owlmeans/client-panel |
| i18next | Prendre en charge les textes traduits de l’application. | @owlmeans/client-i18n |
| Sonner | Afficher les notifications de l’application. | @owlmeans/web-panel |
| react-dropzone | Prendre en charge la sélection de fichiers et les interactions d’import. | @owlmeans/web-client |
| qrcode.react | Afficher des codes QR lorsqu’une fonctionnalité en a besoin. | @owlmeans/web-panel |
Il s’agit de dépendances et de standards publics de l’écosystème. Les dépendances exactes d’une application dépendent du projet généré et des fonctionnalités développées ; toutes les applications n’ont pas besoin de chacune des bibliothèques de cette liste.
Utilisation dans un projet
- Décrivez le comportement attendu dans la spécification ou la user story.
- Demandez à l’agent de suivre les conventions OwlMeans Common déjà présentes dans le projet.
- Consultez la documentation publique du package concerné pour comprendre une dépendance.
- Essayez le comportement dans l’aperçu et examinez ses règles d’accès.
Demandez à l’agent un formulaire de contact avec un libellé pour chaque champ, des messages d’erreur clairs et une navigation au clavier. Saisissez une adresse e-mail invalide et vérifiez que le formulaire explique ce qu’il faut corriger.
Une interface utilisateur (UI) est l’ensemble des écrans et des contrôles qu’une personne utilise. Une bibliothèque de formulaires aide à gérer de manière cohérente les valeurs saisies, les erreurs et le comportement à l’envoi.
Consultez OwlMeans Tech Concept pour l’architecture de l’application et poursuivez avec un autre agent pour suivre le workflow avec le cadre de travail.
Exemple d’application
Catégorie : CRM et gestion des clients. Exemple : un CRM pour une petite équipe, avec attribution des contacts et accès pour les responsables.
Noms et marques
Les noms shadcn/ui, React, React DOM, Radix UI, Tailwind CSS, Lucide, React Hook Form, i18next, Sonner, react-dropzone, qrcode.react et les marques associées restent la propriété de leurs titulaires ou des responsables respectifs des projets. Ces références identifient des produits, des standards ou des exemples de code source. La documentation OwlMeans n’implique aucun parrainage ni aucune approbation de la part de ces titulaires.