Create flow cleanup: edit published rules, custom method cards, review polish, share/export & draft fixes #50

2026-05-09T02:36:40Z

an.di commented

2026-05-09 02:36:40 +00:00

Overview

This branch modernizes the create flow end-to-end: edit-rule from a published rule, custom method cards (wizard-style field blocks, customize/duplicate/remove via modal chrome), final review / core-values parity with other facets (kebab, read-only until customize), completed and published hydration so custom selections and field blocks show correctly after save and on the completed page, share & export on the completed shell, server uploads for create-flow assets, template facet routing and recommendation wiring, and profile draft behavior so managing a completed rule does not wipe unrelated in-progress server drafts. It also includes navigation/progress/registry cleanup, Storybook coverage for new UI, and expanded unit/integration tests across lib/create, API routes, and screens.

Primary goals:

Ship a cohesive custom rule experience (methods + values + review) aligned with existing modal and i18n patterns.
Ensure published → edit → completed preserves user-authored method cards and display sections.
Fix profile draft listing when users bounce between manage completed and continue draft.

Changes

Create flow core: CreateFlowLayoutClient, CreateFlowContext, flowSteps, createFlowPaths, createFlowScreenRegistry, progress proportion updates, prepareFreshCreateFlowEntry, runCompletedStepExit, top nav and screen shell composition.
Edit published / completed: Hydration from published documents (publishedDocumentToCreateFlowState, isPublishedRuleHydratePatchIncomplete), display merge from methodSelections and custom field blocks (publishedDocumentToDisplaySections, ruleSectionsFromMethodSelections, buildPublishPayload); CompletedScreen and completed share/export hook.
Custom method cards: CustomMethodCardWizard (container/view), field block list with HTML5 reorder, CustomMethodCardModalBody, summary component, duplicateMethodCardModalDraft, methodCardCustomizeSession, usesWizardFieldBlocksModalBody, mergePresetMethodsWithCustom, removeMethodCardFromFacetSelection, kebab menu helper and MethodCardCustomizeModalHeader; method screens (communication, membership, decision, conflict) refactored for custom flows, deck ordering (useMethodCardDeckOrdering, methodCardDisplayOrder, methodCardSelectionOrder).
Final review & core values: FinalReviewChipEditModal expansion, FinalReviewScreen wiring, applyFinalReviewChipEditPatch (incl. values chipLabel), coreValueChipFacet, coreValueChipOptionsFromDraft, CoreValuesSelectScreen chip/edit/kebab behavior; FinalReviewCommunityContextEditModal.
Modals / layout: Create/ModalHeader kebab triggers, ListItem, Popover, Share modal, AddCustomField, Vertical button, Rule / CardStack updates, icons (custom, export formats, share assets).
Profile / exit: useCreateFlowExit (published save branch), avoid deleting the single server ruleDraft when exiting completed or after successful published update where inappropriate; ProfilePageClient / profile copy.
API & server: app/api/rules/[id] PATCH behavior, uploads routes (app/api/uploads/*), validation (createFlowSchemas, methodFacetsSchemas, templateFacetSchema), uploadToServer, saveCreateFlowUpload, template and recommendation helpers.
Database: Prisma schema + migration for uploads-related model(s); seed/template facet data.
Templates / marketing: TemplatesPageClient, useTemplatesFacetGridEntries, templateFacet.json, templateGridPresentation, governanceTemplateCatalog.
Docs & config: docs/create-flow.md, backend/ops docs, .cursor/rules/create-flow.mdc, .env.example, CONTRIBUTING.md, .gitignore.
i18n: New/updated namespaces (custom wizard, modal kebab, share, upload, completed, final review, profile, rule card).
Tests & stories: Broad coverage (vitest) for publish/hydrate/display, exit hooks, finalize, facet strings, wizard session, facet removal, Rule/CardStack, pages, Storybook additions.

Screenshots

How to Test

Local: Copy env from .env.example, run migrations if needed (npm run migrate:* per CONTRIBUTING), npm install, then exercise create flow at /create.
Custom methods: Start or edit custom rule → add custom communication/membership/decision/conflict cards → reorder field blocks → customize/duplicate/remove from modal kebab → confirm chips on final review and after confirm.
Core values: Select values → open chip from review or select screen → customize name → duplicate/remove per limits → save.
Publish path: Finish flow (or save published) → open completed → confirm preset + custom method titles/blocks render; refresh and re-open /create/completed?ruleId=… where applicable.
Edit published: Profile → manage completed rule → edit-rule → confirm custom cards and labels hydrate; Save & Exit; revisit profile → in-progress draft for another rule should not disappear from a mere completed exit/edit session (with NEXT_PUBLIC_ENABLE_BACKEND_SYNC on if testing server drafts).
Share/export: From completed shell, exercise share/copy paths per useCompletedRuleShareExport (and Storybook Share if desired).
Automated:
```
npx tsc --noEmit
npx vitest run
npx next build
npm run storybook
```
Use npx tsc --noEmit --incremental false if the incremental cache refers to stale coverage/ paths.

Notes

Single server draft: Prisma models one ruleDraft per user; product behavior distinguishes “discard” vs “exit completed” vs “save published”; follow-up if multi-draft UX is desired.
Feature flags: NEXT_PUBLIC_ENABLE_BACKEND_SYNC gates server draft PATCH/delete and related paths; verify both signed-in sync and anonymous flows when QAing.

## Overview This branch modernizes the create flow end-to-end: **edit-rule** from a published rule, **custom method cards** (wizard-style field blocks, customize/duplicate/remove via modal chrome), **final review / core-values** parity with other facets (kebab, read-only until customize), **completed** and **published** hydration so **custom selections and field blocks** show correctly after save and on the completed page, **share & export** on the completed shell, server **uploads** for create-flow assets, **template facet** routing and recommendation wiring, and **profile draft** behavior so managing a completed rule does not wipe unrelated in-progress server drafts. It also includes navigation/progress/registry cleanup, Storybook coverage for new UI, and expanded unit/integration tests across `lib/create`, API routes, and screens. Primary goals: - Ship a cohesive **custom rule** experience (methods + values + review) aligned with existing modal and i18n patterns. - Ensure **published → edit → completed** preserves user-authored method cards and display sections. - Fix **profile** draft listing when users bounce between **manage completed** and **continue draft**. ## Changes - **Create flow core:** `CreateFlowLayoutClient`, `CreateFlowContext`, `flowSteps`, `createFlowPaths`, `createFlowScreenRegistry`, progress proportion updates, `prepareFreshCreateFlowEntry`, `runCompletedStepExit`, top nav and screen shell composition. - **Edit published / completed:** Hydration from published documents (`publishedDocumentToCreateFlowState`, `isPublishedRuleHydratePatchIncomplete`), display merge from `methodSelections` and custom field blocks (`publishedDocumentToDisplaySections`, `ruleSectionsFromMethodSelections`, `buildPublishPayload`); `CompletedScreen` and completed share/export hook. - **Custom method cards:** `CustomMethodCardWizard` (container/view), field block list with HTML5 reorder, `CustomMethodCardModalBody`, summary component, `duplicateMethodCardModalDraft`, `methodCardCustomizeSession`, `usesWizardFieldBlocksModalBody`, `mergePresetMethodsWithCustom`, `removeMethodCardFromFacetSelection`, kebab menu helper and `MethodCardCustomizeModalHeader`; method screens (communication, membership, decision, conflict) refactored for custom flows, deck ordering (`useMethodCardDeckOrdering`, `methodCardDisplayOrder`, `methodCardSelectionOrder`). - **Final review & core values:** `FinalReviewChipEditModal` expansion, `FinalReviewScreen` wiring, `applyFinalReviewChipEditPatch` (incl. values `chipLabel`), `coreValueChipFacet`, `coreValueChipOptionsFromDraft`, `CoreValuesSelectScreen` chip/edit/kebab behavior; `FinalReviewCommunityContextEditModal`. - **Modals / layout:** `Create`/`ModalHeader` kebab triggers, `ListItem`, `Popover`, `Share` modal, `AddCustomField`, `Vertical` button, `Rule` / `CardStack` updates, icons (custom, export formats, share assets). - **Profile / exit:** `useCreateFlowExit` (published save branch), avoid deleting the single server `ruleDraft` when exiting completed or after successful published update where inappropriate; `ProfilePageClient` / profile copy. - **API & server:** `app/api/rules/[id]` PATCH behavior, uploads routes (`app/api/uploads/*`), validation (`createFlowSchemas`, `methodFacetsSchemas`, `templateFacetSchema`), `uploadToServer`, `saveCreateFlowUpload`, template and recommendation helpers. - **Database:** Prisma schema + migration for uploads-related model(s); seed/template facet data. - **Templates / marketing:** `TemplatesPageClient`, `useTemplatesFacetGridEntries`, `templateFacet.json`, `templateGridPresentation`, `governanceTemplateCatalog`. - **Docs & config:** `docs/create-flow.md`, backend/ops docs, `.cursor/rules/create-flow.mdc`, `.env.example`, `CONTRIBUTING.md`, `.gitignore`. - **i18n:** New/updated namespaces (custom wizard, modal kebab, share, upload, completed, final review, profile, rule card). - **Tests & stories:** Broad coverage (`vitest`) for publish/hydrate/display, exit hooks, finalize, facet strings, wizard session, facet removal, Rule/CardStack, pages, Storybook additions. ## Screenshots <img width="979" alt="Screenshot 2026-05-08 at 9.23.48 PM.png" src="attachments/68e22931-cede-4511-9100-5a2cb61a87db"> <img width="979" alt="Screenshot 2026-05-08 at 9.24.33 PM.png" src="attachments/618fb935-3ba6-48ea-9b8f-e11d9b90efdd"> <img width="979" alt="Screenshot 2026-05-08 at 9.27.03 PM.png" src="attachments/8ae3688f-ec38-4ec0-ada2-344ddcaee138"> ## How to Test 1. **Local:** Copy env from `.env.example`, run migrations if needed (`npm run migrate:*` per CONTRIBUTING), `npm install`, then exercise create flow at `/create`. 2. **Custom methods:** Start or edit custom rule → add custom communication/membership/decision/conflict cards → reorder field blocks → customize/duplicate/remove from modal kebab → confirm chips on final review and after confirm. 3. **Core values:** Select values → open chip from review or select screen → customize name → duplicate/remove per limits → save. 4. **Publish path:** Finish flow (or save published) → open **completed** → confirm preset + **custom** method titles/blocks render; refresh and re-open `/create/completed?ruleId=…` where applicable. 5. **Edit published:** Profile → manage completed rule → **edit-rule** → confirm custom cards and labels hydrate; Save & Exit; revisit profile → **in-progress draft** for another rule should **not** disappear from a mere completed exit/edit session (with `NEXT_PUBLIC_ENABLE_BACKEND_SYNC` on if testing server drafts). 6. **Share/export:** From completed shell, exercise share/copy paths per `useCompletedRuleShareExport` (and Storybook **Share** if desired). 7. **Automated:** ```bash npx tsc --noEmit npx vitest run npx next build npm run storybook ``` Use `npx tsc --noEmit --incremental false` if the incremental cache refers to stale `coverage/` paths. ## Notes - **Single server draft:** Prisma models one `ruleDraft` per user; product behavior distinguishes “discard” vs “exit completed” vs “save published”; follow-up if multi-draft UX is desired. - **Feature flags:** `NEXT_PUBLIC_ENABLE_BACKEND_SYNC` gates server draft PATCH/delete and related paths; verify both signed-in sync and anonymous flows when QAing.

Screenshot 2026-05-08 at 9.23.48 PM.png

276 KiB

Screenshot 2026-05-08 at 9.24.07 PM.png

302 KiB

Screenshot 2026-05-08 at 9.24.33 PM.png

364 KiB

Screenshot 2026-05-08 at 9.27.03 PM.png

561 KiB