feat: utilisation de react-hook-form avec la validation zod (#3024)

Author: maxgfr

.claude/rules/automation.md

@@ -55,6 +55,15 @@ Each audit agent scopes itself based on the files actually modified.
 
 ---
 
+## Feature lifecycle (mandatory)
+
+### At the END of every feature
+
+After completing the implementation, run `/verify-feature`.
+The skill loops until zero violations — **never report a task as done with known issues**.
+
+---
+
 ## Automatic quality gates (mandatory)
 
 These gates trigger **automatically** without user input. Do NOT wait to be asked.
@@ -91,7 +100,7 @@ Full checklist (13 RGAA themes) in `.claude/agents/rgaa-auditor/AGENT.md`.
 
 Verify **inline while writing** AND audit all created/modified files after implementation:
 - Queries → Drizzle ORM only (no raw SQL)
-- tRPC inputs → Zod schemas (in `schemas.ts`, not inline)
+- tRPC inputs → Zod schemas from `~/modules/{domain}/schemas.ts` (never inline, never in routers)
 - Protected routes → `protectedProcedure`
 - Mutations → ownership check (`userId` from session)
 - Multi-write → `db.transaction()`
@@ -136,5 +145,6 @@ Skills in `.claude/skills/` can be triggered explicitly with `/command`:
 | `/audit-secu` | Deep OWASP + RGS audit with detailed report |
 | `/create-page` | Create pages from Figma (4-phase parallelized workflow) |
 | `/process-issue` | Process a GitHub issue end-to-end with mandatory RGAA + security gates |
+| `/verify-feature` | Full rules audit (forms, schemas, DRY, a11y, security) — loops until zero issues |
 
 These produce detailed reports and are more thorough than the automatic inline gates.

.claude/rules/code-quality.md

@@ -77,6 +77,13 @@ Keep files under 200 lines. Split at 400. Files over 800 lines are forbidden.
 - **Error handling**: always `try/catch` with explicit user-facing error message
 - **Input validation**: Zod at system boundaries (forms, route params, API body)
 
+## Form conventions
+
+- **No manual form state**: never use multiple `useState` for form fields. Use `useZodForm` from `~/modules/shared`.
+- **No inline validation**: never write manual `if (!field) { setError(...) }` in handleSubmit. Use Zod schemas via `zodResolver`.
+- **No router-level schemas**: never define Zod schemas in `src/server/api/routers/`. Define them in `src/modules/{domain}/schemas.ts` and import from there.
+- **Shared schemas**: the same Zod schema must be used by both the form (`useZodForm`) and the tRPC procedure (`.input()`).
+
 ## Environment variables
 
 Declared and validated in `src/env.js` via `@t3-oss/env-nextjs` + Zod. **Never read `process.env` directly** — always `import { env } from "~/env.js"`.

.claude/rules/trpc-api.md

@@ -5,30 +5,31 @@ paths:
 
 # tRPC API
 
-## Zod schemas in dedicated files
+## Zod schemas in module folders (shared frontend/backend)
 
-Define Zod input/output schemas in a `schemas.ts` file next to the router, not inline in procedure definitions.
-This enables reuse across procedures and in client-side form validation.
+Zod schemas live in `src/modules/{domain}/schemas.ts` — **never** in `src/server/api/routers/`.
+Routers import schemas from modules. Forms use the same schemas via `useZodForm`.
 
 ```ts
-// FORBIDDEN — inline schema
+// FORBIDDEN — inline schema in router
 export const myRouter = createTRPCRouter({
   create: protectedProcedure
     .input(z.object({ siren: z.string(), year: z.number() }))
     .mutation(...)
 });
 
-// CORRECT — schemas.ts
-// schemas.ts
-export const createInput = z.object({ siren: z.string(), year: z.number() });
-
-// router.ts
+// FORBIDDEN — schema in src/server/api/routers/schemas.ts
 import { createInput } from "./schemas";
+
+// CORRECT — schema in src/modules/{domain}/schemas.ts
+import { createInput } from "~/modules/myDomain/schemas";
 export const myRouter = createTRPCRouter({
   create: protectedProcedure.input(createInput).mutation(...)
 });
 ```
 
+Router files must **never** `import { z } from "zod"` — all Zod usage is in module schema files.
+
 ## TRPCError with proper codes
 
 Always throw `TRPCError` (not plain `Error`) with the appropriate HTTP-semantic code:

.claude/skills/verify-feature/SKILL.md

@@ -0,0 +1,192 @@
+---
+name: verify-feature
+description: Full codebase rules audit — runs at END of every feature, loops until zero issues
+---
+
+# /verify-feature
+
+Comprehensive audit of ALL project rules. **Loops automatically** — fix every issue found, re-audit, repeat until zero issues.
+
+## When this runs
+
+- **Automatically at the END of every feature** (before reporting done — see `automation.md § Feature lifecycle`)
+- **Manually** via `/verify-feature` when you want a full check
+
+## Instructions
+
+### Phase 1 — Structural audit (read-only, do it yourself)
+
+Detect changed files:
+```bash
+git diff --name-only HEAD   # uncommitted changes
+```
+
+If no uncommitted changes, use `git diff origin/master...HEAD --name-only` scoped to `packages/app/src/`.
+
+Run ALL checks below on the changed files. If a check is not relevant to the changed files, mark it `SKIP` and move on.
+
+---
+
+#### 1.1 Forms — react-hook-form everywhere (`code-quality.md § Form conventions`)
+
+For every `.tsx` file with `<form` or `useMutation`:
+- `useState` for form field data without `useZodForm` → **VIOLATION**
+- Manual `e.preventDefault()` in `handleSubmit` without `form.handleSubmit` → **VIOLATION** (exception: parameterless confirmation mutations)
+- Dual state: `useState` duplicating data already in `useZodForm` → **VIOLATION**
+- `useState` for UI-only state (saved, errors, modals) → OK
+
+#### 1.2 Schemas — Zod in the right places (`code-quality.md § Form conventions`, `trpc-api.md`)
+
+```bash
+# Must return ZERO — no Zod in routers
+grep -rn "from ['\"]zod['\"]" src/server/api/routers/ --include="*.ts"
+
+# Must return ZERO — no Zod in components
+grep -rn "from ['\"]zod['\"]" src/modules/ --include="*.tsx"
+
+# Must return ZERO — no inline z.object in API routes
+grep -rn "z\.object(" src/app/api/ --include="*.ts"
+```
+
+#### 1.3 Schema quality (`code-quality.md § DRY`)
+
+- No two schemas defining the same shape across files
+- No dead exports (types/schemas exported but never imported)
+- Every `modules/*/schemas.ts` re-exported from its `modules/*/index.ts` barrel
+
+#### 1.4 File size (`code-quality.md § File size`)
+
+```bash
+# Flag files over 400 lines (split required) — BLOCK files over 800
+wc -l $(git diff --name-only HEAD -- '*.ts' '*.tsx') 2>/dev/null | sort -rn | head -20
+```
+
+#### 1.5 Imports (`code-quality.md § Imports`)
+
+```bash
+# Must return ZERO — no deep relative imports
+grep -rn "from ['\"]\.\.\/\.\.\/" src/modules/ --include="*.ts" --include="*.tsx"
+```
+
+#### 1.6 No custom components in src/app/ (`code-quality.md § No custom components`)
+
+```bash
+# Must return ZERO — only route files allowed
+find src/app -name "*.tsx" ! -name "page.tsx" ! -name "layout.tsx" ! -name "loading.tsx" ! -name "error.tsx" ! -name "not-found.tsx" ! -name "global-error.tsx" ! -name "template.tsx" ! -name "default.tsx" ! -name "opengraph-image.tsx" ! -path "*/__tests__/*" | head -20
+```
+
+#### 1.7 TypeScript (`code-quality.md § TypeScript`)
+
+```bash
+# Must return ZERO — no explicit any (excluding tests)
+grep -rn ": any\b\|as any\b" src/modules/ src/server/ --include="*.ts" --include="*.tsx" | grep -v "__tests__" | grep -v "\.test\."
+```
+
+#### 1.8 Environment variables (`code-quality.md § Environment variables`)
+
+```bash
+# Must return ZERO — no direct process.env (excluding allowed files)
+grep -rn "process\.env" src/ --include="*.ts" --include="*.tsx" | grep -v "env.js" | grep -v "instrumentation.ts" | grep -v "next.config" | grep -v "trpc/react.tsx"
+```
+
+#### 1.9 Database (`database-drizzle.md`)
+
+For changed files in `src/server/`:
+- Multi-write without `db.transaction()` → **VIOLATION**
+- `new Date()` at module scope → **VIOLATION**
+
+#### 1.10 React components (`react-components.md`)
+
+For changed `.tsx` files:
+- Inline `<svg>` → **VIOLATION** (blocked by hook)
+- Raw `<img>` → **VIOLATION** (blocked by hook)
+- `.map()` callback over 5 lines of JSX → **VIOLATION**
+
+#### 1.11 Styling (`styling-dsfr.md`)
+
+For changed `.scss` and `.tsx` files:
+- Raw `@media` with width/screen → **VIOLATION**
+- Hardcoded hex/rgb colors → **VIOLATION**
+- `style={` inline → **VIOLATION** (blocked by hook)
+
+#### 1.12 Testing (`testing.md`)
+
+For changed files:
+- New component/function without corresponding test → **WARNING**
+- Test mocks duplicating `src/test/setup.ts` mocks → **VIOLATION**
+- New page without E2E test → **WARNING**
+
+#### 1.13 tRPC & Security (`trpc-api.md`, `automation.md § Gate 3`)
+
+For changed files in `src/server/`:
+- tRPC input without schema from `~/modules/{domain}/schemas` → **VIOLATION**
+- Router file importing `z` from `zod` → **VIOLATION**
+- Mutation without ownership check → **WARNING**
+- Multi-write without `db.transaction()` → **VIOLATION**
+- Raw SQL → **VIOLATION**
+
+#### 1.14 Accessibility (`automation.md § Gate 2`)
+
+For changed `.tsx` files:
+- `<input>` without associated `<label>` → **VIOLATION**
+- `target="_blank"` without `<NewTabNotice />` → **VIOLATION**
+- Decorative icon without `aria-hidden="true"` → **WARNING**
+- Heading hierarchy skipping levels → **VIOLATION**
+- Form groups without `<fieldset>` + `<legend>` → **WARNING**
+
+---
+
+### Phase 2 — Quality gates (matches `automation.md § Automatic quality gates`)
+
+Launch **3 parallel agents** for validation:
+
+1. **Agent: typecheck** — `pnpm typecheck`
+2. **Agent: tests** — `pnpm test`
+3. **Agent: lint+format** — `pnpm lint:check && pnpm format:check`
+
+Then launch **2 parallel agents** for audits (scoped to changed files):
+
+4. **Agent: RGAA** — delegate to `rgaa-auditor` agent (`.claude/agents/rgaa-auditor/AGENT.md`) on all changed `.tsx` files. If no `.tsx` files changed → `SKIP`.
+5. **Agent: Security** — delegate to `security-auditor` agent (`.claude/agents/security-auditor/AGENT.md`) on all changed `.ts/.tsx` files in `server/`, `routers/`, or tRPC. If none → `SKIP`.
+
+---
+
+### Phase 3 — Fix loop
+
+If **any VIOLATION** was found in Phase 1 or Phase 2:
+
+1. Fix all violations
+2. Go back to **Phase 1 step 1** — re-run the full audit
+3. Repeat until **zero violations** across both phases
+
+**Never report completion with known violations.**
+
+---
+
+### Phase 4 — Final report
+
+Only after zero violations remain:
+
+```
+## Feature Verification: PASS ✅
+
+### Rules checked
+| Rule | Files | Status |
+|---|---|---|
+| Forms (react-hook-form) | X files | PASS |
+| Schemas (no inline Zod) | X routers | PASS |
+| File size (< 400 lines) | X files | PASS |
+| Imports (no deep relative) | X files | PASS |
+| TypeScript (no any) | X files | PASS |
+| Env vars (no process.env) | X files | PASS |
+| ... | ... | ... |
+
+### Quality gates
+| Gate | Status |
+|---|---|
+| Typecheck | clean |
+| Tests | X/X passed |
+| Lint + Format | clean |
+| RGAA | PASS / SKIP |
+| Security | PASS / SKIP |
+```

.github/CODEOWNERS

@@ -1,6 +1,7 @@
-# Protect workflow files
-.github/workflows/*.yml @socialgouv/sre
-.github/CODEOWNERS @socialgouv/sre
-.kontinuous/ @socialgouv/sre
+# Default reviewers for all PRs
+* @SocialGouv/admins-egapro
 
-@gary-van-woerkens
+# Protect workflow files
+.github/workflows/*.yml @socialgouv/sre @SocialGouv/admins-egapro
+.github/CODEOWNERS @socialgouv/sre @SocialGouv/admins-egapro
+.kontinuous/ @socialgouv/sre @SocialGouv/admins-egapro

CLAUDE.md

@@ -140,6 +140,7 @@ When creating multiple pages/screens, follow this 4-phase approach:
 | `/audit-secu` | Deep OWASP + RGS security audit with detailed report + auto-fix |
 | `/create-page` | Create pages from Figma (4-phase parallelized workflow) |
 | `/process-issue` | Process a GitHub issue (parent + sub-issues) with mandatory quality gates |
+| `/verify-feature` | Full rules audit — runs auto at END of every feature, loops until zero issues |
 
 ---
 

packages/app/CLAUDE.md

@@ -234,6 +234,50 @@ Never add redundant `role` on semantic elements (`role="navigation"` on `<nav>`
 
 ---
 
+## Forms
+
+### Form state management
+
+All forms must use `react-hook-form` with Zod validation via the shared `useZodForm` hook:
+
+```tsx
+import { useZodForm } from "~/modules/shared";
+import { mySchema } from "~/modules/{domain}/schemas";
+
+const form = useZodForm(mySchema, { defaultValues: { ... } });
+```
+
+**Forbidden patterns:**
+- Multiple `useState` calls for form fields — use `useZodForm` instead
+- Manual imperative validation in `handleSubmit` — Zod handles it
+- Inline Zod schemas in tRPC routers — extract to `modules/{domain}/schemas.ts`
+
+### Shared validation schemas
+
+Zod schemas are the **single source of truth** for both frontend forms and tRPC backend:
+
+```
+src/modules/{domain}/schemas.ts    <- define schemas here
+src/modules/{domain}/index.ts      <- re-export from barrel
+src/server/api/routers/{x}.ts      <- import from ~/modules/{domain}/schemas
+src/modules/{domain}/MyForm.tsx    <- import from ~/modules/{domain}/schemas
+```
+
+Never define schemas in `src/server/api/routers/`. Always in `src/modules/{domain}/schemas.ts`.
+
+### DSFR form integration
+
+- `register()` spreads directly on native `<input>` elements with DSFR classes
+- Use `Controller` for non-standard controls (radios, custom selects)
+- Field errors: `fr-input-group--error` + `<p className="fr-error-text">`
+- Form errors: `fr-alert fr-alert--error` with `aria-live="polite"`
+
+### File uploads
+
+File upload forms keep the `useFileUploadForm` hook pattern. They do not need `react-hook-form` since the file upload lifecycle (select, validate, upload to S3, save metadata via tRPC) is distinct from standard form submission.
+
+---
+
 ## File size
 
 < 200 lines ideal, 200-400 acceptable, > 400 split, > 800 **forbidden**.

packages/app/package.json

@@ -34,6 +34,7 @@
 		"@auth/drizzle-adapter": "^1.11.1",
 		"@aws-sdk/client-s3": "^3.1006.0",
 		"@gouvfr/dsfr": "^1.14.3",
+		"@hookform/resolvers": "^5.2.2",
 		"@react-pdf/renderer": "^4.3.2",
 		"@sentry/nextjs": "^10.39.0",
 		"@socialgouv/matomo-next": "^1.11.0",
@@ -49,6 +50,7 @@
 		"postgres": "^3.4.8",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
+		"react-hook-form": "^7.71.2",
 		"server-only": "^0.0.1",
 		"superjson": "^2.2.6",
 		"zod": "^4.3.6"

packages/app/src/app/api/export/download/route.ts

@@ -1,15 +1,7 @@
-import { z } from "zod";
-
 import { downloadExport } from "~/modules/export/downloadExport";
+import { exportYearQuerySchema } from "~/modules/export/schemas";
 import { db } from "~/server/db";
 
-const querySchema = z.object({
-	year: z
-		.string()
-		.regex(/^\d{4}$/, "Year must be YYYY format")
-		.transform(Number),
-});
-
 /**
  * GET /api/export/download?year=2026
  *
@@ -18,7 +10,7 @@ const querySchema = z.object({
 export async function GET(request: Request) {
 	try {
 		const url = new URL(request.url);
-		const parsed = querySchema.safeParse({
+		const parsed = exportYearQuerySchema.safeParse({
 			year: url.searchParams.get("year") ?? undefined,
 		});