@neynar/ui 0.1.1

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

@@ -0,0 +1,468 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Settings, User, Bell, Menu, HelpCircle, Check } from "lucide-react";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "../sheet";
+import { Button } from "../button";
+import { Input } from "../input";
+import { Label } from "../label";
+import { Textarea } from "../textarea";
+import { Switch } from "../switch";
+import { Separator } from "../separator";
+
+const meta = {
+  title: "Overlays/Sheet",
+  component: Sheet,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A slide-out panel that displays supplementary content from any edge of the screen. Built on Radix UI Dialog with smooth animations and comprehensive accessibility support. Perfect for navigation menus, settings panels, and contextual forms.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    open: {
+      control: "boolean",
+      description: "Controls the open state of the sheet",
+    },
+    onOpenChange: {
+      action: "onOpenChange",
+      description: "Callback fired when the open state changes",
+    },
+  },
+} satisfies Meta<typeof Sheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all sheet props and configurations.
+ * Use the controls panel to experiment with different sides, content, and states.
+ */
+export const Interactive: Story = {
+  args: {
+    open: false,
+  },
+  render: function InteractiveSheet(args) {
+    const [open, setOpen] = React.useState(args.open);
+    const [side, setSide] = React.useState<"top" | "right" | "bottom" | "left">(
+      "right",
+    );
+    const [hasHeader, setHasHeader] = React.useState(true);
+    const [hasFooter, setHasFooter] = React.useState(true);
+    const [hasForm, setHasForm] = React.useState(false);
+
+    React.useEffect(() => {
+      setOpen(args.open);
+    }, [args.open]);
+
+    const handleOpenChange = (newOpen: boolean) => {
+      setOpen(newOpen);
+      args.onOpenChange?.(newOpen);
+    };
+
+    return (
+      <div className="space-y-4">
+        {/* Controls */}
+        <div className="grid grid-cols-2 gap-4 p-4 border rounded-lg">
+          <div>
+            <Label>Side</Label>
+            <select
+              value={side}
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              onChange={(e) => setSide(e.target.value as any)}
+              className="w-full p-2 border rounded"
+            >
+              <option value="right">Right</option>
+              <option value="left">Left</option>
+              <option value="top">Top</option>
+              <option value="bottom">Bottom</option>
+            </select>
+          </div>
+          <div className="space-y-2">
+            <label className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                checked={hasHeader}
+                onChange={(e) => setHasHeader(e.target.checked)}
+              />
+              Include Header
+            </label>
+            <label className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                checked={hasFooter}
+                onChange={(e) => setHasFooter(e.target.checked)}
+              />
+              Include Footer
+            </label>
+            <label className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                checked={hasForm}
+                onChange={(e) => setHasForm(e.target.checked)}
+              />
+              Form Content
+            </label>
+          </div>
+        </div>
+
+        {/* Sheet Demo */}
+        <Sheet open={open} onOpenChange={handleOpenChange}>
+          <SheetTrigger asChild>
+            <Button>Open Sheet ({side})</Button>
+          </SheetTrigger>
+          <SheetContent
+            side={side}
+            className={
+              side === "top" || side === "bottom" ? "h-[400px]" : undefined
+            }
+          >
+            {hasHeader && (
+              <SheetHeader>
+                <SheetTitle>Interactive Sheet</SheetTitle>
+                <SheetDescription>
+                  This sheet opens from the {side} side. Use the controls above
+                  to customize its behavior.
+                </SheetDescription>
+              </SheetHeader>
+            )}
+
+            <div className="py-4 flex-1">
+              {hasForm ? (
+                <div className="space-y-4">
+                  <div>
+                    <Label htmlFor="name">Name</Label>
+                    <Input id="name" placeholder="Enter your name" />
+                  </div>
+                  <div>
+                    <Label htmlFor="email">Email</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      placeholder="Enter your email"
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="message">Message</Label>
+                    <Textarea id="message" placeholder="Your message..." />
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  <p className="text-sm text-muted-foreground">
+                    This is the main content area of the sheet. You can put any
+                    content here.
+                  </p>
+                  <div className="grid grid-cols-1 gap-2">
+                    <Button variant="ghost" className="justify-start">
+                      <User className="mr-2 h-4 w-4" />
+                      Sample Action 1
+                    </Button>
+                    <Button variant="ghost" className="justify-start">
+                      <Settings className="mr-2 h-4 w-4" />
+                      Sample Action 2
+                    </Button>
+                    <Button variant="ghost" className="justify-start">
+                      <Bell className="mr-2 h-4 w-4" />
+                      Sample Action 3
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {hasFooter && (
+              <SheetFooter>
+                <SheetClose asChild>
+                  <Button variant="outline">Cancel</Button>
+                </SheetClose>
+                <Button>{hasForm ? "Submit" : "Done"}</Button>
+              </SheetFooter>
+            )}
+          </SheetContent>
+        </Sheet>
+
+        <p className="text-xs text-muted-foreground">
+          Current state: {open ? "Open" : "Closed"}
+        </p>
+      </div>
+    );
+  },
+};
+
+/**
+ * Demonstrates all available sheet variants and configurations.
+ * Shows sheets from all four sides with different content types.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4">
+      {/* Right Side - Settings */}
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline">Settings (Right)</Button>
+        </SheetTrigger>
+        <SheetContent side="right">
+          <SheetHeader>
+            <SheetTitle>Settings</SheetTitle>
+            <SheetDescription>Configure your preferences</SheetDescription>
+          </SheetHeader>
+          <div className="space-y-4 py-4">
+            <div className="flex items-center justify-between">
+              <Label>Notifications</Label>
+              <Switch defaultChecked />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label>Dark Mode</Label>
+              <Switch />
+            </div>
+          </div>
+          <SheetFooter>
+            <SheetClose asChild>
+              <Button>Done</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
+      {/* Left Side - Navigation */}
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline">
+            <Menu className="mr-2 h-4 w-4" />
+            Menu (Left)
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left" className="w-[300px]">
+          <SheetHeader>
+            <SheetTitle>Navigation</SheetTitle>
+            <SheetDescription>Browse app sections</SheetDescription>
+          </SheetHeader>
+          <nav className="space-y-2 py-4">
+            <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">
+              <HelpCircle className="mr-2 h-4 w-4" />
+              Help
+            </Button>
+          </nav>
+        </SheetContent>
+      </Sheet>
+
+      {/* Top Side - Notifications */}
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline">Notifications (Top)</Button>
+        </SheetTrigger>
+        <SheetContent side="top" className="h-[250px]">
+          <SheetHeader>
+            <SheetTitle>Recent Notifications</SheetTitle>
+            <SheetDescription>Your latest updates</SheetDescription>
+          </SheetHeader>
+          <div className="py-4">
+            <div className="space-y-2">
+              <div className="flex items-center gap-2 p-2 bg-blue-50 dark:bg-blue-950 rounded">
+                <Check className="h-4 w-4 text-blue-600" />
+                <span className="text-sm">Task completed successfully</span>
+              </div>
+              <div className="flex items-center gap-2 p-2 bg-green-50 dark:bg-green-950 rounded">
+                <Bell className="h-4 w-4 text-green-600" />
+                <span className="text-sm">New message received</span>
+              </div>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      {/* Bottom Side - Quick Actions */}
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline">Quick Actions (Bottom)</Button>
+        </SheetTrigger>
+        <SheetContent side="bottom" className="h-[300px]">
+          <SheetHeader>
+            <SheetTitle>Quick Actions</SheetTitle>
+            <SheetDescription>Common tasks at your fingertips</SheetDescription>
+          </SheetHeader>
+          <div className="grid grid-cols-2 gap-3 py-4">
+            <Button>Create New</Button>
+            <Button variant="outline">Import</Button>
+            <Button variant="secondary">Export</Button>
+            <Button variant="ghost">Archive</Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "All available sheet sides and common use cases: settings panel (right), navigation menu (left), notifications banner (top), and quick actions panel (bottom).",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world example showing a sheet in a typical application context.
+ * Features a mobile-responsive navigation sheet with user profile section.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="min-h-[400px] border rounded-lg bg-background">
+      {/* Mock App Header */}
+      <header className="flex items-center justify-between p-4 border-b">
+        <h1 className="text-lg font-semibold">Dashboard App</h1>
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="sm">
+            Profile
+          </Button>
+
+          {/* Navigation Sheet */}
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="outline" size="sm">
+                <Menu className="h-4 w-4" />
+                <span className="sr-only">Open menu</span>
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-[280px] sm:w-[350px]">
+              <SheetHeader>
+                <SheetTitle>Navigation</SheetTitle>
+                <SheetDescription>
+                  Access all sections of the application
+                </SheetDescription>
+              </SheetHeader>
+
+              <div className="py-4">
+                {/* User Section */}
+                <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
+                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
+                    <User className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium">John Doe</p>
+                    <p className="text-xs text-muted-foreground">
+                      john@example.com
+                    </p>
+                  </div>
+                </div>
+
+                <Separator className="my-4" />
+
+                {/* Navigation Links */}
+                <nav className="space-y-1">
+                  <div className="px-2 py-1.5">
+                    <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                      Main
+                    </h4>
+                  </div>
+                  <Button variant="ghost" className="w-full justify-start h-9">
+                    📊 Dashboard
+                  </Button>
+                  <Button variant="ghost" className="w-full justify-start h-9">
+                    📝 Projects
+                  </Button>
+                  <Button variant="ghost" className="w-full justify-start h-9">
+                    ✅ Tasks
+                  </Button>
+                  <Button variant="ghost" className="w-full justify-start h-9">
+                    📈 Analytics
+                  </Button>
+
+                  <Separator className="my-3" />
+
+                  <div className="px-2 py-1.5">
+                    <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                      Account
+                    </h4>
+                  </div>
+                  <Button variant="ghost" className="w-full justify-start h-9">
+                    <Settings className="mr-2 h-4 w-4" />
+                    Settings
+                  </Button>
+                  <Button variant="ghost" className="w-full justify-start h-9">
+                    <Bell className="mr-2 h-4 w-4" />
+                    Notifications
+                  </Button>
+                  <Button variant="ghost" className="w-full justify-start h-9">
+                    <HelpCircle className="mr-2 h-4 w-4" />
+                    Help & Support
+                  </Button>
+                </nav>
+              </div>
+
+              <SheetFooter className="border-t pt-4">
+                <div className="flex w-full justify-between">
+                  <Button variant="ghost" size="sm">
+                    🌙 Dark Mode
+                  </Button>
+                  <SheetClose asChild>
+                    <Button variant="outline" size="sm">
+                      Close
+                    </Button>
+                  </SheetClose>
+                </div>
+              </SheetFooter>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </header>
+
+      {/* Mock App Content */}
+      <main className="p-6">
+        <div className="space-y-4">
+          <h2 className="text-xl font-semibold">Welcome to your Dashboard</h2>
+          <p className="text-muted-foreground">
+            This is a realistic example of how the Sheet component works in a
+            real application. Click the menu button in the header to see the
+            navigation sheet in action.
+          </p>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+            <div className="p-4 border rounded-lg">
+              <h3 className="font-medium">Active Projects</h3>
+              <p className="text-2xl font-bold text-primary">12</p>
+            </div>
+            <div className="p-4 border rounded-lg">
+              <h3 className="font-medium">Completed Tasks</h3>
+              <p className="text-2xl font-bold text-green-600">48</p>
+            </div>
+            <div className="p-4 border rounded-lg">
+              <h3 className="font-medium">Team Members</h3>
+              <p className="text-2xl font-bold text-blue-600">8</p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "A complete application example showing how the Sheet component integrates into a real dashboard interface. Features responsive design, user profile section, and organized navigation structure.",
+      },
+    },
+  },
+};