aural-ui 4.0.1 → 4.1.0

package/dist/components/label/Label.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
 import Label from "."
 
 const meta: Meta<typeof Label> = {
@@ -8,12 +10,29 @@ const meta: Meta<typeof Label> = {
   component: Label,
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
+    docs: {
+      description: {
+        component:
+          "A form label primitive built on Radix UI Label. Supports required and disabled states, adapts to both light and dark themes, and pairs semantically with any form control via the htmlFor prop.",
+      },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "Required Indicator",
+              description: "Asterisk via required prop",
+            },
+            {
+              title: "Disabled State",
+              description: "Muted inactive style",
+            },
+            {
+              title: "Semantic Pairing",
+              description: "htmlFor links to input",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
@@ -28,7 +47,7 @@ const meta: Meta<typeof Label> = {
     },
     disabled: {
       control: "boolean",
-      description: "Whether the label is disabled",
+      description: "Whether the label appears in a disabled (inactive) state",
     },
     required: {
       control: "boolean",
@@ -44,164 +63,147 @@ const meta: Meta<typeof Label> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: {
-    children: "Label Text",
-    htmlFor: "example-input",
-    disabled: false,
-    required: false,
-  },
-}
+// ─── 1. AllVariants ───────────────────────────────────────────────────────────
 
-export const Required: Story = {
-  args: {
-    ...Default.args,
-    required: true,
-    children: "Required Label",
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-    children: "Disabled Label",
-  },
-}
-
-export const WithCustomClass: Story = {
-  args: {
-    ...Default.args,
-    className: "text-blue-500 font-bold",
-    children: "Styled Label",
-  },
-}
-
-// Example showing label with an input
-export const WithInput: Story = {
-  render: (args) => (
-    <div className="space-y-2">
-      <Label htmlFor="example-input" {...args}>
-        {args.children}
-      </Label>
-      <input
-        id="example-input"
-        type="text"
-        className="border-fm-divider-secondary w-full rounded-md border p-2"
-        placeholder="Enter text here"
-        disabled={args.disabled}
-        required={args.required}
-      />
-    </div>
-  ),
-  args: {
-    ...Default.args,
-    children: "Email Address",
-  },
-}
-
-// Example showing multiple labels with different states
-export const LabelExamples: Story = {
+export const AllVariants: Story = {
   render: () => (
-    <div className="w-64 space-y-4">
-      <div className="space-y-2">
-        <Label htmlFor="username">Username</Label>
-        <input
-          id="username"
-          type="text"
-          className="border-fm-divider-secondary w-full rounded-md border p-2"
-          placeholder="Enter username"
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="email" required>
-          Email
-        </Label>
-        <input
-          id="email"
-          type="email"
-          className="border-fm-divider-secondary w-full rounded-md border p-2"
-          placeholder="Enter email"
-          required
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="disabled-field" disabled>
-          Disabled Field
-        </Label>
-        <input
-          id="disabled-field"
-          type="text"
-          className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-tertiary w-full rounded-md border p-2"
-          placeholder="Disabled"
-          disabled
-        />
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          States
+        </h4>
+        <div className="flex flex-wrap items-start gap-6">
+          <div className="space-y-2 text-center">
+            <Label htmlFor="normal-demo">Username</Label>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Normal
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Label htmlFor="required-demo" required>
+              Email Address
+            </Label>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Required
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Label htmlFor="disabled-demo" disabled>
+              Archived Field
+            </Label>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Disabled
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "All three label states — normal, required (with asterisk), and disabled (inactive styling) — shown side by side.",
+      },
+    },
+  },
 }
 
-// Example showing form layout
-export const FormLayout: Story = {
-  render: () => (
-    <div className="bg-fm-surface-secondary mx-auto max-w-md rounded-xl p-4 shadow-md">
-      <form className="space-y-4">
-        <h2 className="mb-4 text-xl font-semibold">Contact Information</h2>
-
-        <div className="space-y-2">
-          <Label htmlFor="form-name" required>
-            Full Name
-          </Label>
-          <input
-            id="form-name"
-            type="text"
-            className="border-fm-divider-secondary w-full rounded-md border p-2"
-            placeholder="John Doe"
-            required
-          />
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="form-email" required>
-            Email Address
-          </Label>
-          <input
-            id="form-email"
-            type="email"
-            className="border-fm-divider-secondary w-full rounded-md border p-2"
-            placeholder="john@example.com"
-            required
-          />
-        </div>
+// ─── 2. UseCases ──────────────────────────────────────────────────────────────
 
-        <div className="space-y-2">
-          <Label htmlFor="form-phone">Phone Number</Label>
-          <input
-            id="form-phone"
-            type="tel"
-            className="border-fm-divider-secondary w-full rounded-md border p-2"
-            placeholder="+1 (555) 123-4567"
-          />
+export const UseCases: Story = {
+  render: () => (
+    <div className="mx-auto max-w-3xl space-y-8 p-8">
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Registration Form
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-md space-y-4 rounded-xl border p-6">
+          <div className="space-y-2">
+            <Label htmlFor="uc-name" required>
+              Full Name
+            </Label>
+            <input
+              id="uc-name"
+              type="text"
+              className="border-fm-divider-secondary bg-fm-surface-primary text-fm-primary placeholder:text-fm-tertiary w-full rounded-md border px-3 py-2 text-sm focus:outline-none"
+              placeholder="Jane Doe"
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="uc-email" required>
+              Email Address
+            </Label>
+            <input
+              id="uc-email"
+              type="email"
+              className="border-fm-divider-secondary bg-fm-surface-primary text-fm-primary placeholder:text-fm-tertiary w-full rounded-md border px-3 py-2 text-sm focus:outline-none"
+              placeholder="jane@example.com"
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="uc-phone">Phone Number</Label>
+            <input
+              id="uc-phone"
+              type="tel"
+              className="border-fm-divider-secondary bg-fm-surface-primary text-fm-primary placeholder:text-fm-tertiary w-full rounded-md border px-3 py-2 text-sm focus:outline-none"
+              placeholder="+1 (555) 000-0000"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="uc-bio">Bio</Label>
+            <textarea
+              id="uc-bio"
+              className="border-fm-divider-secondary bg-fm-surface-primary text-fm-primary placeholder:text-fm-tertiary h-24 w-full rounded-md border px-3 py-2 text-sm focus:outline-none"
+              placeholder="Tell us about yourself..."
+            />
+          </div>
         </div>
+      </div>
 
-        <div className="space-y-2">
-          <Label htmlFor="form-message">Message</Label>
-          <textarea
-            id="form-message"
-            className="border-fm-divider-secondary h-32 w-full rounded-md border p-2"
-            placeholder="Your message here..."
-          />
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Disabled Fields
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-md space-y-4 rounded-xl border p-6">
+          <div className="space-y-2">
+            <Label htmlFor="uc-account-id" disabled>
+              Account ID
+            </Label>
+            <input
+              id="uc-account-id"
+              type="text"
+              className="border-fm-divider-secondary bg-fm-surface-tertiary text-fm-tertiary w-full cursor-not-allowed rounded-md border px-3 py-2 text-sm"
+              value="ACC-0001-XYZ"
+              disabled
+              readOnly
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="uc-joined" disabled>
+              Member Since
+            </Label>
+            <input
+              id="uc-joined"
+              type="text"
+              className="border-fm-divider-secondary bg-fm-surface-tertiary text-fm-tertiary w-full cursor-not-allowed rounded-md border px-3 py-2 text-sm"
+              value="April 15, 2025"
+              disabled
+              readOnly
+            />
+          </div>
         </div>
-
-        <button
-          type="submit"
-          className="bg-fm-surface-info text-fm-surface-primary rounded-md px-4 py-2 transition-colors hover:bg-blue-600"
-        >
-          Submit
-        </button>
-      </form>
+      </div>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Labels paired with real form inputs in realistic registration and settings contexts, demonstrating required and disabled states in product use.",
+      },
+    },
+  },
 }