From beae150f029597af7cd2b58255ff978880d5c93a Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Wed, 15 Apr 2026 22:14:46 -0600 Subject: [PATCH] Implement core-values screen --- app/create/CreateFlowLayoutClient.tsx | 67 +++--- .../CreateFlowTwoColumnSelectShell.tsx | 75 ++++++ app/create/screens/CreateFlowScreenView.tsx | 3 + .../select/CommunitySizeSelectScreen.tsx | 33 +-- .../select/CommunityStructureSelectScreen.tsx | 33 +-- .../screens/select/CoreValuesSelectScreen.tsx | 219 ++++++++++++++++++ app/create/types.ts | 5 + .../utils/createFlowProportionProgress.ts | 1 + app/create/utils/createFlowScreenRegistry.ts | 6 + app/create/utils/flowSteps.ts | 1 + lib/server/validation/createFlowSchemas.ts | 4 + messages/en/create/coreValues.json | 75 ++++++ messages/en/create/footer.json | 3 +- messages/en/index.ts | 2 + .../unit/createFlowProportionProgress.test.ts | 5 +- tests/unit/flowSteps.test.ts | 5 +- 16 files changed, 460 insertions(+), 77 deletions(-) create mode 100644 app/create/components/CreateFlowTwoColumnSelectShell.tsx create mode 100644 app/create/screens/select/CoreValuesSelectScreen.tsx create mode 100644 messages/en/create/coreValues.json diff --git a/app/create/CreateFlowLayoutClient.tsx b/app/create/CreateFlowLayoutClient.tsx index fb83700..230ac59 100644 --- a/app/create/CreateFlowLayoutClient.tsx +++ b/app/create/CreateFlowLayoutClient.tsx @@ -302,6 +302,11 @@ function CreateFlowLayoutContent({ const isRightRailStep = currentStep === "right-rail"; const isFinalReviewStep = currentStep === "final-review"; const isCardsStep = currentStep === "cards"; + /** Two-column select steps: at `lg+` only the right column scrolls; main must not scroll the full page. */ + const isSelectSplitScrollStep = + currentStep === "community-size" || + currentStep === "community-structure" || + currentStep === "core-values"; const stepIdx = currentStep != null ? getStepIndex(currentStep) : -1; /** At `md+`, main cross-axis: center by default; exceptions stay top-aligned (see product spec). */ @@ -309,9 +314,11 @@ function CreateFlowLayoutContent({ ? "items-stretch overflow-y-auto md:overflow-hidden" : isRightRailStep ? "items-stretch overflow-hidden" - : isFinalReviewStep || isCardsStep || isTemplateReviewRoute - ? "items-start justify-center overflow-y-auto" - : "items-start justify-center overflow-y-auto md:items-center"; + : isSelectSplitScrollStep + ? "items-start justify-start overflow-y-auto max-lg:overflow-y-auto lg:min-h-0 lg:items-stretch lg:overflow-hidden" + : isFinalReviewStep || isCardsStep || isTemplateReviewRoute + ? "items-start justify-center overflow-y-auto" + : "items-start justify-center overflow-y-auto md:items-center"; const isTextStep = createFlowStepUsesCenteredTextLayout(currentStep); const mainMaxMdJustify = @@ -479,32 +486,18 @@ function CreateFlowLayoutContent({ ) : currentStep === "community-name" && nextStep ? ( -
- - -
+ ) : currentStep === "community-save" && nextStep ? (
+ ) : currentStep === "core-values" && nextStep ? ( + ) : nextStep ? ( + + {" "} + {cv.header.descriptionTrail} + + + ); + + return ( + + } + > + + + ); +} diff --git a/app/create/types.ts b/app/create/types.ts index 9aae00a..ef86b0c 100644 --- a/app/create/types.ts +++ b/app/create/types.ts @@ -18,6 +18,7 @@ export type CreateFlowStep = | "community-upload" | "community-save" | "review" + | "core-values" | "cards" | "right-rail" | "confirm-stakeholders" @@ -70,6 +71,10 @@ export interface CreateFlowState { scale?: CommunityStructureChipSnapshotRow[]; maturity?: CommunityStructureChipSnapshotRow[]; }; + /** Create Custom — core values step (max five `selectedCoreValueIds`). */ + selectedCoreValueIds?: string[]; + /** Full chip rows for core values (custom labels). */ + coreValuesChipsSnapshot?: CommunityStructureChipSnapshotRow[]; currentStep?: CreateFlowStep; /** Section drafts; structure will tighten as steps persist real shapes. */ sections?: Record[]; diff --git a/app/create/utils/createFlowProportionProgress.ts b/app/create/utils/createFlowProportionProgress.ts index 9b649a1..2541e39 100644 --- a/app/create/utils/createFlowProportionProgress.ts +++ b/app/create/utils/createFlowProportionProgress.ts @@ -15,6 +15,7 @@ const PROPORTION_BY_STEP_INDEX: readonly ProportionBarState[] = [ "1-5", // community-upload "2-0", // community-save "2-0", // review (Figma Flow — Review `19706:12135`: same segment fill as end of Create Community) + "2-0", // core-values (same segment as review / end of Create Community) "2-2", // cards "3-0", // right-rail "3-1", // confirm-stakeholders diff --git a/app/create/utils/createFlowScreenRegistry.ts b/app/create/utils/createFlowScreenRegistry.ts index 9959541..35719b2 100644 --- a/app/create/utils/createFlowScreenRegistry.ts +++ b/app/create/utils/createFlowScreenRegistry.ts @@ -84,6 +84,12 @@ export const CREATE_FLOW_SCREEN_REGISTRY: Record< messageNamespace: "create.review", centeredBodyBelowMd: false, }, + "core-values": { + layoutKind: "select", + figmaNodeId: "20264-68378", + messageNamespace: "create.coreValues", + centeredBodyBelowMd: false, + }, cards: { layoutKind: "card", figmaNodeId: "TBD-cards", diff --git a/app/create/utils/flowSteps.ts b/app/create/utils/flowSteps.ts index 93f1331..818a3fc 100644 --- a/app/create/utils/flowSteps.ts +++ b/app/create/utils/flowSteps.ts @@ -20,6 +20,7 @@ export const FLOW_STEP_ORDER: readonly CreateFlowStep[] = [ "community-upload", "community-save", "review", + "core-values", "cards", "right-rail", "confirm-stakeholders", diff --git a/lib/server/validation/createFlowSchemas.ts b/lib/server/validation/createFlowSchemas.ts index 37d24eb..0ecfdf7 100644 --- a/lib/server/validation/createFlowSchemas.ts +++ b/lib/server/validation/createFlowSchemas.ts @@ -51,6 +51,10 @@ export const createFlowStateSchema = z selectedMaturityIds: z.array(z.string()).optional(), communityStructureChipSnapshots: communityStructureChipSnapshotsSchema.optional(), + selectedCoreValueIds: z.array(z.string()).max(200).optional(), + coreValuesChipsSnapshot: z + .array(communityStructureChipSnapshotRowSchema) + .optional(), currentStep: createFlowStepSchema.optional(), sections: z.array(z.unknown()).optional(), stakeholders: z.array(z.unknown()).optional(), diff --git a/messages/en/create/coreValues.json b/messages/en/create/coreValues.json new file mode 100644 index 0000000..56e120d --- /dev/null +++ b/messages/en/create/coreValues.json @@ -0,0 +1,75 @@ +{ + "header": { + "title": "Choose up to five Core Values", + "descriptionLead": "What does the community hold most dear? You can also combine or", + "addLink": "add", + "descriptionTrail": "new values to the list." + }, + "multiSelect": { + "addButtonText": "Add value" + }, + "values": [ + "Accessibility", + "Accountability", + "Adaptability", + "Agency", + "Altruism", + "Anti-oppression", + "Autonomy", + "Capacity Building", + "Collaboration", + "Common Ownership", + "Community Care", + "Conflict Resolution", + "Consent", + "Consensus", + "Constructive Feedback", + "Cooperation", + "Copyleft", + "Decentralization", + "Direct Action", + "Diversity", + "Documentation", + "Education", + "Empathy", + "Empowerment", + "Equity", + "Experimentation", + "Fairness", + "Fair Remuneration", + "Flexibility", + "Forkability", + "Freedom", + "Freedom of Information", + "Generosity", + "Harm Reduction", + "Holism", + "Holocracy", + "Honesty", + "Horizontalism", + "Humility", + "Inclusion", + "Inclusivity", + "Independence", + "Innovation", + "Integrity", + "Interdependence", + "Interoperability", + "Intersectionality", + "Justice", + "Knowledge Sharing", + "Labor Rights", + "Leadership", + "Learning", + "Liberty", + "Localism", + "Maintenance", + "Mentorship", + "Meritocracy", + "Mutual Aid", + "Non-violence", + "Open Source", + "Openness", + "Participation" + ] +} diff --git a/messages/en/create/footer.json b/messages/en/create/footer.json index 3698c2a..1708b87 100644 --- a/messages/en/create/footer.json +++ b/messages/en/create/footer.json @@ -10,5 +10,6 @@ "confirmDescription": "Confirm description", "confirmMembers": "Confirm members", "finalizeCommunityRule": "Finalize CommunityRule", - "confirmStakeholders": "Confirm Stakeholders" + "confirmStakeholders": "Confirm Stakeholders", + "confirmCoreValues": "Confirm values" } diff --git a/messages/en/index.ts b/messages/en/index.ts index e1044fd..57455fe 100644 --- a/messages/en/index.ts +++ b/messages/en/index.ts @@ -27,6 +27,7 @@ import createCommunityStructure from "./create/communityStructure.json"; import createCommunityUpload from "./create/communityUpload.json"; import createCommunitySave from "./create/communitySave.json"; import createReview from "./create/review.json"; +import createCoreValues from "./create/coreValues.json"; import createConfirmStakeholders from "./create/confirmStakeholders.json"; import createFinalReview from "./create/finalReview.json"; import createCompleted from "./create/completed.json"; @@ -68,6 +69,7 @@ export default { communityUpload: createCommunityUpload, communitySave: createCommunitySave, review: createReview, + coreValues: createCoreValues, confirmStakeholders: createConfirmStakeholders, finalReview: createFinalReview, completed: createCompleted, diff --git a/tests/unit/createFlowProportionProgress.test.ts b/tests/unit/createFlowProportionProgress.test.ts index 3b463b7..aa0534c 100644 --- a/tests/unit/createFlowProportionProgress.test.ts +++ b/tests/unit/createFlowProportionProgress.test.ts @@ -17,10 +17,13 @@ describe("getProportionBarProgressForCreateFlowStep", () => { ); }); - it("uses 2-0 on community-save and review (end of Create Community segment)", () => { + it("uses 2-0 on community-save, review, and core-values (Create Community segment / same fill)", () => { expect(getProportionBarProgressForCreateFlowStep("community-save")).toBe( "2-0", ); expect(getProportionBarProgressForCreateFlowStep("review")).toBe("2-0"); + expect(getProportionBarProgressForCreateFlowStep("core-values")).toBe( + "2-0", + ); }); }); diff --git a/tests/unit/flowSteps.test.ts b/tests/unit/flowSteps.test.ts index 04e451c..cfc0cec 100644 --- a/tests/unit/flowSteps.test.ts +++ b/tests/unit/flowSteps.test.ts @@ -36,6 +36,7 @@ describe("flowSteps", () => { it("isValidStep reflects FLOW_STEP_ORDER membership", () => { expect(isValidStep("community-size")).toBe(true); expect(isValidStep("confirm-stakeholders")).toBe(true); + expect(isValidStep("core-values")).toBe(true); expect(isValidStep("nope")).toBe(false); expect(isValidStep(null)).toBe(false); }); @@ -65,7 +66,7 @@ describe("flowSteps", () => { it("skipCommunitySave does not change steps outside the save segment", () => { const opts = { skipCommunitySave: true } as const; expect(getNextStep("community-size", opts)).toBe("community-upload"); - expect(getNextStep("review", opts)).toBe("cards"); - expect(getPreviousStep("cards", opts)).toBe("review"); + expect(getNextStep("review", opts)).toBe("core-values"); + expect(getPreviousStep("cards", opts)).toBe("core-values"); }); });