Skip to content

Commit ff436c0

Browse files
AunshonAunshon
authored
Merge pull request #75 from getdokan/add-dialog-component
feat: add Dialog component with various demo stories
2 parents a6a2897 + 0a4900e commit ff436c0

4 files changed

Lines changed: 447 additions & 0 deletions

File tree

‎src/components/ui/Dialog.stories.tsx‎

Lines changed: 276 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import {
3+
Dialog,
4+
DialogTrigger,
5+
DialogContent,
6+
DialogHeader,
7+
DialogFooter,
8+
DialogTitle,
9+
DialogDescription,
10+
DialogClose,
11+
Button,
12+
Input,
13+
Label,
14+
} from "./index";
15+
16+
function DialogDemo() {
17+
return (
18+
<Dialog>
19+
<DialogTrigger render={<Button variant="outline" />}>
20+
Edit Profile
21+
</DialogTrigger>
22+
<DialogContent className="sm:max-w-[425px]">
23+
<DialogHeader>
24+
<DialogTitle>Edit profile</DialogTitle>
25+
<DialogDescription>
26+
Make changes to your profile here. Click save when you&apos;re done.
27+
</DialogDescription>
28+
</DialogHeader>
29+
<div className="grid gap-4 py-4">
30+
<div className="grid grid-cols-4 items-center gap-4">
31+
<Label htmlFor="name" className="text-end">
32+
Name
33+
</Label>
34+
<Input
35+
id="name"
36+
defaultValue="Pedro Duarte"
37+
className="col-span-3"
38+
/>
39+
</div>
40+
<div className="grid grid-cols-4 items-center gap-4">
41+
<Label htmlFor="username" className="text-end">
42+
Username
43+
</Label>
44+
<Input
45+
id="username"
46+
defaultValue="@peduarte"
47+
className="col-span-3"
48+
/>
49+
</div>
50+
</div>
51+
<DialogFooter>
52+
<DialogClose render={<Button variant="outline" />}>
53+
Cancel
54+
</DialogClose>
55+
<Button type="submit">Save changes</Button>
56+
</DialogFooter>
57+
</DialogContent>
58+
</Dialog>
59+
);
60+
}
61+
62+
function DialogCustomCloseDemo() {
63+
return (
64+
<Dialog>
65+
<DialogTrigger render={<Button variant="outline" />}>
66+
Custom Close Button
67+
</DialogTrigger>
68+
<DialogContent showCloseButton={false}>
69+
<DialogHeader>
70+
<DialogTitle>Custom Close</DialogTitle>
71+
<DialogDescription>
72+
This dialog uses a custom close button in the footer instead of the
73+
default X button.
74+
</DialogDescription>
75+
</DialogHeader>
76+
<div className="py-4">
77+
<p className="text-sm text-muted-foreground">
78+
You can customize the close behavior by using the DialogClose
79+
component anywhere inside the dialog.
80+
</p>
81+
</div>
82+
<DialogFooter>
83+
<DialogClose render={<Button variant="outline" />}>
84+
Close
85+
</DialogClose>
86+
</DialogFooter>
87+
</DialogContent>
88+
</Dialog>
89+
);
90+
}
91+
92+
function DialogNoCloseButtonDemo() {
93+
return (
94+
<Dialog>
95+
<DialogTrigger render={<Button variant="outline" />}>
96+
No Close Button
97+
</DialogTrigger>
98+
<DialogContent showCloseButton={false}>
99+
<DialogHeader>
100+
<DialogTitle>No Close Button</DialogTitle>
101+
<DialogDescription>
102+
This dialog has no close button. Click outside or press Escape to
103+
close it.
104+
</DialogDescription>
105+
</DialogHeader>
106+
<div className="py-4">
107+
<p className="text-sm text-muted-foreground">
108+
Use <code className="text-foreground">showCloseButton=&#123;false&#125;</code> to
109+
hide the default close button.
110+
</p>
111+
</div>
112+
</DialogContent>
113+
</Dialog>
114+
);
115+
}
116+
117+
function DialogScrollableDemo() {
118+
return (
119+
<Dialog>
120+
<DialogTrigger render={<Button variant="outline" />}>
121+
Scrollable Content
122+
</DialogTrigger>
123+
<DialogContent className="max-h-[80vh] overflow-hidden flex flex-col">
124+
<DialogHeader>
125+
<DialogTitle>Terms of Service</DialogTitle>
126+
<DialogDescription>
127+
Please read the following terms carefully.
128+
</DialogDescription>
129+
</DialogHeader>
130+
<div className="overflow-y-auto flex-1 py-4 pe-2">
131+
<div className="space-y-4 text-sm text-muted-foreground">
132+
<p>
133+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
134+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
135+
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
136+
aliquip ex ea commodo consequat.
137+
</p>
138+
<p>
139+
Duis aute irure dolor in reprehenderit in voluptate velit esse
140+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
141+
cupidatat non proident, sunt in culpa qui officia deserunt mollit
142+
anim id est laborum.
143+
</p>
144+
<p>
145+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
146+
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
147+
quae ab illo inventore veritatis et quasi architecto beatae vitae
148+
dicta sunt explicabo.
149+
</p>
150+
<p>
151+
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
152+
aut fugit, sed quia consequuntur magni dolores eos qui ratione
153+
voluptatem sequi nesciunt.
154+
</p>
155+
<p>
156+
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
157+
consectetur, adipisci velit, sed quia non numquam eius modi tempora
158+
incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
159+
</p>
160+
<p>
161+
Ut enim ad minima veniam, quis nostrum exercitationem ullam
162+
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
163+
consequatur? Quis autem vel eum iure reprehenderit qui in ea
164+
voluptate velit esse quam nihil molestiae consequatur.
165+
</p>
166+
<p>
167+
At vero eos et accusamus et iusto odio dignissimos ducimus qui
168+
blanditiis praesentium voluptatum deleniti atque corrupti quos
169+
dolores et quas molestias excepturi sint occaecati cupiditate non
170+
provident.
171+
</p>
172+
<p>
173+
Similique sunt in culpa qui officia deserunt mollitia animi, id est
174+
laborum et dolorum fuga. Et harum quidem rerum facilis est et
175+
expedita distinctio.
176+
</p>
177+
</div>
178+
</div>
179+
<DialogFooter>
180+
<DialogClose render={<Button variant="outline" />}>
181+
Decline
182+
</DialogClose>
183+
<Button>Accept</Button>
184+
</DialogFooter>
185+
</DialogContent>
186+
</Dialog>
187+
);
188+
}
189+
190+
function DialogStickyFooterDemo() {
191+
return (
192+
<Dialog>
193+
<DialogTrigger render={<Button variant="outline" />}>
194+
Sticky Footer
195+
</DialogTrigger>
196+
<DialogContent className="max-h-[80vh] overflow-hidden flex flex-col gap-0 p-0">
197+
<DialogHeader className="p-6 pb-4">
198+
<DialogTitle>Edit Settings</DialogTitle>
199+
<DialogDescription>
200+
Configure your application settings below. The footer stays fixed at
201+
the bottom.
202+
</DialogDescription>
203+
</DialogHeader>
204+
<div className="overflow-y-auto flex-1 px-6 py-4">
205+
<div className="space-y-6">
206+
<div className="space-y-2">
207+
<Label htmlFor="app-name">Application Name</Label>
208+
<Input id="app-name" defaultValue="My Application" />
209+
</div>
210+
<div className="space-y-2">
211+
<Label htmlFor="app-url">Application URL</Label>
212+
<Input id="app-url" defaultValue="https://example.com" />
213+
</div>
214+
<div className="space-y-2">
215+
<Label htmlFor="api-key">API Key</Label>
216+
<Input id="api-key" defaultValue="sk-xxxxxxxxxxxx" />
217+
</div>
218+
<div className="space-y-2">
219+
<Label htmlFor="webhook">Webhook URL</Label>
220+
<Input id="webhook" defaultValue="https://example.com/webhook" />
221+
</div>
222+
<div className="space-y-2">
223+
<Label htmlFor="callback">Callback URL</Label>
224+
<Input id="callback" defaultValue="https://example.com/callback" />
225+
</div>
226+
<div className="space-y-2">
227+
<Label htmlFor="redirect">Redirect URL</Label>
228+
<Input id="redirect" defaultValue="https://example.com/redirect" />
229+
</div>
230+
<div className="space-y-2">
231+
<Label htmlFor="description">Description</Label>
232+
<Input id="description" defaultValue="A sample application" />
233+
</div>
234+
</div>
235+
</div>
236+
<DialogFooter className="border-t border-border p-6 pt-4">
237+
<DialogClose render={<Button variant="outline" />}>
238+
Cancel
239+
</DialogClose>
240+
<Button>Save changes</Button>
241+
</DialogFooter>
242+
</DialogContent>
243+
</Dialog>
244+
);
245+
}
246+
247+
const meta = {
248+
title: "UI/Dialog",
249+
component: Dialog,
250+
parameters: { layout: "centered" },
251+
tags: ["autodocs"],
252+
} satisfies Meta<typeof Dialog>;
253+
254+
export default meta;
255+
256+
type Story = StoryObj<typeof meta>;
257+
258+
export const Default: Story = {
259+
render: () => <DialogDemo />,
260+
};
261+
262+
export const CustomCloseButton: Story = {
263+
render: () => <DialogCustomCloseDemo />,
264+
};
265+
266+
export const NoCloseButton: Story = {
267+
render: () => <DialogNoCloseButtonDemo />,
268+
};
269+
270+
export const ScrollableContent: Story = {
271+
render: () => <DialogScrollableDemo />,
272+
};
273+
274+
export const StickyFooter: Story = {
275+
render: () => <DialogStickyFooterDemo />,
276+
};

0 commit comments

Comments
 (0)