{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover-story",
  "title": "Popover Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating popover component usage and variants",
  "registryDependencies": [
    "popover"
  ],
  "files": [
    {
      "path": "registry/ui/popover-story/popover-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { expect, userEvent, waitFor, within } from \"storybook/test\";\n\n/**\n * Displays rich content in a portal, triggered by a button.\n */\nconst meta = {\n  title: \"ui/base/Popover\",\n  component: Popover,\n  tags: [\"autodocs\"],\n  argTypes: {},\n\n  render: (args) => (\n    <Popover {...args}>\n      <PopoverTrigger>Open</PopoverTrigger>\n      <PopoverContent>Place content for the popover here.</PopoverContent>\n    </Popover>\n  ),\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof Popover>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the popover.\n */\nexport const Default: Story = {};\n\nexport const ShouldOpenClose: Story = {\n  name: \"when clicking the trigger, should open and close the popover\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement, step }) => {\n    const canvasBody = within(canvasElement.ownerDocument.body);\n\n    await step(\"click the trigger to open the popover\", async () => {\n      await userEvent.click(\n        await canvasBody.findByRole(\"button\", { name: /open/i }),\n      );\n      expect(await canvasBody.findByRole(\"dialog\")).toBeInTheDocument();\n    });\n\n    await step(\"click the trigger to close the popover\", async () => {\n      await userEvent.click(\n        await canvasBody.findByRole(\"button\", { name: /open/i }),\n      );\n      await waitFor(() => {\n        expect(canvasBody.queryByRole(\"dialog\")).not.toBeInTheDocument();\n      });\n    });\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "popover",
    "overlay"
  ],
  "type": "registry:component"
}