@neynar/ui 0.1.1

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

@@ -0,0 +1,417 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "../resizable";
+
+const meta = {
+  title: "Layout and Structure/Resizable",
+  component: ResizablePanelGroup,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Accessible resizable panel groups and layouts with keyboard support. Built on react-resizable-panels for creating flexible, user-adjustable interfaces.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    direction: {
+      control: { type: "select" },
+      options: ["horizontal", "vertical"],
+      description: "Layout direction of the panel group",
+      defaultValue: "horizontal",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+  },
+} satisfies Meta<typeof ResizablePanelGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all resizable panel features.
+ * Experiment with different directions, sizes, and handle configurations.
+ */
+export const Interactive: Story = {
+  args: {
+    direction: "horizontal",
+    className: "min-h-[300px] max-w-4xl rounded-lg border",
+  },
+  render: (args) => (
+    <ResizablePanelGroup {...args}>
+      <ResizablePanel defaultSize={25} minSize={15} maxSize={40}>
+        <div className="flex h-full items-center justify-center p-6 bg-blue-50 dark:bg-blue-950">
+          <div className="text-center">
+            <div className="font-semibold text-blue-900 dark:text-blue-100">
+              Panel 1
+            </div>
+            <div className="text-sm text-blue-700 dark:text-blue-300 mt-1">
+              15-40% size range
+            </div>
+          </div>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-full items-center justify-center p-6">
+          <div className="text-center">
+            <div className="font-semibold">Main Content</div>
+            <div className="text-sm text-muted-foreground mt-1">
+              Drag handles to resize
+            </div>
+          </div>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={25} minSize={20}>
+        <div className="flex h-full items-center justify-center p-6 bg-green-50 dark:bg-green-950">
+          <div className="text-center">
+            <div className="font-semibold text-green-900 dark:text-green-100">
+              Panel 3
+            </div>
+            <div className="text-sm text-green-700 dark:text-green-300 mt-1">
+              Min 20% size
+            </div>
+          </div>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+/**
+ * Showcase of different panel configurations and layout variations.
+ * Demonstrates horizontal, vertical, nested, and various handle styles.
+ */
+export const Variants: Story = {
+  args: {
+    direction: "horizontal",
+    className: "min-h-[300px] max-w-4xl rounded-lg border",
+  },
+  render: () => (
+    <div className="space-y-8">
+      {/* Horizontal Layout */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Horizontal Layout</h3>
+        <ResizablePanelGroup
+          direction="horizontal"
+          className="min-h-[200px] max-w-2xl rounded-lg border"
+        >
+          <ResizablePanel defaultSize={50}>
+            <div className="flex h-full items-center justify-center p-4">
+              <span className="font-medium">Left Panel</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={50}>
+            <div className="flex h-full items-center justify-center p-4">
+              <span className="font-medium">Right Panel</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* Vertical Layout */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Vertical Layout</h3>
+        <ResizablePanelGroup
+          direction="vertical"
+          className="min-h-[300px] max-w-lg rounded-lg border"
+        >
+          <ResizablePanel defaultSize={40}>
+            <div className="flex h-full items-center justify-center p-4">
+              <span className="font-medium">Top Panel</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={60}>
+            <div className="flex h-full items-center justify-center p-4">
+              <span className="font-medium">Bottom Panel</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* With Handle Grips */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">With Handle Grips</h3>
+        <ResizablePanelGroup
+          direction="horizontal"
+          className="min-h-[200px] max-w-2xl rounded-lg border"
+        >
+          <ResizablePanel defaultSize={33}>
+            <div className="flex h-full items-center justify-center p-4 bg-orange-50 dark:bg-orange-950">
+              <span className="font-medium text-orange-900 dark:text-orange-100">
+                Panel A
+              </span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={34}>
+            <div className="flex h-full items-center justify-center p-4 bg-purple-50 dark:bg-purple-950">
+              <span className="font-medium text-purple-900 dark:text-purple-100">
+                Panel B
+              </span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={33}>
+            <div className="flex h-full items-center justify-center p-4 bg-cyan-50 dark:bg-cyan-950">
+              <span className="font-medium text-cyan-900 dark:text-cyan-100">
+                Panel C
+              </span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* Nested Panels */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Nested Panels</h3>
+        <ResizablePanelGroup
+          direction="horizontal"
+          className="min-h-[300px] max-w-3xl rounded-lg border"
+        >
+          <ResizablePanel defaultSize={30}>
+            <div className="flex h-full items-center justify-center p-4 bg-gray-50 dark:bg-gray-900">
+              <span className="font-medium">Sidebar</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={70}>
+            <ResizablePanelGroup direction="vertical">
+              <ResizablePanel defaultSize={60}>
+                <div className="flex h-full items-center justify-center p-4">
+                  <span className="font-medium">Main Content</span>
+                </div>
+              </ResizablePanel>
+              <ResizableHandle withHandle />
+              <ResizablePanel defaultSize={40}>
+                <div className="flex h-full items-center justify-center p-4 bg-gray-50 dark:bg-gray-900">
+                  <span className="font-medium">Footer Area</span>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
+
+/**
+ * Real-world example showing resizable panels in a code editor interface.
+ * Demonstrates practical usage with file explorer, editor, and terminal.
+ */
+export const InContext: Story = {
+  args: {
+    direction: "horizontal",
+    className: "min-h-[300px] max-w-4xl rounded-lg border",
+  },
+  render: () => (
+    <div className="max-w-6xl mx-auto">
+      <h3 className="text-lg font-semibold mb-4">Code Editor Layout</h3>
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="min-h-[500px] rounded-lg border bg-background"
+      >
+        {/* File Explorer */}
+        <ResizablePanel defaultSize={20} minSize={15} maxSize={30}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 p-3 border-b bg-muted/50">
+              <div className="w-3 h-3 rounded-full bg-red-500"></div>
+              <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+              <div className="w-3 h-3 rounded-full bg-green-500"></div>
+              <span className="ml-2 text-sm font-medium">Explorer</span>
+            </div>
+            <div className="flex-1 p-3 text-sm">
+              <div className="space-y-1">
+                <div className="flex items-center gap-1">
+                  <span>📁</span>
+                  <span className="font-medium">src</span>
+                </div>
+                <div className="ml-4 space-y-1">
+                  <div className="flex items-center gap-1 text-blue-600 dark:text-blue-400">
+                    <span>📄</span>
+                    <span>App.tsx</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <span>📄</span>
+                    <span>index.tsx</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <span>📄</span>
+                    <span>types.ts</span>
+                  </div>
+                </div>
+                <div className="flex items-center gap-1">
+                  <span>📁</span>
+                  <span className="font-medium">components</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <span>📁</span>
+                  <span className="font-medium">utils</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* Main Editor Area */}
+        <ResizablePanel defaultSize={60}>
+          <ResizablePanelGroup direction="vertical">
+            {/* Code Editor */}
+            <ResizablePanel defaultSize={70}>
+              <div className="flex h-full flex-col">
+                <div className="flex items-center justify-between p-3 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium">App.tsx</span>
+                    <span className="text-xs text-muted-foreground">
+                      • Modified
+                    </span>
+                  </div>
+                  <div className="flex gap-1">
+                    <button className="text-xs px-2 py-1 rounded bg-primary text-primary-foreground">
+                      Save
+                    </button>
+                  </div>
+                </div>
+                <div className="flex-1 p-4 font-mono text-sm bg-muted/20">
+                  <div className="space-y-1">
+                    <div>
+                      <span className="text-blue-600">import</span>{" "}
+                      <span className="text-green-600">React</span>{" "}
+                      <span className="text-blue-600">from</span>{" "}
+                      <span className="text-orange-600">&apos;react&apos;</span>
+                      ;
+                    </div>
+                    <div>
+                      <span className="text-blue-600">import</span>{" "}
+                      <span className="text-green-600">
+                        {"{ ResizablePanelGroup }"}
+                      </span>{" "}
+                      <span className="text-blue-600">from</span>{" "}
+                      <span className="text-orange-600">
+                        &apos;./components&apos;
+                      </span>
+                      ;
+                    </div>
+                    <div></div>
+                    <div>
+                      <span className="text-blue-600">function</span>{" "}
+                      <span className="text-yellow-600">App</span>() {"{"}
+                    </div>
+                    <div className="ml-4">
+                      <span className="text-blue-600">return</span> (
+                    </div>
+                    <div className="ml-8">{'<div className="h-screen">'}</div>
+                    <div className="ml-12">
+                      {'<ResizablePanelGroup direction="horizontal">'}
+                    </div>
+                    <div className="ml-16">
+                      {"<ResizablePanel>Content</ResizablePanel>"}
+                    </div>
+                    <div className="ml-12">{"</ResizablePanelGroup>"}</div>
+                    <div className="ml-8">{"</div>"}</div>
+                    <div className="ml-4">);</div>
+                    <div>{"}"}</div>
+                  </div>
+                </div>
+              </div>
+            </ResizablePanel>
+
+            <ResizableHandle withHandle />
+
+            {/* Terminal */}
+            <ResizablePanel defaultSize={30}>
+              <div className="flex h-full flex-col">
+                <div className="flex items-center gap-2 p-3 border-b bg-muted/50">
+                  <span className="text-sm font-medium">Terminal</span>
+                  <span className="text-xs text-muted-foreground">zsh</span>
+                </div>
+                <div className="flex-1 p-4 font-mono text-sm bg-black text-green-400">
+                  <div className="space-y-1">
+                    <div>$ npm run dev</div>
+                    <div className="text-blue-400">
+                      → Starting development server...
+                    </div>
+                    <div className="text-green-400">
+                      ✓ Server ready on http://localhost:3000
+                    </div>
+                    <div className="text-gray-400">
+                      {" "}
+                      Watching for file changes...
+                    </div>
+                    <div className="flex items-center">
+                      <span>$ </span>
+                      <div className="w-2 h-4 bg-green-400 animate-pulse ml-1"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* Properties Panel */}
+        <ResizablePanel defaultSize={20} minSize={15} maxSize={35}>
+          <div className="flex h-full flex-col">
+            <div className="p-3 border-b bg-muted/50">
+              <span className="text-sm font-medium">Properties</span>
+            </div>
+            <div className="flex-1 p-3 text-sm space-y-3">
+              <div>
+                <div className="font-medium mb-1">Component</div>
+                <div className="text-muted-foreground">ResizablePanelGroup</div>
+              </div>
+              <div>
+                <div className="font-medium mb-1">Props</div>
+                <div className="space-y-1 text-xs">
+                  <div>direction: &quot;horizontal&quot;</div>
+                  <div>className: &quot;h-full&quot;</div>
+                </div>
+              </div>
+              <div>
+                <div className="font-medium mb-1">Dimensions</div>
+                <div className="space-y-1 text-xs text-muted-foreground">
+                  <div>Width: 1200px</div>
+                  <div>Height: 500px</div>
+                </div>
+              </div>
+              <div>
+                <div className="font-medium mb-1">Performance</div>
+                <div className="space-y-1 text-xs text-muted-foreground">
+                  <div>Renders: 3</div>
+                  <div>Re-renders: 0</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "A complete code editor interface demonstrating how resizable panels work in real applications. Features file explorer, code editor, terminal, and properties panel with realistic content and interactions.",
+      },
+    },
+  },
+};

package/src/components/ui/stories/scroll-area.stories.tsx

@@ -0,0 +1,180 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ScrollArea, ScrollBar } from "../scroll-area";
+
+const meta = {
+  title: "Layout and Structure/ScrollArea",
+  component: ScrollArea,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Augments native scroll functionality for custom, cross-browser styling. Provides enhanced scrolling experience with consistent scrollbar appearance across different browsers while maintaining native scroll behavior.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply to the scroll area",
+    },
+    children: {
+      control: { type: "text" },
+      description: "The content to be scrolled",
+    },
+  },
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  args: {
+    className: "h-72 w-48 rounded-md border",
+  },
+  render: (args) => (
+    <ScrollArea {...args}>
+      <div className="p-4 space-y-4">
+        {Array.from({ length: 20 }, (_, i) => (
+          <div key={i} className="flex items-center space-x-3">
+            <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center text-sm font-medium">
+              {i + 1}
+            </div>
+            <div>
+              <h4 className="font-medium">Item {i + 1}</h4>
+              <p className="text-sm text-muted-foreground">
+                Sample content for testing scrolling behavior
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive playground for testing ScrollArea with all props controllable via Storybook controls.",
+      },
+    },
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Vertical Scrolling</h3>
+        <ScrollArea className="h-48 w-72 rounded-md border">
+          <div className="p-4 space-y-3">
+            {Array.from({ length: 15 }, (_, i) => (
+              <div key={i} className="p-3 border rounded">
+                Vertical item {i + 1}
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+      
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Horizontal Scrolling</h3>
+        <ScrollArea className="w-72 whitespace-nowrap rounded-md border">
+          <div className="flex gap-4 p-4">
+            {Array.from({ length: 10 }, (_, i) => (
+              <div key={i} className="w-40 h-24 bg-muted rounded-lg flex items-center justify-center">
+                Card {i + 1}
+              </div>
+            ))}
+          </div>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </div>
+      
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Both Scrollbars</h3>
+        <ScrollArea className="h-48 w-72 rounded-md border">
+          <div className="w-[500px] p-4 space-y-3">
+            {Array.from({ length: 12 }, (_, i) => (
+              <div key={i} className="whitespace-nowrap p-3 border rounded">
+                Wide content that extends beyond container width - Item {i + 1}
+              </div>
+            ))}
+          </div>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all ScrollArea variants including vertical, horizontal, and combined scrolling patterns.",
+      },
+    },
+  },
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="max-w-2xl mx-auto bg-background border rounded-lg overflow-hidden">
+      <div className="border-b p-4">
+        <h2 className="text-xl font-semibold">User Dashboard</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Manage your team members and their permissions
+        </p>
+      </div>
+      
+      <div className="p-4">
+        <ScrollArea className="h-80 w-full rounded-md border">
+          <table className="w-full">
+            <thead className="bg-muted/50 sticky top-0">
+              <tr className="border-b">
+                <th className="px-4 py-3 text-left text-sm font-medium">Name</th>
+                <th className="px-4 py-3 text-left text-sm font-medium">Email</th>
+                <th className="px-4 py-3 text-left text-sm font-medium">Role</th>
+                <th className="px-4 py-3 text-left text-sm font-medium">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: 25 }, (_, i) => (
+                <tr key={i} className="border-b hover:bg-muted/50">
+                  <td className="px-4 py-3 font-medium">User {i + 1}</td>
+                  <td className="px-4 py-3 text-muted-foreground">
+                    user{i + 1}@company.com
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="inline-flex px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                      {i % 3 === 0 ? "Admin" : i % 2 === 0 ? "Editor" : "Viewer"}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className={`inline-flex px-2 py-1 text-xs rounded-full ${
+                      i % 4 === 0
+                        ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                        : "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
+                    }`}>
+                      {i % 4 === 0 ? "Active" : "Inactive"}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </ScrollArea>
+      </div>
+      
+      <div className="border-t p-4 flex justify-between items-center text-sm text-muted-foreground">
+        <span>Showing 25 users</span>
+        <span>Use ScrollArea for large data sets</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Real-world example showing ScrollArea in a user management dashboard with sticky headers and proper table layout.",
+      },
+    },
+  },
+};