Aller au contenu principal

Règles React DMV

Statut​

Document de règles projet — v1.0 — relu le 2026-05-10.

Objectif​

Règles spécifiques au développement React dans l'écosystème DMV.

Deux frontends React coexistent avec des stacks différentes :

  • dmv-public — Next.js, TypeScript (.tsx), SSR/SSG.
  • dmv_backoffice — Vite, JSX sans TypeScript (.jsx, pas de tsconfig.json).

Règles strictes (tous frontends)​

  • Ne jamais mettre de logique métier sensible dans un composant frontend — le backend reste la source de vérité.
  • Ne jamais stocker de secrets (tokens d'API tiers, clés privées) dans le code frontend.
  • Ne jamais faire confiance aux données venant du frontend pour les autorisations — toujours vérifier côté API.
  • Ne jamais dupliquer la logique de validation métier côté frontend — elle existe déjà côté API.
  • Ne jamais exposer VITE_SUPABASE_SERVICE_KEY ou équivalent côté client.

Structure à respecter (tous frontends)​

  • Composants : UI pure, sans logique métier complexe.
  • Hooks : encapsuler les appels API, l'état local, les effets de bord.
  • Utilitaires : fonctions pures sans effets de bord.

Principes directeurs (tous frontends)​

  • Mobile-first : concevoir d'abord pour les petits écrans.
  • Composants petits et composables plutôt que monolithiques.
  • SWR ou React Query pour la gestion du cache et des requêtes API.
  • Tailwind CSS utilitaire — pas de CSS personnalisé sauf cas justifiés.

Recommandations (tous frontends)​

  • Préférer les hooks personnalisés pour toute logique réutilisable.
  • Nommer les composants en PascalCase.
  • Gérer les états de chargement et d'erreur explicitement dans les composants.
  • Tester les hooks et les composants critiques.

Spécificités dmv-public (Next.js + TypeScript)​

  • Fichiers en .tsx / .ts.
  • Typage strict TypeScript — pas de any sauf cas exceptionnels justifiés.
  • Types dans des fichiers dédiés (types/, interfaces/), cohérents avec les DTOs backend.
  • Rendu SSR/SSG selon la nature de la page.

Spécificités backoffice (Vite + JSX)​

  • Fichiers en .jsx — pas de TypeScript, pas de tsconfig.json.
  • Router : react-router-dom v7.
  • Build : chunks manuels pour react-vendor et supabase-vendor.
  • Auth : Sanctum token (stocké en mémoire ou localStorage selon la politique).

Anti-patterns à éviter​

  • Prop drilling profond — utiliser Context ou un store si nécessaire.
  • Effets de bord dans le rendu.
  • Fetch direct dans un composant sans hook dédié.
  • État global pour des données locales à un composant.
  • Réimplémenter des règles d'autorisation déjà gérées par l'API.