194 lines
5.1 KiB
Markdown
194 lines
5.1 KiB
Markdown
|
# Plan de Finalisation du Frontend Apps/Web
|
||
|
|
|
||
|
|
**Date:** 2025-01-27
|
||
|
|
**Objectif:** Compléter et finaliser le frontend selon les recommandations du tableau comparatif
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📋 Checklist des Tâches
|
||
|
|
|
||
|
|
### 1. ✅ Corriger les Erreurs TypeScript (~100+)
|
||
|
|
|
||
|
|
#### 1.1. Imports de Composants UI (PRIORITÉ CRITIQUE)
|
||
|
|
- [x] Identifier tous les imports incorrects
|
||
|
|
- [ ] Corriger les imports `Card` → `card`
|
||
|
|
- [ ] Corriger les imports `Button` → `button`
|
||
|
|
- [ ] Corriger les imports `Input` → `input`
|
||
|
|
- [ ] Corriger les imports `Badge` → `badge`
|
||
|
|
- [ ] Corriger les imports `Progress` → `progress`
|
||
|
|
- [ ] Vérifier tous les autres composants UI
|
||
|
|
|
||
|
|
**Fichiers affectés:** ~100+ fichiers dans `src/components/`
|
||
|
|
|
||
|
|
#### 1.2. Types Manquants
|
||
|
|
- [ ] Ajouter propriétés manquantes au type `User`:
|
||
|
|
- `status` (online, offline, dnd, idle)
|
||
|
|
- `roles` (array)
|
||
|
|
- `tier`
|
||
|
|
- `joinDate`
|
||
|
|
- `lastLogin`
|
||
|
|
- [ ] Ajouter propriétés manquantes au type `Track`:
|
||
|
|
- `coverUrl` (ou utiliser `cover_url`)
|
||
|
|
- `plays`
|
||
|
|
- [ ] Ajouter propriétés manquantes au type `Product`:
|
||
|
|
- `type`
|
||
|
|
- `coverUrl`
|
||
|
|
- `isHot`
|
||
|
|
- `author`
|
||
|
|
- [ ] Corriger le type `Checkbox` pour supporter `onCheckedChange`
|
||
|
|
|
||
|
|
#### 1.3. Paramètres avec Type `any` Implicite
|
||
|
|
- [ ] Corriger tous les event handlers (`e: React.ChangeEvent`, etc.)
|
||
|
|
- [ ] Ajouter types explicites pour tous les callbacks
|
||
|
|
- [ ] Corriger les paramètres de fonctions anonymes
|
||
|
|
|
||
|
|
#### 1.4. Variables Non Utilisées
|
||
|
|
- [ ] Supprimer ou utiliser toutes les variables déclarées mais non utilisées
|
||
|
|
- [ ] Corriger les imports non utilisés
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 2. ⏳ Améliorer la Couverture de Tests (Objectif: 80%+)
|
||
|
|
|
||
|
|
#### 2.1. Tests Unitaires
|
||
|
|
- [ ] Tests pour tous les stores Zustand
|
||
|
|
- [ ] Tests pour tous les hooks personnalisés
|
||
|
|
- [ ] Tests pour les utilitaires (`utils/`)
|
||
|
|
- [ ] Tests pour les services (`services/`)
|
||
|
|
- [ ] Tests pour les composants UI critiques
|
||
|
|
|
||
|
|
#### 2.2. Tests d'Intégration
|
||
|
|
- [ ] Tests pour les flux d'authentification
|
||
|
|
- [ ] Tests pour les flux d'upload
|
||
|
|
- [ ] Tests pour les flux de player
|
||
|
|
- [ ] Tests pour les flux de chat
|
||
|
|
|
||
|
|
#### 2.3. Tests E2E
|
||
|
|
- [ ] Parcours utilisateur complets
|
||
|
|
- [ ] Tests de régression
|
||
|
|
- [ ] Tests de performance
|
||
|
|
|
||
|
|
**Outils:** Vitest (unit), Playwright (E2E), MSW (mocking)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 3. ⏳ Migrer Tokens vers Cookies httpOnly (Sécurité)
|
||
|
|
|
||
|
|
#### 3.1. Backend
|
||
|
|
- [ ] Modifier backend Go pour accepter/setter cookies httpOnly
|
||
|
|
- [ ] Implémenter CSRF protection côté backend
|
||
|
|
- [ ] Configurer SameSite cookies
|
||
|
|
|
||
|
|
#### 3.2. Frontend
|
||
|
|
- [ ] Adapter `tokenStorage.ts` pour utiliser cookies
|
||
|
|
- [ ] Modifier `apiClient` pour envoyer cookies automatiquement
|
||
|
|
- [ ] Supprimer localStorage pour refresh token
|
||
|
|
- [ ] Garder access_token en mémoire uniquement
|
||
|
|
- [ ] Tester la persistance de session
|
||
|
|
|
||
|
|
**Impact:** Sécurité améliorée (protection XSS)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 4. ⏳ Documenter Tous les Composants UI
|
||
|
|
|
||
|
|
#### 4.1. Documentation JSDoc
|
||
|
|
- [ ] Ajouter JSDoc à tous les composants UI
|
||
|
|
- [ ] Documenter les props et leurs types
|
||
|
|
- [ ] Documenter les variants disponibles
|
||
|
|
- [ ] Ajouter des exemples d'utilisation
|
||
|
|
|
||
|
|
#### 4.2. Storybook (Optionnel)
|
||
|
|
- [ ] Configurer Storybook
|
||
|
|
- [ ] Créer des stories pour chaque composant
|
||
|
|
- [ ] Documenter les variants visuels
|
||
|
|
|
||
|
|
**Composants à documenter:** 54 composants UI
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 5. ⏳ Optimiser le Bundle Size
|
||
|
|
|
||
|
|
#### 5.1. Analyse
|
||
|
|
- [ ] Analyser le bundle avec `rollup-plugin-visualizer`
|
||
|
|
- [ ] Identifier les dépendances volumineuses
|
||
|
|
- [ ] Identifier les code dupliqué
|
||
|
|
|
||
|
|
#### 5.2. Optimisations
|
||
|
|
- [ ] Code splitting plus agressif
|
||
|
|
- [ ] Lazy load des composants lourds (charts, editors)
|
||
|
|
- [ ] Tree-shaking des dépendances non utilisées
|
||
|
|
- [ ] Optimiser les imports (imports nommés vs default)
|
||
|
|
- [ ] Compresser les assets (images, fonts)
|
||
|
|
|
||
|
|
**Objectif:** Réduire le bundle initial de 20-30%
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🎯 Priorisation
|
||
|
|
|
||
|
|
### Phase 1: Critique (Semaine 1)
|
||
|
|
1. ✅ Corriger les imports UI (en cours)
|
||
|
|
2. Corriger les types manquants
|
||
|
|
3. Corriger les paramètres `any`
|
||
|
|
|
||
|
|
### Phase 2: Important (Semaine 2)
|
||
|
|
4. Nettoyer les variables non utilisées
|
||
|
|
5. Améliorer la couverture de tests (50% → 80%)
|
||
|
|
6. Documenter les composants UI critiques
|
||
|
|
|
||
|
|
### Phase 3: Amélioration (Semaine 3-4)
|
||
|
|
7. Migrer tokens vers cookies httpOnly
|
||
|
|
8. Optimiser le bundle size
|
||
|
|
9. Documentation complète
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📊 Métriques de Succès
|
||
|
|
|
||
|
|
| Métrique | Actuel | Objectif | Statut |
|
||
|
|
|----------|--------|----------|--------|
|
||
|
|
| **Erreurs TypeScript** | ~100+ | 0 | ⏳ En cours |
|
||
|
|
| **Couverture Tests** | ~40% | 80%+ | ⏳ À faire |
|
||
|
|
| **Bundle Size** | ? | -20-30% | ⏳ À analyser |
|
||
|
|
| **Documentation UI** | 0% | 100% | ⏳ À faire |
|
||
|
|
| **Sécurité Tokens** | localStorage | httpOnly | ⏳ À faire |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🚀 Commandes Utiles
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Vérifier les erreurs TypeScript
|
||
|
|
npm run typecheck
|
||
|
|
|
||
|
|
# Lancer les tests
|
||
|
|
npm test
|
||
|
|
npm run test:e2e
|
||
|
|
|
||
|
|
# Analyser le bundle
|
||
|
|
npm run build
|
||
|
|
# Voir bundle-analysis.html dans dist/
|
||
|
|
|
||
|
|
# Linter
|
||
|
|
npm run lint
|
||
|
|
npm run lint:fix
|
||
|
|
|
||
|
|
# Formatter
|
||
|
|
npm run format
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📝 Notes
|
||
|
|
|
||
|
|
- Les erreurs TypeScript bloquent la compilation, donc c'est la priorité #1
|
||
|
|
- Les tests sont importants pour éviter les régressions
|
||
|
|
- La sécurité des tokens est critique pour la production
|
||
|
|
- La documentation améliore la maintenabilité
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Dernière mise à jour:** 2025-01-27
|
||
|
|
|