@a2v2ai/uikit 0.0.1 → 0.0.3

package/Drawer/Drawer.stories.tsx

@@ -0,0 +1,721 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "../Button/Button"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerBody,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+} from "./Drawer"
+
+const meta: Meta<typeof Drawer> = {
+  title: "Components/Drawer",
+  component: Drawer,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "light",
+      values: [
+        { name: "dark", value: "#1a1a1a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    direction: {
+      control: "select",
+      options: ["bottom", "top", "left", "right"],
+      description: "Direction the drawer slides in from",
+      table: {
+        defaultValue: { summary: "bottom" },
+      },
+    },
+    dismissible: {
+      control: "boolean",
+      description: "Whether clicking outside or dragging dismisses the drawer",
+      table: {
+        defaultValue: { summary: "true" },
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Drawer>
+
+export const Default: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Drawer Title</DrawerTitle>
+          <DrawerDescription>
+            This is a drawer component for React.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <Typography>
+            Drawer content goes here. You can put any content inside.
+          </Typography>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button>Save</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Drawer>
+  <DrawerTrigger asChild>
+    <Button>Open Drawer</Button>
+  </DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Drawer Title</DrawerTitle>
+      <DrawerDescription>
+        This is a drawer component for React.
+      </DrawerDescription>
+    </DrawerHeader>
+    <DrawerBody>
+      <Typography>
+        Drawer content goes here.
+      </Typography>
+    </DrawerBody>
+    <DrawerFooter>
+      <DrawerClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </DrawerClose>
+      <Button>Save</Button>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`,
+      },
+    },
+  },
+}
+
+export const FromTop: Story = {
+  render: () => (
+    <Drawer direction="top">
+      <DrawerTrigger asChild>
+        <Button>Open from Top</Button>
+      </DrawerTrigger>
+      <DrawerContent direction="top">
+        <DrawerHeader>
+          <DrawerTitle>Top Drawer</DrawerTitle>
+          <DrawerDescription>
+            This drawer slides in from the top.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <Typography>Content for the top drawer.</Typography>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button>Close</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Drawer direction="top">
+  <DrawerTrigger asChild>
+    <Button>Open from Top</Button>
+  </DrawerTrigger>
+  <DrawerContent direction="top">
+    <DrawerHeader>
+      <DrawerTitle>Top Drawer</DrawerTitle>
+      <DrawerDescription>
+        This drawer slides in from the top.
+      </DrawerDescription>
+    </DrawerHeader>
+    <DrawerBody>
+      <Typography>Content for the top drawer.</Typography>
+    </DrawerBody>
+    <DrawerFooter>
+      <DrawerClose asChild>
+        <Button>Close</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`,
+      },
+    },
+  },
+}
+
+export const FromLeft: Story = {
+  render: () => (
+    <Drawer direction="left">
+      <DrawerTrigger asChild>
+        <Button>Open from Left</Button>
+      </DrawerTrigger>
+      <DrawerContent direction="left" showHandle={false}>
+        <DrawerHeader>
+          <DrawerTitle>Left Drawer</DrawerTitle>
+          <DrawerDescription>
+            This drawer slides in from the left.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <Typography>Content for the left drawer.</Typography>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button>Close</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Drawer direction="left">
+  <DrawerTrigger asChild>
+    <Button>Open from Left</Button>
+  </DrawerTrigger>
+  <DrawerContent direction="left" showHandle={false}>
+    <DrawerHeader>
+      <DrawerTitle>Left Drawer</DrawerTitle>
+      <DrawerDescription>
+        This drawer slides in from the left.
+      </DrawerDescription>
+    </DrawerHeader>
+    <DrawerBody>
+      <Typography>Content for the left drawer.</Typography>
+    </DrawerBody>
+    <DrawerFooter>
+      <DrawerClose asChild>
+        <Button>Close</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`,
+      },
+    },
+  },
+}
+
+export const FromRight: Story = {
+  render: () => (
+    <Drawer direction="right">
+      <DrawerTrigger asChild>
+        <Button>Open from Right</Button>
+      </DrawerTrigger>
+      <DrawerContent direction="right" showHandle={false}>
+        <DrawerHeader>
+          <DrawerTitle>Right Drawer</DrawerTitle>
+          <DrawerDescription>
+            This drawer slides in from the right.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <Typography>Content for the right drawer.</Typography>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button>Close</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Drawer direction="right">
+  <DrawerTrigger asChild>
+    <Button>Open from Right</Button>
+  </DrawerTrigger>
+  <DrawerContent direction="right" showHandle={false}>
+    <DrawerHeader>
+      <DrawerTitle>Right Drawer</DrawerTitle>
+      <DrawerDescription>
+        This drawer slides in from the right.
+      </DrawerDescription>
+    </DrawerHeader>
+    <DrawerBody>
+      <Typography>Content for the right drawer.</Typography>
+    </DrawerBody>
+    <DrawerFooter>
+      <DrawerClose asChild>
+        <Button>Close</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`,
+      },
+    },
+  },
+}
+
+export const NoHandle: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Open Drawer (No Handle)</Button>
+      </DrawerTrigger>
+      <DrawerContent showHandle={false}>
+        <DrawerHeader>
+          <DrawerTitle>No Handle</DrawerTitle>
+          <DrawerDescription>
+            This drawer has the handle hidden.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <Typography>Content without the drag handle visible.</Typography>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button>Close</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Drawer>
+  <DrawerTrigger asChild>
+    <Button>Open Drawer (No Handle)</Button>
+  </DrawerTrigger>
+  <DrawerContent showHandle={false}>
+    <DrawerHeader>
+      <DrawerTitle>No Handle</DrawerTitle>
+      <DrawerDescription>
+        This drawer has the handle hidden.
+      </DrawerDescription>
+    </DrawerHeader>
+    <DrawerBody>
+      <Typography>Content without the drag handle visible.</Typography>
+    </DrawerBody>
+    <DrawerFooter>
+      <DrawerClose asChild>
+        <Button>Close</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`,
+      },
+    },
+  },
+}
+
+export const WithLongContent: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Open with Long Content</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Scrollable Content</DrawerTitle>
+          <DrawerDescription>
+            This drawer has scrollable content.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <Flex direction="column" gap={4}>
+            {Array.from({ length: 20 }, (_, i) => (
+              <Typography key={i}>
+                Item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              </Typography>
+            ))}
+          </Flex>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button>Save</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Drawer>
+  <DrawerTrigger asChild>
+    <Button>Open with Long Content</Button>
+  </DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Scrollable Content</DrawerTitle>
+      <DrawerDescription>
+        This drawer has scrollable content.
+      </DrawerDescription>
+    </DrawerHeader>
+    <DrawerBody>
+      {/* Long content here - DrawerBody handles scrolling */}
+      <Typography>Item 1: Lorem ipsum...</Typography>
+      <Typography>Item 2: Lorem ipsum...</Typography>
+      {/* ... more items */}
+    </DrawerBody>
+    <DrawerFooter>
+      <DrawerClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </DrawerClose>
+      <Button>Save</Button>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`,
+      },
+    },
+  },
+}
+
+export const NonDismissible: Story = {
+  render: () => (
+    <Drawer dismissible={false}>
+      <DrawerTrigger asChild>
+        <Button>Open Non-Dismissible Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Non-Dismissible Drawer</DrawerTitle>
+          <DrawerDescription>
+            This drawer cannot be closed by clicking outside or dragging down.
+            You must use the close button.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <Typography>
+            Use dismissible=false when you need to prevent accidental closure,
+            such as during form submissions or important confirmations.
+          </Typography>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button>Close</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Drawer dismissible={false}>
+  <DrawerTrigger asChild>
+    <Button>Open Non-Dismissible Drawer</Button>
+  </DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Non-Dismissible Drawer</DrawerTitle>
+      <DrawerDescription>
+        This drawer cannot be closed by clicking outside.
+      </DrawerDescription>
+    </DrawerHeader>
+    <DrawerBody>
+      <Typography>
+        Use dismissible={false} to prevent accidental closure.
+      </Typography>
+    </DrawerBody>
+    <DrawerFooter>
+      <DrawerClose asChild>
+        <Button>Close</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`,
+      },
+    },
+  },
+}
+
+export const Loading: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Open Loading Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent loading className="min-h-[300px]">
+        <DrawerHeader>
+          <DrawerTitle>Loading State</DrawerTitle>
+        </DrawerHeader>
+      </DrawerContent>
+    </Drawer>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Drawer>
+  <DrawerTrigger asChild>
+    <Button>Open Loading Drawer</Button>
+  </DrawerTrigger>
+  <DrawerContent loading className="min-h-[300px]">
+    <DrawerHeader>
+      <DrawerTitle>Loading State</DrawerTitle>
+    </DrawerHeader>
+  </DrawerContent>
+</Drawer>`,
+      },
+    },
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={8}>
+      {/* Directions */}
+      <Flex direction="column" gap={4}>
+        <Typography variant="h4">Directions</Typography>
+        <Flex gap={4} wrap="wrap">
+          <Drawer direction="bottom">
+            <DrawerTrigger asChild>
+              <Button>Bottom</Button>
+            </DrawerTrigger>
+            <DrawerContent direction="bottom">
+              <DrawerHeader>
+                <DrawerTitle>Bottom Drawer</DrawerTitle>
+                <DrawerDescription>Slides up from bottom</DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <Typography>Default direction for mobile-friendly drawers.</Typography>
+              </DrawerBody>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button>Close</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+
+          <Drawer direction="top">
+            <DrawerTrigger asChild>
+              <Button>Top</Button>
+            </DrawerTrigger>
+            <DrawerContent direction="top">
+              <DrawerHeader>
+                <DrawerTitle>Top Drawer</DrawerTitle>
+                <DrawerDescription>Slides down from top</DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <Typography>Good for notifications or alerts.</Typography>
+              </DrawerBody>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button>Close</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+
+          <Drawer direction="left">
+            <DrawerTrigger asChild>
+              <Button>Left</Button>
+            </DrawerTrigger>
+            <DrawerContent direction="left" showHandle={false}>
+              <DrawerHeader>
+                <DrawerTitle>Left Drawer</DrawerTitle>
+                <DrawerDescription>Slides in from left</DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <Typography>Great for navigation menus.</Typography>
+              </DrawerBody>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button>Close</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+
+          <Drawer direction="right">
+            <DrawerTrigger asChild>
+              <Button>Right</Button>
+            </DrawerTrigger>
+            <DrawerContent direction="right" showHandle={false}>
+              <DrawerHeader>
+                <DrawerTitle>Right Drawer</DrawerTitle>
+                <DrawerDescription>Slides in from right</DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <Typography>Ideal for settings or details panels.</Typography>
+              </DrawerBody>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button>Close</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+        </Flex>
+      </Flex>
+
+      {/* Handle Options */}
+      <Flex direction="column" gap={4}>
+        <Typography variant="h4">Handle Options</Typography>
+        <Flex gap={4} wrap="wrap">
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button>With Handle</Button>
+            </DrawerTrigger>
+            <DrawerContent showHandle={true}>
+              <DrawerHeader>
+                <DrawerTitle>With Handle</DrawerTitle>
+                <DrawerDescription>Drag handle is visible</DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <Typography>Users can drag to dismiss.</Typography>
+              </DrawerBody>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button>Close</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button>Without Handle</Button>
+            </DrawerTrigger>
+            <DrawerContent showHandle={false}>
+              <DrawerHeader>
+                <DrawerTitle>Without Handle</DrawerTitle>
+                <DrawerDescription>Handle is hidden</DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <Typography>Cleaner look for certain use cases.</Typography>
+              </DrawerBody>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button>Close</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+        </Flex>
+      </Flex>
+
+      {/* Dismissible Options */}
+      <Flex direction="column" gap={4}>
+        <Typography variant="h4">Dismissible Options</Typography>
+        <Flex gap={4} wrap="wrap">
+          <Drawer dismissible={true}>
+            <DrawerTrigger asChild>
+              <Button>Dismissible (Default)</Button>
+            </DrawerTrigger>
+            <DrawerContent>
+              <DrawerHeader>
+                <DrawerTitle>Dismissible Drawer</DrawerTitle>
+                <DrawerDescription>Can be closed by clicking outside or dragging</DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <Typography>Click outside or drag down to close.</Typography>
+              </DrawerBody>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button>Close</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+
+          <Drawer dismissible={false}>
+            <DrawerTrigger asChild>
+              <Button>Non-Dismissible</Button>
+            </DrawerTrigger>
+            <DrawerContent>
+              <DrawerHeader>
+                <DrawerTitle>Non-Dismissible Drawer</DrawerTitle>
+                <DrawerDescription>Must use the close button</DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <Typography>Cannot be closed by clicking outside or dragging.</Typography>
+              </DrawerBody>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button>Close</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+        </Flex>
+      </Flex>
+
+      {/* Loading State */}
+      <Flex direction="column" gap={4}>
+        <Typography variant="h4">Loading State</Typography>
+        <Flex gap={4} wrap="wrap">
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button>Normal Content</Button>
+            </DrawerTrigger>
+            <DrawerContent loading={false}>
+              <DrawerHeader>
+                <DrawerTitle>Normal Content</DrawerTitle>
+                <DrawerDescription>Content is loaded</DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <Typography>Regular drawer content here.</Typography>
+              </DrawerBody>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button>Close</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button>Loading State</Button>
+            </DrawerTrigger>
+            <DrawerContent loading={true} className="min-h-[300px]">
+              <DrawerHeader>
+                <DrawerTitle>Loading...</DrawerTitle>
+              </DrawerHeader>
+            </DrawerContent>
+          </Drawer>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      source: {
+        code: `// Directions
+<Drawer direction="bottom">...</Drawer>
+<Drawer direction="top">...</Drawer>
+<Drawer direction="left">...</Drawer>
+<Drawer direction="right">...</Drawer>
+
+// Handle Options
+<DrawerContent showHandle={true}>...</DrawerContent>
+<DrawerContent showHandle={false}>...</DrawerContent>
+
+// Dismissible Options
+<Drawer dismissible={true}>...</Drawer>
+<Drawer dismissible={false}>...</Drawer>
+
+// Loading State
+<DrawerContent loading={false}>...</DrawerContent>
+<DrawerContent loading={true}>...</DrawerContent>`,
+      },
+    },
+  },
+}