From 5e615c0cb23ef4c036f471b0f35736e5b66c47b0 Mon Sep 17 00:00:00 2001
From: Mumtahin Farabi <mfarabi619@gmail.com>
Date: Sun, 15 Dec 2024 22:58:24 -0500
Subject: [PATCH] feat(libs/docs): add accordion stories

---
 libs/docs/components/ui/accordion.stories.tsx | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 libs/docs/components/ui/accordion.stories.tsx

diff --git a/libs/docs/components/ui/accordion.stories.tsx b/libs/docs/components/ui/accordion.stories.tsx
new file mode 100644
index 000000000..76dac7188
--- /dev/null
+++ b/libs/docs/components/ui/accordion.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion'
+
+const meta: Meta<typeof Accordion> = {
+  title: '📚 Docs Site/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title of the accordion',
+    },
+    asChild: {
+      control: 'boolean',
+      description: 'Renders the component as a child element',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the accordion',
+      defaultValue: false,
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Accordion>
+
+export const Default: Story = {
+  args: {
+    title: 'What is Fumadocs?',
+    asChild: false,
+    disabled: false,
+  },
+  render: args => (
+    <Accordions>
+      <Accordion {...args}>Fumadocs is a documentation UI toolkit.</Accordion>
+      <Accordion title="What do we love?" {...args}>
+        We love clean and efficient documentation!
+      </Accordion>
+    </Accordions>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    title: 'What is Fumadocs?',
+    asChild: false,
+    disabled: true,
+  },
+  render: args => (
+    <Accordions>
+      <Accordion {...args}>This accordion is disabled.</Accordion>
+    </Accordions>
+  ),
+}
+
+export const Multiple: Story = {
+  args: {
+    title: 'What is Fumadocs?',
+    asChild: false,
+    disabled: false,
+  },
+  render: args => (
+    <Accordions type="multiple">
+      <Accordion {...args}>Fumadocs is a documentation UI toolkit.</Accordion>
+      <Accordion title="What do we love?" {...args}>
+        We love clean and efficient documentation!
+      </Accordion>
+    </Accordions>
+  ),
+}