@neynar/ui 0.1.1

package/src/components/ui/stories/label.stories.tsx

@@ -0,0 +1,294 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Label } from "../label";
+import { Input } from "../input";
+import { Checkbox } from "../checkbox";
+import { RadioGroup, RadioGroupItem } from "../radio-group";
+import { Switch } from "../switch";
+import { Textarea } from "../textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select";
+
+const meta = {
+  title: "Form & Input/Label",
+  component: Label,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A label component that provides accessible text labels for form controls. Built on Radix UI Label with automatic association to form elements.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    htmlFor: {
+      control: { type: "text" },
+      description: "The id of the form element this label is for",
+    },
+    children: {
+      control: { type: "text" },
+      description: "The label text content",
+    },
+  },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing Label component with all available props
+ * This story allows designers and developers to experiment with different configurations
+ */
+export const Interactive: Story = {
+  args: {
+    children: "Email address",
+    htmlFor: "interactive-input",
+  },
+  argTypes: {
+    children: {
+      control: { type: "text" },
+      description: "The label text or content",
+    },
+    htmlFor: {
+      control: { type: "text" },
+      description: "The id of the form element this label is for",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+  render: (args) => (
+    <div className="space-y-2">
+      <Label {...args} />
+      <Input id="interactive-input" placeholder="Type something..." />
+    </div>
+  ),
+};
+
+/**
+ * Comprehensive showcase of Label component variants and styling options
+ * Demonstrates different visual styles, states, and use cases for design reference
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Basic label styles */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Label Styles</h3>
+        <div className="grid gap-4">
+          <Label>Default Label</Label>
+          <Label className="text-primary">Primary Label</Label>
+          <Label className="text-destructive">Error Label</Label>
+          <Label className="text-muted-foreground">Muted Label</Label>
+          <Label className="cursor-not-allowed opacity-50">
+            Disabled Label
+          </Label>
+        </div>
+      </div>
+
+      {/* Size variations */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Size Variants</h3>
+        <div className="grid gap-4">
+          <Label className="text-xs">Extra Small (xs)</Label>
+          <Label className="text-sm">Small (sm)</Label>
+          <Label>Default Size</Label>
+          <Label className="text-lg">Large (lg)</Label>
+          <Label className="text-xl">Extra Large (xl)</Label>
+        </div>
+      </div>
+
+      {/* Form control associations */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Form Control Types</h3>
+        <div className="space-y-6">
+          {/* Text input */}
+          <div className="space-y-2">
+            <Label htmlFor="variant-input">Text Input</Label>
+            <Input id="variant-input" placeholder="Enter text" />
+          </div>
+
+          {/* Checkbox */}
+          <div className="flex items-center space-x-2">
+            <Checkbox id="variant-checkbox" />
+            <Label htmlFor="variant-checkbox" className="text-sm font-normal">
+              Checkbox Label
+            </Label>
+          </div>
+
+          {/* Switch */}
+          <div className="flex items-center space-x-2">
+            <Switch id="variant-switch" />
+            <Label htmlFor="variant-switch">Switch Label</Label>
+          </div>
+
+          {/* Radio Group */}
+          <div className="space-y-2">
+            <Label>Radio Group</Label>
+            <RadioGroup defaultValue="option1">
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="option1" id="radio1" />
+                <Label htmlFor="radio1">Option 1</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="option2" id="radio2" />
+                <Label htmlFor="radio2">Option 2</Label>
+              </div>
+            </RadioGroup>
+          </div>
+        </div>
+      </div>
+
+      {/* Required and optional indicators */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Field Indicators</h3>
+        <div className="space-y-4">
+          <Label htmlFor="required-field">
+            Required Field <span className="text-destructive">*</span>
+          </Label>
+          <Label htmlFor="optional-field" className="text-muted-foreground">
+            Optional Field
+          </Label>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Real-world example showing Label component in a complete form context
+ * Demonstrates practical usage patterns for business and design teams
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="mx-auto max-w-md space-y-8">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold">Create Account</h2>
+        <p className="text-muted-foreground">Join us to get started</p>
+      </div>
+
+      <form className="space-y-6">
+        {/* Personal Information */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold">Personal Information</h3>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="first-name">
+                First Name <span className="text-destructive">*</span>
+              </Label>
+              <Input id="first-name" placeholder="John" required />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="last-name">
+                Last Name <span className="text-destructive">*</span>
+              </Label>
+              <Input id="last-name" placeholder="Doe" required />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="email">
+              Email Address <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="john.doe@example.com"
+              required
+            />
+            <p className="text-sm text-muted-foreground">
+              We&apos;ll never share your email with anyone else.
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">
+              Password <span className="text-destructive">*</span>
+            </Label>
+            <Input id="password" type="password" required />
+            <p className="text-sm text-muted-foreground">
+              Must be at least 8 characters with one number and one special
+              character.
+            </p>
+          </div>
+        </div>
+
+        {/* Preferences */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold">Preferences</h3>
+
+          <div className="space-y-2">
+            <Label htmlFor="country">Country</Label>
+            <Select>
+              <SelectTrigger id="country">
+                <SelectValue placeholder="Select your country" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="us">United States</SelectItem>
+                <SelectItem value="uk">United Kingdom</SelectItem>
+                <SelectItem value="ca">Canada</SelectItem>
+                <SelectItem value="au">Australia</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="bio">Bio (Optional)</Label>
+            <Textarea
+              id="bio"
+              placeholder="Tell us a bit about yourself..."
+              className="min-h-[100px]"
+            />
+          </div>
+        </div>
+
+        {/* Agreements */}
+        <div className="space-y-4">
+          <div className="flex items-start space-x-2">
+            <Checkbox id="terms" required />
+            <Label htmlFor="terms" className="text-sm leading-relaxed">
+              I agree to the{" "}
+              <a href="#" className="text-primary underline hover:no-underline">
+                Terms of Service
+              </a>{" "}
+              and{" "}
+              <a href="#" className="text-primary underline hover:no-underline">
+                Privacy Policy
+              </a>
+              <span className="text-destructive ml-1">*</span>
+            </Label>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Checkbox id="newsletter" />
+            <Label htmlFor="newsletter" className="text-sm">
+              Subscribe to our newsletter for updates and tips
+            </Label>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Switch id="notifications" />
+            <Label htmlFor="notifications" className="text-sm">
+              Enable email notifications
+            </Label>
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+        >
+          Create Account
+        </button>
+      </form>
+    </div>
+  ),
+};