Full-width layout, page-shell template, httpResource async states, README

- Fix full-bleed header/footer (align-items:stretch + block hosts; centered
  content column via shared --app-content-max).
- New templates/page-shell (back-link + heading + intro + content, narrow mode);
  all pages refactored to compose it.
- Async state management with native httpResource + <app-async> wrapper that
  renders exactly one of loading/empty/error/loaded (impossible states
  unrepresentable); delayed spinner + skeleton atoms for slow/fast connections.
- Scenario interceptor (?scenario=slow|loading|empty|error) to demo every state.
- Storybook: spinner/skeleton/page-shell/async-states stories.
- README rewritten as a guide (atomic design, reuse benefits, state handling).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude
2026-06-25 14:53:28 +02:00
parent 9b85309002
commit f1f4f982a6
23 changed files with 1888 additions and 225 deletions

View File

@@ -1,15 +1,16 @@
import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';
import { PageLayoutComponent } from '../../templates/page-layout/page-layout.component';
import { PageShellComponent } from '../../templates/page-shell/page-shell.component';
import { LoginFormComponent } from '../../organisms/login-form/login-form.component';
@Component({
selector: 'app-login-page',
imports: [PageLayoutComponent, LoginFormComponent],
imports: [PageShellComponent, LoginFormComponent],
template: `
<app-page-layout>
<app-page-shell heading="Inloggen" width="narrow"
intro="Log in op uw persoonlijke BIG-register omgeving.">
<app-login-form (submit)="login()" />
</app-page-layout>
</app-page-shell>
`,
})
export class LoginPage {