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>
61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
import { Component, computed, signal } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { HeadingComponent } from '@shared/ui/atoms/heading/heading.component';
|
|
import { TextInputComponent } from '@shared/ui/atoms/text-input/text-input.component';
|
|
import { parsePostcode } from '@registratie/domain/value-objects/postcode';
|
|
import { ConceptCardComponent } from './concept-card.component';
|
|
import { SNIPPETS } from './snippets.generated';
|
|
import { highlightTs } from './highlight-ts';
|
|
|
|
/** Section 3: parse, don't validate. After parsing, the TYPE remembers the value is valid.
|
|
Composition-only; owns its own postcode demo. */
|
|
@Component({
|
|
selector: 'app-concepts-parse-section',
|
|
imports: [FormsModule, HeadingComponent, TextInputComponent, ConceptCardComponent],
|
|
template: `
|
|
<section class="app-section">
|
|
<app-heading [level]="2">3 · Parse, don't validate</app-heading>
|
|
<p class="app-lead">Na het parsen onthoudt het <em>type</em> dat de waarde geldig is.</p>
|
|
<div class="app-cols">
|
|
<app-concept-card
|
|
tag="Smart constructor → Result"
|
|
[code]="code['parse']"
|
|
[src]="src['parse']"
|
|
>
|
|
<app-text-input
|
|
inputId="pc"
|
|
[ngModel]="raw()"
|
|
(ngModelChange)="raw.set($event)"
|
|
name="pc"
|
|
placeholder="Typ een postcode, bijv. 1234 AB"
|
|
/>
|
|
</app-concept-card>
|
|
@let r = parsed();
|
|
<app-concept-card [variant]="r.ok ? 'good' : 'bad'" [tag]="r.ok ? 'ok' : 'err'">
|
|
@if (r.ok) {
|
|
<div animate.enter="app-item-enter">
|
|
<pre class="app-code">Postcode ="{{ r.value }}"</pre>
|
|
<p class="app-note">
|
|
Een gevalideerde <code>Postcode</code> is een ander type dan een ruwe string.
|
|
</p>
|
|
</div>
|
|
} @else {
|
|
<div animate.enter="app-item-enter">
|
|
<pre class="app-code">{{ r.error }}</pre>
|
|
</div>
|
|
}
|
|
</app-concept-card>
|
|
</div>
|
|
</section>
|
|
`,
|
|
})
|
|
export class ParseSection {
|
|
raw = signal('');
|
|
parsed = computed(() => parsePostcode(this.raw()));
|
|
|
|
protected readonly code: Record<string, string> = { parse: highlightTs(SNIPPETS['parse']) };
|
|
protected readonly src: Record<string, string> = {
|
|
parse: 'registratie/domain/value-objects/postcode.ts',
|
|
};
|
|
}
|