Initial Commit
This commit is contained in:
91
openspec/changes/enterprise-react-admin-forms/proposal.md
Normal file
91
openspec/changes/enterprise-react-admin-forms/proposal.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# OpenSpec Change: enterprise-react-admin-forms
|
||||
|
||||
- **Change ID**: enterprise-react-admin-forms
|
||||
- **Package**: `@suaveplan/react-admin-forms`
|
||||
- **Category**: react
|
||||
- **Target path**: `react/forms/react-admin-forms`
|
||||
- **Status**: PROPOSED
|
||||
- **Date**: 2026-04-24
|
||||
- **Reference spec**: `/mnt/s/web/suaveplan/enterprise/react-admin-forms.md`
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
Deliver `@suaveplan/react-admin-forms` on genesis from scratch at enterprise quality. Comprehensive admin-panel form library: ~30 domain forms across auth, content moderation, events, finance, notifications, payments, security, subscriptions, tenants, users, vaults, and store — all built on React Hook Form + Zod + `@suaveplan/api-schemas`. Ships accessibility-first shared components (`Accessible*` family), `AdminFormsProvider`, `formStorage` abstraction, and per-form Zod schemas. Genesis adds missing form component tests, missing domain stories (events, payment, subscription, tenant, vault, store), removes the `react-translate.mock.ts` mock, and adds Playwright E2E for the auth form suite.
|
||||
|
||||
---
|
||||
|
||||
## Current-state audit (genesis)
|
||||
|
||||
Package does not exist on genesis — fresh build.
|
||||
|
||||
---
|
||||
|
||||
## Available workspace deps on genesis
|
||||
|
||||
| Package | Role |
|
||||
|---|---|
|
||||
| `@suaveplan/error` (`workspace:^`) | `AdminFormError` |
|
||||
| `@suaveplan/api-schemas` (`workspace:^`) | Shared API schemas |
|
||||
| `@suaveplan/react-forms` (`workspace:^`) | Base form primitives |
|
||||
| `@suaveplan/react-translate` (`workspace:^`) | i18n (real, no mocks) |
|
||||
| `@suaveplan/react-ui` (`workspace:^`) | UI primitives |
|
||||
| `zod` (`catalog:forms`) | Per-form schemas |
|
||||
|
||||
External: `@hookform/resolvers catalog:forms`, `lucide-react catalog:ui`, `react-hook-form catalog:forms`, `tslib catalog:build`. React 18 peer.
|
||||
|
||||
---
|
||||
|
||||
## Preserved public API surface
|
||||
|
||||
### Auth forms
|
||||
|
||||
`LoginForm`, `RegisterForm`, `ResetPasswordForm`, `ChangePasswordForm`, `SessionForm`, `UpdateProfileForm`, `UserManagementForm`, `AccountLinkingForm`
|
||||
|
||||
### Content forms
|
||||
|
||||
`EventLoggingForm`, `MessageModerationForm`, `PostModerationForm`
|
||||
|
||||
### Other domain forms
|
||||
|
||||
`EventForm`, `RsvpForm`, `BankAccountForm`, `DeviceTokenForm`, `NotificationConfigForm`, `PushNotificationForm`, `PaymentIntentForm`, `RefundForm`, `RoleManagementForm`, `SiteSecurityForm`, `SubscriptionForm`, `TenantForm`, `FriendManagementForm`, `GroupManagementForm`, `UserSettingsForm`, `VaultForm`, `VaultItemForm`, `ProductForm`
|
||||
|
||||
### Shared components
|
||||
|
||||
13 `Accessible*` primitives, `AdminFormsProvider`, `formStorage`
|
||||
|
||||
---
|
||||
|
||||
## New additions for genesis
|
||||
|
||||
1. **Form component tests** — `.test.tsx` for every form component (not just schemas).
|
||||
2. **Complete Storybook coverage** — events, payment, subscription, tenant, vault, store forms.
|
||||
3. **Real `@suaveplan/react-translate`** — no `react-translate.mock.ts`; tests use real provider.
|
||||
4. **`AdminFormError`** — codes: `ADMIN_FORM_SUBMIT_FAILED`, `ADMIN_FORM_VALIDATION_FAILED`, `ADMIN_FORM_STORAGE_FAILED`.
|
||||
5. **Playwright E2E** — full auth form suite (login, register, password reset).
|
||||
|
||||
---
|
||||
|
||||
## File layout
|
||||
|
||||
```text
|
||||
react/forms/react-admin-forms/
|
||||
package.json
|
||||
tsconfig.json
|
||||
vitest.config.ts
|
||||
src/
|
||||
index.ts
|
||||
core/
|
||||
context/ (AdminFormsProvider)
|
||||
storage/ (formStorage — localStorage/sessionStorage/IndexedDB)
|
||||
shared/
|
||||
components/ (13 Accessible* components)
|
||||
auth/ content/ events/ finance/ notifications/
|
||||
payment/ security/ subscription/ tenant/ users/ vault/ store/
|
||||
(each domain: forms/ + schemas/ + types/)
|
||||
tests/
|
||||
integration.test.tsx
|
||||
e2e/
|
||||
auth-forms.spec.ts
|
||||
```
|
||||
92
openspec/changes/enterprise-react-admin-forms/tasks.md
Normal file
92
openspec/changes/enterprise-react-admin-forms/tasks.md
Normal file
@@ -0,0 +1,92 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user