Aller au contenu principal

Guide de Design - MyElectricalData

Documentation complète du design system de l'application MyElectricalData.

📚 Table des Matières​

🎨 Composants​

Toute la documentation des composants UI est organisée dans le dossier components/

Navigation rapide :

Composants essentiels :

  • Container - Container principal avec pt-6
  • Header - En-têtes de page (H1 + icône)
  • Sections - Sections collapsibles
  • Colors - Palette de couleurs
  • Forms - Inputs, labels, selects
  • States - États interactifs (hover, disabled, loading)
  • Dark Mode - Gestion du dark mode

📝 Guides Pratiques​

📦 Archive​

  • Archive - Anciens fichiers de design (référence historique)

🚀 Démarrage Rapide​

Pour créer une nouvelle page​

  1. Lire la checklist : checklist.md
  2. Consulter les composants essentiels :
  3. Copier un exemple : examples.md
  4. Vérifier la conformité : Utiliser /check_design

Pour modifier une page existante​

  1. Identifier les composants à modifier : Index des Composants
  2. Lire les règles du composant concerné
  3. Vérifier les améliorations UX 2025 intégrées dans les composants
  4. Tester en dark mode : Dark Mode

🎯 Principes Clés​

1. Cohérence Visuelle​

Toutes les pages doivent suivre les mêmes patterns pour une expérience utilisateur homogène.

2. Dark Mode First​

Toujours implémenter le dark mode dès le début (jamais en afterthought).

3. Mobile First​

Design responsive qui fonctionne d'abord sur mobile, puis s'adapte au desktop.

4. Always Visible​

Les sections principales sont toujours visibles (pattern UX 2025) pour éviter le content shifting.

5. États Explicites​

Les états (loading, disabled, error) doivent être visuellement clairs.

📐 Structure Type d'une Page​

export default function MaPage() {
  return (
    <div className="pt-6 w-full">
      {/* En-tête */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2 flex items-center gap-3">
          <IconComponent className="text-primary-600 dark:text-primary-400" size={32} />
          Titre de la Page
        </h1>
        <p className="text-gray-600 dark:text-gray-400">Description</p>
      </div>

      {/* Sections */}
      <div className="mt-6 card">{/* Contenu */}</div>
    </div>
  );
}

🎨 Palette de Couleurs Principale​

/* Primary (Bleu Ciel) */
text-primary-600 dark:text-primary-400

/* Texte */
text-gray-900 dark:text-white          /* Titres */
text-gray-600 dark:text-gray-400       /* Corps de texte */

/* Fonds */
bg-white dark:bg-gray-800              /* Cards */
bg-gray-50 dark:bg-gray-900/30         /* Filtres */

/* Bordures */
border-gray-300 dark:border-gray-700   /* Standard */

Voir Colors pour la palette complète.

✨ Améliorations UX 2025​

Les améliorations UX de janvier 2025 sont intégrées dans les composants :

🔍 Recherche Rapide​

Par composant :

Par concept :

🤝 Contribution​

Avant de modifier le design system :

  1. Vérifier que le changement est cohérent avec les patterns existants
  2. Mettre à jour la documentation du composant concerné
  3. Ajouter des exemples de code
  4. Tester en dark mode et responsive
  5. Mettre à jour la checklist si nécessaire

📚 Ressources Externes​

📞 Support​

Pour toute question sur le design system :

  1. Consulter d'abord la Checklist
  2. Chercher dans l'Index des Composants
  3. Voir les Exemples

Note : Cette documentation est basée sur Consumption/index.tsx qui sert de référence avec un score de 100% de conformité.