diff --git a/prompts/widget-formulaire-passage-modal.md b/prompts/widget-formulaire-passage-modal.md new file mode 100644 index 00000000..a2afdd12 --- /dev/null +++ b/prompts/widget-formulaire-passage-modal.md @@ -0,0 +1,79 @@ +# 🎯 Prompt : Widget Formulaire Passage Modal Cross-Platform + +## Contexte +Développement d'un widget modal de formulaire de passage pour GEOSECTOR, compatible Svelte (web) et Flutter (mobile). + +## Prompt à utiliser avec Cline/Claude + +``` +Je développe un widget modal de formulaire de passage pour GEOSECTOR qui doit fonctionner de manière identique sur : +- Web avec Svelte/SvelteKit +- Mobile avec Flutter + +### Spécifications du widget + +#### Interface utilisateur +- Modal centré avec overlay semi-transparent +- Formulaire avec 4 champs principaux : + 1. **Date** : sélecteur de date natif + 2. **Heure** : sélecteur d'heure (format 24h) + 3. **Commentaire** : textarea avec compteur (max 500 caractères) + 4. **Statut** : dropdown avec options ["En attente", "Validé", "Rejeté", "En cours"] + +#### Fonctionnalités avancées +- Validation en temps réel avec messages d'erreur contextuels +- Sauvegarde automatique toutes les 30 secondes (draft local) +- Animations d'ouverture/fermeture fluides +- Gestion des états : loading, success, error +- Boutons d'action : Annuler, Sauvegarder (draft), Valider (final) + +#### Contraintes techniques +- Design system cohérent entre Svelte et Flutter +- Accessibilité : labels, focus management, navigation clavier +- Responsive : adaptation automatique mobile/desktop +- Performance : lazy loading du composant +- Validation côté client + préparation validation serveur + +### Structure souhaitée + +#### Svelte (lib/components/PassageFormModal.svelte) +``` + + + +``` + +#### Flutter (lib/widgets/passage_form_modal.dart) +``` +class PassageFormModal extends StatefulWidget { + // Widget avec même logique qu'en Svelte + // Form validation + // Auto-save functionality +} +``` + +Peux-tu m'accompagner dans le développement de ce widget en respectant ces spécifications et en optimisant pour la réutilisabilité ? +``` + +## Bonnes pratiques à appliquer +- Utiliser des validateurs côté client robustes +- Implémenter un système de debouncing pour l'auto-save +- Gérer proprement les animations et transitions +- Prévoir la gestion d'erreur réseau +- Tester l'accessibilité sur les deux plateformes + +## Tests suggérés +- Tests unitaires de validation +- Tests d'intégration du formulaire +- Tests d'accessibilité +- Tests de performance (auto-save)