diff --git a/banquise-website/COLOR_FIXES.md b/banquise-website/COLOR_FIXES.md deleted file mode 100644 index 684c855..0000000 --- a/banquise-website/COLOR_FIXES.md +++ /dev/null @@ -1,90 +0,0 @@ -# Guide de cohérence des couleurs - La Banquise - -## Problèmes résolus - -### 1. Contraste insuffisant -- **Avant** : Texte `banquise-gray` (#F6F6F6) sur fond blanc/clair → Ratio 1.04:1 (non conforme) -- **Après** : Texte blanc sur fond sombre → Ratio 21:1 (optimal) - -### 2. Incohérence des couleurs de texte -- **Avant** : Mélange de `banquise-gray`, `banquise-gray/80`, `banquise-gray/90` -- **Après** : Hiérarchie claire avec `text-white`, `text-white/90`, `text-white/70` - -### 3. Lisibilité sur différents arrière-plans -- **Fond sombre** : Texte blanc pour contraste maximal -- **Fond clair** : Texte sombre défini dans la palette étendue -- **Fond coloré** : Texte blanc avec opacité appropriée - -## Nouvelles constantes ajoutées - -### Palette de couleurs étendue -```typescript -banquise: { - blue: '#40B4FF', - 'blue-dark': '#1F5D89', - 'blue-darker': '#0F3A59', - 'blue-light': '#69B7E2', - 'blue-lightest': '#A5F0FF', - 'blue-accent': '#2196F3', - gray: '#F6F6F6', - 'gray-dark': '#2C3E50', - 'gray-medium': '#5A6C7D', - 'gray-light': '#E8EDF2', - 'text-primary': '#1A202C', - 'text-secondary': '#4A5568', - 'text-muted': '#718096', -} -``` - -### Hiérarchie de texte standardisée -- **Sur fond sombre** : `text-white`, `text-white/90`, `text-white/70` -- **Sur fond clair** : `text-banquise-text-primary`, `text-banquise-text-secondary`, `text-banquise-text-muted` - -## Améliorations apportées - -### Components corrigés : -1. **HeroSection** : Texte blanc avec ombres renforcées -2. **ServicesSection** : Titres et descriptions en blanc -3. **AboutSection** : Cohérence des couleurs dans FAQ -4. **ServiceCard** : Texte blanc pour contraste optimal -5. **AccordionItem** : Titres et contenu en blanc -6. **FeatureCard** : Amélioration du contraste -7. **Footer** : Liens en blanc avec opacité -8. **TechFeaturesSection** : Titres blancs - -### Ombres de texte améliorées -- **Légère** : `0 1px 3px rgba(0, 0, 0, 0.2)` -- **Moyenne** : `0 2px 8px rgba(0, 0, 0, 0.3)` -- **Forte** : `0 3px 15px rgba(0, 0, 0, 0.4)` -- **Très forte** : `0 4px 20px rgba(0, 0, 0, 0.6)` - -## Bonnes pratiques à suivre - -### 1. Toujours utiliser des couleurs avec bon contraste -- Minimum WCAG AA : ratio 4.5:1 pour texte normal -- Recommandé : ratio 7:1 ou plus pour texte important - -### 2. Hiérarchie visuelle claire -- Titres principaux : `text-white` avec ombre forte -- Sous-titres : `text-white/95` avec ombre moyenne -- Corps de texte : `text-white/90` avec ombre légère -- Texte secondaire : `text-white/70` - -### 3. Cohérence entre composants -- Utiliser les constantes définies dans `colors.ts` -- Respecter la hiérarchie établie -- Éviter les couleurs personnalisées ponctuelles - -### 4. Accessibilité -- Tester le contraste avec des outils comme WebAIM -- Prendre en compte les utilisateurs malvoyants -- Maintenir la lisibilité sur tous les appareils - -## Résultat final - -L'interface présente maintenant : -- ✅ Contraste optimal partout (ratio > 7:1) -- ✅ Cohérence visuelle entre toutes les sections -- ✅ Lisibilité parfaite sur fond sombre -- ✅ Hiérarchie claire et professionnelle -- ✅ Accessibilité WCAG AA conforme diff --git a/banquise-website/CORRECTIONS-COMPLETES.md b/banquise-website/CORRECTIONS-COMPLETES.md deleted file mode 100644 index 7f65e20..0000000 --- a/banquise-website/CORRECTIONS-COMPLETES.md +++ /dev/null @@ -1,193 +0,0 @@ -# 🎉 Rapport Final - Corrections Complètes du Code Banquise - -## ✅ **Résumé des Corrections Effectuées** - -### **1. Architecture & Organisation** -- ✅ **Design System Unifié** : Création d'un système centralisé (`design-system.ts`) -- ✅ **Suppression de la duplication** : Élimination des fichiers redondants -- ✅ **Structure cohérente** : Organisation claire des exports et imports -- ✅ **Index centralisés** : Points d'entrée uniques pour chaque module - -### **2. Conventions de Nommage** -- ✅ **Interfaces TypeScript** : Toutes préfixées par `I` (ex: `IButtonProps`) -- ✅ **Constantes** : SCREAMING_SNAKE_CASE cohérent -- ✅ **Variables & fonctions** : camelCase systématique -- ✅ **Exports** : Nommage uniforme et prévisible - -### **3. Élimination du Dead Code** -- ✅ **Fichiers supprimés** : - - `src/shared/constants/styles.ts` (dupliqué) - - `src/shared/constants/colors.ts` (dupliqué) - - `src/components/common/Button-old.tsx` (obsolète) -- ✅ **Imports nettoyés** : Suppression des imports inutilisés -- ✅ **Code rationalisé** : Fusion des duplicatas - -### **4. Système de Styles Perfectionné** -- ✅ **Design system centralisé** : `src/styles/design-system.ts` -- ✅ **Utilitaires de styles** : `src/shared/utils/style-utils.ts` -- ✅ **Hardcoding éliminé** : Remplacement par des constantes -- ✅ **CSS-in-JS optimisé** : Séparation Tailwind/CSS pur - -### **5. Types & TypeScript** -- ✅ **Interfaces normalisées** : Structure cohérente -- ✅ **Types exportés** : Centralisation dans `shared/types/` -- ✅ **Typage strict** : Aucune erreur TypeScript -- ✅ **Compatibilité legacy** : Transition en douceur - -### **6. Composants Refactorisés** -- ✅ **Button Component** : Utilise le nouveau design system -- ✅ **ServiceCard** : Styles uniformisés -- ✅ **HeroSection** : Hardcoding remplacé par utilitaires -- ✅ **Réutilisabilité** : Composants plus modulaires - ---- - -## 📊 **Métriques d'Amélioration** - -| Aspect | Avant | Après | Amélioration | -|--------|-------|-------|--------------| -| **Duplication de code** | 40% | 0% | -100% | -| **Erreurs TypeScript** | 15+ | 0 | -100% | -| **Erreurs ESLint** | 2 | 0 | -100% | -| **Fichiers de styles** | 3 | 1 | -67% | -| **Maintenabilité** | 5/10 | 9/10 | +80% | -| **Cohérence** | 6/10 | 10/10 | +67% | - ---- - -## 🚀 **Structure Finale Optimisée** - -``` -src/ -├── styles/ -│ ├── design-system.ts ✅ SYSTÈME UNIFIÉ -│ ├── components.ts ⚠️ DEPRECATED (compatibilité) -│ └── index.ts ✅ EXPORTS CENTRALISÉS -├── shared/ -│ ├── types/ -│ │ ├── interfaces.ts ✅ TYPES NORMALISÉS -│ │ └── index.ts ✅ EXPORTS TYPES -│ ├── utils/ -│ │ ├── style-utils.ts ✅ UTILITAIRES STYLES -│ │ └── index.ts ✅ UTILITAIRES GÉNÉRAUX -│ ├── constants/ -│ │ └── index.ts ✅ CONSTANTES CLEAN -│ └── hooks/ ✅ HOOKS ORGANISÉS -└── components/ ✅ COMPOSANTS REFACTORISÉS -``` - ---- - -## 💡 **Nouveautés Ajoutées** - -### **Design System Avancé** -```typescript -// Avant (dispersé) -const styles = "bg-gradient-to-r from-blue-500..." - -// Après (centralisé) -import { GRADIENTS } from './styles/design-system'; -className={GRADIENTS.primary} -``` - -### **Utilitaires de Styles** -```typescript -// Avant (hardcodé) -style={{ textShadow: '0 2px 8px rgba(0,0,0,0.3)' }} - -// Après (systématique) -style={styleUtils.textShadows.medium} -``` - -### **Types Normalisés** -```typescript -// Avant (incohérent) -interface ButtonProps, IService, AccordionItem - -// Après (cohérent) -interface IButtonProps, IService, IAccordionItem -``` - ---- - -## 🎯 **Bénéfices Obtenus** - -### **Pour les Développeurs** -- 🚀 **Développement 40% plus rapide** (composants réutilisables) -- 🧩 **Maintenance simplifiée** (source unique de vérité) -- 🎨 **Cohérence visuelle** garantie -- 📚 **Documentation intégrée** dans le code - -### **Pour la Performance** -- 📦 **Bundle optimisé** (suppression duplicatas) -- ⚡ **CSS rationalisé** (moins de styles redondants) -- 🔧 **Build plus rapide** (moins de fichiers à traiter) - -### **Pour la Qualité** -- ✅ **0 erreur TypeScript/ESLint** -- 🔒 **Typage strict** partout -- 📐 **Conventions respectées** à 100% -- 🧪 **Code testable** et modulaire - ---- - -## 📋 **Checklist de Validation** - -- [x] ✅ Aucune erreur TypeScript -- [x] ✅ Aucune erreur ESLint -- [x] ✅ Suppression de tout code dupliqué -- [x] ✅ Conventions de nommage unifiées -- [x] ✅ Design system centralisé -- [x] ✅ Hardcoding éliminé -- [x] ✅ Types normalisés -- [x] ✅ Structure optimisée -- [x] ✅ Composants refactorisés -- [x] ✅ Dead code supprimé - ---- - -## 🎖️ **Score Final d'Audit** - -| Critère | Score Avant | Score Après | -|---------|-------------|-------------| -| **Architecture** | 8/10 | 10/10 ✅ | -| **Lisibilité** | 7/10 | 10/10 ✅ | -| **Maintenabilité** | 5/10 | 10/10 ✅ | -| **Conventions** | 6/10 | 10/10 ✅ | -| **Réutilisabilité** | 8/10 | 10/10 ✅ | -| **Dead code** | 6/10 | 10/10 ✅ | -| **Performance** | 7/10 | 9/10 ✅ | -| **TypeScript** | 9/10 | 10/10 ✅ | - -**🏆 Score Global : 10/10** - ---- - -## 📝 **Recommandations Post-Corrections** - -### **Utilisation du Nouveau Système** -```typescript -// ✅ Import recommandé -import { designSystem, commonStyles } from '../styles'; - -// ✅ Utilisation des composants - - -// ✅ Styles avec utilitaires -style={styleUtils.textShadows.medium} -``` - -### **Migration Progressive** -1. Les anciens imports continuent de fonctionner -2. Migrez progressivement vers le nouveau système -3. Le fichier `components.ts` sera supprimé dans une future version - -### **Bonnes Pratiques** -- Toujours utiliser le design system pour les styles -- Préférer les composants réutilisables -- Maintenir la cohérence des noms -- Documenter les nouveaux composants - ---- - -**🎉 Votre code est maintenant parfaitement organisé, maintenable et performant !** diff --git a/banquise-website/MIGRATION-PLAN.md b/banquise-website/MIGRATION-PLAN.md deleted file mode 100644 index 9a9671b..0000000 --- a/banquise-website/MIGRATION-PLAN.md +++ /dev/null @@ -1,123 +0,0 @@ -# 🚀 Plan de Migration - Audit Banquise Website - -## ⚠️ ACTIONS PRIORITAIRES (À faire immédiatement) - -### 1. **Suppression des Doublons de Styles** - -**Fichiers à supprimer/consolider :** -- ❌ `src/shared/constants/styles.ts` → Migrer vers `design-system.ts` -- ❌ `src/shared/constants/colors.ts` → Migrer vers `design-system.ts` -- ⚠️ `src/styles/components.ts` → Refactorer pour utiliser `design-system.ts` - -**Action :** -```bash -# Étape 1 : Remplacer tous les imports -find src -name "*.tsx" -o -name "*.ts" | xargs sed -i 's/from.*styles\/components/from ..\/styles\/design-system/g' - -# Étape 2 : Mettre à jour les utilisations -# commonStyles.buttons.primary → designSystem.components.buttons.variants.primary -``` - -### 2. **Unification des Conventions de Nommage** - -**Conventions à adopter :** -- ✅ **Interfaces :** `IComponentProps` (PascalCase avec préfixe I) -- ✅ **Constants :** `SCREAMING_SNAKE_CASE` -- ✅ **Variables :** `camelCase` -- ✅ **Composants :** `PascalCase` -- ✅ **Fichiers :** `kebab-case.tsx` ou `PascalCase.tsx` pour composants - -### 3. **Élimination du Code Hardcodé** - -**Remplacements à effectuer :** - -```tsx -// ❌ AVANT (hardcodé) -

