@neynar/ui 0.1.1

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

@@ -0,0 +1,482 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Home, Slash, ChevronDown } from "lucide-react";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../breadcrumb";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
+
+const meta = {
+  title: "Navigation & Menus/Breadcrumb",
+  component: Breadcrumb,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A breadcrumb navigation component that shows the current page location within a navigational hierarchy. Built with accessibility in mind and supports custom separators, ellipsis for long paths, and composition patterns.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    // No direct props on Breadcrumb component, but we can show composition options
+    children: {
+      description: "BreadcrumbList containing breadcrumb items",
+      control: false,
+    },
+  },
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  args: {},
+  render: (args) => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Basic Breadcrumb</h3>
+        <Breadcrumb {...args}>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">With Icons</h3>
+        <Breadcrumb {...args}>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">
+                <Home className="h-4 w-4" />
+                Home
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/documents">Documents</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Design System</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">With Custom Separator</h3>
+        <Breadcrumb {...args}>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+              <Slash className="h-3 w-3" />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+              <Slash className="h-3 w-3" />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+              <BreadcrumbPage>Shoes</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">With Ellipsis</h3>
+        <Breadcrumb {...args}>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbEllipsis />
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">With Dropdown</h3>
+        <Breadcrumb {...args}>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger className="flex items-center gap-1 hover:text-foreground transition-colors">
+                  <BreadcrumbEllipsis className="h-4 w-4" />
+                  <ChevronDown className="h-3 w-3" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem>Documentation</DropdownMenuItem>
+                  <DropdownMenuItem>Components</DropdownMenuItem>
+                  <DropdownMenuItem>Navigation</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">AsChild Pattern</h3>
+        <Breadcrumb {...args}>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <a href="/">Home</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <button
+                  onClick={() => console.log("Navigate to docs")}
+                  className="text-left"
+                >
+                  Documentation
+                </button>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Getting Started</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground showcasing all breadcrumb variations including basic usage, icons, custom separators, ellipsis, dropdown menus, and the asChild composition pattern.",
+      },
+    },
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h4 className="text-sm font-medium text-muted-foreground mb-2">
+          Default Separator (ChevronRight)
+        </h4>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Current Page</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-muted-foreground mb-2">
+          Slash Separator
+        </h4>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+              <Slash className="h-3 w-3" />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+              <Slash className="h-3 w-3" />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+              <BreadcrumbPage>Current Page</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-muted-foreground mb-2">
+          With Home Icon
+        </h4>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">
+                <Home className="h-4 w-4" />
+                Home
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Current Page</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-muted-foreground mb-2">
+          With Ellipsis (Collapsed Items)
+        </h4>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbEllipsis />
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/category">Category</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Current Page</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-muted-foreground mb-2">
+          Interactive Dropdown
+        </h4>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger className="flex items-center gap-1 hover:text-foreground transition-colors">
+                  Categories
+                  <ChevronDown className="h-3 w-3" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem>Electronics</DropdownMenuItem>
+                  <DropdownMenuItem>Clothing</DropdownMenuItem>
+                  <DropdownMenuItem>Books</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Current Page</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Systematic display of all breadcrumb variants including different separators, icons, ellipsis states, and interactive dropdowns.",
+      },
+    },
+  },
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="min-h-[400px] bg-background">
+      {/* Header */}
+      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto px-4 py-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <h1 className="text-lg font-semibold">E-Commerce Store</h1>
+            </div>
+            <nav className="flex items-center space-x-4">
+              <a
+                href="#"
+                className="text-sm text-muted-foreground hover:text-foreground"
+              >
+                Account
+              </a>
+              <a
+                href="#"
+                className="text-sm text-muted-foreground hover:text-foreground"
+              >
+                Cart (0)
+              </a>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="container mx-auto px-4 py-6">
+        {/* Breadcrumb Navigation */}
+        <div className="mb-6">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink href="/">
+                  <Home className="h-4 w-4" />
+                  Home
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbLink href="/categories">Categories</BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <DropdownMenu>
+                  <DropdownMenuTrigger className="flex items-center gap-1 hover:text-foreground transition-colors">
+                    <BreadcrumbEllipsis className="h-4 w-4" />
+                    <ChevronDown className="h-3 w-3" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    <DropdownMenuItem>Electronics</DropdownMenuItem>
+                    <DropdownMenuItem>Computers & Tablets</DropdownMenuItem>
+                    <DropdownMenuItem>Laptops</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbLink href="/categories/electronics/laptops/gaming">
+                  Gaming Laptops
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbPage>ASUS ROG Strix G15</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+
+        {/* Page Content */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="space-y-4">
+            <div className="aspect-square bg-muted rounded-lg flex items-center justify-center">
+              <span className="text-muted-foreground">Product Image</span>
+            </div>
+            <div className="grid grid-cols-4 gap-2">
+              {[1, 2, 3, 4].map((i) => (
+                <div
+                  key={i}
+                  className="aspect-square bg-muted rounded-md flex items-center justify-center"
+                >
+                  <span className="text-xs text-muted-foreground">{i}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-6">
+            <div>
+              <h1 className="text-3xl font-bold">
+                ASUS ROG Strix G15 Gaming Laptop
+              </h1>
+              <p className="text-xl text-muted-foreground mt-2">$1,299.99</p>
+            </div>
+
+            <div className="space-y-4">
+              <p className="text-muted-foreground">
+                Experience ultimate gaming performance with the ASUS ROG Strix
+                G15. Featuring the latest AMD Ryzen processor and NVIDIA GeForce
+                RTX graphics, this laptop delivers exceptional power for gaming
+                and content creation.
+              </p>
+
+              <div className="flex space-x-4">
+                <button className="px-6 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90">
+                  Add to Cart
+                </button>
+                <button className="px-6 py-2 border border-input rounded-md hover:bg-accent">
+                  Add to Wishlist
+                </button>
+              </div>
+            </div>
+
+            <div className="border-t pt-6">
+              <h3 className="font-semibold mb-2">Product Features</h3>
+              <ul className="space-y-1 text-sm text-muted-foreground">
+                <li>• AMD Ryzen 7 5800H Processor</li>
+                <li>• NVIDIA GeForce RTX 3060 Graphics</li>
+                <li>• 16GB DDR4 RAM</li>
+                <li>• 512GB NVMe SSD Storage</li>
+                <li>• 15.6&quot; Full HD 144Hz Display</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Real-world example showing breadcrumb navigation in an e-commerce product page context. Demonstrates how breadcrumbs help users understand their location in a deep category hierarchy and provide easy navigation back to parent categories.",
+      },
+    },
+  },
+};