Guide de Design - Index des Composants
Ce répertoire contient les guidelines de design pour tous les composants UI de MyElectricalData.
Navigation rapide
Structure et Layout
- 01 - Container Principal - Container principal avec
pt-6 w-full - 02 - Header de Page - En-têtes de page (H1 + icône + sous-titre)
- 03 - Sections - Sections collapsibles et organisation du contenu
Fondamentaux Visuels
- 04 - Couleurs - Palette de couleurs complète (primary, status, backgrounds)
- 05 - Typographie - Tailles et poids de police
- 06 - Espacement - Marges, padding, gaps
Composants Interactifs
- 07 - Boutons - Boutons primaires, secondaires et variantes
- 08 - Cards - Cards et conteneurs
- 09 - Formulaires - Inputs, labels, selects, checkboxes
- 10 - Icônes - Icônes Lucide React
États et Interactions
- 11 - États - États interactifs (hover, focus, disabled, loading)
- 12 - Filtres - Filtres et tri
- 13 - Loading - États de chargement et progression
Thèmes et Adaptabilité
- 14 - Dark Mode - Gestion du dark mode
- 15 - Responsive - Design responsive et mobile-first
Autres Documents
Patterns et Pratiques
Documents Sources
- Design Guidelines (Original) - Document de référence complet
Améliorations UX 2025
Les améliorations UX de janvier 2025 sont maintenant intégrées directement dans les composants :
- 03 - Sections - Pattern "Always Visible"
- 11 - États - États conditionnels et déverrouillage progressif
- 13 - Loading - Détection du cache et composants de progression
- 12 - Filtres - Filtre "Récentes uniquement"
Utilisation
Chaque fichier de composant suit le format :
# [Nom du Composant]
## Vue d'ensemble
[Description courte]
## Règles
[Liste des règles à respecter]
## Code de référence
[Exemple de code complet]
## Exemples d'utilisation
[Cas d'usage courants]
## À ne pas faire
[Anti-patterns]
## Voir aussi
[Liens vers fichiers connexes]
Contribution
Avant de modifier ces guidelines :
- Vérifier la cohérence avec les pages existantes
- Tester en light et dark mode
- Valider sur mobile et desktop
- Documenter les changements dans le fichier approprié
Fichier de Référence
Toutes ces guidelines sont basées sur : apps/web/src/pages/Consumption/index.tsx