{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-story",
  "title": "Command Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating command component usage and variants",
  "registryDependencies": [
    "dialog",
    "command"
  ],
  "files": [
    {
      "path": "registry/ui/command-story/command-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport { expect, userEvent, within } from \"storybook/test\";\n\n/**\n * Fast, composable, unstyled command menu for React.\n */\nconst meta = {\n  title: \"ui/base/Command\",\n  component: Command,\n  tags: [\"autodocs\"],\n  argTypes: {},\n  args: {\n    className: \"rounded-lg w-96 border shadow-md\",\n  },\n  render: (args) => (\n    <Command {...args}>\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>Calendar</CommandItem>\n          <CommandItem>Search Emoji</CommandItem>\n          <CommandItem disabled>Calculator</CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>Profile</CommandItem>\n          <CommandItem>Billing</CommandItem>\n          <CommandItem>Settings</CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  ),\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof Command>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the command.\n */\nexport const Default: Story = {};\n\nexport const TypingInCombobox: Story = {\n  name: \"when typing into the combobox, should filter results\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const input = canvas.getByRole(\"combobox\");\n\n    // Search for \"calendar\" which should return a single result\n    await userEvent.type(input, \"calen\", { delay: 100 });\n    expect(canvas.getAllByRole(\"option\", { name: /calendar/i })).toHaveLength(\n      1,\n    );\n\n    await userEvent.clear(input);\n\n    // Search for \"story\" which should return multiple results\n    await userEvent.type(input, \"se\", { delay: 100 });\n    expect(canvas.getAllByRole(\"option\").length).toBeGreaterThan(1);\n    expect(canvas.getAllByRole(\"option\", { name: /search/i })).toHaveLength(1);\n\n    await userEvent.clear(input);\n\n    // Search for \"story\" which should return no results\n    await userEvent.type(input, \"story\", { delay: 100 });\n    expect(canvas.queryAllByRole(\"option\", { hidden: false })).toHaveLength(0);\n    expect(canvas.getByText(/no results/i)).toBeVisible();\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "command",
    "search"
  ],
  "type": "registry:component"
}