Component cleanup
This commit is contained in:
adilallo
@@ -1,206 +0,0 @@
|
||||
import AvatarContainer from "../../app/components/utility/AvatarContainer";
|
||||
import Avatar from "../../app/components/icons/Avatar";
|
||||
|
||||
export default {
|
||||
title: "Components/Utility/AvatarContainer",
|
||||
component: AvatarContainer,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A container component that groups multiple avatars together with overlapping spacing. Useful for displaying multiple users or team members in a compact format.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["small", "medium", "large", "xlarge"],
|
||||
description: "The size of the avatar container and its children",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
size: "medium",
|
||||
},
|
||||
render: (args) => (
|
||||
<AvatarContainer {...args}>
|
||||
<Avatar size={args.size} src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size={args.size} src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size={args.size} src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
),
|
||||
};
|
||||
|
||||
export const Sizes = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Small Size</h3>
|
||||
<AvatarContainer size="small">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="small" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
|
||||
<AvatarContainer size="xlarge">
|
||||
<Avatar size="xlarge" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Different size variants of the avatar container with overlapping spacing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DifferentGroupSizes = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">2 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">3 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">4 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">5 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 5" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Avatar containers with different numbers of users to show the overlapping effect.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const InContext = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Avatar Container in Context
|
||||
</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">Team Members</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">3 team members</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">
|
||||
Project Contributors
|
||||
</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">4 contributors</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">Small Team</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="small">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">2 members</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Avatar containers used in realistic contexts to show how they integrate with other UI elements.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,57 +0,0 @@
|
||||
import CreateFlowFooter from "../../app/components/utility/CreateFlowFooter";
|
||||
import Button from "../../app/components/buttons/Button";
|
||||
|
||||
export default {
|
||||
title: "Components/Utility/CreateFlowFooter",
|
||||
component: CreateFlowFooter,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Footer component for the create rule flow with progress bar and buttons.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
progressBar: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the progress bar",
|
||||
},
|
||||
secondButton: {
|
||||
control: false,
|
||||
description:
|
||||
"The second button (typically Next) to display on the right side",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
progressBar: true,
|
||||
secondButton: (
|
||||
<Button buttonType="filled" palette="default" size="xsmall">
|
||||
Next
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const WithoutProgressBar = {
|
||||
args: {
|
||||
progressBar: false,
|
||||
secondButton: (
|
||||
<Button buttonType="filled" palette="default" size="xsmall">
|
||||
Next
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const WithoutSecondButton = {
|
||||
args: {
|
||||
progressBar: true,
|
||||
secondButton: undefined,
|
||||
},
|
||||
};
|
||||
@@ -1,66 +0,0 @@
|
||||
import CreateFlowTopNav from "../../app/components/utility/CreateFlowTopNav";
|
||||
|
||||
export default {
|
||||
title: "Components/Utility/CreateFlowTopNav",
|
||||
component: CreateFlowTopNav,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Top navigation bar for the create rule flow. Includes logo and action buttons (Share, Export, Edit, Exit/Save & Exit).",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
hasShare: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the Share button",
|
||||
},
|
||||
hasExport: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the Export button",
|
||||
},
|
||||
hasEdit: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the Edit button",
|
||||
},
|
||||
saveDraftOnExit: {
|
||||
control: "boolean",
|
||||
description:
|
||||
"After user input (or completed step), use Save & Exit and pass saveDraft: true to onExit",
|
||||
},
|
||||
onShare: { action: "share clicked" },
|
||||
onExport: { action: "export clicked" },
|
||||
onEdit: { action: "edit clicked" },
|
||||
onExit: { action: "exit clicked" },
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
hasShare: false,
|
||||
hasExport: false,
|
||||
hasEdit: false,
|
||||
saveDraftOnExit: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const AllButtons = {
|
||||
args: {
|
||||
hasShare: true,
|
||||
hasExport: true,
|
||||
hasEdit: true,
|
||||
saveDraftOnExit: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const SaveDraftOnExit = {
|
||||
args: {
|
||||
hasShare: true,
|
||||
hasExport: true,
|
||||
hasEdit: true,
|
||||
saveDraftOnExit: true,
|
||||
},
|
||||
};
|
||||
@@ -1,52 +0,0 @@
|
||||
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",
|
||||
},
|
||||
};
|
||||
@@ -1,43 +0,0 @@
|
||||
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" }],
|
||||
},
|
||||
};
|
||||
@@ -1,71 +0,0 @@
|
||||
import ModalFooter from "../../app/components/utility/ModalFooter";
|
||||
|
||||
export default {
|
||||
title: "Components/Utility/ModalFooter",
|
||||
component: ModalFooter,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
},
|
||||
argTypes: {
|
||||
showBackButton: {
|
||||
control: "boolean",
|
||||
description: "Whether to render the back button on the left",
|
||||
},
|
||||
showNextButton: {
|
||||
control: "boolean",
|
||||
description: "Whether to render the next button on the right",
|
||||
},
|
||||
backButtonText: {
|
||||
control: "text",
|
||||
description: "Override text for the back button",
|
||||
},
|
||||
nextButtonText: {
|
||||
control: "text",
|
||||
description: "Override text for the next button",
|
||||
},
|
||||
nextButtonDisabled: {
|
||||
control: "boolean",
|
||||
description: "Whether the next button is disabled",
|
||||
},
|
||||
currentStep: {
|
||||
control: { type: "number", min: 1, max: 10, step: 1 },
|
||||
description: "Current step (used by the centered Stepper)",
|
||||
},
|
||||
totalSteps: {
|
||||
control: { type: "number", min: 1, max: 10, step: 1 },
|
||||
description: "Total number of steps",
|
||||
},
|
||||
stepper: {
|
||||
control: "boolean",
|
||||
description: "Whether to render the centered stepper",
|
||||
},
|
||||
onBack: { action: "back-clicked" },
|
||||
onNext: { action: "next-clicked" },
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
currentStep: 2,
|
||||
totalSteps: 4,
|
||||
},
|
||||
};
|
||||
|
||||
export const NextDisabled = {
|
||||
args: {
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
nextButtonDisabled: true,
|
||||
currentStep: 1,
|
||||
totalSteps: 4,
|
||||
},
|
||||
};
|
||||
|
||||
export const NextOnly = {
|
||||
args: {
|
||||
showBackButton: false,
|
||||
showNextButton: true,
|
||||
},
|
||||
};
|
||||
@@ -1,42 +0,0 @@
|
||||
import ModalHeader from "../../app/components/utility/ModalHeader";
|
||||
|
||||
export default {
|
||||
title: "Components/Utility/ModalHeader",
|
||||
component: ModalHeader,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
},
|
||||
argTypes: {
|
||||
showCloseButton: {
|
||||
control: "boolean",
|
||||
description: "Whether to render the close button on the left",
|
||||
},
|
||||
showMoreOptionsButton: {
|
||||
control: "boolean",
|
||||
description: "Whether to render the more-options button on the right",
|
||||
},
|
||||
onClose: { action: "close-clicked" },
|
||||
onMoreOptions: { action: "more-options-clicked" },
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
showCloseButton: true,
|
||||
showMoreOptionsButton: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const CloseOnly = {
|
||||
args: {
|
||||
showCloseButton: true,
|
||||
showMoreOptionsButton: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const MoreOptionsOnly = {
|
||||
args: {
|
||||
showCloseButton: false,
|
||||
showMoreOptionsButton: true,
|
||||
},
|
||||
};
|
||||
@@ -1,28 +0,0 @@
|
||||
import Separator from "../../app/components/utility/Separator";
|
||||
|
||||
export default {
|
||||
title: "Components/Utility/Separator",
|
||||
component: Separator,
|
||||
parameters: {
|
||||
layout: "padded",
|
||||
},
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
render: () => (
|
||||
<div style={{ width: 320 }}>
|
||||
<Separator />
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const InContext = {
|
||||
render: () => (
|
||||
<div style={{ width: 320, display: "flex", flexDirection: "column", gap: 12 }}>
|
||||
<p>Above the separator</p>
|
||||
<Separator />
|
||||
<p>Below the separator</p>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
Reference in New Issue
Block a user