adilallo/feature/PageTemplateImplementations #42

2026-04-04T16:55:27Z

an.di commented

2026-04-04 16:55:27 +00:00

Create rule flow: page templates, navigation, and design system support

Overview

This branch implements the CommunityRule “create rule” full-screen flow end-to-end: ordered step routes under /create/*, shared layout with CreateFlowTopNav / CreateFlowFooter, CreateFlowContext for draft state, and URL-driven navigation via useCreateFlowNavigation and flowSteps. It also lands supporting design-system components (HeaderLockup, Card, Upload, CardStack, CommunityRuleDocument, InfoMessageBox, DecisionMakingSidebar, Scrollbar, Tag, etc.), Figma-aligned prop normalization updates, MultiSelect add-button styling and Custom chip flow for “add” actions, communication copy in messages/en/create, and logo/asset restructuring. Marketing and dev preview surfaces are updated where the flow or logo is exposed.

Changes

Create flow

Step pages: informational, text, select, upload, review, cards, right-rail, confirm-stakeholders, final-review, completed; dynamic [step] validation against FLOW_STEP_ORDER.
Flow order includes confirm-stakeholders immediately before final-review.
Layout: full-height chrome, progress bar, Back / Next (and step-specific primary labels, e.g. confirm stakeholders / finalize).
State: CreateFlowContext (draft persistence helpers), navigation hook, flowSteps helpers.
Select / confirm-stakeholders: MultiSelect with Custom chip on add; stakeholders confirm to Selected; select template adds Unselected options from custom input.

Components and tokens

New/updated primitives and composites as listed in implementation (HeaderLockup, NumberedList, Upload, Card + CardStack, RuleCard/Create modal behavior, Chip/MultiSelect, create-flow chrome, etc.).
lib/propNormalization: expanded normalizers for form controls and Figma PascalCase compatibility.
Tailwind / CSS variables where added for create flow and components.

Integration and assets

TopNav entry into create flow; Logo moved to asset module and public path updated.
messages/en: create communication strings wired through app context where used.

Tests & Storybook (this PR)

Tests: Review-style smoke tests for informational, text, select, upload, confirm-stakeholders; flowSteps unit tests; InfoMessageBox and DecisionMakingSidebar at Tag-level depth; TypeScript/test fixes (WebVitals dynamic import cast, vitest React setup, BlogPost test fixtures, unused React imports).
Storybook: Pages/Create Flow/* for each static step (mirror Review fullscreen + Desktop/Mobile); Completed uses teal-aligned decorator; Components/Utility stories for InfoMessageBox and DecisionMakingSidebar. Dynamic [step] intentionally omitted (no existing Storybook + use(params) pattern).

Housekeeping

WebVitals container typing; vitest setup; blog-related test fixture completeness.

Screenshots

How to Test

npm install if needed, then npm run dev.
From the marketing TopNav, start Create rule (or open /create/informational).
Walk the flow: Next / Back; confirm URLs update per step.
Select and Confirm stakeholders: Add → custom chip (“Type to add”) → confirm/cancel; MultiSelect add control uses white label + brand “+”; selected chips stay yellow-filled.
Save & Exit / draft behavior as implemented in context.
npm run lint, npm run test, npm run storybook:build, npm run build.
Storybook: Pages/Create Flow and Components/Utility/InfoMessageBox, DecisionMakingSidebar at desktop and mobile viewports.

Notes

Some step content and document data remain placeholders for future product/API wiring.
Run Playwright / visual regression locally if your pipeline depends on them.
Optional before merge: rebase or merge main into this branch if it has diverged.

# Create rule flow: page templates, navigation, and design system support ## Overview This branch implements the **CommunityRule “create rule” full-screen flow** end-to-end: ordered step routes under `/create/*`, shared layout with **CreateFlowTopNav** / **CreateFlowFooter**, **CreateFlowContext** for draft state, and **URL-driven navigation** via `useCreateFlowNavigation` and `flowSteps`. It also lands supporting **design-system components** (HeaderLockup, Card, Upload, CardStack, CommunityRuleDocument, InfoMessageBox, DecisionMakingSidebar, Scrollbar, Tag, etc.), **Figma-aligned prop normalization** updates, **MultiSelect** add-button styling and **Custom** chip flow for “add” actions, **communication** copy in `messages/en/create`, and **logo/asset** restructuring. Marketing and dev preview surfaces are updated where the flow or logo is exposed. ## Changes ### Create flow - Step pages: informational, text, select, upload, review, cards, right-rail, **confirm-stakeholders**, final-review, completed; dynamic `[step]` validation against `FLOW_STEP_ORDER`. - **Flow order** includes `confirm-stakeholders` immediately before `final-review`. - **Layout:** full-height chrome, progress bar, Back / Next (and step-specific primary labels, e.g. confirm stakeholders / finalize). - **State:** `CreateFlowContext` (draft persistence helpers), navigation hook, `flowSteps` helpers. - **Select / confirm-stakeholders:** MultiSelect with **Custom** chip on add; stakeholders confirm to **Selected**; select template adds **Unselected** options from custom input. ### Components and tokens - New/updated primitives and composites as listed in implementation (HeaderLockup, NumberedList, Upload, Card + CardStack, RuleCard/Create modal behavior, Chip/MultiSelect, create-flow chrome, etc.). - **`lib/propNormalization`:** expanded normalizers for form controls and Figma PascalCase compatibility. - **Tailwind / CSS variables** where added for create flow and components. ### Integration and assets - **TopNav** entry into create flow; **Logo** moved to asset module and public path updated. - **`messages/en`:** create communication strings wired through app context where used. ### Tests & Storybook (this PR) - **Tests:** Review-style smoke tests for informational, text, select, upload, confirm-stakeholders; `flowSteps` unit tests; **InfoMessageBox** and **DecisionMakingSidebar** at Tag-level depth; TypeScript/test fixes (WebVitals dynamic import cast, vitest `React` setup, `BlogPost` test fixtures, unused `React` imports). - **Storybook:** `Pages/Create Flow/*` for each static step (mirror **Review** fullscreen + Desktop/Mobile); **Completed** uses teal-aligned decorator; **Components/Utility** stories for InfoMessageBox and DecisionMakingSidebar. Dynamic `[step]` intentionally omitted (no existing Storybook + `use(params)` pattern). ### Housekeeping - WebVitals container typing; vitest setup; blog-related test fixture completeness. ## Screenshots <img width="1375" alt="Screenshot 2026-04-04 at 10.53.06 AM.png" src="attachments/2acfebfe-2665-4fa3-8bdb-6e99ebb4a921"><img width="1375" alt="Screenshot 2026-04-04 at 10.53.38 AM.png" src="attachments/4b40b7a5-c261-41fe-833d-b669fb555b5d"><img width="1375" alt="Screenshot 2026-04-04 at 10.53.52 AM.png" src="attachments/28b44425-fa9a-499b-b652-f56f63a94645"><img width="1375" alt="Screenshot 2026-04-04 at 10.54.09 AM.png" src="attachments/d21329c9-fd8a-4a81-9ff9-200c73f1ff1e"> ## How to Test 1. `npm install` if needed, then `npm run dev`. 2. From the marketing **TopNav**, start **Create rule** (or open `/create/informational`). 3. Walk the flow: **Next** / **Back**; confirm URLs update per step. 4. **Select** and **Confirm stakeholders:** **Add** → custom chip (“Type to add”) → confirm/cancel; MultiSelect add control uses white label + brand “+”; selected chips stay yellow-filled. 5. **Save & Exit** / draft behavior as implemented in context. 6. `npm run lint`, `npm run test`, `npm run storybook:build`, `npm run build`. 7. **Storybook:** **Pages/Create Flow** and **Components/Utility/InfoMessageBox**, **DecisionMakingSidebar** at desktop and mobile viewports. ## Notes - Some step content and document data remain **placeholders** for future product/API wiring. - Run Playwright / visual regression locally if your pipeline depends on them. - Optional before merge: **rebase or merge `main`** into this branch if it has diverged.

Screenshot 2026-04-04 at 10.53.06 AM.png

295 KiB

Screenshot 2026-04-04 at 10.53.38 AM.png

204 KiB

Screenshot 2026-04-04 at 10.53.52 AM.png

378 KiB

Screenshot 2026-04-04 at 10.54.09 AM.png

397 KiB

an.di added 10 commits 2026-04-04 16:55:28 +00:00

Informational and text templates 2e1538770c

Select and upload templates 4bb6fe0a89

Review template f60df15c2b