feat(auth): useAuth + ProtectedRoute + signUp dans auth-client (Sprint 1 étape 2)

2026-04-18 02:09:46 +03:00 · 2026-04-18 02:09:46 +03:00 · 38777796aa
commit 38777796aa
parent 107a37d197
19 changed files with 2620 additions and 191 deletions
--- a/docs/DESIGN_SYSTEM.md
+++ b/docs/DESIGN_SYSTEM.md
@ -0,0 +1,343 @@
+# DESIGN_SYSTEM.md — Expria Frontend
+
+> **Document de référence — Version 1.0 — Sprint 1**
+> Source de vérité unique pour l'identité visuelle, les tokens de design et les primitives UI.
+> Toute décision de DA doit être consignée ici avant d'être implémentée.
+
+---
+
+## 1. Direction artistique — verrouillée
+
+**Nom :** Boréal
+**Positionnement :** institutionnel chaleureux, premium sans flashy, sérieux sans austère.
+**Référence mentale :** Stripe Dashboard, Linear, Notion Desktop — mais réchauffé d'un cran.
+
+### Parti pris fondateurs
+
+| Principe | Décision |
+|---|---|
+| Mode canonique Sprint 1 | **Clair uniquement** (light chaud) |
+| Mode sombre | Prévu Sprint 2+ (tokens écrits dual-theme-ready dès J1) |
+| Fond principal | `#F4F2EC` (off-white calibré, ni froid ni saturé) |
+| Surfaces élevées | Blanc pur `#FFFFFF` pour contraste subtil avec le fond |
+| Bleu de marque | `#1B4FD8` **sacro-saint** en mode clair — aucune variation |
+| Bleu mode sombre | `#7C9BFF` **prévu** pour Sprint 2+ (pattern Apple system colors) |
+| Accent chaleureux | Aucun en Sprint 1 — le bleu porte toute l'intentionnalité |
+| Angles | Rayons généreux mais retenus : 8 / 12 / 16 px |
+| Ombres | Minimales. 1 ombre-card unique, très subtile. Hairlines 1px privilégiées. |
+| Animations | 150–200 ms, `ease-out`, respect de `prefers-reduced-motion` |
+| Icônes | SVG inline dans `shared/ui/icons/` — aucune dépendance externe |
+| Typographie | Plus Jakarta Sans (via `font-family`, fallback système) |
+
+### Ce qu'on refuse explicitement
+
+- Gradients criards (le seul acceptable : aucun).
+- Glassmorphism ou `backdrop-filter` généralisé — réservé à la bottom nav mobile si besoin.
+- Emojis dans les éléments interactifs ou les labels fonctionnels.
+- Ombres lourdes, "drop shadows" style Material Design 2.
+- Plus de 2 niveaux d'élévation visuelle (fond → card → modal).
+- Toute police de display fantaisiste, serif décorative ou condensée.
+- Les motifs SaaS génériques : illustrations 3D, dégradés violet-rose, glass blobs.
+
+---
+
+## 2. Tokens — `src/index.css`
+
+Remplacer intégralement le contenu actuel (`@import 'tailwindcss';`) par le bloc ci-dessous. Tailwind 4 lit automatiquement les tokens déclarés dans `@theme`.
+
+```css
+@import 'tailwindcss';
+
+@theme {
+  /* ----- Brand ------------------------------------------------------- */
+  --color-brand: #1B4FD8;
+  --color-brand-hover: #1744B8;
+  --color-brand-active: #13379C;
+  --color-brand-soft: #E7EDFC;
+  --color-brand-ink: #FFFFFF;
+
+  /* ----- Surfaces (light — Sprint 1) --------------------------------- */
+  --color-bg: #F4F2EC;
+  --color-surface: #FBFAF6;
+  --color-surface-raised: #FFFFFF;
+  --color-surface-sunken: #EEECE4;
+
+  /* ----- Ink (texte) ------------------------------------------------- */
+  --color-ink-primary: #0F1220;
+  --color-ink-secondary: #4A4F5E;
+  --color-ink-tertiary: #8A8F9E;
+  --color-ink-inverse: #FBFAF6;
+
+  /* ----- Borders & dividers ------------------------------------------ */
+  --color-border: #E3E0D6;
+  --color-border-strong: #C9C5B7;
+  --color-border-focus: #1B4FD8;
+
+  /* ----- Feedback ---------------------------------------------------- */
+  --color-success: #1F7A4C;
+  --color-success-soft: #E3F2EA;
+  --color-warning: #B8741A;
+  --color-warning-soft: #F7EEDF;
+  --color-danger: #B8322D;
+  --color-danger-soft: #F7E1DF;
+
+  /* ----- Typographie ------------------------------------------------- */
+  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
+
+  /* Échelle : mobile-first, les tailles desktop se gèrent via utilities Tailwind */
+  --text-xs: 11px;
+  --text-sm: 13px;
+  --text-base: 14px;
+  --text-md: 15px;
+  --text-lg: 17px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 32px;
+  --text-display: 40px;
+
+  /* ----- Rayons ------------------------------------------------------ */
+  --radius-xs: 6px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-pill: 999px;
+
+  /* ----- Ombres ------------------------------------------------------ */
+  --shadow-card: 0 1px 2px rgba(15, 18, 32, 0.04), 0 1px 8px rgba(15, 18, 32, 0.03);
+  --shadow-raised: 0 4px 16px rgba(15, 18, 32, 0.06), 0 1px 2px rgba(15, 18, 32, 0.04);
+  --shadow-focus: 0 0 0 3px rgba(27, 79, 216, 0.18);
+}
+
+/* --------------------------------------------------------------------- */
+/* Globals — reset minimal, fond chaud par défaut                        */
+/* --------------------------------------------------------------------- */
+
+html, body {
+  background: var(--color-bg);
+  color: var(--color-ink-primary);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-variant-numeric: tabular-nums;
+}
+
+*:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+  border-radius: var(--radius-xs);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0ms !important;
+    transition-duration: 0ms !important;
+  }
+}
+
+/* --------------------------------------------------------------------- */
+/* TODO Sprint 2+ — Dark theme (Cadence recalibré)                       */
+/* --------------------------------------------------------------------- */
+/*
+@theme {
+  --color-bg-dark: #0F1320;
+  --color-surface-dark: #171B2B;
+  --color-surface-raised-dark: #1E2338;
+  --color-ink-primary-dark: #E6E4DB;
+  --color-ink-secondary-dark: #9CA0AC;
+  --color-brand-dark: #7C9BFF;
+  --color-brand-hover-dark: #9AB3FF;
+  --color-border-dark: #2A3048;
+}
+*/
+```
+
+### Règles d'usage des tokens
+
+1. **Aucune valeur hexadécimale en dur** dans les composants. Toute couleur passe par un token.
+2. **Nommage sémantique obligatoire.** On écrit `bg-surface`, pas `bg-gray-50`.
+3. Si un cas d'usage exige une teinte hors charte, **le documenter ici avant de l'ajouter**. Pas de token orphelin.
+4. Les tokens marqués `*-dark` ne sont **pas utilisés en Sprint 1**. Leur présence en commentaire est intentionnelle pour faciliter la reprise Sprint 2+.
+
+---
+
+## 3. Typographie
+
+| Usage | Taille | Poids | Tracking | Ligne | Token |
+|---|---|---|---|---|---|
+| Display (NCLC hero) | 40px | 700 | -0.02em | 1.0 | `text-display` |
+| H1 page | 32px | 700 | -0.02em | 1.1 | `text-3xl` |
+| H2 section | 24px | 700 | -0.015em | 1.2 | `text-2xl` |
+| H3 card title | 20px | 700 | -0.01em | 1.3 | `text-xl` |
+| Lead / intro | 17px | 500 | -0.005em | 1.5 | `text-lg` |
+| Body | 14px | 400 | 0 | 1.6 | `text-base` |
+| Body renforcé | 15px | 500 | 0 | 1.55 | `text-md` |
+| Small / meta | 13px | 400 | 0 | 1.5 | `text-sm` |
+| Eyebrow / label | 11px | 600 | 0.1em (uppercase) | 1.4 | `text-xs` |
+
+**Règles :**
+- Tout nombre métier (score 16/20, NCLC 7,5, compteur 3/5) est rendu en `font-variant-numeric: tabular-nums`. Hérité par le body, mais à re-spécifier explicitement sur les tables et listes.
+- `Plus Jakarta Sans` est déclarée en `font-family` avec fallback système. **Aucune webfont chargée** tant qu'on n'a pas validé la stratégie self-hosting (décision reportée).
+- Les chiffres français utilisent la **virgule** comme séparateur décimal (`7,5`, jamais `7.5`).
+
+---
+
+## 4. Primitives UI — Sprint 1
+
+À créer dans `src/shared/ui/` en FSD, une primitive par dossier (`button/`, `card/`, etc.) avec `index.ts` pour l'export.
+
+### Inventaire minimal
+
+| Composant | Variants | Usage dashboard |
+|---|---|---|
+| `Button` | `primary` / `secondary` / `ghost` / `upgrade` | CTA "Nouvelle simulation", "Passer au plan Standard", actions tertiaires |
+| `Card` | `default` / `raised` / `interactive` | Cadre métriques, item simulation, recommandation |
+| `MetricCard` | `default` / `hero` (pour le NCLC) | Bloc NCLC, compteur simulations, dernier score |
+| `ProgressBar` | `default` | Progression vers NCLC 9 |
+| `Badge` | `plan` / `nclc` / `neutral` | Plan actuel dans header, niveau NCLC par simulation |
+| `Sidebar` | — | Nav desktop (≥ 1024px) |
+| `BottomNav` | — | Nav mobile (< 1024px), 4 items max |
+| `PageHeader` | — | Greeting + plan pill |
+| `SectionHeader` | — | Titre de section + action optionnelle |
+
+### Règles d'implémentation
+
+- Chaque primitive **accepte `className`** en plus de ses props typées, pour overrides ponctuels.
+- Chaque primitive **expose ses props via un type exporté** (`ButtonProps`, `CardProps`, etc.).
+- Aucune primitive ne contient de logique métier ou d'appel API. Elles reçoivent tout par props.
+- Les icônes sont passées par une prop `icon` acceptant un `ReactNode`, jamais par nom de string.
+
+---
+
+## 5. Layout dashboard — spécification
+
+Les primitives ci-dessus s'assemblent dans `src/features/dashboard/` et `src/pages/dashboard/`.
+
+### Structure sémantique
+
+```
+<body>
+  <Sidebar />           (≥ 1024px)
+  <main>
+    <PageHeader />      (greeting + plan)
+    <section>
+      <MetricCard hero />    (NCLC estimé + progression)
+      <MetricCard />         (simulations restantes)
+      <MetricCard />         (dernier score)
+    </section>
+    <Button primary />       (Nouvelle simulation)
+    <Button upgrade />       (Passer au plan Standard)
+    <section>
+      <SectionHeader />      (3 dernières simulations)
+      <Card interactive /> × 3
+    </section>
+    <section>
+      <SectionHeader />      (Prochaine étape recommandée)
+      <Card raised />
+    </section>
+  </main>
+  <BottomNav />         (< 1024px)
+</body>
+```
+
+### Breakpoints
+
+| Breakpoint | Comportement |
+|---|---|
+| `< 1024px` | Mono-colonne, `BottomNav` fixe en bas, padding horizontal 20px |
+| `≥ 1024px` | Sidebar 240px + contenu centré 860px max, padding horizontal 32px |
+| `≥ 1440px` | Contenu centré 920px max (pas d'élargissement excessif) |
+
+### Densité verticale
+
+- Padding vertical section : 24px mobile, 32px desktop.
+- Gap inter-cards : 12px mobile, 16px desktop.
+- Marge sous `PageHeader` : 20px mobile, 28px desktop.
+
+---
+
+## 6. Données mock — Sprint 1
+
+Avant branchement API, fournir les données via `src/shared/api/mock/dashboard.ts`. Données crédibles, françaises, alignées sur l'audience réelle.
+
+```typescript
+export const mockDashboard = {
+  user: {
+    firstName: 'Yacine',
+    plan: 'decouverte' as const,
+    planLabel: 'Plan Découverte',
+  },
+  metrics: {
+    nclcEstimated: 7.5,
+    nclcTarget: 9,
+    simulationsUsed: 2,
+    simulationsQuota: 5,
+    lastScore: { value: 16, max: 20, type: 'ecrit' as const },
+  },
+  recentSimulations: [
+    { id: 's-001', type: 'ecrit',  relativeDate: 'il y a 2 jours',    score: 16, max: 20, nclc: 8 },
+    { id: 's-002', type: 'oral',   relativeDate: 'il y a 5 jours',    score: 14, max: 20, nclc: 7 },
+    { id: 's-003', type: 'ecrit',  relativeDate: 'il y a 1 semaine',  score: 15, max: 20, nclc: 7 },
+  ],
+  nextStep: {
+    title: 'Cible une simulation orale cette semaine',
+    body: 'Ton écrit est solide (NCLC 8). L\'oral reste à consolider pour sécuriser ton NCLC 9.',
+    action: { label: 'Démarrer Expression Orale', to: '/simulation/orale' },
+  },
+} as const;
+```
+
+**Règles contenu :**
+- Aucun "Lorem ipsum", aucune date absolue — relatif uniquement (`il y a X jours`).
+- Les prénoms mocks reflètent l'audience : Yacine, Aminata, Kenza, Bilal, Fatou, Kévin (Canada).
+- Les scores suivent une progression crédible (pas de 20/20 ni de 5/20).
+
+---
+
+## 7. Accessibilité — plancher Sprint 1
+
+- Contraste minimum **WCAG AA** sur tous les couples texte/fond (vérifié pour la palette ci-dessus).
+- Tous les éléments interactifs ont un `:focus-visible` avec `--shadow-focus` (halo bleu 3px).
+- Les icônes purement décoratives portent `aria-hidden="true"`.
+- Les icônes fonctionnelles (sans label visible) portent `aria-label`.
+- Les landmarks sémantiques sont utilisés : `<header>`, `<nav>`, `<main>`, `<section>`.
+- Le `BottomNav` mobile respecte la hauteur minimale tap target : **44×44 px** par item.
+
+---
+
+## 8. Dépendances externes — Sprint 1
+
+**Aucune nouvelle dépendance UI n'est ajoutée en Sprint 1.** On n'installe pas `shadcn/ui`, pas `lucide-react`, pas `radix-ui`. Les primitives sont écrites à la main pour deux raisons :
+
+1. On veut maîtriser **exactement** chaque composant (pas d'override Tailwind contre Radix).
+2. Volume fonctionnel Sprint 1 minimal (~9 primitives) : pas d'économie à externaliser.
+
+La porte reste ouverte Sprint 2+ pour `radix-ui` sur les primitives complexes (Dialog, Popover, Dropdown) si besoin justifié dans un ADR.
+
+---
+
+## 9. Journal des décisions DA
+
+| Date | Décision | Contexte |
+|---|---|---|
+| 2026-04-17 | Direction A (Boréal) validée comme canonique | 5 directions explorées (A/B/E/F/G), A et B retenues, A choisie comme base |
+| 2026-04-17 | Fond `#F4F2EC` (V1 calibré) retenu | Test côte-à-côte contre `#F5F3ED` et `#F2EFE6` |
+| 2026-04-17 | Dark mode (Cadence) reporté Sprint 2+ | Tokens écrits dual-theme-ready dès J1 pour éviter réécriture |
+| 2026-04-17 | Bleu `#1B4FD8` sacro-saint en light, `#7C9BFF` prévu pour dark | Pattern Apple system colors |
+| 2026-04-17 | Pas de shadcn/ui en Sprint 1 | Volume faible, maîtrise totale souhaitée |
+
+---
+
+## 10. Hors périmètre Sprint 1
+
+Éléments explicitement **reportés** :
+
+- Dark mode applicatif.
+- Thème haut-contraste (WCAG AAA).
+- Internationalisation (i18n) — Sprint 1 monolingue FR.
+- Animations avancées (scroll-linked, shared element transitions).
+- Illustrations personnalisées / iconographie signature.
+- Self-hosting de la font Plus Jakarta Sans (on reste en fallback système Sprint 1).
+
+Chacun de ces points mérite un ADR dédié quand il sera abordé.
--- a/docs/adr/006-stack-versions-2026.md
+++ b/docs/adr/006-stack-versions-2026.md
@ -1,6 +1,6 @@
 # ADR 006 — Stack frontend : versions 2026 (React 19, Vite 8, TypeScript 6, Tailwind 4, RR7)

-**Statut :** Accepté
+**Statut :** Accepté — mis à jour Sprint 0.5
 **Date :** 2026-04-17
 **Décideur :** Hermann
 **Contexte :** Révélé par l'état des lieux Claude Code au démarrage du Sprint 0 frontend
@ -105,18 +105,110 @@ Garder React 19, Vite 8, TypeScript 6 mais downgrader Tailwind 4 → 3 pour "com

 ### Configuration Tailwind 4

-Pas de `tailwind.config.ts`. La configuration se fait exclusivement dans `src/index.css` via les directives :
+Pas de `tailwind.config.ts`. La configuration se fait exclusivement dans `src/index.css`.
+
+#### Dark mode
+
+Dark mode class-based (`.dark` sur `<html>`) — toggle manuel via ThemeProvider React (Sprint 0.5 étape 2). Configuré via :

 ```css
-@import "tailwindcss";
+@variant dark (&:where(.dark, .dark *));
+```
+
+Si cette syntaxe est rejetée par une future version de Tailwind 4, le fallback est `@custom-variant dark (...)`.
+
+#### Tokens @theme (palette Direction H — validée Sprint 0.5)
+
+```css
+@import 'tailwindcss';
+
+@variant dark (&:where(.dark, .dark *));

@theme {
-  --color-primary: #1B4FD8;           /* Couleur brand Expria */
-  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
-  /* Autres variables de thème */
+  /* Typographie */
+  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    system-ui, sans-serif;
+
+  /* Fonds — bg-canvas = page, bg-surface = cards */
+  --color-canvas:        #EEF2F8;
+  --color-canvas-2:      #E6EBF4;
+  --color-surface:       #FFFFFF;
+  --color-surface-hover: #F8FAFD;
+
+  /* Hairlines */
+  --color-line:          #DDE3ED;
+  --color-line-strong:   #C7D0E0;
+
+  /* Encres */
+  --color-ink-1: #0F172A;   /* titres */
+  --color-ink-2: #1E293B;   /* corps */
+  --color-ink-3: #475569;
+  --color-ink-4: #64748B;
+  --color-ink-5: #94A3B8;   /* désactivé, hints */
+
+  /* Brand */
+  --color-expria:       #1B4FD8;
+  --color-expria-hover: #1741B8;
+  --color-expria-50:    #EEF3FF;
+  --color-expria-100:   #DCE6FF;
+  --color-expria-200:   #B8CDFF;
+  --color-deep:         #0B1F5C;
+  --color-deep-2:       #142B6E;
+
+  /* Sémantiques */
+  --color-success:    #0E9F6E;  --color-success-bg:  #E6F6F0;
+  --color-warning:    #C77A00;  --color-warning-bg:  #FEF3E2;
+  --color-danger:     #C53030;  --color-danger-bg:   #FDECEC;
+
+  /* Rayons */
+  --radius-sm: 6px;  --radius-md: 10px;
+  --radius-lg: 14px; --radius-xl: 18px; --radius-full: 999px;
+
+  /* Ombres */
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
+  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
+}
+
+/* Dark mode overrides */
+.dark {
+  --color-canvas: #0D1220;   --color-canvas-2: #121A2D;
+  --color-surface: #182238;  --color-surface-hover: #1E2A42;
+  --color-line: #27324B;     --color-line-strong: #364363;
+  --color-ink-1: #F1F4FA;    --color-ink-2: #DDE3EF;
+  --color-ink-3: #A8B2C7;    --color-ink-4: #7A8499;  --color-ink-5: #525C73;
+  --color-expria: #5B7FFF;   --color-expria-hover: #6F8EFF;
+  --color-expria-50: rgba(91, 127, 255, 0.12);
+  --color-deep: #060B1A;
+  --color-success: #3DD68C;  --color-success-bg: rgba(61, 214, 140, 0.12);
+  --color-warning: #F5B849;  --color-warning-bg: rgba(245, 184, 73, 0.12);
+  --color-danger:  #F06B6B;  --color-danger-bg:  rgba(240, 107, 107, 0.12);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
 }
 ```

+#### Classes Tailwind générées
+
+Les tokens `@theme` créent des classes utilitaires directement utilisables :
+
+| Token | Classes Tailwind |
+|---|---|
+| `--color-canvas` | `bg-canvas`, `text-canvas`, `border-canvas` |
+| `--color-surface` | `bg-surface`, `text-surface`, `border-surface` |
+| `--color-ink-1` | `text-ink-1`, `bg-ink-1` |
+| `--color-expria` | `bg-expria`, `text-expria`, `border-expria` |
+| `--color-success` | `text-success`, `bg-success` |
+| `--radius-md` | `rounded-md` (override : 10px au lieu de 6px Tailwind) |
+| `--shadow-sm` | `shadow-sm` (override valeurs Tailwind) |
+
+**Convention critique** : `bg-surface` = cards / modals / panels. `bg-canvas` = fond de page. Ne jamais inverser.
+
+#### Typographie
+
+Plus Jakarta Sans chargée via Google Fonts dans `index.html` (preconnect + stylesheet, weights 400/500/600/700). Migration vers auto-hébergement (`@fontsource/plus-jakarta-sans`) après MVP si les performances réseau deviennent un enjeu.
+
 ### shadcn/ui avec Tailwind 4

 La CLI shadcn/ui supporte Tailwind 4 depuis début 2025 :