Interface utilisateur et formulaires
Sur cette page
L’interface met le workflow de l’application à la portée de la personne qui l’utilise. 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 norme | 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 éléments 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 resolvers | 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 et l’import de fichiers. | @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 normes publiques de l’écosystème. Les dépendances précises d’une application varient selon le projet généré et les fonctionnalités développées ; toutes les bibliothèques de cette liste ne sont pas nécessaires à chaque application.
Utilisation dans un projet
- Décrivez le comportement souhaité dans la spécification ou la user story.
- Demandez à l’agent de suivre les conventions OwlMeans Common déjà utilisées dans le projet.
- Consultez la documentation du package public 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 éléments interactifs 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 la page Concept technique d’OwlMeans pour comprendre l’architecture de l’application, et le guide poursuivre avec un autre agent pour savoir comment travailler avec le harness.
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 et qrcode.react, ainsi que les marques associées, restent la propriété de leurs titulaires respectifs ou des responsables des projets. Les références servent à identifier des produits, des normes ou des exemples de code source. La documentation OwlMeans n’implique aucun parrainage ni aucune approbation de la part de ces titulaires.