First-attempt commit3a5c6e184only captured the .gitignore change; the pre-commit hook silently dropped the 343 staged moves/deletes during lint-staged's "no matching task" path. This commit re-applies the intended J1 content on top ofbec75f143(which was pushed in parallel). Uses --no-verify because: - J1 only touches .md/.json/.log/.png/binaries — zero code that would benefit from lint-staged, typecheck, or vitest - The hook demonstrated it corrupts pure-rename commits in this repo - Explicitly authorized by user for this one commit Changes (343 total: 169 deletions + 174 renames): Binaries purged (~167 MB): - veza-backend-api/{server,modern-server,encrypt_oauth_tokens,seed,seed-v2} Generated reports purged: - 9 apps/web/lint_report*.json (~32 MB) - 8 apps/web/tsc_*.{log,txt} + ts_*.log (TS error snapshots) - 3 apps/web/storybook_*.json (1375+ stored errors) - apps/web/{build_errors*,build_output,final_errors}.txt - 70 veza-backend-api/coverage*.out + coverage_groups/ (~4 MB) - 3 veza-backend-api/internal/handlers/*.bak Root cleanup: - 54 audit-*.png (visual regression baselines, ~11 MB) - 9 stale MVP-era scripts (Jan 27, hardcoded v0.101): start_{iteration,mvp,recovery}.sh, test_{mvp_endpoints,protected_endpoints,user_journey}.sh, validate_v0101.sh, verify_logs_setup.sh, gen_hash.py Session docs archived (not deleted — preserved under docs/archive/): - 78 apps/web/*.md → docs/archive/frontend-sessions-2026/ - 43 veza-backend-api/*.md → docs/archive/backend-sessions-2026/ - 53 docs/{RETROSPECTIVE_V,SMOKE_TEST_V,PLAN_V0_,V0_*_RELEASE_SCOPE, AUDIT_,PLAN_ACTION_AUDIT,REMEDIATION_PROGRESS}*.md → docs/archive/v0-history/ README.md and CONTRIBUTING.md preserved in apps/web/ and veza-backend-api/. Note: The .gitignore rules preventing recurrence were already pushed in3a5c6e184and remain in place — this commit does not modify .gitignore. Refs: AUDIT_REPORT.md §11
5.1 KiB
5.1 KiB
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)
- 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)tierjoinDatelastLogin
- Ajouter propriétés manquantes au type
Track:coverUrl(ou utilisercover_url)plays
- Ajouter propriétés manquantes au type
Product:typecoverUrlisHotauthor
- Corriger le type
Checkboxpour supporteronCheckedChange
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.tspour utiliser cookies - Modifier
apiClientpour 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)
- ✅ Corriger les imports UI (en cours)
- Corriger les types manquants
- Corriger les paramètres
any
Phase 2: Important (Semaine 2)
- Nettoyer les variables non utilisées
- Améliorer la couverture de tests (50% → 80%)
- Documenter les composants UI critiques
Phase 3: Amélioration (Semaine 3-4)
- Migrer tokens vers cookies httpOnly
- Optimiser le bundle size
- 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
# 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