chore(forms): remove unused vee-validate; formalize ref+validators+Zod as canonical pattern

Strict-regex sweep of apps/app/src/ confirms zero VeeValidate usage:
no `from 'vee-validate'` imports, no <Field|Form|ErrorMessage>,
no defineRule(), no useForm(). The 15 prior fuzzy matches were
false positives where /useForm/ matched useFormDraft/useFormSteps/
useFormSchemas/useFormFailures.

Changes:
- Remove `vee-validate` and `@vee-validate/zod` from apps/app/package.json
- Regenerate pnpm-lock.yaml (no other deps shifted)
- CLAUDE.md "Forms": replace VeeValidate prescription with the actual
  ref + @core/utils/validators + Zod-payload-schema pattern that the
  codebase already uses everywhere
- VUEXY_COMPONENTS.md: correct the stale "Registration uses VeeValidate"
  claim (the page actually uses useFormDraft + validators); update the
  "Form validation" reference row
- BACKLOG.md: close VEE-001 with the audit trail

All 319 existing tests still pass; vue-tsc clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-09 03:21:49 +02:00
parent 3616b06206
commit 5c53dcd2e4
5 changed files with 43 additions and 39 deletions

View File

@@ -2016,8 +2016,9 @@ RFC-FORM-BUILDER-UI implementatie begint. Argumenten:
hoge-prioriteit endpoints (`/auth/me`, form-builder list-endpoints, identity-match endpoints).
Verdere composable-uitrol gebeurt organisch als features worden geraakt of toegevoegd.
**Out of scope:** form-input validatie (al via VeeValidate + Zod), WebSocket-validatie
(separaat, COMM-01), publieke API-contracten voor third parties (separaat, DIFF-03).
**Out of scope:** form-input validatie (via `@core/utils/validators` + Zod
payload schemas — see CLAUDE.md "Forms"), WebSocket-validatie (separaat,
COMM-01), publieke API-contracten voor third parties (separaat, DIFF-03).
**Open beslissingen:** codegen toolchain (Scramble-pipeline vs hand-rolled), validation
failure-mode (hard fail vs soft fail per env), per-route opt-out, boundary placement
@@ -2284,3 +2285,21 @@ opgezet.
**Refs:** `apps/app/index.html`, `deploy/nginx/csp-spa.conf`,
`tests/Feature/Security/CspConnectsToObservabilityTest.php`,
RFC-WS-7-OBSERVABILITY.md §3.3, ARCH-OBSERVABILITY.md §7 + §10.4.
### VEE-001 — VeeValidate removed from stack ✅ Resolved
**Status:** Closed in `feat/timetable-session-4` follow-up.
`vee-validate` and `@vee-validate/zod` shipped in `apps/app/package.json`
since Vuexy onboarding but were never imported anywhere in the SPA. A
strict regex sweep (`from 'vee-validate'`, `<Field>`, `<Form>`,
`<ErrorMessage>`, `defineRule(`, `useForm(<args>)`) returned **zero
hits** across `apps/app/src/`. Earlier fuzzy matches were false
positives from `useForm` colliding with Crewli's own `useFormDraft` /
`useFormSteps` / `useFormSchemas` / `useFormFailures` composables.
Removed both packages from `apps/app/package.json`, regenerated
`pnpm-lock.yaml`. Canonical form pattern formalized in `CLAUDE.md`
"Forms" + `dev-docs/VUEXY_COMPONENTS.md` "Form validation" row.
**Refs:** Session 4 follow-up Step 1; `apps/app/src/components/timetable/AddPerformanceDialog.vue` and `apps/app/src/components/sections/CreateShiftDialog.vue` as canonical references.

View File

@@ -430,9 +430,12 @@ Two approaches from Vuexy:
- StatusCard shows different UI per approval status (pending/approved/rejected)
- Conditional tab visibility based on approval status
#### Registration (Multi-step Form with VeeValidate + Zod)
#### Registration (Multi-step Public Form)
**Reference:** `apps/app/src/pages/register/[public_token].vue`
- VForm with VeeValidate field binding + Zod schemas from `@/schemas/`
- VForm + `useFormDraft` composable for state, autosave, idempotency-key drafts
- Per-field validators from `@core/utils/validators` (`emailValidator`, `requiredValidator`)
- Zod schemas in `apps/app/src/schemas/registrationSchema.ts` validate the
outgoing payload at submit time
- Conditional form fields based on event configuration
- Real-time email duplicate checking
- Password creation for new users
@@ -480,7 +483,7 @@ Preferred Vuetify components for common needs. Use these, not custom solutions.
| Menu / dropdown actions | VMenu + VList + VListItem | Custom popover |
| Drag-and-drop lists | `vuedraggable` (external library) | Custom drag logic |
| Rich text editing | TiptapEditor (@core) | Custom editor |
| Form validation | VForm ref + `@core/utils/validators` + API error mapping | (VeeValidate + Zod only in portal registration) |
| Form validation | VForm ref + `@core/utils/validators` + Zod schema for payload + API 422 error map | VeeValidate (removed; was never actually adopted) |
| Multi-step wizard | AppStepper (@core) | Custom step logic |
| Drawer header | AppDrawerHeaderSection (@core) | Custom header |
| Code display | AppCardCode (@core) | Custom code block |