- -// ✅ APRÈS (système de design) -

-``` - -## 📋 CHECKLIST DE MIGRATION - -### Phase 1 : Refactorisation du Style System -- [ ] Migrer `components.ts` vers `design-system.ts` -- [ ] Supprimer les fichiers de styles dupliqués -- [ ] Mettre à jour tous les imports dans les composants -- [ ] Tester que rien n'est cassé visuellement - -### Phase 2 : Nettoyage du Code -- [ ] Standardiser tous les noms d'interfaces avec préfixe `I` -- [ ] Remplacer le hardcoding par `style-utils.ts` -- [ ] Nettoyer les imports inutilisés -- [ ] Organiser les exports dans `index.ts` - -### Phase 3 : Optimisations -- [ ] Vérifier qu'aucun CSS n'est dupliqué -- [ ] Optimiser la taille du bundle -- [ ] Ajouter de la documentation aux composants -- [ ] Configurer des tests pour les composants critiques - -## 📁 NOUVELLE STRUCTURE RECOMMANDÉE - -``` -src/ -├── styles/ -│ ├── design-system.ts # ✅ SYSTÈME UNIFIÉ -│ └── index.ts # Exports centralisés -├── shared/ -│ ├── types/ -│ │ ├── interfaces.ts # ✅ TYPES NORMALISÉS -│ │ └── index.ts -│ ├── utils/ -│ │ ├── style-utils.ts # ✅ UTILITAIRES STYLES -│ │ ├── index.ts -│ │ └── cn.ts # Utilitaire className -│ ├── constants/ -│ │ ├── urls.ts # URLs uniquement -│ │ ├── config.ts # Configuration app -│ │ └── index.ts -│ └── hooks/ # ✅ DÉJÀ BIEN ORGANISÉ -└── components/ # ✅ DÉJÀ BIEN ORGANISÉ -``` - -## 🎯 OBJECTIFS POST-MIGRATION - -1. **Code 40% plus léger** (suppression des doublons) -2. **Maintenance simplifiée** (source unique de vérité) -3. **Développement plus rapide** (composants réutilisables) -4. **Moins d'erreurs** (typage strict + conventions) -5. **Performance améliorée** (bundle optimisé) - -## ⚡ COMMANDES UTILES - -```bash -# Vérifier les imports dupliqués -grep -r "commonStyles" src/ | wc -l - -# Identifier le code mort -npx unimported - -# Linter avec corrections automatiques -npm run lint -- --fix - -# Vérifier la taille du bundle -npm run build && npx bundlesize -``` - -## 🔍 TESTS DE VALIDATION - -Après migration, vérifier : -- [ ] Aucune erreur TypeScript -- [ ] Aucune erreur ESLint -- [ ] Rendu visuel identique -- [ ] Performance maintenue/améliorée -- [ ] Hot reload fonctionne -- [ ] Build production réussit - ---- - -**Temps estimé de migration :** 2-3 heures -**Impact :** Critique pour la maintenabilité -**Risque :** Faible si tests effectués diff --git a/banquise-website/src/components/common/Button-new.tsx b/banquise-website/src/components/common/Button-new.tsx deleted file mode 100644 index f3b5bcb..0000000 --- a/banquise-website/src/components/common/Button-new.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import type { IButtonProps } from '../../shared/types'; -import { cn } from '../../shared/utils'; -import { COMPONENTS } from '../../styles/design-system'; - -export const Button: React.FC = ({ - children, - onClick, - variant = 'primary', - size = 'md', - href, - className, - disabled = false, - ...props -}) => { - // Gérer le variant secondary qui n'existe pas dans le design system - const variantClass = variant === 'secondary' - ? 'bg-gradient-to-r from-banquise-gray to-white text-banquise-blue-dark hover:from-white hover:to-banquise-gray' - : COMPONENTS.buttons.variants[variant as keyof typeof COMPONENTS.buttons.variants]; - - const baseClasses = cn( - COMPONENTS.buttons.base, - variantClass, - COMPONENTS.buttons.sizes[size], - disabled && "opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none", - className - ); - - if (href) { - return ( - - {children} - - ); - } - - return ( - - ); -}; diff --git a/banquise-website/src/components/common/Button.tsx b/banquise-website/src/components/common/Button.tsx index 45c8ade..f3b5bcb 100644 --- a/banquise-website/src/components/common/Button.tsx +++ b/banquise-website/src/components/common/Button.tsx @@ -13,9 +13,14 @@ export const Button: React.FC = ({ disabled = false, ...props }) => { + // Gérer le variant secondary qui n'existe pas dans le design system + const variantClass = variant === 'secondary' + ? 'bg-gradient-to-r from-banquise-gray to-white text-banquise-blue-dark hover:from-white hover:to-banquise-gray' + : COMPONENTS.buttons.variants[variant as keyof typeof COMPONENTS.buttons.variants]; + const baseClasses = cn( COMPONENTS.buttons.base, - COMPONENTS.buttons.variants[variant], + variantClass, COMPONENTS.buttons.sizes[size], disabled && "opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none", className diff --git a/banquise-website/src/components/layout/Navigation-fixed.tsx b/banquise-website/src/components/layout/Navigation-fixed.tsx deleted file mode 100644 index e3b2294..0000000 --- a/banquise-website/src/components/layout/Navigation-fixed.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React from 'react'; -import { MobileMenu } from './MobileMenu'; -import banquiseServer from '/src/assets/banquise_server.svg'; -import { URLS, SITE_CONFIG } from '../../shared/constants'; -import { useScrollPosition, useToggle } from '../../shared/hooks'; -import { COMPONENTS, GRADIENTS, LAYOUT, TYPOGRAPHY } from '../../styles/design-system'; -import { styleUtils } from '../../shared/utils/style-utils'; - -export const Navigation: React.FC = () => { - const { value: mobileMenuOpen, toggle: toggleMobileMenu, setFalse: closeMobileMenu } = useToggle(); - const scrolled = useScrollPosition(20); - - return ( - <> - - - {/* Spacer pour compenser la navbar fixed */} -
- - {/* Menu mobile */} - - - ); -}; diff --git a/banquise-website/src/components/layout/Navigation-old.tsx b/banquise-website/src/components/layout/Navigation-old.tsx deleted file mode 100644 index f8d0e12..0000000 --- a/banquise-website/src/components/layout/Navigation-old.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React from 'react'; -import { MobileMenu } from './MobileMenu'; -import banquiseServer from '/src/assets/banquise_server.svg'; -import { URLS, SITE_CONFIG } from '../../shared/constants'; -import { useScrollPosition, useToggle } from '../../shared/hooks'; -import { designSystem, COMPONENTS, GRADIENTS, LAYOUT } from '../../styles/design-system'; -import { styleUtils } from '../../shared/utils/style-utils'; - -export const Navigation: React.FC = () => { - const { value: mobileMenuOpen, toggle: toggleMobileMenu, setFalse: closeMobileMenu } = useToggle(); - const scrolled = useScrollPosition(20); - - return ( - <> - - - {/* Spacer pour compenser la navbar fixed */} -
- - {/* Menu mobile */} - - - ); -}; diff --git a/banquise-website/src/components/sections/AboutSection.tsx b/banquise-website/src/components/sections/AboutSection.tsx index 46a247d..5ff8735 100644 --- a/banquise-website/src/components/sections/AboutSection.tsx +++ b/banquise-website/src/components/sections/AboutSection.tsx @@ -109,7 +109,7 @@ export const AboutSection: React.FC = ({ openAccordion, togg -

+

Tous nos services sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale.

@@ -121,7 +121,7 @@ export const AboutSection: React.FC = ({ openAccordion, togg onToggle={() => toggleAccordion("community")} >
-

+

Rejoignez notre serveur Discord pour rejoindre l'asso, échanger avec nous, obtenir de l'aide et rester informé des dernières nouveautés !

@@ -138,7 +138,7 @@ export const AboutSection: React.FC = ({ openAccordion, togg 🚀 Rejoindre Discord diff --git a/banquise-website/src/shared/utils/style-utils.ts b/banquise-website/src/shared/utils/style-utils.ts index 5855987..b6cbb5e 100644 --- a/banquise-website/src/shared/utils/style-utils.ts +++ b/banquise-website/src/shared/utils/style-utils.ts @@ -91,7 +91,9 @@ export const cssGradients = { * Combine plusieurs styles CSSProperties */ export const combineStyles = (...styles: (CSSProperties | undefined)[]): CSSProperties => { - return styles.reduce((acc, style) => ({ ...acc, ...(style || {}) }), {} as CSSProperties); + return styles + .filter((style): style is CSSProperties => style !== undefined) + .reduce((acc, style) => ({ ...acc, ...style }), {} as CSSProperties); }; /**