@neynar/ui 0.1.1

package/src/components/ui/stories/navigation-menu.stories.tsx

@@ -0,0 +1,539 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import {
+  ChevronDown,
+  FileText,
+  Home,
+  Info,
+  Mail,
+  Settings,
+  User,
+  Zap,
+} from "lucide-react";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "../navigation-menu";
+import { Button } from "../button";
+
+const meta = {
+  title: "Navigation & Menus/NavigationMenu",
+  component: NavigationMenu,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A collection of links for navigating websites. Built on Radix UI primitives with full keyboard navigation, accessibility compliance, and responsive design. Perfect for website headers and main navigation areas.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    viewport: {
+      control: "boolean",
+      description: "Whether to render the navigation viewport container for dropdown positioning",
+      defaultValue: true,
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes to apply to the navigation menu",
+    },
+  },
+} satisfies Meta<typeof NavigationMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all NavigationMenu features and configurations.
+ * Adjust the controls to explore different viewport settings and styling options.
+ */
+export const Interactive: Story = {
+  args: {
+    viewport: true,
+  },
+  render: (args) => (
+    <div className="flex justify-center w-full">
+      <NavigationMenu {...args}>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>
+            <User className="mr-2 h-4 w-4" />
+            Products
+          </NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+              <li className="row-span-3">
+                <NavigationMenuLink asChild>
+                  <a
+                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                    href="#"
+                  >
+                    <Zap className="h-6 w-6" />
+                    <div className="mb-2 mt-4 text-lg font-medium">
+                      Enterprise Suite
+                    </div>
+                    <p className="text-sm leading-tight text-muted-foreground">
+                      Complete business solution with advanced analytics and integrations.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink asChild>
+                  <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div className="text-sm font-medium leading-none">Analytics</div>
+                    <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      Advanced data insights and reporting tools.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink asChild>
+                  <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div className="text-sm font-medium leading-none">Automation</div>
+                    <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      Streamline workflows with intelligent automation.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink asChild>
+                  <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div className="text-sm font-medium leading-none">Integration</div>
+                    <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      Connect with your existing tools and services.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>
+            <Settings className="mr-2 h-4 w-4" />
+            Solutions
+          </NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+              <li>
+                <NavigationMenuLink asChild>
+                  <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div className="text-sm font-medium leading-none">E-commerce</div>
+                    <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      Complete online store solution with inventory management.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink asChild>
+                  <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div className="text-sm font-medium leading-none">Healthcare</div>
+                    <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      HIPAA-compliant patient management and scheduling system.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink asChild>
+                  <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div className="text-sm font-medium leading-none">Education</div>
+                    <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      Learning management system with student tracking.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink asChild>
+                  <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                    <div className="text-sm font-medium leading-none">Finance</div>
+                    <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                      Secure financial data processing and reporting tools.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
+            <Mail className="mr-2 h-4 w-4" />
+            Contact
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
+            <Info className="mr-2 h-4 w-4" />
+            About
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive playground for testing NavigationMenu with full feature set including dropdown content, icons, and different link types. Use the controls to explore viewport settings and styling options.",
+      },
+    },
+  },
+};
+
+/**
+ * Comprehensive showcase of all NavigationMenu variants and configurations.
+ * Demonstrates different navigation patterns and styling approaches.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-4xl">
+      {/* Basic Navigation with Dropdown */}
+      <div>
+        <h3 className="text-sm font-medium mb-4">With Dropdown Content</h3>
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <ul className="grid gap-3 p-6 w-[400px]">
+                  <li>
+                    <NavigationMenuLink asChild>
+                      <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                        <div className="text-sm font-medium leading-none">Introduction</div>
+                        <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                          Re-usable components built using Radix UI and Tailwind CSS.
+                        </p>
+                      </a>
+                    </NavigationMenuLink>
+                  </li>
+                  <li>
+                    <NavigationMenuLink asChild>
+                      <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                        <div className="text-sm font-medium leading-none">Installation</div>
+                        <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                          How to install dependencies and structure your app.
+                        </p>
+                      </a>
+                    </NavigationMenuLink>
+                  </li>
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
+                Documentation
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+
+      {/* Simple Horizontal Navigation */}
+      <div>
+        <h3 className="text-sm font-medium mb-4">Simple Horizontal</h3>
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
+                <Home className="mr-2 h-4 w-4" />
+                Home
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
+                <Info className="mr-2 h-4 w-4" />
+                About
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
+                <Mail className="mr-2 h-4 w-4" />
+                Contact
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+
+      {/* Without Viewport */}
+      <div>
+        <h3 className="text-sm font-medium mb-4">Without Viewport</h3>
+        <NavigationMenu viewport={false}>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <div className="grid gap-3 p-4 w-[300px]">
+                  <NavigationMenuLink asChild>
+                    <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                      <div className="text-sm font-medium leading-none">Analytics</div>
+                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                        Get insights into your business performance
+                      </p>
+                    </a>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                      <div className="text-sm font-medium leading-none">Monitoring</div>
+                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                        Monitor your application health and performance
+                      </p>
+                    </a>
+                  </NavigationMenuLink>
+                </div>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
+                Pricing
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+
+      {/* Custom Button Triggers */}
+      <div>
+        <h3 className="text-sm font-medium mb-4">Custom Button Triggers</h3>
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger asChild>
+                <Button variant="outline">
+                  <FileText className="mr-2 h-4 w-4" />
+                  Documents
+                  <ChevronDown className="ml-2 h-4 w-4" />
+                </Button>
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <ul className="grid gap-3 p-4 w-[300px]">
+                  <li>
+                    <NavigationMenuLink asChild>
+                      <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                        <div className="text-sm font-medium leading-none">Recent Files</div>
+                        <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                          Access your recently opened documents
+                        </p>
+                      </a>
+                    </NavigationMenuLink>
+                  </li>
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink asChild>
+                <Button variant="ghost">
+                  <Mail className="mr-2 h-4 w-4" />
+                  Messages
+                </Button>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Comprehensive showcase of all NavigationMenu variants including dropdown content, simple horizontal navigation, viewport configurations, and custom button styling.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world example showing NavigationMenu in a website header context.
+ * Demonstrates practical usage for business applications and design teams.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="w-full max-w-6xl border rounded-lg bg-background">
+      {/* Header with Navigation */}
+      <header className="border-b px-6 py-4">
+        <div className="flex items-center justify-between">
+          {/* Logo */}
+          <div className="flex items-center space-x-2">
+            <Zap className="h-8 w-8 text-primary" />
+            <span className="text-xl font-bold">Acme Corp</span>
+          </div>
+
+          {/* Main Navigation */}
+          <NavigationMenu>
+            <NavigationMenuList>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <div className="grid gap-6 p-6 w-[600px] grid-cols-3">
+                    <div className="space-y-3">
+                      <h4 className="text-sm font-medium leading-none">Analytics</h4>
+                      <ul className="space-y-2">
+                        <li>
+                          <NavigationMenuLink asChild>
+                            <a href="#" className="block text-sm text-muted-foreground hover:text-foreground">
+                              Dashboard
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                        <li>
+                          <NavigationMenuLink asChild>
+                            <a href="#" className="block text-sm text-muted-foreground hover:text-foreground">
+                              Reports
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                        <li>
+                          <NavigationMenuLink asChild>
+                            <a href="#" className="block text-sm text-muted-foreground hover:text-foreground">
+                              Insights
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                      </ul>
+                    </div>
+                    <div className="space-y-3">
+                      <h4 className="text-sm font-medium leading-none">Tools</h4>
+                      <ul className="space-y-2">
+                        <li>
+                          <NavigationMenuLink asChild>
+                            <a href="#" className="block text-sm text-muted-foreground hover:text-foreground">
+                              API Explorer
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                        <li>
+                          <NavigationMenuLink asChild>
+                            <a href="#" className="block text-sm text-muted-foreground hover:text-foreground">
+                              Webhooks
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                        <li>
+                          <NavigationMenuLink asChild>
+                            <a href="#" className="block text-sm text-muted-foreground hover:text-foreground">
+                              CLI
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                      </ul>
+                    </div>
+                    <div className="space-y-3">
+                      <h4 className="text-sm font-medium leading-none">Resources</h4>
+                      <ul className="space-y-2">
+                        <li>
+                          <NavigationMenuLink asChild>
+                            <a href="#" className="block text-sm text-muted-foreground hover:text-foreground">
+                              Documentation
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                        <li>
+                          <NavigationMenuLink asChild>
+                            <a href="#" className="block text-sm text-muted-foreground hover:text-foreground">
+                              Tutorials
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                        <li>
+                          <NavigationMenuLink asChild>
+                            <a href="#" className="block text-sm text-muted-foreground hover:text-foreground">
+                              Support
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
+                    <li>
+                      <NavigationMenuLink asChild>
+                        <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                          <div className="text-sm font-medium leading-none">Enterprise</div>
+                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                            Scale your business with enterprise-grade features
+                          </p>
+                        </a>
+                      </NavigationMenuLink>
+                    </li>
+                    <li>
+                      <NavigationMenuLink asChild>
+                        <a href="#" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                          <div className="text-sm font-medium leading-none">Startup</div>
+                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                            Perfect for growing teams and early-stage companies
+                          </p>
+                        </a>
+                      </NavigationMenuLink>
+                    </li>
+                  </ul>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
+                  Pricing
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
+                  About
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
+
+          {/* User Actions */}
+          <div className="flex items-center space-x-4">
+            <Button variant="ghost" size="sm">
+              Sign In
+            </Button>
+            <Button size="sm">
+              Get Started
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      {/* Content Area */}
+      <div className="p-6">
+        <div className="text-center space-y-4">
+          <h1 className="text-3xl font-bold">Welcome to Acme Corp</h1>
+          <p className="text-muted-foreground max-w-2xl mx-auto">
+            This is an example of NavigationMenu used in a real website header context. 
+            The navigation provides easy access to different product areas and solutions 
+            while maintaining a clean, professional appearance.
+          </p>
+          <div className="flex justify-center space-x-4 pt-4">
+            <Button>Learn More</Button>
+            <Button variant="outline">View Demo</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story: "Real-world example showing NavigationMenu integrated into a complete website header layout with logo, navigation, and user actions. Demonstrates practical usage patterns for business applications.",
+      },
+    },
+  },
+};