From 2cc12bc5998f8cef092ef518db73c1d8fcf46b92 Mon Sep 17 00:00:00 2001
From: Moment <73689580+xun082@users.noreply.github.com>
Date: Fri, 19 Jul 2024 16:49:33 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=F0=9F=93=9A=20=E6=B7=BB=E5=8A=A0=20ui?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3=20(#72)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/avatar/index.stories.tsx    | 37 +++++++++
 src/components/ui/badge/index.stories.tsx     | 35 +++++++++
 src/components/ui/button/index.stories.tsx    | 74 ++++++++++++++++++
 src/components/ui/dialog/index.stories.tsx    | 54 +++++++++++++
 .../ui/dropdown-menu/index.stories.tsx        | 75 +++++++++++++++++++
 src/components/ui/input/index.stories.tsx     | 30 ++++++++
 .../ui/scroll-area/index.stories.tsx          | 23 ++++++
 7 files changed, 328 insertions(+)
 create mode 100644 src/components/ui/avatar/index.stories.tsx
 create mode 100644 src/components/ui/badge/index.stories.tsx
 create mode 100644 src/components/ui/button/index.stories.tsx
 create mode 100644 src/components/ui/dialog/index.stories.tsx
 create mode 100644 src/components/ui/dropdown-menu/index.stories.tsx
 create mode 100644 src/components/ui/input/index.stories.tsx
 create mode 100644 src/components/ui/scroll-area/index.stories.tsx

diff --git a/src/components/ui/avatar/index.stories.tsx b/src/components/ui/avatar/index.stories.tsx
new file mode 100644
index 0000000..1bdac7c
--- /dev/null
+++ b/src/components/ui/avatar/index.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Avatar, AvatarImage, AvatarFallback } from './index';
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+  subcomponents: { AvatarImage, AvatarFallback },
+} as Meta;
+
+type AvatarProps = {
+  src: string;
+  alt: string;
+  fallback: string;
+};
+
+const Template: StoryFn<AvatarProps> = (args) => (
+  <Avatar>
+    <AvatarImage src={args.src} alt={args.alt} />
+    <AvatarFallback>{args.fallback}</AvatarFallback>
+  </Avatar>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  src: 'https://via.placeholder.com/150',
+  alt: 'Avatar Image',
+  fallback: 'AB',
+};
+
+export const WithFallback = Template.bind({});
+WithFallback.args = {
+  src: '',
+  alt: 'Avatar Image',
+  fallback: 'AB',
+};
diff --git a/src/components/ui/badge/index.stories.tsx b/src/components/ui/badge/index.stories.tsx
new file mode 100644
index 0000000..bd908ff
--- /dev/null
+++ b/src/components/ui/badge/index.stories.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Badge, BadgeProps } from './index';
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+} as Meta;
+
+const Template: StoryFn<BadgeProps> = (args) => <Badge {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Default Badge',
+  variant: 'default',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  children: 'Secondary Badge',
+  variant: 'secondary',
+};
+
+export const Destructive = Template.bind({});
+Destructive.args = {
+  children: 'Destructive Badge',
+  variant: 'destructive',
+};
+
+export const Outline = Template.bind({});
+Outline.args = {
+  children: 'Outline Badge',
+  variant: 'outline',
+};
diff --git a/src/components/ui/button/index.stories.tsx b/src/components/ui/button/index.stories.tsx
new file mode 100644
index 0000000..6207beb
--- /dev/null
+++ b/src/components/ui/button/index.stories.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Button, ButtonProps } from './index';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+} as Meta;
+
+const Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Default Button',
+  variant: 'default',
+  size: 'default',
+};
+
+export const Destructive = Template.bind({});
+Destructive.args = {
+  children: 'Destructive Button',
+  variant: 'destructive',
+  size: 'default',
+};
+
+export const Outline = Template.bind({});
+Outline.args = {
+  children: 'Outline Button',
+  variant: 'outline',
+  size: 'default',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  children: 'Secondary Button',
+  variant: 'secondary',
+  size: 'default',
+};
+
+export const Ghost = Template.bind({});
+Ghost.args = {
+  children: 'Ghost Button',
+  variant: 'ghost',
+  size: 'default',
+};
+
+export const Link = Template.bind({});
+Link.args = {
+  children: 'Link Button',
+  variant: 'link',
+  size: 'default',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  children: 'Small Button',
+  variant: 'default',
+  size: 'sm',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  children: 'Large Button',
+  variant: 'default',
+  size: 'lg',
+};
+
+export const Icon = Template.bind({});
+Icon.args = {
+  children: 'Icon Button',
+  variant: 'default',
+  size: 'icon',
+};
diff --git a/src/components/ui/dialog/index.stories.tsx b/src/components/ui/dialog/index.stories.tsx
new file mode 100644
index 0000000..d616431
--- /dev/null
+++ b/src/components/ui/dialog/index.stories.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from './index';
+
+export default {
+  title: 'Components/Dialog',
+  component: Dialog,
+  subcomponents: {
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+  },
+} as Meta;
+
+const Template: StoryFn = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <button className="p-2 bg-blue-500 text-white rounded">Open Dialog</button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Dialog Title</DialogTitle>
+        <DialogDescription>This is the dialog description</DialogDescription>
+      </DialogHeader>
+      <div className="mt-4">Dialog Content</div>
+      <DialogFooter>
+        <button className="p-2 bg-gray-200 rounded">Cancel</button>
+        <button className="p-2 bg-blue-500 text-white rounded">Confirm</button>
+      </DialogFooter>
+      <DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </Dialog>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/src/components/ui/dropdown-menu/index.stories.tsx b/src/components/ui/dropdown-menu/index.stories.tsx
new file mode 100644
index 0000000..06d4201
--- /dev/null
+++ b/src/components/ui/dropdown-menu/index.stories.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './index';
+
+export default {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+  subcomponents: {
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuCheckboxItem,
+    DropdownMenuRadioItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuGroup,
+    DropdownMenuPortal,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuRadioGroup,
+  },
+} as Meta;
+
+const Template: StoryFn = (args) => (
+  <DropdownMenu {...args}>
+    <DropdownMenuTrigger asChild>
+      <button className="p-2 bg-blue-500 text-white rounded">Open Menu</button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuLabel>Menu</DropdownMenuLabel>
+      <DropdownMenuItem>Item 1</DropdownMenuItem>
+      <DropdownMenuItem>Item 2</DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuCheckboxItem checked>Checkbox Item</DropdownMenuCheckboxItem>
+      <DropdownMenuRadioGroup value="radio1">
+        <DropdownMenuRadioItem value="radio1">Radio Item 1</DropdownMenuRadioItem>
+        <DropdownMenuRadioItem value="radio2">Radio Item 2</DropdownMenuRadioItem>
+      </DropdownMenuRadioGroup>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>Sub Menu</DropdownMenuSubTrigger>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem>Sub Item 1</DropdownMenuItem>
+          <DropdownMenuItem>Sub Item 2</DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>
+        Item with Shortcut
+        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/src/components/ui/input/index.stories.tsx b/src/components/ui/input/index.stories.tsx
new file mode 100644
index 0000000..18ef79d
--- /dev/null
+++ b/src/components/ui/input/index.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Input, InputProps } from './index';
+
+export default {
+  title: 'Components/Input',
+  component: Input,
+} as Meta;
+
+const Template: StoryFn<InputProps> = (args) => <Input {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  type: 'text',
+  placeholder: 'Enter text...',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  type: 'text',
+  placeholder: 'Disabled input...',
+  disabled: true,
+};
+
+export const WithDefaultValue = Template.bind({});
+WithDefaultValue.args = {
+  type: 'text',
+  defaultValue: 'Default value',
+};
diff --git a/src/components/ui/scroll-area/index.stories.tsx b/src/components/ui/scroll-area/index.stories.tsx
new file mode 100644
index 0000000..6ba68d0
--- /dev/null
+++ b/src/components/ui/scroll-area/index.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { ScrollArea, ScrollBar } from './index';
+
+export default {
+  title: 'Components/ScrollArea',
+  component: ScrollArea,
+  subcomponents: { ScrollBar },
+} as Meta;
+
+const Template: StoryFn = (args) => (
+  <div style={{ height: '200px', width: '200px' }}>
+    <ScrollArea {...args}>
+      <div style={{ height: '400px', width: '400px', backgroundColor: '#f0f0f0' }}>
+        This is a scrollable content area. Add more content here to see the scrollbars in action.
+      </div>
+    </ScrollArea>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {};