atomic-design-poc/docs/project/readable-codebase/RD-22-intake-steps.md

# RD-22 — Split `intake-wizard` into three step components

Status: done
Source: PLAN.md 3c, order step 4

## Why

`intake-wizard.component.ts` measures ~362 effective lines against a limit of 250, and carries
`/* eslint-disable max-lines */`. Nearly all of the excess is one `@switch` with three `@case`
blocks — three screens' worth of markup in one file, where reading any one of them means
scrolling past the other two.

The three cases are already independent. Each reads only the answers, the errors and (for two of
them) the scholing threshold. None needs the store.

## Read first

- `apps/ssp/src/app/registratie/ui/address-fields/address-fields.component.ts:13-18` — **the
  contract to copy, verbatim.** "Pure & presentational — values in via `value`, errors in via
  `errors`, every keystroke out via `fieldChange`. No store, no services, no internal state; the
  container owns the Model and decides what a change means." Two containers already reuse it.
- `intake-wizard.component.ts:72-249` — the `@switch` and its three cases.
- `intake.machine.ts` — `Answers` (21), `lageUren` (52), `SCHOLING_THRESHOLD_DEFAULT` (43), and
  `Errors` at line 63, which decision 2 exports.
- `libs/shared/src/layout/wizard-shell/wizard-shell.component.ts:103-113` — the `<form>` and the
  `<ng-content />` the steps are projected into. Relevant to the first risk.

## Decisions (pre-made, don't relitigate)

1. **Three new files, beside the parent, named `*.step.ts`:**

   | File                 | Class            | Selector                     |
   | -------------------- | ---------------- | ---------------------------- |
   | `buitenland.step.ts` | `BuitenlandStep` | `app-intake-buitenland-step` |
   | `werk.step.ts`       | `WerkStep`       | `app-intake-werk-step`       |
   | `review.step.ts`     | `ReviewStep`     | `app-intake-review-step`     |

   These are the repository's **first** `*.step.ts` files, so this ticket sets the convention
   that RD-23 follows. The `max-lines` glob already includes `step`, so they are guarded from
   the moment they exist.

2. **Inputs down, one narrow output up, `dispatch` never passed down.**

   | Step         | Inputs                                   | Output                                                |
   | ------------ | ---------------------------------------- | ----------------------------------------------------- |
   | `buitenland` | `answers`, `errors`                      | `answerChange: { key: keyof Answers; value: string }` |
   | `werk`       | `answers`, `errors`, `scholingThreshold` | `answerChange` (same shape)                           |
   | `review`     | `answers`, `scholingThreshold`           | `edit: number` (the cursor to jump to)                |

   All inputs are `input.required<T>()`. The parent maps the outputs back to messages:
   `(answerChange)="dispatch({ tag: 'SetAnswer', key: $event.key, value: $event.value })"` and
   `(edit)="dispatch({ tag: 'GaNaarStap', cursor: $event })"`.

3. **`scholingZichtbaar` is not an input — each step derives it.** `werk` and `review` both call
   the pure `lageUren(this.answers(), this.scholingThreshold())` themselves. "Derive, don't
   store" (CLAUDE.md decision 3). The parent's `scholingZichtbaar` computed is deleted; it has
   exactly three references today, all of them in the two blocks that move.

4. **Export `Errors` from `intake.machine.ts:63.`** It is `type Errors = …` without `export`
   today, so a step cannot name its own input type. One word. Do not redeclare the type in the
   step files, and do not widen the input to `Record<string, string>`.

5. **The parent keeps the shell, the store, and everything that touches them.** After the split
   it holds: the store and its effect map, `draftSync`, `IntakePolicyStore`, `restart()`,
   `phase`, `primaryLabel`, `stepTitle`, `stepLabels`, `errorList`, and the `wizardSuccess`
   block. It loses `err`, `set`, `jaNee` and `scholingZichtbaar`, and gains one computed:

   ```ts
   protected errors = computed<Errors>(() => this.answering()?.errors ?? {});
   ```

6. **Prune the parent's `imports:` array.** After the move it needs only `ButtonComponent`,
   `ConfirmationComponent`, `WizardShellComponent` and the three steps. `FormsModule`,
   `FormFieldComponent`, `TextInputComponent`, `RadioGroupComponent`, `AlertComponent`,
   `DataRowComponent` and `ReviewSectionComponent` all move into the steps that use them. A
   stale entry is not an error, so nothing fails if you forget — check the list by hand.

7. **Delete `/* eslint-disable max-lines */` from the parent.** Mandatory, not bookkeeping:
   `reportUnusedDisableDirectives` is `error`, so the two rules pin each other. Still over
   budget → `max-lines` fails. Under budget with the directive left in → unused-directive fails.

8. **No stories for the new steps.** PLAN's corollary: each wizard's existing story already
   mounts every step by seeding the machine. `intake-wizard.stories.ts` is unchanged, and the
   parent's public API does not move.

