@neynar/ui 0.1.1

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

@@ -0,0 +1,374 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import {
+  Settings,
+  User,
+  Users,
+  MoreHorizontal,
+  Edit,
+  Copy,
+  Trash2,
+  Mail,
+  MessageSquare,
+  PlusCircle,
+  CreditCard,
+  LogOut,
+  UserPlus,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+} from "../dropdown-menu";
+import { Button } from "../button";
+
+const meta = {
+  title: "Navigation & Menus/DropdownMenu",
+  component: DropdownMenu,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A versatile dropdown menu component built on Radix UI primitives. Displays a list of actions or options when triggered by a button. Supports sub-menus, checkboxes, radio groups, keyboard shortcuts, and full keyboard navigation. Perfect for context menus, action lists, and complex menu hierarchies.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    // These would be controlled at the individual component level
+    // since DropdownMenu itself is just a wrapper
+  },
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all dropdown menu features
+ */
+export const Interactive: Story = {
+  render: function InteractiveDropdownMenu() {
+    const [showStatusBar, setShowStatusBar] = React.useState(true);
+    const [showActivityBar, setShowActivityBar] = React.useState(false);
+    const [position, setPosition] = React.useState("bottom");
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Interactive Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <User className="mr-2 h-4 w-4" />
+              <span>Profile</span>
+              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Settings className="mr-2 h-4 w-4" />
+              <span>Settings</span>
+              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel>View Options</DropdownMenuLabel>
+          <DropdownMenuCheckboxItem
+            checked={showStatusBar}
+            onCheckedChange={setShowStatusBar}
+          >
+            Status Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={showActivityBar}
+            onCheckedChange={setShowActivityBar}
+          >
+            Activity Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel>Position</DropdownMenuLabel>
+          <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <UserPlus className="mr-2 h-4 w-4" />
+              <span>Invite users</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>
+                  <Mail className="mr-2 h-4 w-4" />
+                  <span>Email</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <MessageSquare className="mr-2 h-4 w-4" />
+                  <span>Message</span>
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem disabled>
+            Disabled Item
+          </DropdownMenuItem>
+          <DropdownMenuItem variant="destructive">
+            <Trash2 className="mr-2 h-4 w-4" />
+            Delete Account
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive dropdown menu showcasing all available features: basic items, checkboxes, radio groups, submenus, shortcuts, disabled items, and destructive variants. Use this to test all component functionality.",
+      },
+    },
+  },
+};
+
+/**
+ * Showcase of all dropdown menu variants and item types
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-8">
+      {/* Basic Menu */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Basic Menu</h3>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Basic Menu</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-48">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Edit className="mr-2 h-4 w-4" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Copy className="mr-2 h-4 w-4" />
+              Copy
+            </DropdownMenuItem>
+            <DropdownMenuItem disabled>
+              Disabled Item
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem variant="destructive">
+              <Trash2 className="mr-2 h-4 w-4" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Menu with Sub-items */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">With Submenus</h3>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Submenu Example</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-48">
+            <DropdownMenuItem>Simple Item</DropdownMenuItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <UserPlus className="mr-2 h-4 w-4" />
+                <span>Share</span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem>
+                    <Mail className="mr-2 h-4 w-4" />
+                    <span>Email</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <MessageSquare className="mr-2 h-4 w-4" />
+                    <span>Message</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <PlusCircle className="mr-2 h-4 w-4" />
+                    <span>More...</span>
+                  </DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Menu with Checkboxes */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Checkbox Items</h3>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">View Options</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-48">
+            <DropdownMenuLabel>Display</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuCheckboxItem checked={true}>
+              Status Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked={false}>
+              Activity Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked={true} disabled>
+              Panel (disabled)
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Menu with Radio Group */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Radio Group</h3>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Position</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-48">
+            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuRadioGroup value="bottom">
+              <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Comprehensive showcase of all dropdown menu variants: basic menus, submenus, checkbox items, radio groups, disabled states, and destructive actions.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage example in a user profile context
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="max-w-md mx-auto p-6 bg-card rounded-lg border">
+      {/* User Profile Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center space-x-3">
+          <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold">
+            JD
+          </div>
+          <div>
+            <h3 className="font-semibold">John Doe</h3>
+            <p className="text-sm text-muted-foreground">john@example.com</p>
+          </div>
+        </div>
+        
+        {/* Profile Actions Menu */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <MoreHorizontal className="h-4 w-4" />
+              <span className="sr-only">Open profile menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel>Profile Actions</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <User className="mr-2 h-4 w-4" />
+                <span>View Profile</span>
+                <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Settings className="mr-2 h-4 w-4" />
+                <span>Account Settings</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard className="mr-2 h-4 w-4" />
+                <span>Billing</span>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <Users className="mr-2 h-4 w-4" />
+                  <span>Team</span>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent>
+                    <DropdownMenuItem>
+                      <UserPlus className="mr-2 h-4 w-4" />
+                      <span>Invite Members</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <Settings className="mr-2 h-4 w-4" />
+                      <span>Team Settings</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>Log out</span>
+              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      
+      {/* Profile Content */}
+      <div className="space-y-2 text-sm">
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">Role:</span>
+          <span>Product Manager</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">Team:</span>
+          <span>Engineering</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">Last active:</span>
+          <span>2 minutes ago</span>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Real-world example showing a dropdown menu in a user profile context. Demonstrates how the component integrates naturally into application interfaces with proper spacing, alignment, and visual hierarchy.",
+      },
+    },
+  },
+};

