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>
This commit is contained in:
eho
2026-09-05 08:14:10 +02:00
co-authored by Claude Sonnet 5
parent 7a8eab917b
commit 43dc3210cd
135 changed files with 438 additions and 213 deletions
@@ -0,0 +1,59 @@
import { Component, OnDestroy, OnInit, computed, input, signal } from '@angular/core';
// CIBG-GAP EXTENSION: Laadindicatie — no vendored loading-skeleton class exists
// (verified absent from huisstijl.min.css); hand-rolled shimmer, see cibg-gaps.mdx.
/** Atom: skeleton placeholder (grey shimmer). Delay-gated so it never flashes
on fast responses. Render `count` lines shaped roughly like the content. */
@Component({
selector: 'app-skeleton',
styles: [
`
:host {
display: block;
}
.sk {
background: linear-gradient(
90deg,
var(--rhc-color-cool-grey-200) 25%,
var(--rhc-color-cool-grey-100) 37%,
var(--rhc-color-cool-grey-200) 63%
);
background-size: 400% 100%;
animation: sh 1.4s ease infinite;
border-radius: var(--rhc-border-radius-md);
margin-block-end: var(--rhc-space-max-lg);
}
@keyframes sh {
0% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
`,
],
template: `
@if (visible()) {
@for (l of lines(); track $index) {
<div class="sk" aria-hidden="true" [style.width]="width()" [style.height]="height()"></div>
}
}
`,
})
export class SkeletonComponent implements OnInit, OnDestroy {
width = input('100%');
height = input('1rem');
count = input(1);
delay = input(150);
protected visible = signal(false);
protected lines = computed(() => Array(this.count()).fill(0));
private timer?: ReturnType<typeof setTimeout>;
ngOnInit() {
this.timer = setTimeout(() => this.visible.set(true), this.delay());
}
ngOnDestroy() {
clearTimeout(this.timer);
}
}