aural-ui 4.0.1 → 4.1.0

package/dist/components/if-else/if-else.stories.tsx

@@ -1,107 +1,394 @@
-import React from "react"
+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 { Else, If, IfElse } from "."
 
-const meta = {
+const meta: Meta<typeof IfElse> = {
   title: "Components/Logical/IfElse",
   component: IfElse,
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
+    docs: {
+      description: {
+        component:
+          "A utility component for declarative conditional rendering. Accepts a `condition` boolean and renders either the `if` branch or the `else` branch. Supports both a props-based API (`if` / `else` props) and a compound children API using the `<If>` and `<Else>` sub-components.",
+      },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "Props API",
+              description: "if and else prop slots",
+            },
+            {
+              title: "Compound Children",
+              description: "If and Else sub-components",
+            },
+            {
+              title: "Zero Output",
+              description: "No DOM node rendered",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
-} satisfies Meta<typeof IfElse>
+}
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-// Basic example with condition true
-export const ConditionTrue: Story = {
-  args: {
-    condition: true,
-    if: (
-      <div style={{ padding: "10px", color: "green" }}>Condition is true</div>
-    ),
-    else: (
-      <div style={{ padding: "10px", color: "red" }}>Condition is false</div>
-    ),
-  },
-}
-
-// Basic example with condition false
-export const ConditionFalse: Story = {
-  args: {
-    condition: false,
-    if: (
-      <div style={{ padding: "10px", color: "green" }}>Condition is true</div>
-    ),
-    else: (
-      <div style={{ padding: "10px", color: "red" }}>Condition is false</div>
-    ),
-  },
-}
+// ─── 1. Configurations ────────────────────────────────────────────────────────
 
-// Using child components approach
-export const WithChildComponents: Story = {
-  args: {
-    condition: true,
-  },
+export const Configurations: Story = {
   render: () => (
-    <IfElse condition={true}>
-      <If>
-        <div
-          style={{
-            padding: "10px",
-            backgroundColor: "#e6f7ff",
-            borderRadius: "4px",
-          }}
-        >
-          <h3>Welcome, User!</h3>
-          <p>You are logged in.</p>
+    <div className="space-y-8">
+      {/* Props API — condition true */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Props API — condition true
+        </h4>
+        <div className="flex flex-wrap gap-4">
+          <div className="space-y-2 text-center">
+            <IfElse
+              condition={true}
+              if={
+                <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">
+                    Condition is true — if branch renders
+                  </p>
+                </div>
+              }
+              else={
+                <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">
+                    Condition is false — else branch renders
+                  </p>
+                </div>
+              }
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              condition=&#123;true&#125; → if prop
+            </p>
+          </div>
         </div>
-      </If>
-      <Else>
-        <div
-          style={{
-            padding: "10px",
-            backgroundColor: "#fff1f0",
-            borderRadius: "4px",
-          }}
-        >
-          <h3>Hello, Guest!</h3>
-          <p>Please log in to continue.</p>
+      </div>
+
+      {/* Props API — condition false */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Props API — condition false
+        </h4>
+        <div className="flex flex-wrap gap-4">
+          <div className="space-y-2 text-center">
+            <IfElse
+              condition={false}
+              if={
+                <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">
+                    Condition is true — if branch renders
+                  </p>
+                </div>
+              }
+              else={
+                <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">
+                    Condition is false — else branch renders
+                  </p>
+                </div>
+              }
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              condition=&#123;false&#125; → else prop
+            </p>
+          </div>
         </div>
-      </Else>
-    </IfElse>
-  ),
-}
+      </div>
 
-// Standalone If component
-export const StandaloneIf: Story = {
-  args: {
-    condition: true,
-  },
-  render: () => (
-    <div>
-      <If condition={true}>
-        <div
-          style={{
-            padding: "10px",
-            backgroundColor: "#f6ffed",
-            borderRadius: "4px",
-          }}
-        >
-          This content is shown because the condition is true.
+      {/* Compound children API — If + Else sub-components */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Compound children API — &lt;If&gt; + &lt;Else&gt;
+        </h4>
+        <div className="flex flex-wrap gap-6">
+          <div className="space-y-2 text-center">
+            <IfElse condition={true}>
+              <If>
+                <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">
+                    &lt;If&gt; renders when condition is true
+                  </p>
+                </div>
+              </If>
+              <Else>
+                <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">
+                    &lt;Else&gt; renders when condition is false
+                  </p>
+                </div>
+              </Else>
+            </IfElse>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              condition=&#123;true&#125; → &lt;If&gt; visible
+            </p>
+          </div>
+
+          <div className="space-y-2 text-center">
+            <IfElse condition={false}>
+              <If>
+                <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">
+                    &lt;If&gt; renders when condition is true
+                  </p>
+                </div>
+              </If>
+              <Else>
+                <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">
+                    &lt;Else&gt; renders when condition is false
+                  </p>
+                </div>
+              </Else>
+            </IfElse>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              condition=&#123;false&#125; → &lt;Else&gt; visible
+            </p>
+          </div>
         </div>
-      </If>
-      <div style={{ marginTop: "10px" }}>This content is always shown.</div>
+      </div>
+
+      {/* Standalone If — no Else */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Standalone &lt;If&gt; — no else branch
+        </h4>
+        <div className="flex flex-wrap gap-6">
+          <div className="space-y-2 text-center">
+            <div className="space-y-3">
+              <If condition={true}>
+                <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">
+                    Shown — condition is true
+                  </p>
+                </div>
+              </If>
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  This content always renders
+                </p>
+              </div>
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              condition=&#123;true&#125; → content visible
+            </p>
+          </div>
+
+          <div className="space-y-2 text-center">
+            <div className="space-y-3">
+              <If condition={false}>
+                <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">
+                    Shown — condition is true
+                  </p>
+                </div>
+              </If>
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  This content always renders
+                </p>
+              </div>
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              condition=&#123;false&#125; → content hidden
+            </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">{`// Props API
+<IfElse condition={isLoggedIn} if={<Dashboard />} else={<Login />} />
+
+// Compound children API
+<IfElse condition={isLoggedIn}>
+  <If><Dashboard /></If>
+  <Else><Login /></Else>
+</IfElse>
+
+// Standalone If (no Else)
+<If condition={hasPremium}><PremiumBanner /></If>`}</code>
+      </div>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "All three configuration modes: the props API (`if`/`else` props), the compound children API (`<If>` + `<Else>` sub-components), and a standalone `<If>` with no else branch. Each mode is shown with both truthy and falsy conditions.",
+      },
+    },
+  },
+}
+
+// ─── 2. Use Cases ─────────────────────────────────────────────────────────────
+
+export const UseCases: Story = {
+  render: () => {
+    const [isLoggedIn, setIsLoggedIn] = useState(false)
+    const [isPremium, setIsPremium] = useState(false)
+    const [hasError, setHasError] = useState(false)
+
+    return (
+      <div className="mx-auto max-w-3xl space-y-8 p-8">
+        {/* Auth gate */}
+        <div className="space-y-4">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Authentication gate
+          </h4>
+          <div className="mx-auto max-w-md space-y-3">
+            <button
+              onClick={() => setIsLoggedIn((v) => !v)}
+              className="border-fm-divider-primary bg-fm-surface-secondary text-fm-primary font-fm-text text-fm-sm leading-fm-sm cursor-pointer rounded-lg border px-4 py-2 transition-opacity hover:opacity-80"
+            >
+              Toggle login — currently: {isLoggedIn ? "Logged in" : "Guest"}
+            </button>
+            <IfElse
+              condition={isLoggedIn}
+              if={
+                <div className="bg-fm-surface-positive-sec rounded-xl p-4">
+                  <p className="text-fm-positive-sec font-fm-brand text-fm-md leading-fm-md font-semibold">
+                    Welcome back!
+                  </p>
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mt-1">
+                    Your dashboard is ready. All your tracks and analytics are
+                    available.
+                  </p>
+                </div>
+              }
+              else={
+                <div className="bg-fm-surface-info-sec rounded-xl p-4">
+                  <p className="text-fm-info-sec font-fm-brand text-fm-md leading-fm-md font-semibold">
+                    Sign in to continue
+                  </p>
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mt-1">
+                    Create an account or log in to access your music library.
+                  </p>
+                </div>
+              }
+            />
+          </div>
+        </div>
+
+        {/* Premium content gate */}
+        <div className="space-y-4">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Premium content gate
+          </h4>
+          <div className="mx-auto max-w-md space-y-3">
+            <button
+              onClick={() => setIsPremium((v) => !v)}
+              className="border-fm-divider-primary bg-fm-surface-secondary text-fm-primary font-fm-text text-fm-sm leading-fm-sm cursor-pointer rounded-lg border px-4 py-2 transition-opacity hover:opacity-80"
+            >
+              Toggle premium — currently: {isPremium ? "Premium" : "Free"}
+            </button>
+            <IfElse condition={isPremium}>
+              <If>
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-xl border p-4">
+                  <p className="text-fm-primary font-fm-brand text-fm-md leading-fm-md font-semibold">
+                    Spatial Audio — Premium
+                  </p>
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm mt-1">
+                    Enjoy immersive 360° sound. Lossless quality enabled.
+                  </p>
+                </div>
+              </If>
+              <Else>
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-xl border p-4">
+                  <p className="text-fm-secondary font-fm-brand text-fm-md leading-fm-md font-semibold">
+                    Spatial Audio — Premium feature
+                  </p>
+                  <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm mt-1">
+                    Upgrade to Premium to unlock immersive Spatial Audio.
+                  </p>
+                </div>
+              </Else>
+            </IfElse>
+          </div>
+        </div>
+
+        {/* Error / success state */}
+        <div className="space-y-4">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Error / success state
+          </h4>
+          <div className="mx-auto max-w-md space-y-3">
+            <button
+              onClick={() => setHasError((v) => !v)}
+              className="border-fm-divider-primary bg-fm-surface-secondary text-fm-primary font-fm-text text-fm-sm leading-fm-sm cursor-pointer rounded-lg border px-4 py-2 transition-opacity hover:opacity-80"
+            >
+              Toggle error — currently: {hasError ? "Error" : "Success"}
+            </button>
+            <IfElse
+              condition={hasError}
+              if={
+                <div className="bg-fm-surface-negative-sec rounded-xl p-4">
+                  <p className="text-fm-negative-sec font-fm-brand text-fm-md leading-fm-md font-semibold">
+                    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>
+              }
+              else={
+                <div className="bg-fm-surface-positive-sec rounded-xl p-4">
+                  <p className="text-fm-positive-sec font-fm-brand text-fm-md leading-fm-md font-semibold">
+                    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>
+              }
+            />
+          </div>
+        </div>
+
+        {/* Conditional inline content */}
+        <div className="space-y-4">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Standalone &lt;If&gt; — conditional inline notice
+          </h4>
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-md space-y-3 rounded-xl border p-4">
+            <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-medium">
+              Midnight Dreams
+            </p>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Duration: 3:42 · 320 kbps
+            </p>
+            <If condition={isPremium}>
+              <div className="bg-fm-surface-info-sec rounded-lg px-3 py-2">
+                <p className="text-fm-info-sec font-fm-text text-fm-sm leading-fm-sm">
+                  Lossless quality available — playing at 24-bit / 96 kHz
+                </p>
+              </div>
+            </If>
+          </div>
+        </div>
+      </div>
+    )
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world scenarios: authentication gates, premium content paywalls, error/success feedback, and conditional inline notices. Toggle the buttons to see each branch in action.",
+      },
+    },
+  },
 }