aural-ui 4.0.1 → 4.1.0

package/dist/components/collapsible/Collapsible.stories.tsx

@@ -1,8 +1,9 @@
-import React from "react"
+import React, { useState } from "react"
 import { AngleDownIcon } from "@icons/angle-down-icon"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
-import { IconButton } from "../icon-button"
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
 import {
   Collapsible,
   CollapsibleContent,
@@ -16,18 +17,29 @@ const meta: Meta<typeof Collapsible> = {
   component: Collapsible,
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
-    },
     docs: {
       description: {
         component:
-          "A collapsible component built on Radix UI that can expand and collapse content.",
+          "A compound collapsible component built on Radix UI. Composed of CollapsibleHeader, CollapsibleTrigger, CollapsibleTitle, and CollapsibleContent for building expandable sections with defaultOpen and disabled states.",
       },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "Compound Structure",
+              description: "Header, trigger, content",
+            },
+            {
+              title: "Stateful by Design",
+              description: "Open, closed, disabled",
+            },
+            {
+              title: "Expandable Content",
+              description: "Smooth reveal pattern",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
@@ -46,281 +58,408 @@ const meta: Meta<typeof Collapsible> = {
 export default meta
 type Story = StoryObj<typeof Collapsible>
 
-export const Default: Story = {
-  render: (args) => (
-    <div className="w-[800px]">
-      <Collapsible {...args}>
-        <CollapsibleHeader title="Frequently Asked Questions" />
-        <CollapsibleContent>
-          <div className="pt-4">
-            <p>
-              This is the collapsible content area. You can put any content here
-              including text, images, forms, or other components. The content
-              will smoothly animate when the collapsible is opened or closed.
-            </p>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
+function InfoBox({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+      <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-xl">
+        {children}
+      </p>
     </div>
-  ),
-  args: {
-    defaultOpen: false,
-  },
+  )
 }
 
-export const DefaultOpen: Story = {
-  render: () => (
-    <div className="w-[800px]">
-      <Collapsible defaultOpen>
-        <CollapsibleHeader title="Settings Panel" />
-        <CollapsibleContent>
-          <div className="space-y-3 pt-4">
-            <div className="flex items-center justify-between">
-              <span>Enable notifications</span>
-              <input type="checkbox" defaultChecked />
-            </div>
-            <div className="flex items-center justify-between">
-              <span>Dark mode</span>
-              <input type="checkbox" />
-            </div>
-            <div className="flex items-center justify-between">
-              <span>Auto-save</span>
-              <input type="checkbox" defaultChecked />
-            </div>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
+function PartCard({
+  title,
+  example,
+  description,
+}: {
+  title: string
+  example: React.ReactNode
+  description: React.ReactNode
+}) {
+  return (
+    <div className="space-y-3">
+      <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+        {title}
+      </h4>
+      <div className="border-fm-divider-secondary bg-fm-surface-primary rounded-xl border p-4">
+        {example}
+      </div>
+      <InfoBox>{description}</InfoBox>
     </div>
-  ),
+  )
 }
 
-export const Disabled: Story = {
-  render: () => (
-    <div className="w-[800px]">
-      <Collapsible disabled>
-        <CollapsibleHeader title="Disabled Section" />
-        <CollapsibleContent>
-          <div className="pt-4">
-            <p>
-              This content cannot be accessed because the collapsible is
-              disabled.
-            </p>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
+function TrackMeta() {
+  return (
+    <div className="space-y-1 pt-4">
+      <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+        Midnight Rain
+      </p>
+      <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+        Taylor Swift · Midnights · 2:53
+      </p>
     </div>
-  ),
+  )
 }
 
-export const CustomTrigger: Story = {
-  render: () => (
-    <div className="w-[800px]">
-      <Collapsible>
-        <div className="flex items-center justify-between gap-2">
-          <CollapsibleTitle>Advanced Settings</CollapsibleTitle>
-          <CollapsibleTrigger asChild>
-            <IconButton
-              variant="ghost"
-              size="small"
-              icon={
-                <AngleDownIcon className="toggle-icon" height={32} width={32} />
-              }
-              label="Toggle Settings"
-              className="text-fm-icon-active disabled:text-fm-icon-inactive flex [&>.toggle-icon]:transition-transform [&>.toggle-icon]:duration-50 data-[state=open]:[&>.toggle-icon]:-rotate-180"
-            />
-          </CollapsibleTrigger>
-        </div>
-        <CollapsibleContent>
-          <div className="pt-4">
-            <p>
-              Custom trigger button with settings icon that rotates 45 degrees
-              when opened.
-            </p>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-    </div>
-  ),
-}
+// ─── Parts ───────────────────────────────────────────────────────────────────
 
-export const MultipleCollapsibles: Story = {
+export const Parts: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The compound parts demonstrated in valid compositions so each piece is visible and interactive in context.",
+      },
+    },
+  },
   render: () => (
-    <div className="w-[800px] space-y-4">
-      <Collapsible>
-        <CollapsibleHeader title="Section 1: Getting Started" />
-        <CollapsibleContent>
-          <div className="pt-4">
-            <p>
-              Learn the basics of using our platform. This section covers
-              initial setup, account creation, and basic navigation.
+    <div className="space-y-10">
+      <PartCard
+        title="CollapsibleTitle"
+        example={
+          <div className="space-y-3">
+            <CollapsibleTitle>Track Information</CollapsibleTitle>
+            <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm">
+              Standalone title styling for section headings.
             </p>
           </div>
-        </CollapsibleContent>
-      </Collapsible>
+        }
+        description={
+          <>
+            Renders the heading text for a collapsible section. By default it
+            maps to <code>&lt;h2&gt;</code> and provides the large title
+            treatment used in the header row.
+          </>
+        }
+      />
 
-      <Collapsible>
-        <CollapsibleHeader title="Section 2: Advanced Features" />
-        <CollapsibleContent>
-          <div className="pt-4">
-            <p>
-              Explore advanced functionality including custom integrations, API
-              usage, and automation tools.
-            </p>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
+      <PartCard
+        title="CollapsibleTrigger"
+        example={
+          <Collapsible className="border-0 pb-0" defaultOpen>
+            <div className="space-y-3">
+              <div className="flex items-center gap-3">
+                <CollapsibleTrigger asChild>
+                  <button className="text-fm-primary border-fm-divider-secondary bg-fm-surface-secondary flex items-center gap-2 rounded-lg border px-3 py-2 [&>.toggle-icon]:transition-transform [&>.toggle-icon]:duration-150 data-[state=open]:[&>.toggle-icon]:-rotate-180">
+                    <span className="font-fm-text text-fm-sm leading-fm-sm">
+                      Toggle Details
+                    </span>
+                    <AngleDownIcon
+                      className="toggle-icon text-fm-icon-active"
+                      height={20}
+                      width={20}
+                    />
+                  </button>
+                </CollapsibleTrigger>
+                <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm">
+                  Custom trigger using <code>asChild</code>
+                </p>
+              </div>
+              <CollapsibleContent>
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-3">
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    Clicking the trigger collapses and reveals this panel.
+                  </p>
+                </div>
+              </CollapsibleContent>
+            </div>
+          </Collapsible>
+        }
+        description={
+          <>
+            The trigger controls the open state. Here it is rendered with{" "}
+            <code>asChild</code> so the toggle state is visible on a custom
+            button while still using the same collapsible trigger primitive.
+          </>
+        }
+      />
 
-      <Collapsible>
-        <CollapsibleHeader title="Section 3: Troubleshooting" />
-        <CollapsibleContent>
-          <div className="pt-4">
-            <p>
-              Common issues and their solutions. Find answers to frequently
-              encountered problems.
-            </p>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-    </div>
-  ),
-}
+      <PartCard
+        title="CollapsibleHeader"
+        example={
+          <Collapsible className="border-0 pb-0">
+            <CollapsibleHeader title="EQ Settings" />
+            <CollapsibleContent>
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-3">
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  The full header row acts as the trigger.
+                </p>
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+        }
+        description={
+          <>
+            A convenience wrapper that combines <code>CollapsibleTitle</code>{" "}
+            and <code>CollapsibleTrigger</code> into one clickable header row.
+          </>
+        }
+      />
 
-export const RichContent: Story = {
-  render: () => (
-    <div className="w-[800px]">
-      <Collapsible>
-        <CollapsibleHeader title="Product Features" />
-        <CollapsibleContent>
-          <div className="space-y-4 pt-4">
-            <div>
-              <h4 className="mb-2 font-semibold">Key Benefits:</h4>
-              <ul className="list-inside list-disc space-y-1">
-                <li>Easy to use interface</li>
-                <li>Powerful automation tools</li>
-                <li>24/7 customer support</li>
-                <li>Enterprise-grade security</li>
-              </ul>
-            </div>
-            <div>
-              <h4 className="mb-2 font-semibold">Pricing:</h4>
-              <div className="bg-fm-surface-secondary rounded p-3">
-                <p className="text-sm">Starting at $29/month for basic plan</p>
+      <PartCard
+        title="CollapsibleContent"
+        example={
+          <Collapsible defaultOpen className="border-0 pb-0">
+            <CollapsibleHeader title="Current EQ Preset" />
+            <CollapsibleContent>
+              <div className="space-y-2 pt-4">
+                <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                  Warm Vocal Boost
+                </p>
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  Bass 80 Hz · +3 dB
+                </p>
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  Mid 1 kHz · 0 dB
+                </p>
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  Treble 10 kHz · −2 dB
+                </p>
               </div>
-            </div>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
+            </CollapsibleContent>
+          </Collapsible>
+        }
+        description={
+          <>
+            The content region is the expandable body. It stays mounted within
+            the collapsible and becomes visible when the section is opened.
+          </>
+        }
+      />
     </div>
   ),
 }
 
-export const WithCustomStyling: Story = {
-  render: () => (
-    <div className="w-[800px]">
-      <Collapsible className="rounded-lg border-2 border-blue-200 bg-blue-50 p-4">
-        <div className="flex items-center justify-between gap-2">
-          <CollapsibleTitle className="font-bold text-blue-800">
-            Important Notice
-          </CollapsibleTitle>
-          <CollapsibleTrigger asChild>
-            <IconButton
-              variant="ghost"
-              size="small"
-              className="text-blue-600 hover:bg-blue-100"
-              icon={
-                <AngleDownIcon className="transition-transform duration-200 data-[state=open]:rotate-180" />
-              }
-              label="Toggle Notice"
-            />
-          </CollapsibleTrigger>
-        </div>
-        <CollapsibleContent className="text-blue-700">
-          <div className="pt-4">
-            <p>
-              This is an important system notification with custom styling. The
-              entire collapsible has a blue theme to draw attention to critical
-              information.
-            </p>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-    </div>
-  ),
-}
+// ─── States ──────────────────────────────────────────────────────────────────
 
-export const LongContent: Story = {
+export const States: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Open, closed, and disabled states side by side, using realistic content so each state reads clearly.",
+      },
+    },
+  },
   render: () => (
-    <div className="w-[800px]">
-      <Collapsible>
-        <CollapsibleHeader title="Terms and Conditions" />
-        <CollapsibleContent>
-          <div className="max-h-60 overflow-y-auto pt-4">
-            <div className="space-y-4 text-sm">
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris.
-              </p>
-              <p>
-                Duis aute irure dolor in reprehenderit in voluptate velit esse
-                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-                cupidatat non proident, sunt in culpa qui officia deserunt
-                mollit anim id est laborum.
-              </p>
-              <p>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-                quae ab illo inventore veritatis et quasi architecto beatae
-                vitae dicta sunt explicabo.
-              </p>
-              <p>
-                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
-                aut fugit, sed quia consequuntur magni dolores eos qui ratione
-                voluptatem sequi nesciunt.
+    <div className="space-y-8">
+      <div className="space-y-3">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Open
+        </h4>
+        <Collapsible defaultOpen>
+          <CollapsibleHeader title="Now Playing" />
+          <CollapsibleContent>
+            <TrackMeta />
+          </CollapsibleContent>
+        </Collapsible>
+        <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+          Default Open
+        </p>
+      </div>
+
+      <div className="space-y-3">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Closed
+        </h4>
+        <Collapsible>
+          <CollapsibleHeader title="Playlist Details" />
+          <CollapsibleContent>
+            <div className="pt-4">
+              <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                Hidden until expanded
               </p>
-              <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui
-                blanditiis praesentium voluptatum deleniti atque corrupti quos
-                dolores et quas molestias excepturi sint occaecati cupiditate
-                non provident.
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+        <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+          Default closed
+        </p>
+      </div>
+
+      <div className="space-y-3">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Disabled
+        </h4>
+        <Collapsible disabled>
+          <CollapsibleHeader title="Locked Section" />
+          <CollapsibleContent>
+            <div className="pt-4">
+              <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                This content cannot be expanded while disabled.
               </p>
             </div>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
+          </CollapsibleContent>
+        </Collapsible>
+        <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+          Disabled trigger and title
+        </p>
+      </div>
     </div>
   ),
 }
 
