Create flow UX updates

2026-04-11 00:22:02 -06:00
parent ec5afd1464
commit a5c6b8971f
33 changed files with 1010 additions and 931 deletions
@@ -2,16 +2,17 @@

 import {
  useState,
-  useEffect,
  useMemo,
  type Dispatch,
  type SetStateAction,
 } from "react";
-import { useMediaQuery } from "../../hooks/useMediaQuery";
-import HeaderLockup from "../../components/type/HeaderLockup";
 import MultiSelect from "../../components/controls/MultiSelect";
 import type { ChipOption } from "../../components/controls/MultiSelect/MultiSelect.types";
+import { useMessages, useTranslation } from "../../contexts/MessagesContext";
 import { useCreateFlow } from "../context/CreateFlowContext";
+import { useCreateFlowMdUp } from "../hooks/useCreateFlowMdUp";
+import { CreateFlowHeaderLockup } from "../components/CreateFlowHeaderLockup";
+import { CreateFlowStepShell } from "../components/CreateFlowStepShell";

 function createListCustomHandlers(
  setList: Dispatch<SetStateAction<ChipOption[]>>,
@@ -44,55 +45,40 @@ function createListCustomHandlers(
  };
 }

+function chipRowsFromLabels(
+  rows: readonly { label: string }[],
+): ChipOption[] {
+  return rows.map((row, i) => ({
+    id: String(i + 1),
+    label: row.label,
+    state: "Unselected" as const,
+  }));
+}
+
 /**
 * Select page for the create flow
 *
 * Displays selection options using HeaderLockup and MultiSelect components.
- * Responsive layout: two-column at 640px+, single column below 640px.
- * Responsive sizing: uses L/M for HeaderLockup and S for MultiSelect based on 640px breakpoint.
+ * Responsive layout: two-column at `md` and up, single column below (see `--breakpoint-md` in `app/tailwind.css`).
+ * Lockup sizing via `CreateFlowHeaderLockup`. MultiSelect stays `S`.
 */
 export default function SelectPage() {
+  const m = useMessages();
  const { markCreateFlowInteraction } = useCreateFlow();
-  const [isMounted, setIsMounted] = useState(false);
-  const isMdOrLarger = useMediaQuery("(min-width: 640px)");
-
-  // Avoid flash: only use breakpoint after mount so SSR and first paint use same layout (desktop).
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: defer layout breakpoint until after mount to prevent flash
-    setIsMounted(true);
-  }, []);
-
-  const effectiveMdOrLarger = !isMounted || isMdOrLarger;
+  const mdUp = useCreateFlowMdUp();
+  const t = useTranslation("create.select");

  const [communitySizeOptions, setCommunitySizeOptions] = useState<
    ChipOption[]
-  >([
-    { id: "1", label: "1 member", state: "Unselected" },
-    { id: "2", label: "2-10 members", state: "Unselected" },
-    { id: "3", label: "10-24 members", state: "Unselected" },
-    { id: "4", label: "24-64 members", state: "Unselected" },
-    { id: "5", label: "64-128 members", state: "Unselected" },
-    { id: "6", label: "125-1000 members", state: "Unselected" },
-    { id: "7", label: "1000+ members", state: "Unselected" },
-  ]);
+  >(() => chipRowsFromLabels(m.create.select.communitySizes));

  const [organizationTypeOptions, setOrganizationTypeOptions] = useState<
    ChipOption[]
-  >([
-    { id: "1", label: "Non-profit", state: "Unselected" },
-    { id: "2", label: "For-profit", state: "Unselected" },
-    { id: "3", label: "Community", state: "Unselected" },
-    { id: "4", label: "Educational", state: "Unselected" },
-  ]);
+  >(() => chipRowsFromLabels(m.create.select.organizationTypes));

  const [governanceStyleOptions, setGovernanceStyleOptions] = useState<
    ChipOption[]
-  >([
-    { id: "1", label: "Democratic", state: "Unselected" },
-    { id: "2", label: "Consensus", state: "Unselected" },
-    { id: "3", label: "Hierarchical", state: "Unselected" },
-    { id: "4", label: "Flat", state: "Unselected" },
-  ]);
+  >(() => chipRowsFromLabels(m.create.select.governanceStyles));

  const communityCustomHandlers = useMemo(
    () =>
@@ -164,93 +150,69 @@ export default function SelectPage() {
    );
  };

