aural-ui 3.0.7 → 4.1.0

package/dist/components/switch/Switch.stories.tsx

@@ -1,9 +1,9 @@
-import React from "react"
-import { Button } from "@components/button"
+import React, { useState } from "react"
 import Label from "@components/label"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { CrossIcon, TickIcon } from "src/ui/icons"
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
 
 import { Switch } from "."
 
@@ -12,12 +12,29 @@ const meta: Meta<typeof Switch> = {
   component: Switch,
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
+    docs: {
+      description: {
+        component:
+          "A Radix-based toggle switch with three sizes (sm, md, lg), optional icon or text labels inside the track, and support for disabled state. Designed for on/off settings in settings panels, preferences forms, and audio control UIs.",
+      },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "3 Sizes",
+              description: "sm, md, lg scale",
+            },
+            {
+              title: "Track Labels",
+              description: "Icon or text in track",
+            },
+            {
+              title: "Disabled State",
+              description: "Muted inactive style",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
@@ -36,14 +53,6 @@ const meta: Meta<typeof Switch> = {
       description: "Size variant of the switch",
       defaultValue: "md",
     },
-    onIcon: {
-      control: { type: "text" },
-      description: "Custom icon to display when switch is ON",
-    },
-    offIcon: {
-      control: { type: "text" },
-      description: "Custom icon to display when switch is OFF",
-    },
     switchOnText: {
       control: { type: "text" },
       description: "Custom text to display when switch is ON",
@@ -62,237 +71,481 @@ const meta: Meta<typeof Switch> = {
 export default meta
 type Story = StoryObj<typeof Switch>
 
-export const Default: Story = {
-  args: {
-    checked: false,
-  },
-}
+// ─── 1. Playground ────────────────────────────────────────────────────────────
 
-export const Checked: Story = {
+export const Playground: Story = {
   args: {
-    checked: true,
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-}
-
-export const DisabledAndChecked: Story = {
-  args: {
-    disabled: true,
-    checked: true,
+    checked: false,
+    size: "md",
   },
-}
-
-export const SizeVariants: Story = {
-  render: () => (
-    <div className="flex flex-col items-center space-y-4">
-      <div className="flex items-center space-x-4">
-        <Switch size="sm" checked={true} />
-        <span className="text-sm text-gray-400">Small (sm)</span>
-      </div>
-      <div className="flex items-center space-x-4">
-        <Switch size="md" checked={true} />
-        <span className="text-sm text-gray-400">Medium (md)</span>
+  render: (args) => (
+    <div className="w-full max-w-sm space-y-4">
+      <div className="flex justify-center">
+        <Switch {...args} />
       </div>
-      <div className="flex items-center space-x-4">
-        <Switch size="lg" checked={true} />
-        <span className="text-sm text-gray-400">Large (lg)</span>
+      <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-(--font-fm-mono)">{`<Switch size="${args.size}" checked={${args.checked}} disabled={${args.disabled ?? false}} />`}</code>
       </div>
     </div>
   ),
-}
-
-export const WithCustomClassNames: Story = {
-  args: {
-    checked: true,
-    classNames: {
-      root: "border-2 border-blue-500",
-      onIcon: "text-green-600 font-bold",
-      offIcon: "text-gray-400",
-      thumb: "bg-blue-500 shadow-xl",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Adjust size, checked, and disabled state using the controls panel in the sidebar.",
+      },
     },
   },
 }
 
-export const WithLabel: Story = {
-  render: () => (
-    <div className="flex items-center space-x-2">
-      <Switch id="switch-with-label" value="Toggle me" />
-      <Label htmlFor="switch-with-label">Toggle me</Label>
-    </div>
-  ),
-}
+// ─── 2. All Variants ──────────────────────────────────────────────────────────
 
-export const WithForm: Story = {
+export const AllVariants: Story = {
   render: () => (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault()
-        // Handle form submission
-      }}
-    >
-      <div className="grid gap-4">
-        <div className="flex items-center space-x-2">
-          <Switch id="notifications" />
-          <Label htmlFor="notifications">Enable notifications</Label>
-        </div>
-        <div className="flex items-center space-x-2">
-          <Switch id="newsletter" defaultChecked />
-          <Label htmlFor="newsletter">Subscribe to newsletter</Label>
+    <div className="space-y-8">
+      {/* Size variants */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Size Variants
+        </h4>
+        <div className="flex flex-wrap items-end gap-8">
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch size="sm" checked />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Small (sm)
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch size="md" checked />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Medium (md)
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch size="lg" checked />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Large (lg)
+            </p>
+          </div>
         </div>
-        <Button>Submit</Button>
       </div>
-    </form>
-  ),
-}
-
-export const WithIcons: Story = {
-  args: {
-    checked: false,
-    onIcon: <TickIcon />,
-    offIcon: <CrossIcon />,
-  },
-}
 
-export const CheckedWithIcons: Story = {
-  args: {
-    checked: true,
-    onIcon: <TickIcon />,
-    offIcon: <CrossIcon />,
-  },
-}
-
-export const WithCustomText: Story = {
-  args: {
-    checked: false,
-    switchOnText: "YES",
-    switchOffText: "NO",
-  },
-}
-
-export const CheckedWithCustomText: Story = {
-  args: {
-    checked: true,
-    switchOnText: "YES",
-    switchOffText: "NO",
-  },
-}
-
-export const WithCustomTextVariants: Story = {
-  render: () => (
-    <div className="flex flex-col items-center space-y-4">
-      <div className="flex items-center space-x-4">
-        <Switch checked={false} switchOnText="ON" switchOffText="OFF" />
-        <span className="text-sm text-gray-400">Default (ON/OFF)</span>
-      </div>
-      <div className="flex items-center space-x-4">
-        <Switch checked={false} switchOnText="YES" switchOffText="NO" />
-        <span className="text-sm text-gray-400">Yes/No</span>
-      </div>
-      <div className="flex items-center space-x-4">
-        <Switch checked={false} switchOnText="1" switchOffText="0" />
-        <span className="text-sm text-gray-400">Binary (1/0)</span>
-      </div>
-      <div className="flex items-center space-x-4">
-        <Switch checked={false} switchOnText="✓" switchOffText="✗" />
-        <span className="text-sm text-gray-400">Symbols (✓/✗)</span>
-      </div>
-      <div className="flex items-center space-x-4">
-        <Switch checked={false} switchOnText="EN" switchOffText="DIS" />
-        <span className="text-sm text-gray-400">Enable/Disable</span>
+      {/* Icon modes */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Icon Modes
+        </h4>
+        <div className="flex flex-wrap items-end gap-8">
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch
+                size="md"
+                checked={false}
+                onIcon={<TickIcon />}
+                offIcon={<CrossIcon />}
+              />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Icons — Off
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch
+                size="md"
+                checked
+                onIcon={<TickIcon />}
+                offIcon={<CrossIcon />}
+              />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Icons — On
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch
+                size="lg"
+                checked
+                onIcon={<TickIcon />}
+                offIcon={<CrossIcon />}
+              />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Icons — Large On
+            </p>
+          </div>
+        </div>
       </div>
-    </div>
-  ),
-}
 
-export const CustomTextWithSizes: Story = {
-  render: () => (
-    <div className="flex flex-col items-center space-y-4">
-      <div className="flex items-center space-x-4">
-        <Switch
-          size="sm"
-          checked={true}
-          switchOnText="ON"
-          switchOffText="OFF"
-        />
-        <span className="text-sm text-gray-400">Small</span>
-      </div>
-      <div className="flex items-center space-x-4">
-        <Switch
-          size="md"
-          checked={true}
-          switchOnText="ON"
-          switchOffText="OFF"
-        />
-        <span className="text-sm text-gray-400">Medium</span>
+      {/* Text modes */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Text Modes
+        </h4>
+        <div className="flex flex-wrap items-end gap-8">
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch
+                size="md"
+                checked={false}
+                switchOnText="ON"
+                switchOffText="OFF"
+              />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              ON / OFF — Off
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch size="md" checked switchOnText="ON" switchOffText="OFF" />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              ON / OFF — On
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch
+                size="md"
+                checked={false}
+                switchOnText="YES"
+                switchOffText="NO"
+              />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              YES / NO — Off
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch size="md" checked switchOnText="YES" switchOffText="NO" />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              YES / NO — On
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch size="md" checked switchOnText="EN" switchOffText="DIS" />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              EN / DIS
+            </p>
+          </div>
+        </div>
       </div>
-      <div className="flex items-center space-x-4">
-        <Switch
-          size="lg"
-          checked={true}
-          switchOnText="ON"
-          switchOffText="OFF"
-        />
-        <span className="text-sm text-gray-400">Large</span>
+
+      {/* Custom token styling */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Custom Styling via Design Tokens
+        </h4>
+        <div className="flex flex-wrap items-end gap-8">
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch
+                size="md"
+                checked
+                classNames={{
+                  root: "border-fm-secondary-500",
+                  thumb: "bg-fm-secondary-500",
+                }}
+              />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Secondary accent
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch
+                size="md"
+                checked
+                onIcon={<TickIcon />}
+                offIcon={<CrossIcon />}
+                classNames={{
+                  root: "border-fm-secondary-500",
+                  thumb: "bg-fm-secondary-500",
+                }}
+              />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Secondary + Icons
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Full visual matrix: all three size variants, icon modes (off/on), text label modes, and custom token-based styling — all shown side by side.",
+      },
+    },
+  },
 }
 
-export const AllVariants: Story = {
+// ─── 3. States ────────────────────────────────────────────────────────────────
+
+export const States: Story = {
   render: () => (
-    <div className="grid grid-cols-2 gap-6">
+    <div className="space-y-8">
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Size Variants</h3>
-        <div className="space-y-3">
-          <div className="flex items-center justify-between">
-            <span>Small</span>
-            <Switch size="sm" checked={true} />
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          On / Off
+        </h4>
+        <div className="flex flex-wrap gap-8">
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch size="md" checked={false} />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Off
+            </p>
           </div>
-          <div className="flex items-center justify-between">
-            <span>Medium</span>
-            <Switch size="md" checked={true} />
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch size="md" checked />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              On
+            </p>
           </div>
-          <div className="flex items-center justify-between">
-            <span>Large</span>
-            <Switch size="lg" checked={true} />
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Disabled
+        </h4>
+        <div className="flex flex-wrap gap-8">
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch size="md" checked={false} disabled />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Disabled — Off
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Switch size="md" checked disabled />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Disabled — On
+            </p>
           </div>
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold">With Custom Styling</h3>
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          All States — With Labels
+        </h4>
         <div className="space-y-3">
-          <div className="flex items-center justify-between">
-            <span>Custom Colors</span>
-            <Switch
-              size="md"
-              checked={true}
-              classNames={{
-                root: "border-2 border-purple-500",
-                thumb: "bg-purple-500",
-              }}
-            />
+          <div className="flex items-center gap-3">
+            <Switch id="st-off" size="md" checked={false} />
+            <Label htmlFor="st-off">Off</Label>
+          </div>
+          <div className="flex items-center gap-3">
+            <Switch id="st-on" size="md" checked />
+            <Label htmlFor="st-on">On</Label>
           </div>
-          <div className="flex items-center justify-between">
-            <span>With Icons</span>
-            <Switch
-              size="md"
-              checked={true}
-              onIcon={<TickIcon />}
-              offIcon={<CrossIcon />}
-            />
+          <div className="flex items-center gap-3">
+            <Switch id="st-dis-off" size="md" checked={false} disabled />
+            <Label htmlFor="st-dis-off" disabled>
+              Disabled — Off
+            </Label>
           </div>
-          <div className="flex items-center justify-between">
-            <span>Disabled</span>
-            <Switch size="md" checked={true} disabled />
+          <div className="flex items-center gap-3">
+            <Switch id="st-dis-on" size="md" checked disabled />
+            <Label htmlFor="st-dis-on" disabled>
+              Disabled — On
+            </Label>
           </div>
         </div>
       </div>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "All four switch states — off, on, disabled-off, and disabled-on — shown as item cards and with label pairings.",
+      },
+    },
+  },
+}
+
+// ─── 4. Use Cases ─────────────────────────────────────────────────────────────
+
+export const UseCases: Story = {
+  render: () => {
+    const [autoplay, setAutoplay] = useState(true)
+    const [shuffle, setShuffle] = useState(false)
+    const [crossfade, setCrossfade] = useState(false)
+    const [notifications, setNotifications] = useState(true)
+    const [offlineMode, setOfflineMode] = useState(false)
+    const [dataReducer, setDataReducer] = useState(false)
+
+    return (
+      <div className="mx-auto max-w-3xl space-y-8 p-8">
+        {/* Playback Settings */}
+        <div className="space-y-4">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Playback Settings
+          </h4>
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-md space-y-1 rounded-xl border p-5">
+            <div className="flex items-center justify-between gap-4 py-1">
+              <div>
+                <Label htmlFor="uc-autoplay">Autoplay</Label>
+                <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm mt-0.5">
+                  Continue playing similar tracks when queue ends
+                </p>
+              </div>
+              <Switch
+                id="uc-autoplay"
+                size="md"
+                checked={autoplay}
+                onCheckedChange={setAutoplay}
+                onIcon={<TickIcon />}
+                offIcon={<CrossIcon />}
+              />
+            </div>
+            <div className="border-fm-divider-secondary border-t" />
+            <div className="flex items-center justify-between gap-4 py-1">
+              <div>
+                <Label htmlFor="uc-shuffle">Shuffle</Label>
+                <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm mt-0.5">
+                  Play tracks in a random order
+                </p>
+              </div>
+              <Switch
+                id="uc-shuffle"
+                size="md"
+                checked={shuffle}
+                onCheckedChange={setShuffle}
+                onIcon={<TickIcon />}
+                offIcon={<CrossIcon />}
+              />
+            </div>
+            <div className="border-fm-divider-secondary border-t" />
+            <div className="flex items-center justify-between gap-4 py-1">
+              <div>
+                <Label htmlFor="uc-crossfade">Crossfade</Label>
+                <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm mt-0.5">
+                  Smooth transitions between tracks
+                </p>
+              </div>
+              <Switch
+                id="uc-crossfade"
+                size="md"
+                checked={crossfade}
+                onCheckedChange={setCrossfade}
+                onIcon={<TickIcon />}
+                offIcon={<CrossIcon />}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* App Preferences */}
+        <div className="space-y-4">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            App Preferences
+          </h4>
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-md space-y-1 rounded-xl border p-5">
+            <div className="flex items-center justify-between gap-4 py-1">
+              <div>
+                <Label htmlFor="uc-notifications">Push Notifications</Label>
+                <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm mt-0.5">
+                  New releases, live events, and activity
+                </p>
+              </div>
+              <Switch
+                id="uc-notifications"
+                size="sm"
+                checked={notifications}
+                onCheckedChange={setNotifications}
+                switchOnText="ON"
+                switchOffText="OFF"
+              />
+            </div>
+            <div className="border-fm-divider-secondary border-t" />
+            <div className="flex items-center justify-between gap-4 py-1">
+              <div>
+                <Label htmlFor="uc-offline">Offline Mode</Label>
+                <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm mt-0.5">
+                  Only play downloaded tracks
+                </p>
+              </div>
+              <Switch
+                id="uc-offline"
+                size="sm"
+                checked={offlineMode}
+                onCheckedChange={setOfflineMode}
+                switchOnText="ON"
+                switchOffText="OFF"
+              />
+            </div>
+            <div className="border-fm-divider-secondary border-t" />
+            <div className="flex items-center justify-between gap-4 py-1">
+              <div>
+                <Label htmlFor="uc-data-reducer">Data Saver</Label>
+                <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm mt-0.5">
+                  Stream at lower quality to reduce data usage
+                </p>
+              </div>
+              <Switch
+                id="uc-data-reducer"
+                size="sm"
+                checked={dataReducer}
+                onCheckedChange={setDataReducer}
+                switchOnText="ON"
+                switchOffText="OFF"
+              />
+            </div>
+            <div className="border-fm-divider-secondary border-t" />
+            <div className="flex items-center justify-between gap-4 py-1">
+              <div>
+                <Label htmlFor="uc-explicit" disabled>
+                  Explicit Content
+                </Label>
+                <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm mt-0.5">
+                  Requires a premium account
+                </p>
+              </div>
+              <Switch
+                id="uc-explicit"
+                size="sm"
+                checked={false}
+                disabled
+                switchOnText="ON"
+                switchOffText="OFF"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world audio app scenarios: a playback settings panel using icon-mode switches, and an app preferences panel using text-mode switches including a disabled locked setting.",
+      },
+    },
+  },
 }