Cleanup, add tests and storybook
This commit is contained in:
adilallo
@@ -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" },
|
||||
},
|
||||
};
|
||||
@@ -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" },
|
||||
},
|
||||
};
|
||||
@@ -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" },
|
||||
},
|
||||
};
|
||||
@@ -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" },
|
||||
},
|
||||
};
|
||||
@@ -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" },
|
||||
},
|
||||
};
|
||||
@@ -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" },
|
||||
},
|
||||
};
|
||||
@@ -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" },
|
||||
},
|
||||
};
|
||||
@@ -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" },
|
||||
},
|
||||
};
|
||||
@@ -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" },
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
import DecisionMakingSidebar from "../../app/components/utility/DecisionMakingSidebar";
|
||||
|
||||
export default {
|
||||
title: "Components/Utility/DecisionMakingSidebar",
|
||||
component: DecisionMakingSidebar,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
backgrounds: { default: "dark" },
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"HeaderLockup + InfoMessageBox for decision-making step sidebars.",
|
||||
},
|
||||
},
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="bg-black p-8 max-w-lg w-full">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
const messageItems = [
|
||||
{ id: "c1", label: "Consensus" },
|
||||
{ id: "c2", label: "Majority vote" },
|
||||
];
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
title: "How does your group make decisions?",
|
||||
description:
|
||||
"Choose the approaches that best match how your community operates.",
|
||||
messageBoxTitle: "Common approaches",
|
||||
messageBoxItems: messageItems,
|
||||
size: "L",
|
||||
justification: "left",
|
||||
},
|
||||
};
|
||||
|
||||
export const Medium = {
|
||||
args: {
|
||||
title: "Decision-making",
|
||||
description: "Short description.",
|
||||
messageBoxTitle: "Pick any",
|
||||
messageBoxItems: [{ id: "x", label: "Single method" }],
|
||||
size: "M",
|
||||
justification: "left",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,43 @@
|
||||
import InfoMessageBox from "../../app/components/utility/InfoMessageBox";
|
||||
|
||||
export default {
|
||||
title: "Components/Utility/InfoMessageBox",
|
||||
component: InfoMessageBox,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
backgrounds: { default: "dark" },
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Message region with optional exclamation icon and CheckboxGroup items.",
|
||||
},
|
||||
},
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="bg-black p-8 max-w-md w-full">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
const sampleItems = [
|
||||
{ id: "1", label: "First option" },
|
||||
{ id: "2", label: "Second option" },
|
||||
];
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
title: "Before you continue",
|
||||
items: sampleItems,
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleItem = {
|
||||
args: {
|
||||
title: "Select one",
|
||||
items: [{ id: "a", label: "Only choice" }],
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user