aural-ui 4.0.1 → 4.2.0

package/dist/components/switch-case/SwitchCase.stories.tsx

@@ -1,216 +1,395 @@
 import React, { useState } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
 import { Case, Default, SwitchCase } from "."
 
-const meta = {
+const meta: Meta<typeof SwitchCase> = {
   title: "Components/Logical/SwitchCase",
   component: SwitchCase,
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
+    docs: {
+      description: {
+        component:
+          "A utility component for switch/case-like conditional rendering. Accepts a `value` prop and renders the matching `<Case value={…}>` child. Falls back to a `<Default>` sub-component or the `default` prop when no case matches. Eliminates verbose ternary chains for multi-branch conditional UI.",
+      },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "Case Matching",
+              description: "Renders matched Case child",
+            },
+            {
+              title: "Default Fallback",
+              description: "Default or default prop",
+            },
+            {
+              title: "Zero DOM Node",
+              description: "No wrapper element",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
-} satisfies Meta<typeof SwitchCase>
+}
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-// Basic example with a static case
-export const BasicExample: Story = {
-  args: {
-    value: "success",
-    children: [
-      <Case key="loading" value="loading">
-        Loading...
-      </Case>,
-      <Case key="error" value="error">
-        An error occurred!
-      </Case>,
-      <Case key="success" value="success">
-        Data loaded successfully!
-      </Case>,
-    ],
-  },
-}
-
-// Example with default prop
-export const WithDefaultProp: Story = {
-  args: {
-    value: "other",
-    default: <div style={{ color: "gray" }}>Unknown value selected</div>,
-    children: [
-      <Case key="one" value="one">
-        Option One
-      </Case>,
-      <Case key="two" value="two">
-        Option Two
-      </Case>,
-      <Case key="three" value="three">
-        Option Three
-      </Case>,
-    ],
-  },
-}
+// ─── 1. Configurations ────────────────────────────────────────────────────────
 
-// Interactive examples using decorators for state
-export const StatusExample: React.FC = () => {
-  const [status, setStatus] = useState<
-    "loading" | "success" | "error" | "idle"
-  >("idle")
-
-  return (
-    <div style={{ width: "300px" }}>
-      <div
-        style={{
-          marginBottom: "20px",
-          display: "flex",
-          gap: "10px",
-          flexWrap: "wrap",
-        }}
-      >
-        <button
-          onClick={() => setStatus("loading")}
-          style={{ padding: "5px 10px" }}
-        >
-          Loading
-        </button>
-        <button
-          onClick={() => setStatus("success")}
-          style={{ padding: "5px 10px" }}
-        >
-          Success
-        </button>
-        <button
-          onClick={() => setStatus("error")}
-          style={{ padding: "5px 10px" }}
-        >
-          Error
-        </button>
-        <button
-          onClick={() => setStatus("idle")}
-          style={{ padding: "5px 10px" }}
-        >
-          Idle
-        </button>
+export const Configurations: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Matching case */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Matching case renders
+        </h4>
+        <div className="flex flex-wrap gap-6">
+          {(["loading", "success", "error"] as const).map((status) => (
+            <div key={status} className="space-y-2 text-center">
+              <SwitchCase value={status}>
+                <Case value="loading">
+                  <div className="bg-fm-surface-info-sec rounded-lg px-4 py-3">
+                    <p className="text-fm-info-sec font-fm-text text-fm-md leading-fm-md">
+                      Loading…
+                    </p>
+                  </div>
+                </Case>
+                <Case value="success">
+                  <div className="bg-fm-surface-positive-sec rounded-lg px-4 py-3">
+                    <p className="text-fm-positive-sec font-fm-text text-fm-md leading-fm-md">
+                      Success
+                    </p>
+                  </div>
+                </Case>
+                <Case value="error">
+                  <div className="bg-fm-surface-negative-sec rounded-lg px-4 py-3">
+                    <p className="text-fm-negative-sec font-fm-text text-fm-md leading-fm-md">
+                      Error
+                    </p>
+                  </div>
+                </Case>
+              </SwitchCase>
+              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                value=&quot;{status}&quot;
+              </p>
+            </div>
+          ))}
+        </div>
       </div>
-      <div
-        style={{
-          padding: "20px",
-          border: "1px solid #eee",
-          borderRadius: "8px",
-        }}
-      >
-        <div>
-          Current status: <strong>{status}</strong>
+
+      {/* No match — default prop fallback */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          No match — default prop fallback
+        </h4>
+        <div className="flex flex-wrap gap-4">
+          <div className="space-y-2 text-center">
+            <SwitchCase
+              value="unknown"
+              default={
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg px-4 py-3">
+                  <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-md">
+                    Unknown value — default prop used
+                  </p>
+                </div>
+              }
+            >
+              <Case value="one">Option One</Case>
+              <Case value="two">Option Two</Case>
+            </SwitchCase>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              value=&quot;unknown&quot; → default prop
+            </p>
+          </div>
         </div>
-        <div style={{ marginTop: "10px" }}>
-          <SwitchCase value={status}>
-            <Case value="loading">
-              <div style={{ color: "blue" }}>
-                Loading your data, please wait...
-              </div>
-            </Case>
-            <Case value="success">
-              <div style={{ color: "green" }}>
-                Your data was loaded successfully!
-              </div>
-            </Case>
-            <Case value="error">
-              <div style={{ color: "red" }}>
-                An error occurred while loading your data.
-              </div>
-            </Case>
-            <Case value="idle">
-              <div style={{ color: "gray" }}>
-                Waiting for you to take an action.
-              </div>
-            </Case>
-          </SwitchCase>
+      </div>
+
+      {/* No match — Default sub-component fallback */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          No match — &lt;Default&gt; sub-component fallback
+        </h4>
+        <div className="flex flex-wrap gap-4">
+          <div className="space-y-2 text-center">
+            <SwitchCase value="other">
+              <Case value="apple">
+                <div className="bg-fm-surface-positive-sec rounded-lg px-4 py-3">
+                  <p className="text-fm-positive-sec font-fm-text text-fm-md leading-fm-md">
+                    Apple selected
+                  </p>
+                </div>
+              </Case>
+              <Case value="banana">
+                <div className="bg-fm-surface-warning-sec rounded-lg px-4 py-3">
+                  <p className="text-fm-warning-sec font-fm-text text-fm-md leading-fm-md">
+                    Banana selected
+                  </p>
+                </div>
+              </Case>
+              <Default>
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg px-4 py-3">
+                  <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-md">
+                    No matching case — &lt;Default&gt; renders
+                  </p>
+                </div>
+              </Default>
+            </SwitchCase>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              value=&quot;other&quot; → &lt;Default&gt; sub-component
+            </p>
+          </div>
         </div>
       </div>
+
+      {/* Code reference */}
+      <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) whitespace-pre">{`// Matching case
+<SwitchCase value={status}>
+  <Case value="loading"><Spinner /></Case>
+  <Case value="success"><SuccessView /></Case>
+  <Case value="error"><ErrorView /></Case>
+</SwitchCase>
+
+// With Default fallback
+<SwitchCase value={role}>
+  <Case value="admin"><AdminPanel /></Case>
+  <Case value="editor"><EditorPanel /></Case>
+  <Default><ReadOnlyView /></Default>
+</SwitchCase>`}</code>
+      </div>
     </div>
-  )
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Three configuration modes: a matching case renders its children, an unmatched value falls back to the `default` prop, and an unmatched value falls back to the `<Default>` sub-component.",
+      },
+    },
+  },
 }
 
-// Example with Default component
-export const WithDefaultComponent: React.FC = () => {
-  const [fruit, setFruit] = useState<"apple" | "banana" | "orange" | "other">(
-    "other"
-  )
-
-  return (
-    <div style={{ width: "300px" }}>
-      <div
-        style={{
-          marginBottom: "20px",
-          display: "flex",
-          gap: "10px",
-          flexWrap: "wrap",
-        }}
-      >
-        <button
-          onClick={() => setFruit("apple")}
-          style={{ padding: "5px 10px" }}
-        >
-          Apple
-        </button>
-        <button
-          onClick={() => setFruit("banana")}
-          style={{ padding: "5px 10px" }}
-        >
-          Banana
-        </button>
-        <button
-          onClick={() => setFruit("orange")}
-          style={{ padding: "5px 10px" }}
-        >
-          Orange
-        </button>
-        <button
-          onClick={() => setFruit("other")}
-          style={{ padding: "5px 10px" }}
-        >
-          Other
-        </button>
-      </div>
-      <div
-        style={{
-          padding: "20px",
-          border: "1px solid #eee",
-          borderRadius: "8px",
-        }}
-      >
-        <div>
-          Selected fruit: <strong>{fruit}</strong>
+// ─── 2. Use Cases ─────────────────────────────────────────────────────────────
+
+export const UseCases: Story = {
+  render: () => {
+    const [status, setStatus] = useState<
+      "idle" | "loading" | "success" | "error"
+    >("idle")
+
+    const [role, setRole] = useState<"admin" | "editor" | "viewer">("viewer")
+
+    const [plan, setPlan] = useState<"free" | "pro" | "enterprise">("free")
+
+    return (
+      <div className="mx-auto max-w-3xl space-y-8 p-8">
+        {/* Async operation status */}
+        <div className="space-y-4">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Async operation status
+          </h4>
+          <div className="mx-auto max-w-md space-y-3">
+            <div className="flex flex-wrap gap-2">
+              {(["idle", "loading", "success", "error"] as const).map((s) => (
+                <button
+                  key={s}
+                  onClick={() => setStatus(s)}
+                  className={[
+                    "font-fm-text text-fm-sm leading-fm-sm cursor-pointer rounded-lg border px-3 py-1.5 capitalize transition-opacity hover:opacity-80",
+                    status === s
+                      ? "border-fm-divider-primary text-fm-primary bg-fm-surface-secondary"
+                      : "border-fm-divider-secondary text-fm-tertiary bg-fm-surface-primary",
+                  ].join(" ")}
+                >
+                  {s}
+                </button>
+              ))}
+            </div>
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-xl border p-4">
+              <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm mb-3">
+                Current status:{" "}
+                <span className="text-fm-primary font-medium">{status}</span>
+              </p>
+              <SwitchCase value={status}>
+                <Case value="idle">
+                  <div className="border-fm-divider-secondary rounded-lg border px-4 py-3">
+                    <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-md">
+                      Waiting for you to start the upload…
+                    </p>
+                  </div>
+                </Case>
+                <Case value="loading">
+                  <div className="bg-fm-surface-info-sec rounded-lg px-4 py-3">
+                    <p className="text-fm-info-sec font-fm-text text-fm-md leading-fm-md">
+                      Uploading your track, please wait…
+                    </p>
+                  </div>
+                </Case>
+                <Case value="success">
+                  <div className="bg-fm-surface-positive-sec rounded-lg px-4 py-3">
+                    <p className="text-fm-positive-sec font-fm-text text-fm-md leading-fm-md font-medium">
+                      Track uploaded successfully!
+                    </p>
+                    <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mt-1">
+                      Your track is now processing and will be live shortly.
+                    </p>
+                  </div>
+                </Case>
+                <Case value="error">
+                  <div className="bg-fm-surface-negative-sec rounded-lg px-4 py-3">
+                    <p className="text-fm-negative-sec font-fm-text text-fm-md leading-fm-md font-medium">
+                      Upload failed
+                    </p>
+                    <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mt-1">
+                      Something went wrong. Please check your file and try
+                      again.
+                    </p>
+                  </div>
+                </Case>
+              </SwitchCase>
+            </div>
+          </div>
         </div>
-        <div style={{ marginTop: "10px" }}>
-          <SwitchCase value={fruit}>
-            <Case value="apple">
-              <div style={{ color: "red" }}>🍎 Apples are red and crunchy.</div>
-            </Case>
-            <Case value="banana">
-              <div style={{ color: "#FFD700" }}>
-                🍌 Bananas are yellow and soft.
-              </div>
-            </Case>
-            <Case value="orange">
-              <div style={{ color: "orange" }}>
-                🍊 Oranges are orange and juicy.
-              </div>
-            </Case>
-            <Default>
-              <div style={{ color: "purple" }}>Unknown fruit selected.</div>
-            </Default>
-          </SwitchCase>
+
+        {/* Role-based UI */}
+        <div className="space-y-4">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Role-based UI
+          </h4>
+          <div className="mx-auto max-w-md space-y-3">
+            <div className="flex flex-wrap gap-2">
+              {(["admin", "editor", "viewer"] as const).map((r) => (
+                <button
+                  key={r}
+                  onClick={() => setRole(r)}
+                  className={[
+                    "font-fm-text text-fm-sm leading-fm-sm cursor-pointer rounded-lg border px-3 py-1.5 capitalize transition-opacity hover:opacity-80",
+                    role === r
+                      ? "border-fm-divider-primary text-fm-primary bg-fm-surface-secondary"
+                      : "border-fm-divider-secondary text-fm-tertiary bg-fm-surface-primary",
+                  ].join(" ")}
+                >
+                  {r}
+                </button>
+              ))}
+            </div>
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-xl border p-4">
+              <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm">
+                Signed in as:{" "}
+                <span className="text-fm-primary font-medium capitalize">
+                  {role}
+                </span>
+              </p>
+              <SwitchCase value={role}>
+                <Case value="admin">
+                  <div className="bg-fm-surface-negative-sec space-y-1 rounded-lg px-4 py-3">
+                    <p className="text-fm-negative-sec font-fm-brand text-fm-md leading-fm-md font-semibold">
+                      Admin panel
+                    </p>
+                    <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                      Full access: manage users, content, and billing.
+                    </p>
+                  </div>
+                </Case>
+                <Case value="editor">
+                  <div className="bg-fm-surface-info-sec space-y-1 rounded-lg px-4 py-3">
+                    <p className="text-fm-info-sec font-fm-brand text-fm-md leading-fm-md font-semibold">
+                      Editor panel
+                    </p>
+                    <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                      Create and publish tracks. Cannot manage users.
+                    </p>
+                  </div>
+                </Case>
+                <Case value="viewer">
+                  <div className="border-fm-divider-secondary space-y-1 rounded-lg border px-4 py-3">
+                    <p className="text-fm-primary font-fm-brand text-fm-md leading-fm-md font-semibold">
+                      Read-only view
+                    </p>
+                    <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                      Browse and stream content. No edit permissions.
+                    </p>
+                  </div>
+                </Case>
+              </SwitchCase>
+            </div>
+          </div>
+        </div>
+
+        {/* Subscription plan */}
+        <div className="space-y-4">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Subscription plan display
+          </h4>
+          <div className="mx-auto max-w-md space-y-3">
+            <div className="flex flex-wrap gap-2">
+              {(["free", "pro", "enterprise"] as const).map((p) => (
+                <button
+                  key={p}
+                  onClick={() => setPlan(p)}
+                  className={[
+                    "font-fm-text text-fm-sm leading-fm-sm cursor-pointer rounded-lg border px-3 py-1.5 capitalize transition-opacity hover:opacity-80",
+                    plan === p
+                      ? "border-fm-divider-primary text-fm-primary bg-fm-surface-secondary"
+                      : "border-fm-divider-secondary text-fm-tertiary bg-fm-surface-primary",
+                  ].join(" ")}
+                >
+                  {p}
+                </button>
+              ))}
+            </div>
+            <SwitchCase value={plan}>
+              <Case value="free">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-1 rounded-xl border p-4">
+                  <p className="text-fm-primary font-fm-brand text-fm-lg leading-fm-lg font-semibold">
+                    Free plan
+                  </p>
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    5 uploads per month · Standard quality · Community support
+                  </p>
+                </div>
+              </Case>
+              <Case value="pro">
+                <div className="bg-fm-surface-positive-sec space-y-1 rounded-xl p-4">
+                  <p className="text-fm-positive-sec font-fm-brand text-fm-lg leading-fm-lg font-semibold">
+                    Pro plan
+                  </p>
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    Unlimited uploads · Lossless quality · Priority support
+                  </p>
+                </div>
+              </Case>
+              <Case value="enterprise">
+                <div className="bg-fm-surface-info-sec space-y-1 rounded-xl p-4">
+                  <p className="text-fm-info-sec font-fm-brand text-fm-lg leading-fm-lg font-semibold">
+                    Enterprise plan
+                  </p>
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    Unlimited everything · Dedicated support · Custom SLA
+                  </p>
+                </div>
+              </Case>
+            </SwitchCase>
+          </div>
         </div>
       </div>
-    </div>
-  )
+    )
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world scenarios: async upload status feedback, role-based UI panels (admin / editor / viewer), and subscription plan display. Toggle the buttons to switch between cases.",
+      },
+    },
+  },
 }