suaveplan/openspec/changes/enterprise-react-admin-forms/tasks.md

Tasks: enterprise-react-admin-forms

Change ID: enterprise-react-admin-forms Package: @suaveplan/react-admin-forms Target path: react/forms/react-admin-forms Prerequisite packages on Verdaccio: @suaveplan/error, @suaveplan/api-schemas, @suaveplan/react-forms, @suaveplan/react-translate, @suaveplan/react-ui

---

0. Pre-flight (non-negotiable)

• 0.1 Confirm clean working tree (git status reports nothing) and no in-flight worktrees with uncommitted work (git worktree list then git status in each)
• 0.2 If any worktrees exist under .claude/worktrees/, account for each one: still-active agent, work-pending-merge, or stale-and-prune. Stale worktrees MUST be removed (git worktree remove) before opening a new one — code that has been lost twice on main is the failure mode this guards against.
• 0.3 Confirm the package set in MANIFEST.md matches find packages -maxdepth 3 -name package.json count. Drift here means a prior change archived without regenerating the manifest.

1. Scaffold

• Create directory tree per proposal layout.
• Write package.json at 0.1.0 with "sideEffects": false, exports map.
• Dependencies: @suaveplan/error workspace:^, @suaveplan/api-schemas workspace:^, @suaveplan/react-forms workspace:^, @suaveplan/react-translate workspace:^, @suaveplan/react-ui workspace:^, @hookform/resolvers catalog:forms, lucide-react catalog:ui, react-hook-form catalog:forms, zod catalog:forms, @opentelemetry/api catalog:observability, tslib catalog:build.
• Write tsconfig.json, vitest.config.ts, scripts.

---

2. Error codes

• Define AdminFormError extending SuaveplanError; codes: ADMIN_FORM_SUBMIT_FAILED, ADMIN_FORM_VALIDATION_FAILED, ADMIN_FORM_STORAGE_FAILED, ADMIN_FORM_CONTEXT_MISSING.

---

3. Core

AdminFormsProvider

• Context providing shared formStorage, apiClient, translator to all admin forms.
• useAdminFormsContext() throws AdminFormError(ADMIN_FORM_CONTEXT_MISSING) outside provider.
• Write test + md.

formStorage

• createFormStorage(adapter: 'localStorage' | 'sessionStorage' | 'indexeddb') — save(key, values), load(key), clear(key).
• Throws AdminFormError(ADMIN_FORM_STORAGE_FAILED) on I/O error.
• Write test (in-memory adapter for tests) + md.

---

4. Accessible* shared components (13)

For each (AccessibleInput, AccessibleButton, AccessibleFieldset, AccessibleTab, AccessibleCheckbox, AccessibleSelect, AccessibleProgress, AccessibleStatusMessage, AccessibleErrorMessage, AccessibleLabel, AccessibleRequiredIndicator, AccessibleForm, AccessibleBadge):

• Implement with proper ARIA attributes; useTranslation for any copy.
• Write test (renders, aria attributes present) + md.

---

5. Domain forms (30 forms)

For each form:

• Implement form component + Zod schema. Uses real @suaveplan/react-translate (no mocks).
• Write .test.tsx — render, valid submit, invalid submit shows errors. { timeout: 5000 }.
• Write .stories.tsx — default, validation-errors, loading, playground.
• Write .md.

Priority order (auth first, then content, then others):

1. Auth (8): Login, Register, ResetPassword, ChangePassword, Session, UpdateProfile, UserManagement, AccountLinking.
2. Content (3): EventLogging, MessageModeration, PostModeration.
3. Finance (1): BankAccount.
4. Notifications (3): DeviceToken, NotificationConfig, PushNotification.
5. Payment (2): PaymentIntent, Refund.
6. Security (2): RoleManagement, SiteSecurity.
7. Events (2): Event, Rsvp.
8. Subscription (1), Tenant (1), Users (3: Friend, Group, UserSettings).
9. Vault (2): Vault, VaultItem.
10. Store (1): Product.

---

6. Integration and E2E

• tests/integration.test.tsx — LoginForm with real @suaveplan/react-translate provider; fill + submit → onSubmit called with correct data; fill invalid → errors shown.
• e2e/auth-forms.spec.ts — Playwright: render LoginForm, fill email + password, submit → onSubmit called. Render RegisterForm, fill all fields, submit. Render ResetPasswordForm, enter email, submit.

---

7. Verify and publish

• bunx turbo lint typecheck test --filter=@suaveplan/react-admin-forms — green.
• bunx turbo test:coverage --filter=@suaveplan/react-admin-forms — 100%.
• bun scripts/publish.ts --package @suaveplan/react-admin-forms.
• Archive change folder.