{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-story",
  "title": "Calendar Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating calendar component usage and variants",
  "dependencies": [
    "date-fns"
  ],
  "registryDependencies": [
    "calendar"
  ],
  "files": [
    {
      "path": "registry/ui/calendar-story/calendar-base.stories.tsx",
      "content": "import type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { addDays } from \"date-fns\";\nimport { action } from \"storybook/actions\";\nimport { expect, userEvent } from \"storybook/test\";\n\nimport { Calendar } from \"@/components/ui/calendar\";\n\n/**\n * A date field component that allows users to enter and edit date.\n */\nconst meta = {\n  title: \"ui/base/Calendar\",\n  component: Calendar,\n  tags: [\"autodocs\"],\n  argTypes: {\n    mode: {\n      table: {\n        disable: true,\n      },\n    },\n    disabled: {\n      control: \"boolean\",\n    },\n    numberOfMonths: {\n      control: \"number\",\n      description: \"Number of months to display\",\n    },\n    showOutsideDays: {\n      control: \"boolean\",\n      description: \"Show days that fall outside the current month\",\n    },\n  },\n  args: {\n    mode: \"single\",\n    selected: new Date(),\n    onSelect: action(\"onDayClick\"),\n    className: \"rounded-md border w-fit\",\n    disabled: false,\n    numberOfMonths: 1,\n    showOutsideDays: true,\n  },\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof Calendar>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the calendar.\n */\nexport const Default: Story = {};\n\n/**\n * Use the `multiple` mode to select multiple dates.\n */\nexport const Multiple: Story = {\n  args: {\n    min: 1,\n    selected: [new Date(), addDays(new Date(), 2), addDays(new Date(), 8)],\n    mode: \"multiple\",\n  },\n};\n\n/**\n * Use the `range` mode to select a range of dates.\n */\nexport const Range: Story = {\n  args: {\n    selected: {\n      from: new Date(),\n      to: addDays(new Date(), 7),\n    },\n    mode: \"range\",\n  },\n};\n\n/**\n * Use the `disabled` prop to disable specific dates.\n */\nexport const Disabled: Story = {\n  args: {\n    disabled: [\n      addDays(new Date(), 1),\n      addDays(new Date(), 2),\n      addDays(new Date(), 3),\n      addDays(new Date(), 5),\n    ],\n  },\n};\n\n/**\n * Use the `numberOfMonths` prop to display multiple months.\n */\nexport const MultipleMonths: Story = {\n  args: {\n    numberOfMonths: 2,\n    showOutsideDays: false,\n  },\n};\n\nexport const ShouldNavigateMonthsWhenClicked: Story = {\n  name: \"when using the calendar navigation, should change months\",\n  tags: [\"!dev\", \"!autodocs\"],\n  args: {\n    defaultMonth: new Date(2000, 8),\n  },\n  play: async ({ canvas }) => {\n    const title = await canvas.findByText(/2000/i);\n    const startTitle = title.textContent || \"\";\n    const backBtn = await canvas.findByRole(\"button\", {\n      name: /previous/i,\n    });\n    const nextBtn = await canvas.findByRole(\"button\", {\n      name: /next/i,\n    });\n    const steps = 6;\n    for (let i = 0; i < steps / 2; i++) {\n      await userEvent.click(backBtn);\n      expect(title).not.toHaveTextContent(startTitle);\n    }\n    for (let i = 0; i < steps; i++) {\n      await userEvent.click(nextBtn);\n      if (i == steps / 2 - 1) {\n        expect(title).toHaveTextContent(startTitle);\n        continue;\n      }\n      expect(title).not.toHaveTextContent(startTitle);\n    }\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "calendar",
    "date"
  ],
  "type": "registry:component"
}