@neynar/ui 0.1.1

package/src/components/ui/stories/accordion.stories.tsx

@@ -0,0 +1,429 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { User, CreditCard, Bell, Shield, Lock } from "lucide-react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "../accordion";
+
+const meta = {
+  title: "Layout and Structure/Accordion",
+  component: Accordion,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A vertically stacked set of interactive headings that each reveal a section of content. Built on Radix UI primitives with smooth animations and full accessibility support. Supports both single and multiple expansion modes for flexible content organization.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "radio" },
+      options: ["single", "multiple"],
+      description:
+        "Controls whether one or multiple items can be open simultaneously",
+    },
+    collapsible: {
+      control: { type: "boolean" },
+      description: "When type='single', allows closing the open item",
+      if: { arg: "type", eq: "single" },
+    },
+    defaultValue: {
+      control: { type: "text" },
+      description: "Initial value for open items",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disables all accordion interactions",
+    },
+    orientation: {
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+      description: "Layout orientation",
+    },
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all accordion props and variants.
+ * Use the controls panel to experiment with different configurations.
+ */
+export const Interactive: Story = {
+  args: {
+    type: "single",
+    collapsible: true,
+    className: "w-96",
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>What is your return policy?</AccordionTrigger>
+        <AccordionContent>
+          We offer a 30-day return policy for all items. Items must be in their
+          original condition with tags attached. Returns are free for defective
+          items, and a small fee applies for other returns.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>How long does shipping take?</AccordionTrigger>
+        <AccordionContent>
+          Standard shipping typically takes 3-5 business days. Express shipping
+          is available for 1-2 business days. Free shipping is available on
+          orders over $50.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Do you ship internationally?</AccordionTrigger>
+        <AccordionContent>
+          Yes, we ship to over 100 countries worldwide. International shipping
+          times vary by location, typically 7-14 business days. Customs duties
+          may apply depending on your country.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+/**
+ * Comprehensive showcase of all accordion variants and configurations.
+ * Demonstrates different types, content styles, and use cases.
+ */
+export const Variants: Story = {
+  args: {
+    type: "single",
+    collapsible: true,
+    className: "w-96",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Shows different accordion configurations: single vs multiple, with icons, default open states, and various content types.",
+      },
+    },
+  },
+  render: () => (
+    <div className="space-y-8 w-full max-w-2xl">
+      {/* Single Accordion */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">
+          Single Accordion (Collapsible)
+        </h3>
+        <Accordion type="single" collapsible className="w-full">
+          <AccordionItem value="basic-1">
+            <AccordionTrigger>Basic Single Item</AccordionTrigger>
+            <AccordionContent>
+              Only one item can be open at a time. Click another to close this
+              one.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="basic-2">
+            <AccordionTrigger>Another Single Item</AccordionTrigger>
+            <AccordionContent>
+              This will close the previous item when opened.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+
+      {/* Multiple Accordion */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Multiple Accordion</h3>
+        <Accordion type="multiple" className="w-full">
+          <AccordionItem value="multi-1">
+            <AccordionTrigger>Multiple Item 1</AccordionTrigger>
+            <AccordionContent>
+              Multiple items can be open simultaneously.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="multi-2">
+            <AccordionTrigger>Multiple Item 2</AccordionTrigger>
+            <AccordionContent>
+              This can be open at the same time as other items.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+
+      {/* With Icons */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">With Icons</h3>
+        <Accordion type="single" collapsible className="w-full">
+          <AccordionItem value="icon-1">
+            <AccordionTrigger className="flex items-center gap-3">
+              <User className="size-4" />
+              Profile Settings
+            </AccordionTrigger>
+            <AccordionContent>
+              Update your personal information and preferences.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="icon-2">
+            <AccordionTrigger className="flex items-center gap-3">
+              <Lock className="size-4" />
+              Security
+            </AccordionTrigger>
+            <AccordionContent>
+              Manage your security settings and two-factor authentication.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+
+      {/* Default Open */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Default Open State</h3>
+        <Accordion
+          type="single"
+          collapsible
+          defaultValue="default-open"
+          className="w-full"
+        >
+          <AccordionItem value="default-closed">
+            <AccordionTrigger>Closed by Default</AccordionTrigger>
+            <AccordionContent>This item starts closed.</AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="default-open">
+            <AccordionTrigger>Open by Default</AccordionTrigger>
+            <AccordionContent>
+              This item is open when the accordion first loads due to the
+              defaultValue prop.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Real-world example showing accordion in a practical application context.
+ * Demonstrates how accordions work in complex UI scenarios like settings panels or FAQ sections.
+ */
+export const InContext: Story = {
+  args: {
+    type: "single",
+    collapsible: true,
+    className: "w-96",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Shows accordion used in a realistic application context - a comprehensive account settings page with organized sections.",
+      },
+    },
+  },
+  render: () => (
+    <div className="w-full max-w-4xl mx-auto p-6 bg-background">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold mb-2">Account Settings</h1>
+        <p className="text-muted-foreground">
+          Manage your account preferences, security settings, and notification
+          options.
+        </p>
+      </div>
+
+      {/* Settings Accordion */}
+      <Accordion type="single" collapsible className="w-full space-y-2">
+        {/* Profile Section */}
+        <AccordionItem value="profile" className="border rounded-lg px-4">
+          <AccordionTrigger className="hover:no-underline py-6">
+            <div className="flex items-center gap-4">
+              <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
+                <User className="size-5 text-blue-600 dark:text-blue-400" />
+              </div>
+              <div className="text-left">
+                <h3 className="font-semibold">Profile Information</h3>
+                <p className="text-sm text-muted-foreground">
+                  Update your personal details and preferences
+                </p>
+              </div>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="pb-6">
+            <div className="space-y-4 pl-16">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium">Full Name</label>
+                  <div className="mt-1 p-2 border rounded text-sm">
+                    John Doe
+                  </div>
+                </div>
+                <div>
+                  <label className="text-sm font-medium">Email</label>
+                  <div className="mt-1 p-2 border rounded text-sm">
+                    john.doe@example.com
+                  </div>
+                </div>
+              </div>
+              <div>
+                <label className="text-sm font-medium">Bio</label>
+                <div className="mt-1 p-2 border rounded text-sm min-h-[80px]">
+                  Software developer with a passion for creating great user
+                  experiences.
+                </div>
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Security Section */}
+        <AccordionItem value="security" className="border rounded-lg px-4">
+          <AccordionTrigger className="hover:no-underline py-6">
+            <div className="flex items-center gap-4">
+              <div className="p-2 bg-green-100 dark:bg-green-900 rounded-lg">
+                <Shield className="size-5 text-green-600 dark:text-green-400" />
+              </div>
+              <div className="text-left">
+                <h3 className="font-semibold">Security & Privacy</h3>
+                <p className="text-sm text-muted-foreground">
+                  Manage passwords, 2FA, and privacy settings
+                </p>
+              </div>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="pb-6">
+            <div className="space-y-4 pl-16">
+              <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
+                <div>
+                  <div className="font-medium">Two-Factor Authentication</div>
+                  <div className="text-sm text-muted-foreground">
+                    Add an extra layer of security
+                  </div>
+                </div>
+                <div className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">
+                  Enabled
+                </div>
+              </div>
+              <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
+                <div>
+                  <div className="font-medium">Password</div>
+                  <div className="text-sm text-muted-foreground">
+                    Last changed 30 days ago
+                  </div>
+                </div>
+                <button className="px-3 py-1 bg-primary text-primary-foreground rounded text-sm">
+                  Change
+                </button>
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Billing Section */}
+        <AccordionItem value="billing" className="border rounded-lg px-4">
+          <AccordionTrigger className="hover:no-underline py-6">
+            <div className="flex items-center gap-4">
+              <div className="p-2 bg-purple-100 dark:bg-purple-900 rounded-lg">
+                <CreditCard className="size-5 text-purple-600 dark:text-purple-400" />
+              </div>
+              <div className="text-left">
+                <h3 className="font-semibold">Billing & Subscription</h3>
+                <p className="text-sm text-muted-foreground">
+                  Manage payment methods and billing history
+                </p>
+              </div>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="pb-6">
+            <div className="space-y-4 pl-16">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="p-4 border rounded-lg">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="font-medium">Current Plan</span>
+                    <span className="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">
+                      Pro
+                    </span>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    $19/month • Billed monthly
+                  </p>
+                </div>
+                <div className="p-4 border rounded-lg">
+                  <div className="font-medium mb-2">Payment Method</div>
+                  <p className="text-sm text-muted-foreground">
+                    •••• •••• •••• 4242
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Expires 12/2027
+                  </p>
+                </div>
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Notifications Section */}
+        <AccordionItem value="notifications" className="border rounded-lg px-4">
+          <AccordionTrigger className="hover:no-underline py-6">
+            <div className="flex items-center gap-4">
+              <div className="p-2 bg-orange-100 dark:bg-orange-900 rounded-lg">
+                <Bell className="size-5 text-orange-600 dark:text-orange-400" />
+              </div>
+              <div className="text-left">
+                <h3 className="font-semibold">Notification Preferences</h3>
+                <p className="text-sm text-muted-foreground">
+                  Control how and when you receive notifications
+                </p>
+              </div>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="pb-6">
+            <div className="space-y-3 pl-16">
+              {[
+                {
+                  name: "Email Notifications",
+                  desc: "Receive updates via email",
+                  enabled: true,
+                },
+                {
+                  name: "Push Notifications",
+                  desc: "Browser and mobile notifications",
+                  enabled: false,
+                },
+                {
+                  name: "SMS Notifications",
+                  desc: "Text message alerts for important updates",
+                  enabled: true,
+                },
+                {
+                  name: "Marketing Communications",
+                  desc: "Product updates and special offers",
+                  enabled: false,
+                },
+              ].map((item, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between p-3 bg-muted rounded-lg"
+                >
+                  <div>
+                    <div className="font-medium">{item.name}</div>
+                    <div className="text-sm text-muted-foreground">
+                      {item.desc}
+                    </div>
+                  </div>
+                  <div
+                    className={`w-10 h-6 rounded-full p-1 ${item.enabled ? "bg-blue-600" : "bg-gray-300"}`}
+                  >
+                    <div
+                      className={`w-4 h-4 rounded-full bg-white transition-transform ${item.enabled ? "translate-x-4" : "translate-x-0"}`}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};