+  const multiLabel = t("multiSelect.label");
+  const addText = t("multiSelect.addButtonText");
+
+  const multiSelectBlock = (
+    <>
+      <MultiSelect
+        label={multiLabel}
+        size="S"
+        options={communitySizeOptions}
+        onChipClick={handleCommunitySizeClick}
+        {...communityCustomHandlers}
+        addButton={true}
+        addButtonText={addText}
+      />
+      <MultiSelect
+        label={multiLabel}
+        size="S"
+        options={organizationTypeOptions}
+        onChipClick={handleOrganizationTypeClick}
+        {...organizationCustomHandlers}
+        addButton={true}
+        addButtonText={addText}
+      />
+      <MultiSelect
+        label={multiLabel}
+        size="S"
+        options={governanceStyleOptions}
+        onChipClick={handleGovernanceStyleClick}
+        {...governanceCustomHandlers}
+        addButton={true}
+        addButtonText={addText}
+      />
+    </>
+  );
+
  return (
-    <div className="w-full flex flex-col items-center px-[var(--spacing-measures-spacing-500,20px)] md:px-[64px]">
-      {effectiveMdOrLarger ? (
-        // Two-column layout for 640px+
-        <div className="flex gap-[var(--measures-spacing-1200,48px)] items-center justify-center w-full max-w-[1280px]">
-          {/* Left column: HeaderLockup */}
-          <div className="flex flex-[1_0_0] flex-col gap-[var(--measures-spacing-200,8px)] items-start justify-center max-w-[640px] min-h-px min-w-px py-[12px]">
-            <HeaderLockup
-              title="What is your community called?"
-              description="This will be the name of your community"
+    <CreateFlowStepShell
+      variant="centeredNarrow"
+      contentTopBelowMd="space-1400"
+    >
+      {mdUp ? (
+        <div className="flex w-full max-w-[1280px] items-center justify-center gap-[var(--measures-spacing-1200,48px)]">
+          <div className="flex max-w-[640px] min-h-px min-w-px flex-[1_0_0] flex-col items-start justify-center gap-[var(--measures-spacing-200,8px)] py-[12px]">
+            <CreateFlowHeaderLockup
+              title={t("header.title")}
+              description={t("header.description")}
              justification="left"
-              size="L"
            />
          </div>
-
-          {/* Right column: Three MultiSelect components */}
-          <div className="flex flex-[1_0_0] flex-col gap-[var(--measures-spacing-800,32px)] items-start max-w-[640px] min-h-px min-w-px">
-            <MultiSelect
-              label="Label"
-              size="S"
-              options={communitySizeOptions}
-              onChipClick={handleCommunitySizeClick}
-              {...communityCustomHandlers}
-              addButton={true}
-              addButtonText="Add organization type"
-            />
-            <MultiSelect
-              label="Label"
-              size="S"
-              options={organizationTypeOptions}
-              onChipClick={handleOrganizationTypeClick}
-              {...organizationCustomHandlers}
-              addButton={true}
-              addButtonText="Add organization type"
-            />
-            <MultiSelect
-              label="Label"
-              size="S"
-              options={governanceStyleOptions}
-              onChipClick={handleGovernanceStyleClick}
-              {...governanceCustomHandlers}
-              addButton={true}
-              addButtonText="Add organization type"
-            />
+          <div className="flex max-w-[640px] min-h-px min-w-px flex-[1_0_0] flex-col items-start gap-[var(--measures-spacing-800,32px)]">
+            {multiSelectBlock}
          </div>
        </div>
      ) : (
-        // Single column layout below 640px
-        <div className="flex flex-col gap-[var(--measures-spacing-400,16px)] items-start w-full max-w-[640px]">
-          {/* HeaderLockup */}
-          <HeaderLockup
-            title="What is your community called?"
-            description="This will be the name of your community"
+        <div className="flex w-full max-w-[640px] flex-col items-start gap-[var(--measures-spacing-400,16px)]">
+          <CreateFlowHeaderLockup
+            title={t("header.title")}
+            description={t("header.description")}
            justification="left"
-            size="M"
-          />
-
-          {/* Three MultiSelect components */}
-          <MultiSelect
-            label="Label"
-            size="S"
-            options={communitySizeOptions}
-            onChipClick={handleCommunitySizeClick}
-            {...communityCustomHandlers}
-            addButton={true}
-            addButtonText="Add organization type"
-          />
-          <MultiSelect
-            label="Label"
-            size="S"
-            options={organizationTypeOptions}
-            onChipClick={handleOrganizationTypeClick}
-            {...organizationCustomHandlers}
-            addButton={true}
-            addButtonText="Add organization type"
-          />
-          <MultiSelect
-            label="Label"
-            size="S"
-            options={governanceStyleOptions}
-            onChipClick={handleGovernanceStyleClick}
-            {...governanceCustomHandlers}
-            addButton={true}
-            addButtonText="Add organization type"
          />
+          {multiSelectBlock}
        </div>
      )}
-    </div>
+    </CreateFlowStepShell>
  );
 }