55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
|
|
import { Dialog, Button, TextField } from '../components/ui';
|
|
|
|
const meta = {
|
|
title: 'Overlays/Dialog',
|
|
component: Dialog,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Modal dialog built on Radix Dialog. Pass a `trigger` to wire open/close automatically, or control it with `open` / `onOpenChange`. Title is required; description, body, and footer are optional slots.',
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
title: { control: 'text' },
|
|
description: { control: 'text' },
|
|
trigger: { control: false },
|
|
children: { control: false },
|
|
footer: { control: false },
|
|
},
|
|
args: {
|
|
title: 'Rename project',
|
|
description: 'Choose a new name for this project.',
|
|
trigger: <Button variant="primary">Open dialog</Button>,
|
|
},
|
|
} satisfies Meta<typeof Dialog>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Playground: Story = {};
|
|
|
|
export const WithBody: Story = {
|
|
name: 'With body',
|
|
render: () => (
|
|
<Dialog
|
|
trigger={<Button variant="primary">Open dialog</Button>}
|
|
title="Rename project"
|
|
description="Choose a new name for this project."
|
|
footer={<Button variant="primary">Save</Button>}
|
|
>
|
|
<TextField placeholder="Project name" defaultValue="My project" />
|
|
</Dialog>
|
|
),
|
|
};
|
|
|
|
export const NoDescription: Story = {
|
|
name: 'No description',
|
|
args: {
|
|
description: undefined,
|
|
title: 'Confirm action',
|
|
},
|
|
};
|