adilallo
60 lines
2.8 KiB
Plaintext
60 lines
2.8 KiB
Plaintext
---
|
||
description: Create-flow structure & design-system reuse guardrails
|
||
globs: app/(app)/create/**/*.{ts,tsx},messages/en/create/**/*.json
|
||
alwaysApply: false
|
||
---
|
||
|
||
# Create-flow guardrails
|
||
|
||
## Folder & file layout
|
||
|
||
- Screens live in `app/(app)/create/screens/<layoutKind>/<StepIdPascal>Screen.tsx`
|
||
where `<layoutKind>` mirrors `CreateFlowLayoutKind` (`card`, `select`,
|
||
`right-rail`, `completed`, …). File + export name is the **step id**, never
|
||
the layout kind (e.g. `DecisionApproachesScreen`, not `RightRailScreen`).
|
||
- Step id ↔ layout kind mapping is declared in
|
||
`app/(app)/create/utils/createFlowScreenRegistry.ts`. Never branch on layout kind
|
||
inside a screen — pick the matching shell (`CreateFlowStepShell` /
|
||
`CreateFlowTwoColumnSelectShell`).
|
||
- Shared create-flow pieces go in `app/(app)/create/components/` (layout shells,
|
||
field composites). Generic primitives go in `app/components/`.
|
||
|
||
## Use the design system — don't hand-roll
|
||
|
||
Reach for these before writing new markup:
|
||
|
||
| Need | Component |
|
||
| --- | --- |
|
||
| Labelled text-area section in a modal | `app/(app)/create/components/ModalTextAreaField` |
|
||
| Toggle-chip row + inline "+ Add" input | `app/(app)/create/components/ApplicableScopeField` |
|
||
| `[– value +]` numeric stepper (± label) | `app/components/controls/Incrementer` / `IncrementerBlock` |
|
||
| Mid-paragraph "expand / see all" link button | `app/components/buttons/InlineTextButton` |
|
||
| Help-icon + label above a control | `app/components/type/InputLabel` (`helpIcon` prop) |
|
||
| Toggle chip (dim-but-clickable) | `Chip` with `state="Disabled" disabled={false}` |
|
||
| Card-click → structured creation modal | `Create` with `backdropVariant="blurredYellow"` |
|
||
|
||
If a screen grows a 2nd inline copy of any pattern above, **extract a shared
|
||
component** rather than duplicate. Local section components inside a screen
|
||
file are a smell once they're used more than once.
|
||
|
||
## Copy & data
|
||
|
||
- Step copy lives in `messages/en/create/<stage>/<step>.json` where
|
||
`<stage>` is one of `community`, `customRule`, `reviewAndComplete`
|
||
(matches Figma stages — see `docs/create-flow.md`). Cross-cutting chrome
|
||
(`footer.json`, `topNav.json`, `draftHydration.json`,
|
||
`templateReview.json`) and shared layout-shell strings (`select.json`,
|
||
`text.json`, `upload.json`) live at the `create/` root. Wire each new
|
||
JSON into `messages/en/index.ts` under the matching `create.<stage>.*`
|
||
namespace (see `localization.mdc`).
|
||
- Modal `sections` defaults are DB-shaped seed placeholders, not UI
|
||
constants — expect replacement with live data.
|
||
- Modal `sections` defaults are DB-shaped seed placeholders, not UI
|
||
constants — expect replacement with live data.
|
||
|
||
## Interaction tracking
|
||
|
||
Every user interaction inside a create-flow screen must call
|
||
`markCreateFlowInteraction()` from `useCreateFlow()` before mutating state —
|
||
progress / footer logic depends on it.
|