Cleanup, add tests and storybook

stories/pages/CardsPage.stories.js

@@ -0,0 +1,35 @@
+import CardsPage from "../../app/create/cards/page";
+
+export default {
+  title: "Pages/Create Flow/Cards",
+  component: CardsPage,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Communication / card selection step with modals and responsive layout.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-black flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export const Desktop = {
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+  },
+};
+
+export const Mobile = {
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+};

stories/pages/CompletedPage.stories.js

@@ -0,0 +1,35 @@
+import CompletedPage from "../../app/create/completed/page";
+
+export default {
+  title: "Pages/Create Flow/Completed",
+  component: CompletedPage,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Completed flow: teal background, inverse HeaderLockup, CommunityRule document, optional bottom toast.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-[var(--color-teal-teal50,#c9fef9)] flex flex-col items-center">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export const Desktop = {
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+  },
+};
+
+export const Mobile = {
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+};

stories/pages/ConfirmStakeholdersPage.stories.js

@@ -0,0 +1,35 @@
+import ConfirmStakeholdersPage from "../../app/create/confirm-stakeholders/page";
+
+export default {
+  title: "Pages/Create Flow/Confirm stakeholders",
+  component: ConfirmStakeholdersPage,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Stacked lockup + MultiSelect; draft congratulations banner; before final review.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-black flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export const Desktop = {
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+  },
+};
+
+export const Mobile = {
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+};

stories/pages/FinalReviewPage.stories.js

@@ -0,0 +1,35 @@
+import FinalReviewPage from "../../app/create/final-review/page";
+
+export default {
+  title: "Pages/Create Flow/Final review",
+  component: FinalReviewPage,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Pre-finalize review: HeaderLockup + expanded RuleCard sections.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-black flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export const Desktop = {
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+  },
+};
+
+export const Mobile = {
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+};

stories/pages/InformationalPage.stories.js

@@ -0,0 +1,35 @@
+import InformationalPage from "../../app/create/informational/page";
+
+export default {
+  title: "Pages/Create Flow/Informational",
+  component: InformationalPage,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Create flow entry: HeaderLockup + NumberedList. Responsive L/M and M/S at 640px.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-black flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export const Desktop = {
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+  },
+};
+
+export const Mobile = {
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+};

stories/pages/RightRailPage.stories.js

@@ -0,0 +1,35 @@
+import RightRailPage from "../../app/create/right-rail/page";
+
+export default {
+  title: "Pages/Create Flow/Right rail",
+  component: RightRailPage,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Decision-making sidebar layout with CardStack and supporting content.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-black flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export const Desktop = {
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+  },
+};
+
+export const Mobile = {
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+};

stories/pages/SelectPage.stories.js

@@ -0,0 +1,35 @@
+import SelectPage from "../../app/create/select/page";
+
+export default {
+  title: "Pages/Create Flow/Select",
+  component: SelectPage,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Multi-select template: two columns at 640px+, stacked below. MultiSelect with add → custom chip.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-black flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export const Desktop = {
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+  },
+};
+
+export const Mobile = {
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+};

stories/pages/TextPage.stories.js

@@ -0,0 +1,35 @@
+import TextPage from "../../app/create/text/page";
+
+export default {
+  title: "Pages/Create Flow/Text",
+  component: TextPage,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Community name step: HeaderLockup + TextInput. Responsive sizing at 640px.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-black flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export const Desktop = {
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+  },
+};
+
+export const Mobile = {
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+};

stories/pages/UploadPage.stories.js

@@ -0,0 +1,35 @@
+import UploadPage from "../../app/create/upload/page";
+
+export default {
+  title: "Pages/Create Flow/Upload",
+  component: UploadPage,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Upload step: HeaderLockup + Upload control. Centered lockup at 640px+.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-black flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export const Desktop = {
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+  },
+};
+
+export const Mobile = {
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+};