Compare commits
3 Commits
cf44bda0ce
...
546097434d
| Author | SHA1 | Date | |
|---|---|---|---|
| 546097434d | |||
| 4ba0a020f3 | |||
| 922f9ec8cf |
2
.github/workflows/ci.yml
vendored
2
.github/workflows/ci.yml
vendored
@@ -40,7 +40,7 @@ jobs:
|
||||
- uses: actions/setup-dotnet@v4
|
||||
with:
|
||||
dotnet-version: 10.0.x
|
||||
- run: dotnet test backend/BigRegister.sln
|
||||
- run: dotnet test backend/BigRegister.slnx
|
||||
|
||||
api-client-drift:
|
||||
# The committed typed client must match the backend OpenAPI doc.
|
||||
|
||||
35
README.md
35
README.md
@@ -2,14 +2,15 @@
|
||||
|
||||
A small Angular app that shows how **atomic design** makes a frontend cheap to build,
|
||||
reuse and extend. The domain is the **BIG-register** self-service portal (the Dutch
|
||||
register of healthcare professionals, run by CIBG). It looks like an NL Design System
|
||||
app, branded **Rijkshuisstijl**, and demonstrates a robust **async-state pattern** where
|
||||
the UI can never reach an inconsistent state.
|
||||
register of healthcare professionals, run by CIBG). It is styled with the **CIBG
|
||||
Huisstijl** design system (a customized Bootstrap 5.2 build, vendored — see ADR-0003),
|
||||
and demonstrates a robust **async-state pattern** where the UI can never reach an
|
||||
inconsistent state.
|
||||
|
||||
> Demo / POC — **no real login** (DigiD is faked) and synthetic seed data. The
|
||||
> business rules and data *are* served by a real **ASP.NET Core backend**
|
||||
> (`backend/`) consumed through a generated typed client, so the BFF + DDD design
|
||||
> is demonstrable, not hand-waved. Free **Fira Sans** stands in for the licensed
|
||||
> is demonstrable, not hand-waved. A system-font stack stands in for the licensed
|
||||
> Rijksoverheid font and a text wordmark for the logo.
|
||||
|
||||
---
|
||||
@@ -70,9 +71,9 @@ the folder structure *is* the hierarchy (`src/app/`):
|
||||
| **templates/** | page skeletons that define layout; content is projected in | `page-layout` (header/content/footer chrome), `page-shell` (back-link + heading + intro + content) |
|
||||
| **pages/** | a template filled with real data | `login`, `dashboard`, `registration-detail`, `herregistratie` |
|
||||
|
||||
Each atom is a thin Angular standalone component that applies the Utrecht/Rijkshuisstijl
|
||||
CSS classes — so the design system does the visual work and we only own a small, typed
|
||||
component API.
|
||||
Each atom is a thin Angular standalone component that applies CIBG Huisstijl
|
||||
(Bootstrap 5.2) CSS classes (`btn`, `form-control`, `card`, …) — so the design system
|
||||
does the visual work and we only own a small, typed component API.
|
||||
|
||||
---
|
||||
|
||||
@@ -102,10 +103,14 @@ were all reused. That's the payoff: new screens cost almost nothing.
|
||||
Every page used to repeat its own back-link + heading + intro markup. `page-shell`
|
||||
captures that once; pages now read like `<app-page-shell heading="…" backLink="…">…`.
|
||||
|
||||
**4. Theming is one import.**
|
||||
The look comes from `@rijkshuisstijl-community/design-tokens`. `src/styles.scss` imports
|
||||
the `lintblauw` palette and applies `rhc-theme lintblauw` on `<body>`. Swap the palette
|
||||
import to re-theme the whole app — no component changes.
|
||||
**4. Theming is one stylesheet + a token bridge.**
|
||||
The look comes from **CIBG Huisstijl**, vendored under `public/cibg-huisstijl/` and
|
||||
loaded via a `<link>` in `index.html`; `body.brand--cibg` activates CIBG's
|
||||
robijn/lintblauw palette. `src/styles.scss` is a **token bridge** mapping the app's
|
||||
semantic `--rhc-*` token vocabulary onto CIBG/`--bs-*` values, so components keep
|
||||
referencing tokens — swap the vendored CSS and re-point the bridge to re-theme the
|
||||
whole app, no component changes (ADR-0003). `npm run check:tokens` fails the build
|
||||
on any hardcoded colour outside that bridge.
|
||||
|
||||
---
|
||||
|
||||
@@ -158,8 +163,9 @@ degrade to an instant navigation.
|
||||
|
||||
- Angular 22 (standalone components, signals, `httpResource`, view transitions,
|
||||
control flow `@if/@for`).
|
||||
- Styling: `@rijkshuisstijl-community/{design-tokens,components-css}` (Utrecht + RHC CSS,
|
||||
pre-themed Rijkshuisstijl) — imported in `src/styles.scss`, no hand-written theme.
|
||||
- Styling: **CIBG Huisstijl** (customized Bootstrap 5.2) vendored in
|
||||
`public/cibg-huisstijl/`, loaded via `<link>`; `src/styles.scss` holds the
|
||||
`--rhc-*` → CIBG/`--bs-*` token bridge (ADR-0003). No styling npm dependency.
|
||||
- Data: ASP.NET Core backend (`backend/`, in-memory seeded) exposed via an OpenAPI
|
||||
contract; the FE consumes an **NSwag-generated** typed client (`npm run gen:api`).
|
||||
The `?scenario=` toggle (`shared/infrastructure/scenario.interceptor.ts`) is
|
||||
@@ -179,4 +185,5 @@ We do **not** run `npm audit fix --force`: its proposed fix downgrades Angular 2
|
||||
|
||||
### Deliberately out of scope (POC)
|
||||
Real auth/DigiD, real BRP/DUO upstreams, a database/persisted audit store, i18n,
|
||||
NgRx, licensed Rijkshuisstijl fonts/logo. (The backend itself *is* implemented.)
|
||||
NgRx, licensed RO/Rijks fonts + logo (system-font stack; text wordmark). (The backend
|
||||
itself *is* implemented.)
|
||||
|
||||
2892
documentation.json
2892
documentation.json
File diff suppressed because one or more lines are too long
@@ -2,6 +2,7 @@ import { Meta, Canvas } from '@storybook/addon-docs/blocks';
|
||||
import * as ButtonStories from '../app/shared/ui/button/button.stories';
|
||||
import * as FormFieldStories from '../app/shared/ui/form-field/form-field.stories';
|
||||
import * as PageShellStories from '../app/shared/layout/page-shell/page-shell.stories';
|
||||
import * as DocumentUploadStories from '../app/shared/ui/upload/document-upload/document-upload.stories';
|
||||
|
||||
<Meta title="Foundations/Atomic Design" />
|
||||
|
||||
@@ -16,7 +17,7 @@ atoms — that is the whole point: fewer things to understand, nothing bespoke p
|
||||
['Templates', 'shared/layout', 'shell, page-shell, wizard-shell — the page skeleton', '#1e3a5f'],
|
||||
['Organisms', 'shared/ui/upload/document-upload …', 'self-contained sections that own a bit of behaviour', '#2a5a8a'],
|
||||
['Molecules', 'shared/ui/form-field, async …', 'a label + control + error, grouped', '#3f7cb5'],
|
||||
['Atoms', 'shared/ui/button, text-input …', 'thin wrappers over Utrecht/RHC CSS classes', '#6aa6d8'],
|
||||
['Atoms', 'shared/ui/button, text-input …', 'thin wrappers over CIBG Huisstijl (Bootstrap) CSS classes', '#6aa6d8'],
|
||||
].map(([name, where, why, bg], i) => (
|
||||
<div key={name} style={{ background: bg, color: '#fff', padding: '0.75rem 1rem', borderRadius: '6px', marginLeft: `${i * 1.5}rem` }}>
|
||||
<strong>{name}</strong> <span style={{ opacity: 0.85 }}>— {why}</span>
|
||||
@@ -39,7 +40,7 @@ story below; click through to the sidebar entries to explore every variant.
|
||||
|
||||
### Atom — `button`
|
||||
|
||||
A thin wrapper: we own a typed `variant` input, the RHC CSS owns the pixels.
|
||||
A thin wrapper: we own a typed `variant` input, the CIBG CSS owns the pixels.
|
||||
|
||||
<Canvas of={ButtonStories.Primary} />
|
||||
|
||||
@@ -53,8 +54,9 @@ composes atoms; it adds no new visual primitives of its own.
|
||||
### Organism — `document-upload`
|
||||
|
||||
`shared/ui/upload/document-upload` composes molecules (a file input, status banner,
|
||||
progress bar, chips) into a section that owns real upload behaviour. It has no story yet
|
||||
(Track A backlog); read it at `src/app/shared/ui/upload/document-upload/`.
|
||||
progress bar, chips) into a section that owns real upload behaviour.
|
||||
|
||||
<Canvas of={DocumentUploadStories.Default} />
|
||||
|
||||
### Template — `page-shell`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user