ehoandClaude Sonnet 5
e7156c5132
Restructures into apps/ssp + apps/behandelportal (two Angular projects) plus libs/shared + libs/beheer (cross-app libraries), replacing WP-61's separate sibling repo. That split had already produced real drift: a hand-vendored copy of the backend's OpenAPI doc, a shared/ui+layout tree forked and silently diverging (7 files), and beheer + the styles.scss token bridge duplicated byte-for-byte across both repos. - git mv the SSP's src/app/* into apps/ssp/; fold shared/, beheer/, environments/, the Storybook docs/*.mdx, and styles.scss into libs/shared + libs/beheer (all confirmed identical between the two repos before merging). auth stays deliberately duplicated per ADR-0002 (actor-specific, expected to diverge) - amended there. - One generated API client (libs/shared), no more vendored swagger.json. - .dependency-cruiser split into a base factory + one config per app, and Storybook into .storybook-ssp/.storybook-behandelportal - both forced by the @auth/* alias resolving to different directories per app. - SiteHeaderComponent/ShellComponent gained HEADER_NAV_ITEMS/ HEADER_ADMIN_LINKS/DEBUG_PANEL injection tokens so each app supplies its own nav/admin-links/dev-panel instead of one being hardcoded. - CLAUDE.md, ARCHITECTURE.md, dependencies.md, and ADR-0002 updated; WP-67 backlog entry documents the full decision trail. npm run ci green (lint, dep:check x2, 360 tests across ssp/ behandelportal/shared/beheer, both localized builds, backend tests, snippet + api-client drift); both dev servers, both Storybook instances, and docker compose verified working. The old sibling repo (/home/eho/repos/behandelportal) is left untouched, not deleted. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
57 lines
4.3 KiB
Plaintext
57 lines
4.3 KiB
Plaintext
import { Meta } from '@storybook/addon-docs/blocks';
|
|
|
|
<Meta title="Foundations/CIBG Gap Register" />
|
|
|
|
# CIBG gap register
|
|
|
|
CIBG Huisstijl (ADR-0003) is the design system of record — a component wraps a vendored class
|
|
before it hand-rolls anything. **Grep the vendored CSS
|
|
(`public/cibg-huisstijl/css/huisstijl.min.css`) before adding new surface CSS to a component.**
|
|
When no vendored pattern exists, the component is a **CIBG-gap extension**: allowed, but only
|
|
marked so every deviation from the design system is auditable.
|
|
|
|
## Marker format
|
|
|
|
```ts
|
|
// CIBG-GAP EXTENSION: <closest CIBG concept, or "n/a"> — <why hand-rolled>
|
|
```
|
|
|
|
placed above the `@Component` decorator, plus `parameters: { cibgGap: true }` and a
|
|
"CIBG-gap extension" line in the story's `docs.description.component`.
|
|
|
|
## The register
|
|
|
|
| Component | Closest CIBG concept | Why hand-rolled |
|
|
| --------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| `skeleton` | Laadindicatie | No loading-skeleton class in the vendored build. |
|
|
| `spinner` | Laadindicatie | No loading-spinner class in the vendored build. |
|
|
| `rich-text-editor` | Tekstgebied | No rich-text/WYSIWYG pattern; toolbar buttons still use vendored `.btn-ghost` (WP-10). |
|
|
| `wizard-shell` (error summary only) | Foutmelding | No error-summary/Veldvalidatie list class; renders inside a vendored `.feedback-error` alert. |
|
|
| `application-link` (non-navigating row) | Aanvragen | The vendored `.dashboard-block.applications li a` chain only styles `<a>`; `.static-row` mirrors it from tokens for the informational (non-link) case. |
|
|
| `debug-state` | n/a | Dev-only tool, deliberately off-theme — see the component's own `ponytail:` note. |
|
|
| `status-badge` | n/a | Deliberate custom status dot, not Bootstrap's `.badge` (pill padding/colour don't fit). |
|
|
| `placeholder-chip` | n/a | No vendored inline-chip/tag class. |
|
|
|
|
Not a gap: `confirmation` renders entirely with vendored `.confirmation*` classes (no `styles:
|
|
[...]` block) — its header comment names the pattern, no marker needed. The `upload/` suite
|
|
renders entirely with vendored classes (`.file-picker-drop-area`, `.btn-upload`, …) — reworked
|
|
onto them rather than marked (see WP-11's correction note). `task-list`, `application-list`, and
|
|
`choice-list` each wrap a distinct vendored pattern (Keuzelijst / Aanvragen / Keuzelijst) and name
|
|
it in their own header comment — no marker needed, they don't hand-roll surface CSS.
|
|
|
|
## Hygiene
|
|
|
|
`upload-status-banner` (a 23-line near-identity wrapper over `app-alert` with one consumer) was
|
|
deleted; its consumer (`document-upload`) now uses `<app-alert>` directly.
|
|
|
|
`card` (`.app-card`, a generic white surface) was deleted — it had zero consumers; the grey
|
|
vendored **Datablock** (`app-data-block`) is the single data surface. The convergence verdicts
|
|
for the pairs we deliberately keep separate live in
|
|
[Atomic Design → Convergence decisions](?path=/docs/foundations-atomic-design--docs).
|
|
|
|
## Keeping this register honest
|
|
|
|
No automated check diffs this table against the markers in code (skipped as not worth a CI
|
|
script for a table this small — reviewed at PR time instead, same as any other doc). If markers
|
|
and this table drift, trust the code and fix the table.
|