-export const NestedCollapsibles: Story = {
-  render: () => (
-    <div className="w-[800px]">
-      <Collapsible>
-        <CollapsibleHeader title="Main Category" />
-        <CollapsibleContent>
+// ─── Interactive ─────────────────────────────────────────────────────────────
+
+export const Interactive: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A multi-panel audio settings surface with local state controls for opening individual panels or expanding everything at once.",
+      },
+    },
+  },
+  render: () => {
+    const sections = [
+      {
+        id: "track",
+        title: "Track Info",
+        content: (
+          <div className="space-y-3 pt-4">
+            {[
+              ["Title", "Midnight Rain"],
+              ["Artist", "Taylor Swift"],
+              ["Album", "Midnights"],
+              ["Duration", "2:53"],
+            ].map(([label, value]) => (
+              <div key={label} className="flex items-center justify-between">
+                <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  {label}
+                </span>
+                <span className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                  {value}
+                </span>
+              </div>
+            ))}
+          </div>
+        ),
+      },
+      {
+        id: "eq",
+        title: "EQ Settings",
+        content: (
+          <div className="space-y-3 pt-4">
+            {[
+              ["Sub-Bass", "60 Hz · +2 dB"],
+              ["Bass", "250 Hz · +4 dB"],
+              ["Mid", "1 kHz · 0 dB"],
+              ["Presence", "4 kHz · −1 dB"],
+              ["Treble", "10 kHz · −3 dB"],
+            ].map(([label, value]) => (
+              <div key={label} className="flex items-center justify-between">
+                <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  {label}
+                </span>
+                <span className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                  {value}
+                </span>
+              </div>
+            ))}
+          </div>
+        ),
+      },
+      {
+        id: "playlist",
+        title: "Playlist Details",
+        content: (
           <div className="space-y-2 pt-4">
-            <p className="mb-4">This section contains nested collapsibles:</p>
+            {[
+              "Anti-Hero",
+              "Lavender Haze",
+              "Midnight Rain",
+              "Question...?",
+              "Vigilante Shit",
+            ].map((track, index) => (
+              <div key={track} className="flex items-center gap-3">
+                <span className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm w-5 text-right">
+                  {index + 1}
+                </span>
+                <span className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                  {track}
+                </span>
+              </div>
+            ))}
+          </div>
+        ),
+      },
+    ]
 
-            <Collapsible className="ml-4">
-              <CollapsibleHeader title="Subcategory A" />
-              <CollapsibleContent>
-                <div className="pt-4">
-                  <p>Content for subcategory A with detailed information.</p>
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
+    const Demo = () => {
+      const [openMap, setOpenMap] = useState<Record<string, boolean>>({
+        track: true,
+        eq: false,
+        playlist: false,
+      })
 
-            <Collapsible className="ml-4">
-              <CollapsibleHeader title="Subcategory B" />
-              <CollapsibleContent>
-                <div className="pt-4">
-                  <p>Content for subcategory B with additional details.</p>
+      const allOpen = Object.values(openMap).every(Boolean)
+
+      const togglePanel = (id: string) => {
+        setOpenMap((current) => ({ ...current, [id]: !current[id] }))
+      }
+
+      const toggleAll = () => {
+        const nextValue = !allOpen
+        setOpenMap(
+          Object.fromEntries(sections.map(({ id }) => [id, nextValue]))
+        )
+      }
+
+      return (
+        <div className="w-full p-8">
+          <div className="mx-auto max-w-3xl space-y-6">
+            <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-5 rounded-xl border p-5">
+                <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm font-semibold tracking-widest uppercase">
+                  Panels
+                </p>
+                {sections.map(({ id, title }) => (
+                  <button
+                    key={id}
+                    onClick={() => togglePanel(id)}
+                    className="border-fm-divider-secondary bg-fm-surface-primary text-fm-primary font-fm-text text-fm-sm leading-fm-sm hover:border-fm-divider-primary w-full rounded-lg border px-4 py-2 text-left transition-colors"
+                  >
+                    {openMap[id] ? "Close" : "Open"} {title}
+                  </button>
+                ))}
+                <div className="border-fm-divider-secondary border-t pt-4" />
+                <button
+                  onClick={toggleAll}
+                  className="border-fm-divider-primary text-fm-primary font-fm-text text-fm-sm leading-fm-sm hover:bg-fm-surface-primary w-full rounded-lg border px-4 py-2 transition-colors"
+                >
+                  {allOpen ? "Collapse All" : "Expand All"}
+                </button>
+              </div>
+
+              <div className="flex flex-col gap-3 lg:col-span-2">
+                <div className="space-y-0">
+                  {sections.map(({ id, title, content }) => (
+                    <Collapsible
+                      key={id}
+                      open={openMap[id]}
+                      onOpenChange={(open) =>
+                        setOpenMap((current) => ({ ...current, [id]: open }))
+                      }
+                    >
+                      <CollapsibleHeader title={title} />
+                      <CollapsibleContent>{content}</CollapsibleContent>
+                    </Collapsible>
+                  ))}
                 </div>
-              </CollapsibleContent>
-            </Collapsible>
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+                  <code className="text-fm-secondary text-fm-md leading-fm-md font-[var(--font-fm-mono)]">
+                    {`openMap = ${JSON.stringify(openMap)}`}
+                  </code>
+                </div>
+              </div>
+            </div>
           </div>
-        </CollapsibleContent>
-      </Collapsible>
-    </div>
-  ),
+        </div>
+      )
+    }
+
+    return <Demo />
+  },
 }