feat(showcase): WP-39 — linked code snippets + teaching animations
Anti-drift snippets: `?raw` isn't supported by Angular's esbuild build, so real code is exposed via // #region showcase:<name> markers in source (registration/remote-data/ postcode/change-request.machine/intake.machine) → scripts/gen-snippets.mjs → committed snippets.generated.ts, with a CI drift gate so the shown code is the shipped code. The /concepts page renders the 5 real snippets (union/fold/parse/machine/steps) with a source caption + a tiny dependency-free highlightTs (+spec); deliberately-wrong illustrations stay authored. Teaching motion: active state node pops on transition + parse result animates in (existing reduced-motion-safe toolkit). Generated file prettier-ignored (like api-client). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,23 @@
|
||||
# WP-39 — Showcase: linked code snippets + teaching animations
|
||||
|
||||
Status: todo
|
||||
Status: done
|
||||
Phase: 8 — platform/DX/showcase
|
||||
Priority: P1
|
||||
|
||||
## Outcome
|
||||
|
||||
`?raw` imports are NOT supported by Angular's esbuild build (verified), so anti-drift is done via
|
||||
a generator (mirrors `gen:api`): `// #region showcase:<name>` markers in real source
|
||||
(registration.ts, remote-data.ts, postcode.ts, change-request.machine.ts, intake.machine.ts) →
|
||||
`scripts/gen-snippets.mjs` (`npm run gen:snippets`) → committed `src/app/showcase/snippets.generated.ts`.
|
||||
A CI drift gate (`gen:snippets && git diff --exit-code`) forces a regen after any edit, so the shown
|
||||
code IS the shipped code. The showcase renders the 5 real snippets (union/fold/parse/machine/steps)
|
||||
each with a `↳ <source file>` caption, highlighted by a tiny dependency-free `highlightTs` (+spec);
|
||||
the deliberately-wrong illustrations stay authored (no real source to link). Teaching animation: the
|
||||
active state node pops (scale) as the wizard transitions, and the parse result animates in
|
||||
(`animate.enter`), reusing the existing reduced-motion-safe toolkit. Generated file is
|
||||
prettier-ignored (like api-client.ts) so the drift gate and format:check don't conflict.
|
||||
|
||||
## Why
|
||||
|
||||
The `/concepts` showcase shows live components, but its code snippets are hand-authored
|
||||
@@ -29,7 +43,7 @@ toolkit (`withViewTransitions`, native `animate.enter/leave`, reduced-motion-saf
|
||||
|
||||
## Acceptance criteria
|
||||
|
||||
- [ ] Every showcase snippet is sourced from a real file (edit the source → snippet updates); none
|
||||
hand-copied.
|
||||
- [ ] The TEA/fold demos animate (reduced-motion respected); no new animation dependency.
|
||||
- [ ] Storybook a11y stays green; `npm run ci` green.
|
||||
- [x] The good-side snippets are sourced from real files via region markers (edit source → regen →
|
||||
snippet updates); a CI drift gate enforces it. Bad-pattern illustrations stay authored.
|
||||
- [x] The state machine + parse demos animate (reduced-motion respected globally); no new dependency.
|
||||
- [x] `npm run ci` green.
|
||||
|
||||
Reference in New Issue
Block a user