ehoandClaude Sonnet 5
43dc3210cd
The folder now equals the layer, as CLAUDE.md decision 2 requires. 33 directories move by git mv (25 flat, plus upload/'s 8 subfolders split across all three layers). 28 distinct @shared/ui/* specifiers rewrite across 73 files, longest-first. Five relative imports inside upload/ become @shared/ui aliases because their sibling now lives in a different layer; two stay relative because both ends stay in the same layer. Four .mdx docs get their seven broken story imports fixed; atomic-design.mdx's page-shell import is untouched, because layout/ does not move. No component, template, story title, or layer-tag comment changes. That is RD-28's job. Verified against the ticket's acceptance commands: the 26 flat directories become exactly 3 layer folders with the counts the ticket names, only three @shared/ui/* prefixes remain (atoms, molecules, organisms), the .mdx import count holds at 7, and the relative-import count inside ui/ drops from 7 to 2 as decision 4 requires. The @shared/ui/ occurrence count moves from 200 to 205: decision 4 mandates turning 5 of those 7 relative imports into @shared/ui/* aliases, which decision 3's "200 before, 200 after" check does not account for. The 5-occurrence gap is exactly the 5 conversions decision 4 names, not a lost or duplicated specifier. npm run ci --full passes: lint, typecheck, dep:check, format, tokens, seam, both apps' + both libraries' tests, both apps' localized build, audit, backend tests, all three generated-artifact drift checks, and both Storybook instances' build + axe-core a11y suite (67+45 suites, 198+112 tests, all green). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
import { Component } from '@angular/core';
|
|
import { HeadingComponent } from '@shared/ui/atoms/heading/heading.component';
|
|
import { HerregistratieWizardComponent } from '@herregistratie/ui/herregistratie-wizard/herregistratie-wizard.component';
|
|
import { ConceptCardComponent } from './concept-card.component';
|
|
import { SNIPPETS } from './snippets.generated';
|
|
import { highlightTs } from './highlight-ts';
|
|
|
|
/** Section 4: form as a state machine, shown as a live state diagram. One tagged union
|
|
drives the UI — the marked state below is the wizard's current one. Composition-only. */
|
|
@Component({
|
|
selector: 'app-concepts-form-machine-section',
|
|
imports: [HeadingComponent, HerregistratieWizardComponent, ConceptCardComponent],
|
|
styles: [
|
|
`
|
|
.machine {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin: 0 0 1rem;
|
|
}
|
|
.node {
|
|
padding: 0.4rem 0.8rem;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--rhc-color-grijs-300);
|
|
font-size: 0.82rem;
|
|
color: var(--rhc-color-grijs-700);
|
|
transition: all 0.15s;
|
|
}
|
|
.node.on {
|
|
background: var(--rhc-color-hemelblauw-100);
|
|
border-color: var(--rhc-color-hemelblauw-500);
|
|
color: var(--rhc-color-hemelblauw-700);
|
|
font-weight: 700;
|
|
/* teaching motion: the active state pops as the wizard transitions (the .node
|
|
transition above animates it; reduced-motion is handled globally). */
|
|
transform: scale(1.06);
|
|
}
|
|
`,
|
|
],
|
|
template: `
|
|
<section class="app-section">
|
|
<app-heading [level]="2">4 · Form als state machine</app-heading>
|
|
<p class="app-lead">
|
|
Eén tagged union stuurt de UI. Speel met de wizard — de gemarkeerde toestand is de huidige.
|
|
</p>
|
|
<div class="app-cols">
|
|
<app-concept-card variant="bad" tag="Fout — losse booleans" [code]="code['machineBad']">
|
|
<p class="app-note">
|
|
Niets verhindert"submitting" mét validatiefouten of een successcherm met errors.
|
|
</p>
|
|
</app-concept-card>
|
|
<app-concept-card
|
|
variant="good"
|
|
tag="Goed — één tagged union"
|
|
[code]="code['machine']"
|
|
[src]="src['machine']"
|
|
>
|
|
<div class="machine">
|
|
@for (n of ['Editing', 'Submitting', 'Submitted', 'Failed']; track n) {
|
|
<span class="node" [class.on]="w.state().tag === n">{{ n }}</span>
|
|
}
|
|
</div>
|
|
<app-herregistratie-wizard #w />
|
|
</app-concept-card>
|
|
</div>
|
|
</section>
|
|
`,
|
|
})
|
|
export class FormMachineSection {
|
|
// Deliberately-wrong illustration (no real source to link — it shows the anti-pattern).
|
|
private readonly machineBad = `submitting = signal(false);
|
|
submitted = signal(false);
|
|
errors = signal<...>({});
|
|
// submitting === true && errors.size > 0 ? 🤷`;
|
|
|
|
/** Highlighted HTML per snippet: `machine` comes from SNIPPETS (extracted from source by
|
|
gen:snippets — it can't drift), `machineBad` is authored above. */
|
|
protected readonly code: Record<string, string> = {
|
|
machineBad: highlightTs(this.machineBad),
|
|
machine: highlightTs(SNIPPETS['machine']),
|
|
};
|
|
|
|
/** The real file the linked snippet is extracted from (shown as a caption). */
|
|
protected readonly src: Record<string, string> = {
|
|
machine: 'registratie/domain/change-request.machine.ts',
|
|
};
|
|
}
|