@neynar/ui 0.1.1

package/src/components/ui/stories/drawer.stories.tsx

@@ -0,0 +1,364 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Menu, Settings, User, Bell } from "lucide-react";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../drawer";
+import { Button } from "../button";
+import { Input } from "../input";
+import { Label } from "../label";
+import { Switch } from "../switch";
+
+const meta = {
+  title: "Overlays/Drawer",
+  component: Drawer,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A mobile-optimized drawer component built on Vaul. Creates sliding panels from screen edges with touch gestures, swipe-to-dismiss, and responsive behavior for mobile-first experiences.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all drawer props and variants.
+ * Use the controls panel to experiment with different configurations.
+ */
+export const Interactive: Story = {
+  args: {
+    direction: "bottom",
+    modal: true,
+  },
+  argTypes: {
+    direction: {
+      control: "select",
+      options: ["bottom", "top", "left", "right"],
+      description: "Direction from which the drawer slides in",
+    },
+    modal: {
+      control: "boolean",
+      description: "Whether the drawer should be modal",
+    },
+    open: {
+      control: "boolean",
+      description: "Controlled open state",
+    },
+  },
+  render: (args) => (
+    <Drawer {...args}>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Interactive Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Interactive Drawer</DrawerTitle>
+          <DrawerDescription>
+            Test different drawer configurations using the controls panel below.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="p-4 space-y-4">
+          <div className="grid gap-2">
+            <Label htmlFor="test-input">Sample Input</Label>
+            <Input id="test-input" placeholder="Type something..." />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label htmlFor="test-switch">Sample Toggle</Label>
+            <Switch id="test-switch" />
+          </div>
+        </div>
+        <DrawerFooter>
+          <Button>Primary Action</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+/**
+ * Systematic display of all drawer directions and configurations.
+ * Shows how the drawer behaves from different screen edges.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4">
+      {/* Bottom Drawer */}
+      <Drawer direction="bottom">
+        <DrawerTrigger asChild>
+          <Button variant="outline" className="w-full">
+            Bottom Drawer
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Bottom Drawer</DrawerTitle>
+            <DrawerDescription>
+              Slides up from the bottom (most common mobile pattern)
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4">
+            <p className="text-sm text-muted-foreground">
+              This is the most common drawer direction for mobile interfaces.
+            </p>
+          </div>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button variant="outline">Close</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+      {/* Top Drawer */}
+      <Drawer direction="top">
+        <DrawerTrigger asChild>
+          <Button variant="outline" className="w-full">
+            Top Drawer
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Top Drawer</DrawerTitle>
+            <DrawerDescription>
+              Slides down from the top
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4">
+            <p className="text-sm text-muted-foreground">
+              Useful for notifications or contextual actions.
+            </p>
+          </div>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button variant="outline">Close</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+      {/* Left Drawer */}
+      <Drawer direction="left">
+        <DrawerTrigger asChild>
+          <Button variant="outline" className="w-full">
+            Left Drawer
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Left Drawer</DrawerTitle>
+            <DrawerDescription>
+              Slides in from the left edge
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4">
+            <p className="text-sm text-muted-foreground">
+              Common for navigation menus and side panels.
+            </p>
+          </div>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button variant="outline">Close</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+      {/* Right Drawer */}
+      <Drawer direction="right">
+        <DrawerTrigger asChild>
+          <Button variant="outline" className="w-full">
+            Right Drawer
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Right Drawer</DrawerTitle>
+            <DrawerDescription>
+              Slides in from the right edge
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4">
+            <p className="text-sm text-muted-foreground">
+              Good for secondary actions or contextual panels.
+            </p>
+          </div>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button variant="outline">Close</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  ),
+};
+
+/**
+ * Real-world mobile app scenario showing drawer in context.
+ * Demonstrates a typical mobile navigation and user profile pattern.
+ */
+export const InContext: Story = {
+  render: () => {
+    const [notificationsEnabled, setNotificationsEnabled] = React.useState(true);
+    const [darkMode, setDarkMode] = React.useState(false);
+
+    return (
+      <div className="w-full max-w-sm mx-auto bg-background border rounded-lg p-4 space-y-4">
+        {/* Mock mobile app header */}
+        <div className="flex items-center justify-between border-b pb-4">
+          <Drawer direction="left">
+            <DrawerTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Menu className="h-5 w-5" />
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent>
+              <DrawerHeader>
+                <DrawerTitle>Navigation</DrawerTitle>
+                <DrawerDescription>
+                  Access main app sections
+                </DrawerDescription>
+              </DrawerHeader>
+              <div className="p-4 space-y-2">
+                <Button variant="ghost" className="w-full justify-start">
+                  <User className="mr-2 h-4 w-4" />
+                  Profile
+                </Button>
+                <Button variant="ghost" className="w-full justify-start">
+                  <Settings className="mr-2 h-4 w-4" />
+                  Settings
+                </Button>
+                <Button variant="ghost" className="w-full justify-start">
+                  <Bell className="mr-2 h-4 w-4" />
+                  Notifications
+                </Button>
+              </div>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button variant="outline">Close Menu</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+
+          <h1 className="text-lg font-semibold">My App</h1>
+
+          <Drawer direction="bottom">
+            <DrawerTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Settings className="h-5 w-5" />
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent>
+              <DrawerHeader>
+                <DrawerTitle>Quick Settings</DrawerTitle>
+                <DrawerDescription>
+                  Adjust your app preferences
+                </DrawerDescription>
+              </DrawerHeader>
+              <div className="p-4 space-y-4">
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label className="text-base">Notifications</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Receive push notifications
+                    </p>
+                  </div>
+                  <Switch 
+                    checked={notificationsEnabled}
+                    onCheckedChange={setNotificationsEnabled}
+                  />
+                </div>
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label className="text-base">Dark Mode</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Use dark theme
+                    </p>
+                  </div>
+                  <Switch 
+                    checked={darkMode}
+                    onCheckedChange={setDarkMode}
+                  />
+                </div>
+              </div>
+              <DrawerFooter>
+                <DrawerClose asChild>
+                  <Button>Save Preferences</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+        </div>
+
+        {/* Mock app content */}
+        <div className="space-y-3">
+          <div className="h-20 bg-muted rounded-lg flex items-center justify-center">
+            <p className="text-sm text-muted-foreground">App Content Area</p>
+          </div>
+          <div className="h-16 bg-muted rounded-lg flex items-center justify-center">
+            <p className="text-sm text-muted-foreground">More Content</p>
+          </div>
+        </div>
+
+        {/* Action button */}
+        <Drawer direction="bottom">
+          <DrawerTrigger asChild>
+            <Button className="w-full">
+              Create New Item
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Create New Item</DrawerTitle>
+              <DrawerDescription>
+                Fill out the form below to create a new item
+              </DrawerDescription>
+            </DrawerHeader>
+            <div className="p-4 space-y-4">
+              <div className="grid gap-2">
+                <Label htmlFor="item-name">Item Name</Label>
+                <Input id="item-name" placeholder="Enter item name..." />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="item-description">Description</Label>
+                <Input id="item-description" placeholder="Enter description..." />
+              </div>
+            </div>
+            <DrawerFooter>
+              <Button>Create Item</Button>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      </div>
+    );
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "A realistic mobile app interface showing how drawers work in context. Features navigation menu (left), settings (bottom), and form creation (bottom) patterns commonly used in mobile applications.",
+      },
+    },
+  },
+};