{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-story",
  "title": "Sidebar Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating sidebar component usage and variants",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "sidebar",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "registry/ui/sidebar-story/sidebar-base.stories.tsx",
      "content": "import { userEvent } from \"storybook/test\";\n// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\";\nimport {\n  Calendar,\n  ChevronUp,\n  Home,\n  Inbox,\n  Search,\n  Settings,\n  User2,\n} from \"lucide-react\";\n\n/**\n * A composable, themeable and customizable sidebar component.\n */\nconst meta = {\n  title: \"ui/base/Sidebar\",\n  component: Sidebar,\n  tags: [\"autodocs\"],\n  argTypes: {\n    side: {\n      options: [\"left\", \"right\"],\n      control: { type: \"radio\" },\n    },\n    variant: {\n      options: [\"sidebar\", \"floating\", \"inset\"],\n      control: { type: \"radio\" },\n    },\n    collapsible: {\n      options: [\"offcanvas\", \"icon\", \"none\"],\n      control: { type: \"radio\" },\n    },\n  },\n  args: {\n    side: \"left\",\n    variant: \"sidebar\",\n    collapsible: \"icon\",\n  },\n  parameters: {\n    layout: \"fullscreen\",\n  },\n  decorators: [\n    (Story) => (\n      <SidebarProvider>\n        <Story />\n        <section className=\"m-4\">\n          <SidebarTrigger />\n          <div className=\"size-full\" />\n        </section>\n      </SidebarProvider>\n    ),\n  ],\n} satisfies Meta<typeof Sidebar>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof Sidebar>;\n\n// Menu items.\nconst items = [\n  {\n    title: \"Home\",\n    url: \"#\",\n    icon: Home,\n  },\n  {\n    title: \"Inbox\",\n    url: \"#\",\n    icon: Inbox,\n  },\n  {\n    title: \"Calendar\",\n    url: \"#\",\n    icon: Calendar,\n  },\n  {\n    title: \"Search\",\n    url: \"#\",\n    icon: Search,\n  },\n  {\n    title: \"Settings\",\n    url: \"#\",\n    icon: Settings,\n  },\n];\n\n/**\n * A simple sidebar with a group of menu items.\n */\nexport const Simple: Story = {\n  render: (args) => (\n    <Sidebar {...args}>\n      <SidebarHeader />\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Application</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {items.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    <item.icon />\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter />\n    </Sidebar>\n  ),\n};\n\n/**\n * A simple sidebar with a footer menu item.\n */\nexport const Footer: Story = {\n  render: (args) => (\n    <Sidebar {...args}>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger render={<SidebarMenuButton />}>\n                <User2 /> Username\n                <ChevronUp className=\"ml-auto\" />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent side=\"top\" className=\"w-(--anchor-width)\">\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  ),\n};\n\nexport const ShouldCloseOpen: Story = {\n  ...Simple,\n  name: \"when clicking the trigger, should close and open the sidebar\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvas, step }) => {\n    const sidebarBtn = await canvas.findByRole(\"button\", {\n      name: /toggle/i,\n    });\n    await step(\"close the sidebar\", async () => {\n      await userEvent.click(sidebarBtn);\n    });\n\n    await step(\"reopen the sidebar\", async () => {\n      await userEvent.click(sidebarBtn);\n    });\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "sidebar",
    "navigation"
  ],
  "type": "registry:component"
}