9. **Move the markup, do not improve it.** Copy each `@case` body into its step's template and
   change only what decisions 2 and 3 require: `err('x')` becomes `errors()['x'] ?? ''` through a
   local helper, `set('x', $event)` becomes an `answerChange.emit(…)`, and `dispatch(GaNaarStap)`
   becomes `edit.emit(n)`. Every `i18n` id, label, placeholder and `fieldId` stays byte-identical.

## Files

- `apps/ssp/src/app/herregistratie/ui/intake-wizard/buitenland.step.ts` (new)
- `apps/ssp/src/app/herregistratie/ui/intake-wizard/werk.step.ts` (new)
- `apps/ssp/src/app/herregistratie/ui/intake-wizard/review.step.ts` (new)
- `apps/ssp/src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts`
- `apps/ssp/src/app/herregistratie/domain/intake.machine.ts` (decision 4, one word)

## Steps

1. Export `Errors` (decision 4).
2. Write the three step components, moving each `@case` body verbatim per decision 9.
3. Replace the `@switch` in the parent with the three elements, wire the outputs per decision 2.
4. Delete `err`, `set`, `jaNee`, `scholingZichtbaar`; add the `errors` computed (decision 5).
5. Prune `imports:` (decision 6) and delete the disable (decision 7).
6. `git add -A`, then run the acceptance commands.
7. Update this ticket's `Status:` to `done` and the README's RD-22 row to `done`.
8. Commit all of it together.

## Acceptance criteria

Measured against the tree before handover. Run after `git add -A` — `git ls-files` does not see
an unstaged new file.

```bash
git ls-files 'apps/ssp/src/app/herregistratie/ui/intake-wizard/*.step.ts' | wc -l   # is 0 -> MUST be 3
```

The markup left the parent, and the store did not follow it into the steps:

```bash
P=apps/ssp/src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts
git grep -c "ngModel" -- $P                        # is 12 -> MUST be 0
git grep -c "eslint-disable max-lines" -- $P       # is 1  -> MUST be 0
git grep -c "dispatch" -- 'apps/ssp/src/app/herregistratie/ui/intake-wizard/*.step.ts' | awk -F: '{s+=$NF} END {print s+0}'   # MUST be 0
```

Decisions 3 and 4 landed:

```bash
git grep -c "export type Errors" -- apps/ssp/src/app/herregistratie/domain/intake.machine.ts   # is 0 -> MUST be 1
git grep -c "scholingZichtbaar" -- $P              # is 3 -> MUST be 0
git grep -c "lageUren" -- 'apps/ssp/src/app/herregistratie/ui/intake-wizard/*.step.ts' | awk -F: '{s+=$NF} END {print s+0}'   # MUST be >= 2
```

The copy did not drift (decision 9) — the `i18n` ids are the same set, only in different files:

```bash
git grep -ho "@@intake\.[a-zA-Z.]*" -- apps/ssp/src/app/herregistratie/ui/intake-wizard/ | sort -u | wc -l   # is 31 -> MUST still be 31
```

```bash
npm run ci --full   # exits 0
```

## Verification

The `@@intake.*` id count is **31** today, measured across the whole `intake-wizard/` directory
so the three new files are included. A dropped or renamed id breaks the second locale, and
`ng build --localize` inside the gate fails on a missing translation — but only for an id that
is _added_, never for one silently _lost_. The count is the only check that catches a loss.

**`--full` is required.** The steps render inside the existing story, and the axe run over that
story is what proves the projected markup still has its labels and error wiring.

**Do not add a line-count command.** `npm run lint` is the exact check; decision 7 explains why.

## Out of scope

- `registratie-wizard`. RD-23 does the same job there, and follows this ticket's naming.
- `herregistratie-wizard`. PLAN: do not split it for symmetry — it is ~248 effective lines with a
  ~100-line template.
- Adding stories for the steps (decision 8).
- Changing any validation, message or `i18n` id.

## Risks

- **`ngModel` and the projected `<form>`.** The shell renders `<form>` and `<ng-content />` in
  its own view, so today's `ngModel` elements are projected into it from the parent's template.
  Angular resolves a directive's injector by the **declaration** site, not the DOM position, so
  those controls already do not register with the shell's `NgForm` — the bindings are one-way
  `[ngModel]` plus `(ngModelChange)`. Moving them one level deeper changes nothing about that.
  **Keep the bindings exactly as they are.** If a form-control warning or error appears, stop and
  report it rather than adding `ngModelOptions` or an `[ngModelGroup]` to silence it.
- **Deleting the disable is mandatory** (decision 7), and its failure message
  ("Unused eslint-disable directive") reads like an unrelated error.
- **The `review` step needs a cursor, not a `dispatch`.** Its two edit buttons jump to cursor 0
  and 1. Emit the number; let the parent build the message.
- **Three `@case` blocks, three files — do not merge them.** `buitenland` and `werk` look
  similar; they are not the same screen and share no markup worth extracting.