Architect-review remediation: enforce conventions, prod-safe tooling, one form idiom, resilience seams
Acts on the showcase review. Four workstreams; all tests green (npm run lint, 70 FE tests, ng build, 33 backend tests). Enforcement + CI: - eslint.config.mjs bans `any` and enforces layer/context boundaries (domain ≠ Angular; herregistratie → registratie → shared, auth → shared); `npm run lint` added; ajv 6 scoped to ESLint via nested override. - .github/workflows/ci.yml: FE lint+check:tokens+test+build, backend dotnet test, and an API-client drift check. One form idiom (the headline finding): - change-request-form converged onto the wizard pattern — change-request.machine.ts (Model/Msg/reduce + value objects) + submit-change-request.ts (Result) + a real POST /api/v1/change-requests (server re-validates). Spec + story added; the detail page no longer holds an ad-hoc success signal. Resilience/observability seam: - api-client.provider.ts: request timeout, X-Correlation-Id, Idempotency-Key for writes; comments naming the retry/auth seams. - Backend logs correlation id + a no-PII submit-audit line; /api/v1 prefix + backward-compat note; client regenerated. Quick wins: - Dev tooling excluded from prod: scenario.interceptor wired only under isDevMode() (?scenario= inert in prod); debug panel @if(isDev) (tree-shaken out). - src/environments + apiBaseUrl into provideApiClient (angular.json fileReplacements). - Backend /health + /health/ready. - Debug view PII-minimised (redactProfile: name/address/DOB redacted, BIG masked). - IntakePolicyAdapter (removes inline resource in the intake wizard). - README de-staled; CLAUDE.md gains EN/NL + forms-one-idiom + lint/CI notes. - Stories: text-input, link, data-row, site-header, site-footer, change-request-form. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
24
CLAUDE.md
24
CLAUDE.md
@@ -17,6 +17,7 @@ through an NSwag-generated typed client. The FE renders the backend's decisions.
|
||||
```bash
|
||||
npm start # ng serve (proxies /api → backend) → http://localhost:4200
|
||||
npm test # vitest
|
||||
npm run lint # eslint — enforces `any`-free code + import/layer boundaries
|
||||
npm run build # ng build (must stay green)
|
||||
npm run storybook # component library by atomic layer
|
||||
npm run gen:api # regenerate the typed client from the backend OpenAPI doc
|
||||
@@ -114,16 +115,29 @@ not heavy component tests.
|
||||
|
||||
- Standalone components only; no NgModules. Signal inputs (`input()`), `inject()` over
|
||||
constructor DI (constructor only for `effect()`/template-ref injection).
|
||||
- Angular-native control flow `@if/@for`; native `httpResource` for fetching;
|
||||
`withViewTransitions()` for page transitions (header/footer have stable
|
||||
`view-transition-name`, excluded from the fade).
|
||||
- Angular-native control flow `@if/@for`; fetch via `resource({ loader })` over the
|
||||
generated `ApiClient` inside an `infrastructure/*.adapter.ts` (one place HTTP lives),
|
||||
with a `parse*` boundary; `withViewTransitions()` for page transitions (header/footer
|
||||
have stable `view-transition-name`, excluded from the fade).
|
||||
- **Naming:** shared/reusable UI is **English** (language-agnostic: `button`,
|
||||
`wizard-shell`); domain contexts are **Dutch** (`registratie`, `herregistratie`,
|
||||
`*.machine.ts`). Pick the language by which side of the seam the code is on.
|
||||
- **Forms = one idiom.** Any form with validation or submission uses a `*.machine.ts`
|
||||
(Model/Msg/reduce) + value objects + a `submit-*` command returning `Result` — the
|
||||
same shape as the wizards, whether it's one step or many. Don't hand-roll mutable
|
||||
fields + ad-hoc error signals.
|
||||
- Routes: lazy `loadComponent`, persistent `ShellComponent` parent, `canActivate:
|
||||
[authGuard]` on protected routes (`app.routes.ts`).
|
||||
- Theming is one import — `src/styles.scss` pulls the RHC palette; no hand-written theme.
|
||||
- Scenario toggle: `?scenario=slow|loading|empty|error` on data pages
|
||||
(`scenario.interceptor.ts`) to see every async state.
|
||||
- Scenario toggle (**dev-only**, not wired in prod builds): `?scenario=slow|loading|empty|error`
|
||||
on data pages (`scenario.interceptor.ts`) to see every async state.
|
||||
- Prettier; `.editorconfig`. tsconfig: `noImplicitReturns`,
|
||||
`noPropertyAccessFromIndexSignature`, `noFallthroughCasesInSwitch`, `isolatedModules`.
|
||||
- **Enforced, not just hoped-for:** `npm run lint` (`eslint.config.mjs`) fails the build
|
||||
on `any` and on illegal imports — `domain/` importing Angular, or a context importing
|
||||
"upward" (the `herregistratie → registratie → shared`, `auth → shared` direction).
|
||||
CI (`.github/workflows/ci.yml`) runs lint + `check:tokens` + test + build, backend
|
||||
`dotnet test`, and an API-client drift check.
|
||||
|
||||
## Adding a feature (recipe)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user