package/src/components/ui/stories/empty-state.stories.tsx

@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Search,
+  FileX,
+  Inbox,
+  Users,
+  Plus,
+  FolderOpen,
+  ShoppingCart,
+} from "lucide-react";
+import { EmptyState } from "../empty-state";
+import { Card } from "../card";
+
+const meta = {
+  title: "Data Display/EmptyState",
+  component: EmptyState,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A versatile component for displaying empty or no-data states with optional icons, descriptions, and action buttons. Commonly used in lists, tables, search results, and dashboards to guide users when content is unavailable.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      control: { type: "text" },
+      description: "Main title text displayed prominently (required)",
+    },
+    description: {
+      control: { type: "text" },
+      description: "Optional descriptive text providing additional context",
+    },
+    icon: {
+      control: false,
+      description: "Optional icon or React element displayed above the title",
+    },
+    action: {
+      control: false,
+      description:
+        "Optional action button configuration with label and onClick handler",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes for custom styling",
+    },
+  },
+} satisfies Meta<typeof EmptyState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive Playground - Test all props and variations
+ *
+ * Use the controls below to test different combinations of props
+ * and see how the EmptyState component responds to various configurations.
+ */
+export const Interactive: Story = {
+  args: {
+    title: "No items found",
+    description:
+      "Try adjusting your search or filter to find what you're looking for.",
+    icon: <Search className="h-12 w-12" />,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground for testing all EmptyState props. Use the controls to modify title, description, and other properties.",
+      },
+    },
+  },
+};
+
+/**
+ * Variants Showcase - Display all common empty state patterns
+ *
+ * Shows the most common empty state variations that design teams
+ * typically need: basic text-only, with icon, and with action button.
+ */
+export const Variants: Story = {
+  args: {
+    title: "No data available",
+    description: "Check back later or contact support for assistance",
+  },
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Text Only</h3>
+        <Card className="p-6">
+          <EmptyState
+            title="No data available"
+            description="Check back later or contact support for assistance"
+          />
+        </Card>
+      </div>
+
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">With Icon</h3>
+        <Card className="p-6">
+          <EmptyState
+            icon={<Inbox className="h-12 w-12" />}
+            title="Your inbox is empty"
+            description="When you receive new messages, they'll appear here"
+          />
+        </Card>
+      </div>
+
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">With Action Button</h3>
+        <Card className="p-6">
+          <EmptyState
+            icon={<FolderOpen className="h-12 w-12" />}
+            title="No projects yet"
+            description="Create your first project to get started"
+            action={{
+              label: "Create Project",
+              onClick: () => console.log("Create project clicked"),
+            }}
+          />
+        </Card>
+      </div>
+
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Custom Styled</h3>
+        <Card className="bg-muted/30 p-8">
+          <EmptyState
+            className="py-8"
+            icon={
+              <div className="rounded-full bg-primary/10 p-4">
+                <Plus className="h-8 w-8 text-primary" />
+              </div>
+            }
+            title="Custom styled state"
+            description="Example with custom background and icon styling"
+            action={{
+              label: "Get Started",
+              onClick: () => console.log("Get started clicked"),
+            }}
+          />
+        </Card>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Comprehensive showcase of all EmptyState variants for design teams to understand available options and styling patterns.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world Context - EmptyState in realistic application scenarios
+ *
+ * Shows how EmptyState looks and behaves in actual application contexts
+ * that business teams and designers would recognize from real products.
+ */
+export const InContext: Story = {
+  args: {
+    title: "No items found",
+    description:
+      "Try adjusting your search or filter to find what you're looking for.",
+    icon: <Search className="h-12 w-12" />,
+  },
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">E-commerce Cart</h3>
+        <Card className="w-full max-w-md p-6">
+          <EmptyState
+            icon={<ShoppingCart className="h-12 w-12" />}
+            title="Your cart is empty"
+            description="Add items to your cart to see them here"
+            action={{
+              label: "Continue Shopping",
+              onClick: () => console.log("Continue shopping clicked"),
+            }}
+          />
+        </Card>
+      </div>
+
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Search Results</h3>
+        <Card className="w-full max-w-2xl p-8">
+          <EmptyState
+            icon={<Search className="h-12 w-12" />}
+            title="No results found for 'advanced widgets'"
+            description="Try different keywords or browse our categories"
+            action={{
+              label: "Clear Search",
+              onClick: () => console.log("Clear search clicked"),
+            }}
+          />
+        </Card>
+      </div>
+
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Team Management</h3>
+        <Card className="w-full max-w-lg p-6">
+          <EmptyState
+            icon={<Users className="h-12 w-12" />}
+            title="No team members yet"
+            description="Invite colleagues to collaborate on this workspace"
+            action={{
+              label: "Invite Team Members",
+              onClick: () => console.log("Invite members clicked"),
+            }}
+          />
+        </Card>
+      </div>
+
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">File Upload Area</h3>
+        <Card className="w-full max-w-lg border-2 border-dashed p-8">
+          <EmptyState
+            icon={<FileX className="h-12 w-12" />}
+            title="No files uploaded"
+            description="Drag and drop files here or click to browse"
+            action={{
+              label: "Choose Files",
+              onClick: () => console.log("Choose files clicked"),
+            }}
+          />
+        </Card>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world examples showing EmptyState in common application scenarios like e-commerce, search, team management, and file uploads.",
+      },
+    },
+  },
+};