{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet-story",
  "title": "Sheet Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating sheet component usage and variants",
  "registryDependencies": [
    "sheet"
  ],
  "files": [
    {
      "path": "registry/ui/sheet-story/sheet-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\";\nimport { expect, userEvent, waitFor, within } from \"storybook/test\";\n\n/**\n * Extends the Dialog component to display content that complements the main\n * content of the screen.\n */\nconst meta: Meta<typeof SheetContent> = {\n  title: \"ui/base/Sheet\",\n  component: Sheet,\n  tags: [\"autodocs\"],\n  argTypes: {\n    side: {\n      options: [\"top\", \"bottom\", \"left\", \"right\"],\n      control: {\n        type: \"radio\",\n      },\n    },\n  },\n  args: {\n    side: \"right\",\n  },\n  render: (args) => (\n    <Sheet>\n      <SheetTrigger>Open</SheetTrigger>\n      <SheetContent {...args}>\n        <SheetHeader>\n          <SheetTitle>Are you absolutely sure?</SheetTitle>\n          <SheetDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </SheetDescription>\n        </SheetHeader>\n        <SheetFooter>\n          <SheetClose className=\"hover:underline\">Cancel</SheetClose>\n          <SheetClose className=\"bg-primary text-primary-foreground rounded px-4 py-2\">\n            Submit\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  ),\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof SheetContent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the sheet.\n */\nexport const Default: Story = {};\n\nexport const ShouldOpenCloseWithSubmit: Story = {\n  name: \"when clicking Submit button, should close the sheet\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement, step }) => {\n    const canvasBody = within(canvasElement.ownerDocument.body);\n\n    await step(\"open the sheet\", async () => {\n      await userEvent.click(\n        await canvasBody.findByRole(\"button\", { name: /open/i }),\n      );\n      const sheet = await canvasBody.findByRole(\"dialog\");\n      await waitFor(() => {\n        expect(sheet).toHaveAttribute(\"data-open\");\n      });\n    });\n\n    await step(\"close the sheet\", async () => {\n      await userEvent.click(\n        await canvasBody.findByRole(\"button\", { name: /submit/i }),\n      );\n      await waitFor(() => {\n        expect(canvasBody.queryByRole(\"dialog\")).not.toBeInTheDocument();\n      });\n    });\n  },\n};\n\nexport const ShouldOpenCloseWithCancel: Story = {\n  name: \"when clicking Cancel button, should close the sheet\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement, step }) => {\n    const canvasBody = within(canvasElement.ownerDocument.body);\n\n    await step(\"open the sheet\", async () => {\n      await userEvent.click(\n        await canvasBody.findByRole(\"button\", { name: /open/i }),\n      );\n      const sheet = await canvasBody.findByRole(\"dialog\");\n      await waitFor(() => {\n        expect(sheet).toHaveAttribute(\"data-open\");\n      });\n    });\n\n    await step(\"close the sheet\", async () => {\n      await userEvent.click(\n        await canvasBody.findByRole(\"button\", { name: /cancel/i }),\n      );\n      await waitFor(() => {\n        expect(canvasBody.queryByRole(\"dialog\")).not.toBeInTheDocument();\n      });\n    });\n  },\n};\n\nexport const ShouldOpenCloseWithClose: Story = {\n  name: \"when clicking Close icon, should close the sheet\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement, step }) => {\n    const canvasBody = within(canvasElement.ownerDocument.body);\n\n    await step(\"open the sheet\", async () => {\n      await userEvent.click(\n        await canvasBody.findByRole(\"button\", { name: /open/i }),\n      );\n      const sheet = await canvasBody.findByRole(\"dialog\");\n      await waitFor(() => {\n        expect(sheet).toHaveAttribute(\"data-open\");\n      });\n    });\n\n    await step(\"close the sheet\", async () => {\n      await userEvent.click(\n        await canvasBody.findByRole(\"button\", { name: /close/i }),\n      );\n      await waitFor(() => {\n        expect(canvasBody.queryByRole(\"dialog\")).not.toBeInTheDocument();\n      });\n    });\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "sheet",
    "overlay"
  ],
  "type": "registry:component"
}