refactor: move libs/shared/src/ui/ into atoms/molecules/organisms (RD-27)

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>
2026-09-05 08:14:10 +02:00
parent 7a8eab917b
commit 43dc3210cd
135 changed files with 438 additions and 213 deletions
@@ -0,0 +1,85 @@
+import { Component, computed, input } from '@angular/core';
+
+// CIBG-GAP EXTENSION: n/a — no vendored inline-chip/tag class; hand-rolled
+// brace-wrapped chip, see cibg-gaps.mdx.
+/** Atom: a highlighted, non-editable placeholder chip for READ-ONLY rendering
+    (preview, diagnostics). Distinct styling for auto-resolvable vs manual fields and
+    for linter error/warning states. Domain-free and presentational — the caller
+    passes label/state; a11y label announces the field name + its resolution status.
+    (The editor renders its own inline chips inside contenteditable; this atom is for
+    everywhere the letter is shown, not edited.) */
+@Component({
+  selector: 'app-placeholder-chip',
+  styles: [
+    `
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.2em;
+        border-radius: var(--rhc-border-radius-sm);
+        padding: 0 0.35em;
+        line-height: 1.6;
+        border: 1px solid transparent;
+        white-space: nowrap;
+      }
+      /* Braces use unicode escapes; a literal { in a CSS content string breaks the style parser. */
+      .chip::before {
+        content: '\\7B';
+        opacity: 0.6;
+        font-weight: 700;
+      }
+      .chip::after {
+        content: '\\7D';
+        opacity: 0.6;
+        font-weight: 700;
+      }
+      .chip--auto {
+        background: var(--rhc-color-cool-grey-100);
+        color: var(--rhc-color-foreground-default);
+      }
+      .chip--manual {
+        background: var(--rhc-color-geel-100);
+        color: var(--rhc-color-foreground-default);
+      }
+      .chip--warning {
+        background: var(--rhc-color-geel-100);
+        border-color: var(--rhc-color-border-default);
+        color: var(--rhc-color-foreground-default);
+      }
+      .chip--error {
+        background: var(--rhc-color-rood-100);
+        border-color: var(--rhc-color-border-default);
+        color: var(--rhc-color-foreground-default);
+      }
+    `,
+  ],
+  template: `<span class="chip" [class]="'chip--' + variant()" [attr.aria-label]="ariaLabel()">{{
+    label()
+  }}</span>`,
+})
+export class PlaceholderChipComponent {
+  label = input.required<string>();
+  autoResolvable = input(false);
+  state = input<'ok' | 'warning' | 'error'>('ok');
+
+  // Copy is localizable-by-default per the shared-UI convention (like <app-async>).
+  autoText = input($localize`:@@placeholderChip.auto:wordt automatisch ingevuld`);
+  manualText = input($localize`:@@placeholderChip.manual:handmatig in te vullen`);
+  warningText = input($localize`:@@placeholderChip.warning:let op`);
+  errorText = input($localize`:@@placeholderChip.error:fout`);
+
+  protected variant = computed(() => {
+    const s = this.state();
+    return s !== 'ok' ? s : this.autoResolvable() ? 'auto' : 'manual';
+  });
+
+  protected ariaLabel = computed(() => {
+    const status = {
+      auto: this.autoText(),
+      manual: this.manualText(),
+      warning: this.warningText(),
+      error: this.errorText(),
+    }[this.variant()];
+    return $localize`:@@placeholderChip.aria:Veld ${this.label()}:label:, ${status}:status:`;
+  });
+}
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { PlaceholderChipComponent } from './placeholder-chip.component';
+
+const meta: Meta<PlaceholderChipComponent> = {
+  title: 'Design System/Atoms/Placeholder Chip',
+  component: PlaceholderChipComponent,
+  render: (args) => ({
+    props: args,
+    template: `<app-placeholder-chip [label]="label" [autoResolvable]="autoResolvable" [state]="state"></app-placeholder-chip>`,
+  }),
+  parameters: {
+    cibgGap: true,
+    docs: { description: { component: 'CIBG-gap extension — see Foundations/CIBG Gap Register.' } },
+  },
+};
+export default meta;
+type Story = StoryObj<PlaceholderChipComponent>;
+
+export const AutoResolvable: Story = {
+  args: { label: 'Naam zorgverlener', autoResolvable: true, state: 'ok' },
+};
+export const Manual: Story = {
+  args: { label: 'Reden besluit', autoResolvable: false, state: 'ok' },
+};
+export const Warning: Story = {
+  args: { label: 'Oud kenmerk', autoResolvable: true, state: 'warning' },
+};
+export const Error: Story = {
+  args: { label: 'Onbekend veld', autoResolvable: false, state: 'error' },
+};