@neynar/ui 0.1.1

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

@@ -0,0 +1,632 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+  Search,
+  FileText,
+  Mail,
+  Plus,
+  Star,
+  Edit,
+  Copy,
+  Download,
+  Share,
+} from "lucide-react";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "../command";
+import { Button } from "../button";
+
+const meta = {
+  title: "Interactive Controls/Command",
+  component: Command,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A fast, composable command menu built on cmdk that provides powerful search interfaces, command palettes, and autocomplete functionality with full keyboard navigation and accessibility support.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      control: "text",
+      description: "Additional CSS classes to apply to the command menu",
+    },
+    value: {
+      control: "text",
+      description: "The current search value (controlled)",
+    },
+    onValueChange: {
+      action: "valueChanged",
+      description: "Called when the search value changes",
+    },
+    filter: {
+      control: "boolean",
+      description: "Whether to enable filtering",
+      table: { defaultValue: { summary: "true" } },
+    },
+    shouldFilter: {
+      control: "boolean",
+      description: "Whether the built-in filter should be applied",
+    },
+    loop: {
+      control: "boolean",
+      description: "Whether to loop keyboard navigation",
+      table: { defaultValue: { summary: "false" } },
+    },
+  },
+} satisfies Meta<typeof Command>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground to test all Command component features and props.
+ * Experiment with different configurations, search functionality, and keyboard navigation.
+ */
+export const Interactive: Story = {
+  render: function InteractiveCommand(args) {
+    const [value, setValue] = React.useState("");
+    const [selected, setSelected] = React.useState<string | null>(null);
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+
+    React.useEffect(() => {
+      const down = (e: KeyboardEvent) => {
+        if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          setDialogOpen((open) => !open);
+        }
+      };
+      document.addEventListener("keydown", down);
+      return () => document.removeEventListener("keydown", down);
+    }, []);
+
+    const handleSelect = (currentValue: string) => {
+      setSelected(currentValue);
+      setValue("");
+      console.log("Selected:", currentValue);
+    };
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <Button onClick={() => setDialogOpen(true)}>
+            Open Command Dialog
+          </Button>
+          <p className="text-sm text-muted-foreground flex items-center">
+            Or press{" "}
+            <kbd className="ml-1 pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
+              <span className="text-xs">⌘</span>K
+            </kbd>
+          </p>
+        </div>
+
+        {selected && (
+          <div className="text-sm p-2 bg-muted rounded">
+            <strong>Last selected:</strong> {selected}
+          </div>
+        )}
+
+        <Command
+          {...args}
+          className="rounded-lg border shadow-md max-w-[450px]"
+          value={value}
+          onValueChange={setValue}
+        >
+          <CommandInput placeholder="Type to search commands..." />
+          <CommandList>
+            <CommandEmpty>
+              No results found for &quot;{value}&quot;
+            </CommandEmpty>
+            <CommandGroup heading="Actions">
+              <CommandItem
+                value="create-new-document"
+                onSelect={() => handleSelect("Create New Document")}
+              >
+                <FileText className="mr-2 h-4 w-4" />
+                <span>Create New Document</span>
+                <CommandShortcut>⌘N</CommandShortcut>
+              </CommandItem>
+              <CommandItem
+                value="send-message"
+                onSelect={() => handleSelect("Send Message")}
+              >
+                <Mail className="mr-2 h-4 w-4" />
+                <span>Send Message</span>
+                <CommandShortcut>⌘M</CommandShortcut>
+              </CommandItem>
+              <CommandItem
+                value="schedule-meeting"
+                onSelect={() => handleSelect("Schedule Meeting")}
+              >
+                <Calendar className="mr-2 h-4 w-4" />
+                <span>Schedule Meeting</span>
+                <CommandShortcut>⌘E</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Tools">
+              <CommandItem
+                value="open-calculator"
+                onSelect={() => handleSelect("Open Calculator")}
+              >
+                <Calculator className="mr-2 h-4 w-4" />
+                <span>Open Calculator</span>
+              </CommandItem>
+              <CommandItem
+                value="search-emojis"
+                onSelect={() => handleSelect("Search Emojis")}
+              >
+                <Smile className="mr-2 h-4 w-4" />
+                <span>Search Emojis</span>
+              </CommandItem>
+              <CommandItem
+                value="add-to-favorites"
+                onSelect={() => handleSelect("Add to Favorites")}
+              >
+                <Star className="mr-2 h-4 w-4" />
+                <span>Add to Favorites</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Settings">
+              <CommandItem
+                value="user-profile"
+                onSelect={() => handleSelect("User Profile")}
+              >
+                <User className="mr-2 h-4 w-4" />
+                <span>Profile</span>
+                <CommandShortcut>⌘P</CommandShortcut>
+              </CommandItem>
+              <CommandItem
+                value="billing"
+                onSelect={() => handleSelect("Billing")}
+              >
+                <CreditCard className="mr-2 h-4 w-4" />
+                <span>Billing</span>
+                <CommandShortcut>⌘B</CommandShortcut>
+              </CommandItem>
+              <CommandItem
+                value="settings"
+                onSelect={() => handleSelect("Settings")}
+              >
+                <Settings className="mr-2 h-4 w-4" />
+                <span>Settings</span>
+                <CommandShortcut>⌘S</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+
+        <CommandDialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Quick Actions">
+              <CommandItem
+                onSelect={() => {
+                  console.log("Calendar");
+                  setDialogOpen(false);
+                }}
+              >
+                <Calendar className="mr-2 h-4 w-4" />
+                <span>Calendar</span>
+              </CommandItem>
+              <CommandItem
+                onSelect={() => {
+                  console.log("Calculator");
+                  setDialogOpen(false);
+                }}
+              >
+                <Calculator className="mr-2 h-4 w-4" />
+                <span>Calculator</span>
+              </CommandItem>
+              <CommandItem
+                onSelect={() => {
+                  console.log("Search Emoji");
+                  setDialogOpen(false);
+                }}
+              >
+                <Smile className="mr-2 h-4 w-4" />
+                <span>Search Emoji</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </CommandDialog>
+      </div>
+    );
+  },
+  args: {
+    loop: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground to test all Command features. Try searching, selecting items, keyboard navigation (arrow keys, Enter, Escape), and the dialog mode with ⌘K. Check the Actions panel to see selection events.",
+      },
+    },
+  },
+};
+
+/**
+ * Showcase of all available component variants and configurations.
+ * Demonstrates different layouts, groupings, and feature combinations.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full max-w-5xl">
+      {/* Basic Command Menu */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Basic Command Menu</h3>
+        <Command className="rounded-lg border shadow-md">
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+              <CommandItem>
+                <Calendar className="mr-2 h-4 w-4" />
+                <span>Calendar</span>
+              </CommandItem>
+              <CommandItem>
+                <Smile className="mr-2 h-4 w-4" />
+                <span>Search Emoji</span>
+              </CommandItem>
+              <CommandItem>
+                <Calculator className="mr-2 h-4 w-4" />
+                <span>Calculator</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </div>
+
+      {/* With Shortcuts */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">With Keyboard Shortcuts</h3>
+        <Command className="rounded-lg border shadow-md">
+          <CommandInput placeholder="All commands have shortcuts..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="File">
+              <CommandItem>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>New File</span>
+                <CommandShortcut>⌘N</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <Download className="mr-2 h-4 w-4" />
+                <span>Save</span>
+                <CommandShortcut>⌘S</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Edit">
+              <CommandItem>
+                <Copy className="mr-2 h-4 w-4" />
+                <span>Copy</span>
+                <CommandShortcut>⌘C</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <Edit className="mr-2 h-4 w-4" />
+                <span>Paste</span>
+                <CommandShortcut>⌘V</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </div>
+
+      {/* Without Input */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Menu Without Search</h3>
+        <Command className="rounded-lg border shadow-md">
+          <CommandList>
+            <CommandGroup heading="Quick Actions">
+              <CommandItem>
+                <Mail className="mr-2 h-4 w-4" />
+                <span>Send Email</span>
+                <CommandShortcut>⌘E</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <Calendar className="mr-2 h-4 w-4" />
+                <span>Schedule Meeting</span>
+                <CommandShortcut>⌘M</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <Star className="mr-2 h-4 w-4" />
+                <span>Add to Favorites</span>
+                <CommandShortcut>⌘F</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </div>
+
+      {/* Custom Empty State */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Custom Empty State</h3>
+        <Command className="rounded-lg border shadow-md">
+          <CommandInput placeholder="Search for something that doesn't exist..." />
+          <CommandList>
+            <CommandEmpty>
+              <div className="py-6 text-center">
+                <Search className="mx-auto h-10 w-10 text-muted-foreground/50" />
+                <h3 className="mt-2 text-sm font-medium">No results found</h3>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  Try adjusting your search terms.
+                </p>
+              </div>
+            </CommandEmpty>
+          </CommandList>
+        </Command>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        story:
+          "Comprehensive showcase of different Command component configurations including basic menus, keyboard shortcuts, menus without search input, and custom empty states.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage example showing Command in a practical application context.
+ * Perfect for demonstrating to designers and business teams how the component works in production.
+ */
+export const InContext: Story = {
+  render: function CommandInApp() {
+    const [searchOpen, setSearchOpen] = React.useState(false);
+    const [quickActionsOpen, setQuickActionsOpen] = React.useState(false);
+
+    React.useEffect(() => {
+      const down = (e: KeyboardEvent) => {
+        if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          setSearchOpen(true);
+        }
+        if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          setQuickActionsOpen(true);
+        }
+      };
+      document.addEventListener("keydown", down);
+      return () => document.removeEventListener("keydown", down);
+    }, []);
+
+    return (
+      <div className="w-full max-w-4xl mx-auto">
+        {/* App Header */}
+        <div className="border-b bg-background px-6 py-4">
+          <div className="flex items-center justify-between">
+            <h1 className="text-xl font-semibold">Project Dashboard</h1>
+            <div className="flex items-center gap-3">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setSearchOpen(true)}
+                className="relative"
+              >
+                <Search className="mr-2 h-4 w-4" />
+                Search...
+                <kbd className="pointer-events-none absolute right-2 top-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 sm:flex">
+                  <span className="text-xs">⌘</span>K
+                </kbd>
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setQuickActionsOpen(true)}
+              >
+                <Plus className="mr-2 h-4 w-4" />
+                Quick Actions
+                <kbd className="pointer-events-none ml-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 sm:flex">
+                  <span className="text-xs">⌘</span>J
+                </kbd>
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* App Content */}
+        <div className="p-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="space-y-3">
+              <h2 className="font-medium">Recent Files</h2>
+              <div className="space-y-2">
+                {["project-plan.md", "meeting-notes.md", "budget.xlsx"].map(
+                  (file) => (
+                    <div key={file} className="p-3 border rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <FileText className="h-4 w-4" />
+                        <span className="text-sm">{file}</span>
+                      </div>
+                    </div>
+                  ),
+                )}
+              </div>
+            </div>
+            <div className="space-y-3">
+              <h2 className="font-medium">Quick Stats</h2>
+              <div className="space-y-2">
+                <div className="p-3 border rounded-lg">
+                  <div className="text-2xl font-bold">24</div>
+                  <div className="text-sm text-muted-foreground">
+                    Active Projects
+                  </div>
+                </div>
+                <div className="p-3 border rounded-lg">
+                  <div className="text-2xl font-bold">156</div>
+                  <div className="text-sm text-muted-foreground">
+                    Tasks Completed
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="space-y-3">
+              <h2 className="font-medium">Team Activity</h2>
+              <div className="space-y-2">
+                <div className="p-3 border rounded-lg text-sm">
+                  <div className="font-medium">Sarah updated design files</div>
+                  <div className="text-muted-foreground">2 hours ago</div>
+                </div>
+                <div className="p-3 border rounded-lg text-sm">
+                  <div className="font-medium">Mike completed code review</div>
+                  <div className="text-muted-foreground">4 hours ago</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Global Search Command Dialog */}
+        <CommandDialog open={searchOpen} onOpenChange={setSearchOpen}>
+          <CommandInput placeholder="Search files, projects, people..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Recent Files">
+              <CommandItem onSelect={() => setSearchOpen(false)}>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>project-plan.md</span>
+                <span className="ml-auto text-xs text-muted-foreground">
+                  Project Alpha
+                </span>
+              </CommandItem>
+              <CommandItem onSelect={() => setSearchOpen(false)}>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>meeting-notes.md</span>
+                <span className="ml-auto text-xs text-muted-foreground">
+                  Today
+                </span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Projects">
+              <CommandItem onSelect={() => setSearchOpen(false)}>
+                <Star className="mr-2 h-4 w-4" />
+                <span>Project Alpha</span>
+                <span className="ml-auto text-xs text-muted-foreground">
+                  24 tasks
+                </span>
+              </CommandItem>
+              <CommandItem onSelect={() => setSearchOpen(false)}>
+                <Star className="mr-2 h-4 w-4" />
+                <span>Beta Launch</span>
+                <span className="ml-auto text-xs text-muted-foreground">
+                  12 tasks
+                </span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Team Members">
+              <CommandItem onSelect={() => setSearchOpen(false)}>
+                <User className="mr-2 h-4 w-4" />
+                <span>Sarah Johnson</span>
+                <span className="ml-auto text-xs text-muted-foreground">
+                  Designer
+                </span>
+              </CommandItem>
+              <CommandItem onSelect={() => setSearchOpen(false)}>
+                <User className="mr-2 h-4 w-4" />
+                <span>Mike Chen</span>
+                <span className="ml-auto text-xs text-muted-foreground">
+                  Developer
+                </span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </CommandDialog>
+
+        {/* Quick Actions Command Dialog */}
+        <CommandDialog
+          open={quickActionsOpen}
+          onOpenChange={setQuickActionsOpen}
+        >
+          <CommandInput placeholder="What would you like to do?" />
+          <CommandList>
+            <CommandEmpty>No actions found.</CommandEmpty>
+            <CommandGroup heading="Create">
+              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
+                <Plus className="mr-2 h-4 w-4" />
+                <span>New Project</span>
+                <CommandShortcut>⌘N</CommandShortcut>
+              </CommandItem>
+              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
+                <FileText className="mr-2 h-4 w-4" />
+                <span>New Document</span>
+                <CommandShortcut>⌘⇧N</CommandShortcut>
+              </CommandItem>
+              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
+                <Calendar className="mr-2 h-4 w-4" />
+                <span>Schedule Meeting</span>
+                <CommandShortcut>⌘M</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Navigate">
+              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
+                <Settings className="mr-2 h-4 w-4" />
+                <span>Project Settings</span>
+                <CommandShortcut>⌘,</CommandShortcut>
+              </CommandItem>
+              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
+                <User className="mr-2 h-4 w-4" />
+                <span>Team Members</span>
+                <CommandShortcut>⌘T</CommandShortcut>
+              </CommandItem>
+              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
+                <Mail className="mr-2 h-4 w-4" />
+                <span>Messages</span>
+                <CommandShortcut>⌘I</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Tools">
+              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
+                <Calculator className="mr-2 h-4 w-4" />
+                <span>Calculator</span>
+              </CommandItem>
+              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
+                <Download className="mr-2 h-4 w-4" />
+                <span>Export Data</span>
+              </CommandItem>
+              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
+                <Share className="mr-2 h-4 w-4" />
+                <span>Share Project</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </CommandDialog>
+      </div>
+    );
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world example of Command components in a project dashboard application. Shows global search (⌘K) and quick actions (⌘J) command palettes that provide powerful navigation and action capabilities. This demonstrates how command palettes enhance user productivity in modern applications.",
+      },
+    },
+  },
+};