{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-menu-story",
  "title": "Context Menu Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating context menu component usage and variants",
  "registryDependencies": [
    "context-menu"
  ],
  "files": [
    {
      "path": "registry/ui/context-menu-story/context-menu-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/components/ui/context-menu\";\nimport { expect, userEvent, within } from \"storybook/test\";\n\n/**\n * Displays a menu to the user — such as a set of actions or functions —\n * triggered by a button.\n */\nconst meta = {\n  title: \"ui/base/ContextMenu\",\n  component: ContextMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n  args: {},\n  render: (args) => (\n    <ContextMenu {...args}>\n      <ContextMenuTrigger className=\"bg-accent flex h-48 w-96 items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-32\">\n        <ContextMenuItem>Profile</ContextMenuItem>\n        <ContextMenuItem>Billing</ContextMenuItem>\n        <ContextMenuItem>Team</ContextMenuItem>\n        <ContextMenuItem>Subscription</ContextMenuItem>\n      </ContextMenuContent>\n    </ContextMenu>\n  ),\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof ContextMenu>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the context menu.\n */\nexport const Default: Story = {};\n\n/**\n * A context menu with shortcuts.\n */\nexport const WithShortcuts: Story = {\n  render: (args) => (\n    <ContextMenu {...args}>\n      <ContextMenuTrigger className=\"bg-accent flex h-48 w-96 items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-32\">\n        <ContextMenuItem>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n      </ContextMenuContent>\n    </ContextMenu>\n  ),\n};\n\n/**\n * A context menu with a submenu.\n */\nexport const WithSubmenu: Story = {\n  render: (args) => (\n    <ContextMenu {...args}>\n      <ContextMenuTrigger className=\"bg-accent flex h-48 w-96 items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-32\">\n        <ContextMenuItem>\n          New Tab\n          <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent>\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n      </ContextMenuContent>\n    </ContextMenu>\n  ),\n};\n\n/**\n * A context menu with checkboxes.\n */\nexport const WithCheckboxes: Story = {\n  render: (args) => (\n    <ContextMenu {...args}>\n      <ContextMenuTrigger className=\"bg-accent flex h-48 w-96 items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuCheckboxItem checked>\n          Show Comments\n          <ContextMenuShortcut>⌘⇧C</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Preview</ContextMenuCheckboxItem>\n      </ContextMenuContent>\n    </ContextMenu>\n  ),\n};\n\n/**\n * A context menu with a radio group.\n */\nexport const WithRadioGroup: Story = {\n  render: (args) => (\n    <ContextMenu {...args}>\n      <ContextMenuTrigger className=\"bg-accent flex h-48 w-96 items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuRadioGroup value=\"light\">\n          <ContextMenuLabel inset>Theme</ContextMenuLabel>\n          <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  ),\n};\n\nexport const ShouldOpenClose: Story = {\n  name: \"when right-clicking the trigger area, the menu appears and can be interacted with\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement, canvas, step }) => {\n    const canvasBody = within(canvasElement.ownerDocument.body);\n\n    step(\"Right-click on the trigger area\", async () => {\n      await userEvent.pointer({\n        keys: \"[MouseRight>]\",\n        target: await canvas.findByText(/click here/i),\n        coords: {\n          x: canvasElement.clientWidth / 2,\n          y: canvasElement.clientHeight / 2,\n        },\n      });\n    });\n    expect(await canvasBody.findByRole(\"menu\")).toBeInTheDocument();\n    const items = await canvasBody.findAllByRole(\"menuitem\");\n    expect(items).toHaveLength(4);\n\n    step(\"Click the first menu item\", async () => {\n      await userEvent.click(items[0], { delay: 100 });\n    });\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "menu",
    "context"
  ],
  "type": "registry:component"
}