94 lines
2.2 KiB
TypeScript
94 lines
2.2 KiB
TypeScript
import preview from "#.storybook/preview";
|
|
|
|
import { AnimatedModal } from "../../src/ts/components/common/AnimatedModal";
|
|
import { ModalId, showModal } from "../../src/ts/states/modals";
|
|
|
|
function ModalTrigger(props: { modalId: ModalId; label: string }) {
|
|
return (
|
|
<button
|
|
style={{
|
|
padding: "8px 16px",
|
|
cursor: "pointer",
|
|
"background-color": "var(--sub-alt-color)",
|
|
color: "var(--text-color)",
|
|
border: "none",
|
|
"border-radius": "8px",
|
|
}}
|
|
onClick={() => showModal(props.modalId)}
|
|
>
|
|
{props.label}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
const meta = preview.meta({
|
|
title: "Common/AnimatedModal",
|
|
component: AnimatedModal,
|
|
parameters: {
|
|
layout: "fullscreen",
|
|
},
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
mode: { control: "select", options: ["modal", "dialog"] },
|
|
animationMode: {
|
|
control: "select",
|
|
options: ["none", "both", "modalOnly"],
|
|
},
|
|
title: { control: "text" },
|
|
modalClass: { control: "text" },
|
|
wrapperClass: { control: "text" },
|
|
},
|
|
decorators: [
|
|
(Story, context) => {
|
|
// oxlint-disable-next-line typescript/no-unsafe-member-access -- storybook decorator context is untyped
|
|
const modalId = context.args.id as ModalId;
|
|
// oxlint-disable-next-line typescript/no-unsafe-member-access -- storybook decorator context is untyped
|
|
const title = (context.args.title as string) ?? "Modal";
|
|
return (
|
|
<div>
|
|
<ModalTrigger modalId={modalId} label={`Open ${title}`} />
|
|
<Story />
|
|
</div>
|
|
);
|
|
},
|
|
],
|
|
});
|
|
|
|
export const Default = meta.story({
|
|
args: {
|
|
id: "Contact",
|
|
title: "Example Modal",
|
|
children: (
|
|
<div>
|
|
<p>This is modal content.</p>
|
|
</div>
|
|
),
|
|
},
|
|
});
|
|
|
|
export const NoAnimation = meta.story({
|
|
args: {
|
|
id: "Support",
|
|
title: "No Animation Modal",
|
|
animationMode: "none",
|
|
children: (
|
|
<div>
|
|
<p>This modal has no animation.</p>
|
|
</div>
|
|
),
|
|
},
|
|
});
|
|
|
|
export const DialogMode = meta.story({
|
|
args: {
|
|
id: "DevOptions",
|
|
mode: "dialog",
|
|
title: "Dialog Mode",
|
|
children: (
|
|
<div>
|
|
<p>This uses dialog mode instead of modal.</p>
|
|
</div>
|
|
),
|
|
},
|
|
});
|