gitignore propre

2025-11-09 16:31:19 +00:00
parent 8cec643361
commit 990ee549e6
164 changed files with 2769 additions and 22721 deletions
--- a/unionflow-mobile-apps/DESIGN_SYSTEM_GUIDE.md
+++ b/unionflow-mobile-apps/DESIGN_SYSTEM_GUIDE.md
@@ -0,0 +1,157 @@
+# Guide d'Utilisation - UnionFlow Design System
+
+**Version**: 1.0.0  
+**Date**: 2025-10-05  
+**Palette**: Bleu Roi (#4169E1) + Bleu Pétrole (#2C5F6F)
+
+---
+
+## 📚 Table des Matières
+
+1. [Introduction](#introduction)
+2. [Installation](#installation)
+3. [Tokens](#tokens)
+4. [Composants](#composants)
+5. [Exemples](#exemples)
+6. [Règles d'Utilisation](#règles-dutilisation)
+
+---
+
+## 🎯 Introduction
+
+Le Design System UnionFlow est un système de design unifié basé sur Material Design 3 et les tendances UI/UX 2024-2025. Il fournit une palette de couleurs cohérente, des tokens de design et des composants réutilisables.
+
+### Palette de Couleurs
+
+**Mode Jour**
+- Primary: `#4169E1` (Bleu Roi)
+- Secondary: `#6366F1` (Indigo)
+- Tertiary: `#10B981` (Vert Émeraude)
+
+**Mode Nuit**
+- Primary: `#2C5F6F` (Bleu Pétrole)
+- Secondary: `#4F46E5` (Indigo Sombre)
+- Tertiary: `#059669` (Vert Sombre)
+
+---
+
+## 📦 Installation
+
+### Import Unique
+
+Importez le Design System dans vos fichiers :
+
+```dart
+import 'package:unionflow_mobile_apps/core/design_system/unionflow_design_system.dart';
+```
+
+Cet import donne accès à :
+- `ColorTokens` - Couleurs
+- `TypographyTokens` - Typographie
+- `SpacingTokens` - Espacements
+- `UFPrimaryButton`, `UFSecondaryButton` - Boutons
+- `UFStatCard` - Cards de statistiques
+
+---
+
+## 🎨 Tokens
+
+### Couleurs (ColorTokens)
+
+#### Couleurs Primaires
+
+```dart
+// Mode Jour
+ColorTokens.primary              // #4169E1 - Bleu Roi
+ColorTokens.primaryLight         // #6B8EF5 - Bleu Roi Clair
+ColorTokens.primaryDark          // #2952C8 - Bleu Roi Sombre
+ColorTokens.onPrimary            // #FFFFFF - Texte sur primaire
+
+// Mode Nuit
+ColorTokens.primaryDarkMode      // #2C5F6F - Bleu Pétrole
+ColorTokens.onPrimaryDarkMode    // #E5E7EB - Texte sur primaire
+```
+
+#### Couleurs Sémantiques
+
+```dart
+ColorTokens.success              // #10B981 - Vert Succès
+ColorTokens.error                // #DC2626 - Rouge Erreur
+ColorTokens.warning              // #F59E0B - Orange Avertissement
+ColorTokens.info                 // #0EA5E9 - Bleu Info
+```
+
+### Typographie (TypographyTokens)
+
+```dart
+TypographyTokens.headlineLarge   // 32px - Titres de section
+TypographyTokens.headlineMedium  // 28px
+TypographyTokens.bodyLarge       // 16px - Corps de texte
+TypographyTokens.buttonLarge     // 16px - Boutons
+```
+
+### Espacements (SpacingTokens)
+
+```dart
+SpacingTokens.xs                 // 2px
+SpacingTokens.sm                 // 4px
+SpacingTokens.md                 // 8px
+SpacingTokens.lg                 // 12px
+SpacingTokens.xl                 // 16px
+SpacingTokens.xxl                // 20px
+SpacingTokens.xxxl               // 24px
+SpacingTokens.huge               // 32px
+
+// Rayons de bordure
+SpacingTokens.radiusLg           // 12px
+SpacingTokens.radiusMd           // 8px
+```
+
+---
+
+## 🧩 Composants
+
+### UFPrimaryButton
+
+```dart
+UFPrimaryButton(
+  label: 'Connexion',
+  onPressed: () => login(),
+  icon: Icons.login,
+  isFullWidth: true,
+)
+```
+
+### UFStatCard
+
+```dart
+UFStatCard(
+  title: 'Membres',
+  value: '142',
+  icon: Icons.people,
+  iconColor: ColorTokens.primary,
+  subtitle: '+5 ce mois',
+  onTap: () => navigateToMembers(),
+)
+```
+
+---
+
+## ✅ Règles d'Utilisation
+
+### DO ✅
+
+1. **TOUJOURS** utiliser `ColorTokens.*` pour les couleurs
+2. **TOUJOURS** utiliser `SpacingTokens.*` pour les espacements
+3. **TOUJOURS** utiliser les composants `UF*` quand disponibles
+
+### DON'T ❌
+
+1. **JAMAIS** définir de couleurs en dur (ex: `Color(0xFF...)`)
+2. **JAMAIS** définir d'espacements en dur (ex: `16.0`)
+3. **JAMAIS** créer de widgets custom sans vérifier les composants existants
+
+---
+
+**Dernière mise à jour**: 2025-10-05
+