Update stories to match new component organization
This commit is contained in:
adilallo
@@ -0,0 +1,162 @@
|
||||
import React, { useState } from "react";
|
||||
import Alert from "../../app/components/modals/Alert";
|
||||
|
||||
export default {
|
||||
title: "Components/Modals/Alert",
|
||||
component: Alert,
|
||||
argTypes: {
|
||||
status: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "positive", "warning", "danger"],
|
||||
},
|
||||
type: {
|
||||
control: { type: "select" },
|
||||
options: ["toast", "banner"],
|
||||
},
|
||||
title: {
|
||||
control: { type: "text" },
|
||||
},
|
||||
description: {
|
||||
control: { type: "text" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
if (!isVisible) return <div>Alert closed</div>;
|
||||
return (
|
||||
<div className="p-8 max-w-[600px]">
|
||||
<Alert {...args} onClose={() => setIsVisible(false)} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ToastDefault = Template.bind({});
|
||||
ToastDefault.args = {
|
||||
title: "Short alert toast message goes here",
|
||||
description:
|
||||
"Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
|
||||
status: "default",
|
||||
type: "toast",
|
||||
};
|
||||
|
||||
export const ToastPositive = Template.bind({});
|
||||
ToastPositive.args = {
|
||||
title: "Short alert toast message goes here",
|
||||
description:
|
||||
"Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
|
||||
status: "positive",
|
||||
type: "toast",
|
||||
};
|
||||
|
||||
export const ToastWarning = Template.bind({});
|
||||
ToastWarning.args = {
|
||||
title: "Short alert toast message goes here",
|
||||
description:
|
||||
"Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
|
||||
status: "warning",
|
||||
type: "toast",
|
||||
};
|
||||
|
||||
export const ToastDanger = Template.bind({});
|
||||
ToastDanger.args = {
|
||||
title: "Short alert toast message goes here",
|
||||
description:
|
||||
"Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
|
||||
status: "danger",
|
||||
type: "toast",
|
||||
};
|
||||
|
||||
export const Banner = Template.bind({});
|
||||
Banner.args = {
|
||||
title: "Short alert banner message goes here",
|
||||
description:
|
||||
"Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
|
||||
status: "default",
|
||||
type: "banner",
|
||||
};
|
||||
|
||||
export const BannerPositive = Template.bind({});
|
||||
BannerPositive.args = {
|
||||
title: "Short alert banner message goes here",
|
||||
description:
|
||||
"Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
|
||||
status: "positive",
|
||||
type: "banner",
|
||||
};
|
||||
|
||||
export const BannerWarning = Template.bind({});
|
||||
BannerWarning.args = {
|
||||
title: "Short alert banner message goes here",
|
||||
description:
|
||||
"Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
|
||||
status: "warning",
|
||||
type: "banner",
|
||||
};
|
||||
|
||||
export const BannerDanger = Template.bind({});
|
||||
BannerDanger.args = {
|
||||
title: "Short alert banner message goes here",
|
||||
description:
|
||||
"Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
|
||||
status: "danger",
|
||||
type: "banner",
|
||||
};
|
||||
|
||||
export const TitleOnly = Template.bind({});
|
||||
TitleOnly.args = {
|
||||
title: "Short alert banner message goes here",
|
||||
status: "default",
|
||||
type: "toast",
|
||||
};
|
||||
|
||||
export const AllStatuses = () => {
|
||||
const [visible, setVisible] = useState({
|
||||
default: true,
|
||||
positive: true,
|
||||
warning: true,
|
||||
danger: true,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="p-8 space-y-4 max-w-[600px]">
|
||||
{visible.default && (
|
||||
<Alert
|
||||
title="Default alert"
|
||||
description="This is a default alert message"
|
||||
status="default"
|
||||
type="toast"
|
||||
onClose={() => setVisible({ ...visible, default: false })}
|
||||
/>
|
||||
)}
|
||||
{visible.positive && (
|
||||
<Alert
|
||||
title="Positive alert"
|
||||
description="This is a positive alert message"
|
||||
status="positive"
|
||||
type="toast"
|
||||
onClose={() => setVisible({ ...visible, positive: false })}
|
||||
/>
|
||||
)}
|
||||
{visible.warning && (
|
||||
<Alert
|
||||
title="Warning alert"
|
||||
description="This is a warning alert message"
|
||||
status="warning"
|
||||
type="toast"
|
||||
onClose={() => setVisible({ ...visible, warning: false })}
|
||||
/>
|
||||
)}
|
||||
{visible.danger && (
|
||||
<Alert
|
||||
title="Danger alert"
|
||||
description="This is a danger alert message"
|
||||
status="danger"
|
||||
type="toast"
|
||||
onClose={() => setVisible({ ...visible, danger: false })}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,171 @@
|
||||
import Create from "../../app/components/modals/Create";
|
||||
import TextInput from "../../app/components/controls/TextInput";
|
||||
|
||||
export default {
|
||||
title: "Components/Modals/Create",
|
||||
component: Create,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Create dialog component with portal rendering, keyboard navigation, and focus trap. Supports multi-step workflows with stepper integration. Used for the create flow in the application.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
isOpen: {
|
||||
control: { type: "boolean" },
|
||||
},
|
||||
title: {
|
||||
control: { type: "text" },
|
||||
},
|
||||
description: {
|
||||
control: { type: "text" },
|
||||
},
|
||||
showBackButton: {
|
||||
control: { type: "boolean" },
|
||||
},
|
||||
showNextButton: {
|
||||
control: { type: "boolean" },
|
||||
},
|
||||
nextButtonDisabled: {
|
||||
control: { type: "boolean" },
|
||||
},
|
||||
currentStep: {
|
||||
control: { type: "number", min: 1, max: 5 },
|
||||
},
|
||||
totalSteps: {
|
||||
control: { type: "number", min: 1, max: 5 },
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
return (
|
||||
<Create {...args} isOpen={true} onClose={() => {}}>
|
||||
{args.children}
|
||||
</Create>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
isOpen: true,
|
||||
title: "What do you call your group's new policy?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Policy name" value="" />
|
||||
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
|
||||
0/48
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: false,
|
||||
};
|
||||
|
||||
export const WithStepper = Template.bind({});
|
||||
WithStepper.args = {
|
||||
isOpen: true,
|
||||
title: "What do you call your group's new policy?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Policy name" value="" />
|
||||
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
|
||||
0/48
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: false,
|
||||
currentStep: 1,
|
||||
totalSteps: 3,
|
||||
};
|
||||
|
||||
export const Step2 = Template.bind({});
|
||||
Step2.args = {
|
||||
isOpen: true,
|
||||
title: "How should conflicts be resolved?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Enter text" value="" />
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: false,
|
||||
currentStep: 2,
|
||||
totalSteps: 3,
|
||||
};
|
||||
|
||||
export const Step3 = Template.bind({});
|
||||
Step3.args = {
|
||||
isOpen: true,
|
||||
title: "Final step",
|
||||
description: "Review your settings",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--color-content-default-primary)]">
|
||||
Review your policy configuration
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Finish",
|
||||
nextButtonDisabled: false,
|
||||
currentStep: 3,
|
||||
totalSteps: 3,
|
||||
};
|
||||
|
||||
export const WithoutFooter = Template.bind({});
|
||||
WithoutFooter.args = {
|
||||
isOpen: true,
|
||||
title: "Simple Create Dialog",
|
||||
description: "This create dialog has no footer buttons",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--color-content-default-primary)]">
|
||||
Modal content without footer
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: false,
|
||||
showNextButton: false,
|
||||
};
|
||||
|
||||
export const NextButtonDisabled = Template.bind({});
|
||||
NextButtonDisabled.args = {
|
||||
isOpen: true,
|
||||
title: "What do you call your group's new policy?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Policy name" value="" />
|
||||
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
|
||||
0/48
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: true,
|
||||
currentStep: 1,
|
||||
totalSteps: 3,
|
||||
};
|
||||
@@ -0,0 +1,85 @@
|
||||
import React from "react";
|
||||
import Tooltip from "../../app/components/modals/Tooltip";
|
||||
import Button from "../../app/components/buttons/Button";
|
||||
|
||||
export default {
|
||||
title: "Components/Modals/Tooltip",
|
||||
component: Tooltip,
|
||||
argTypes: {
|
||||
position: {
|
||||
control: { type: "select" },
|
||||
options: ["top", "bottom"],
|
||||
},
|
||||
disabled: {
|
||||
control: { type: "boolean" },
|
||||
},
|
||||
text: {
|
||||
control: { type: "text" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => (
|
||||
<div className="p-16 flex items-center justify-center min-h-[200px]">
|
||||
<Tooltip {...args}>
|
||||
<Button variant="default" size="medium">
|
||||
Hover me
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
text: "Tooltip text goes here",
|
||||
position: "top",
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
export const Top = Template.bind({});
|
||||
Top.args = {
|
||||
text: "Tooltip positioned at top",
|
||||
position: "top",
|
||||
};
|
||||
|
||||
export const Bottom = Template.bind({});
|
||||
Bottom.args = {
|
||||
text: "Tooltip positioned at bottom",
|
||||
position: "bottom",
|
||||
};
|
||||
|
||||
export const Disabled = Template.bind({});
|
||||
Disabled.args = {
|
||||
text: "This tooltip is disabled",
|
||||
disabled: true,
|
||||
};
|
||||
|
||||
export const LongText = Template.bind({});
|
||||
LongText.args = {
|
||||
text: "This is a longer tooltip text that demonstrates how the component handles multiple words and extended content",
|
||||
position: "top",
|
||||
};
|
||||
|
||||
export const WithIcon = () => (
|
||||
<div className="p-16 flex items-center justify-center min-h-[200px]">
|
||||
<Tooltip text="Tooltip with icon button" position="top">
|
||||
<button className="p-2 rounded-full hover:bg-[var(--color-surface-default-tertiary)] transition-colors">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 9V11M10 15H10.01M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
Reference in New Issue
Block a user