Atomic-design POC: BIG-register self-service portal (Angular + Rijkshuisstijl)

Atoms/molecules/organisms/templates/pages composing the NL Design System (Utrecht) CSS themed Rijkshuisstijl via @rijkshuisstijl-community tokens. Login -> dashboard -> registration detail, mock JSON over HttpClient, Storybook organized by atomic layer. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-25 14:23:11 +02:00
commit 033d6f0317
58 changed files with 24306 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,48 @@
+# BIG-register Self Service Portal — Atomic Design POC
+
+An Angular POC showing how **atomic design** makes a frontend cheap to build and
+reuse. Domain: the **BIG-register** self-service portal (NL register of healthcare
+professionals). Styled with the **Rijkshuisstijl** via the NL Design System /
+Utrecht component CSS — no hand-written theme.
+
+## The atomic-design story (folder = layer)
+
+```
+src/app/
+  atoms/        button · text-input · heading · link · alert · status-badge
+  molecules/    form-field (label+input+error) · data-row
+  organisms/    site-header · site-footer · login-form · registration-summary
+                registration-table · change-request-form
+  templates/    page-layout (header + content + footer)
+  pages/        login · dashboard · registration-detail
+  core/         models · registration.service (HttpClient → public/mock/*.json)
+```
+
+**Reuse in action** — the same building blocks appear everywhere:
+- `page-layout` wraps all three pages.
+- `site-header` + `site-footer` render on every page.
+- `form-field` + `text-input` + `button` are shared by the login form *and* the
+  change-request form.
+- `status-badge` shows on both the dashboard and the detail page.
+
+Adding a new page is just composing existing organisms inside the layout — see
+`pages/` for how little code each page is.
+
+## Styling / theming
+
+`@rijkshuisstijl-community/design-tokens` + `@rijkshuisstijl-community/components-css`
+provide Rijkshuisstijl-themed Utrecht components as CSS. The theme is applied by the
+`rhc-theme lintblauw` classes on `<body>` (see `src/index.html`). Atoms are thin
+Angular wrappers that apply these CSS classes — so the design system does the visual
+work and we only own the component API.
+
+> POC shortcuts: free **Fira Sans** stands in for the licensed Rijksoverheid font, a
+> text wordmark stands in for the logo, login is mocked, and data is static JSON.
+
+## Run
+
+```bash
+npm install
+npm start          # ng serve → http://localhost:4200  (login → dashboard → detail)
+npm run storybook  # component library, organized by atomic layer
+```