@neynar/ui 0.1.1

package/src/components/ui/stories/radio-group.stories.tsx

@@ -0,0 +1,400 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { RadioGroup, RadioGroupItem } from "../radio-group";
+import { Label } from "../label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card";
+
+const meta = {
+  title: "Form & Input/RadioGroup",
+  component: RadioGroup,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A radio group component for single selection from multiple options. Built on Radix UI primitives with accessible keyboard navigation and screen reader support.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    defaultValue: {
+      control: { type: "text" },
+      description: "The default selected value when uncontrolled",
+    },
+    value: {
+      control: { type: "text" },
+      description: "The controlled value of the selected radio option",
+    },
+    onValueChange: {
+      action: "valueChanged",
+      description: "Callback fired when the selection changes",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the entire radio group is disabled",
+    },
+    required: {
+      control: { type: "boolean" },
+      description: "Whether the radio group is required for form validation",
+    },
+    orientation: {
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+      description: "The orientation of the radio group layout",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+  },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with all available props and options.
+ * Use the controls panel to test different configurations.
+ */
+export const Interactive: Story = {
+  args: {
+    defaultValue: "option-two",
+    disabled: false,
+    required: false,
+  },
+  render: (args) => (
+    <RadioGroup {...args}>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-one" id="option-one" />
+        <Label htmlFor="option-one">Option One</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-two" id="option-two" />
+        <Label htmlFor="option-two">Option Two</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-three" id="option-three" />
+        <Label htmlFor="option-three">Option Three</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-four" id="option-four" disabled />
+        <Label htmlFor="option-four" className="opacity-50">
+          Disabled Option
+        </Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+/**
+ * Comprehensive showcase of all radio group variants and states.
+ * Demonstrates different layouts, styling options, and use cases.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="grid gap-8 w-full max-w-4xl">
+      {/* Basic Vertical Layout */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Vertical Layout (Default)</h3>
+        <RadioGroup defaultValue="comfortable">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="default" id="v1" />
+            <Label htmlFor="v1">Default</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="comfortable" id="v2" />
+            <Label htmlFor="v2">Comfortable</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="compact" id="v3" />
+            <Label htmlFor="v3">Compact</Label>
+          </div>
+        </RadioGroup>
+      </div>
+
+      {/* Horizontal Layout */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Horizontal Layout</h3>
+        <RadioGroup defaultValue="medium" className="flex gap-4">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="small" id="h1" />
+            <Label htmlFor="h1">Small</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="medium" id="h2" />
+            <Label htmlFor="h2">Medium</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="large" id="h3" />
+            <Label htmlFor="h3">Large</Label>
+          </div>
+        </RadioGroup>
+      </div>
+
+      {/* With Descriptions */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Descriptions</h3>
+        <RadioGroup defaultValue="card">
+          <div className="flex items-start space-x-2">
+            <RadioGroupItem value="card" id="desc1" className="mt-1" />
+            <div className="grid gap-1">
+              <Label htmlFor="desc1">Credit Card</Label>
+              <p className="text-sm text-muted-foreground">
+                Pay with your credit or debit card
+              </p>
+            </div>
+          </div>
+          <div className="flex items-start space-x-2">
+            <RadioGroupItem value="paypal" id="desc2" className="mt-1" />
+            <div className="grid gap-1">
+              <Label htmlFor="desc2">PayPal</Label>
+              <p className="text-sm text-muted-foreground">
+                Pay with your PayPal account
+              </p>
+            </div>
+          </div>
+          <div className="flex items-start space-x-2">
+            <RadioGroupItem value="bank" id="desc3" className="mt-1" />
+            <div className="grid gap-1">
+              <Label htmlFor="desc3">Bank Transfer</Label>
+              <p className="text-sm text-muted-foreground">
+                Direct transfer from your bank account
+              </p>
+            </div>
+          </div>
+        </RadioGroup>
+      </div>
+
+      {/* Disabled States */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Disabled States</h3>
+        <div className="grid gap-4">
+          <div>
+            <h4 className="mb-2 text-sm font-medium text-muted-foreground">
+              Entire Group Disabled
+            </h4>
+            <RadioGroup defaultValue="option-two" disabled>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="option-one" id="d1" />
+                <Label htmlFor="d1">Option One</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="option-two" id="d2" />
+                <Label htmlFor="d2">Option Two (Selected)</Label>
+              </div>
+            </RadioGroup>
+          </div>
+          <div>
+            <h4 className="mb-2 text-sm font-medium text-muted-foreground">
+              Individual Item Disabled
+            </h4>
+            <RadioGroup defaultValue="active">
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="active" id="d3" />
+                <Label htmlFor="d3">Active</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="paused" id="d4" disabled />
+                <Label htmlFor="d4" className="opacity-50">
+                  Paused (Unavailable)
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="inactive" id="d5" />
+                <Label htmlFor="d5">Inactive</Label>
+              </div>
+            </RadioGroup>
+          </div>
+        </div>
+      </div>
+
+      {/* Custom Styling */}
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Custom Colors</h3>
+        <RadioGroup defaultValue="purple">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem
+              value="purple"
+              id="c1"
+              className="border-purple-500 text-purple-500"
+            />
+            <Label htmlFor="c1">Purple Theme</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem
+              value="green"
+              id="c2"
+              className="border-green-500 text-green-500"
+            />
+            <Label htmlFor="c2">Green Theme</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem
+              value="orange"
+              id="c3"
+              className="border-orange-500 text-orange-500"
+            />
+            <Label htmlFor="c3">Orange Theme</Label>
+          </div>
+        </RadioGroup>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Real-world usage example showing radio groups in a practical context.
+ * Demonstrates how the component integrates within forms and user interfaces.
+ */
+export const InContext: Story = {
+  render: function PreferencesForm() {
+    const [preferences, setPreferences] = React.useState({
+      theme: "light",
+      notifications: "email",
+      plan: "pro",
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      alert(`Preferences saved: ${JSON.stringify(preferences, null, 2)}`);
+    };
+
+    return (
+      <Card className="w-[500px]">
+        <CardHeader>
+          <CardTitle>User Preferences</CardTitle>
+          <CardDescription>
+            Configure your account settings and preferences
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Theme Selection */}
+            <div className="space-y-3">
+              <Label className="text-sm font-medium">Theme</Label>
+              <RadioGroup
+                value={preferences.theme}
+                onValueChange={(value) =>
+                  setPreferences((prev) => ({ ...prev, theme: value }))
+                }
+              >
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="light" id="theme-light" />
+                  <Label htmlFor="theme-light">Light Mode</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="dark" id="theme-dark" />
+                  <Label htmlFor="theme-dark">Dark Mode</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="system" id="theme-system" />
+                  <Label htmlFor="theme-system">System Default</Label>
+                </div>
+              </RadioGroup>
+            </div>
+
+            {/* Notification Preferences */}
+            <div className="space-y-3">
+              <Label className="text-sm font-medium">Notifications</Label>
+              <RadioGroup
+                value={preferences.notifications}
+                onValueChange={(value) =>
+                  setPreferences((prev) => ({ ...prev, notifications: value }))
+                }
+              >
+                <div className="flex items-start space-x-2">
+                  <RadioGroupItem value="email" id="notif-email" className="mt-1" />
+                  <div className="grid gap-1">
+                    <Label htmlFor="notif-email">Email Notifications</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Receive updates via email
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-2">
+                  <RadioGroupItem value="push" id="notif-push" className="mt-1" />
+                  <div className="grid gap-1">
+                    <Label htmlFor="notif-push">Push Notifications</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Receive browser push notifications
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-2">
+                  <RadioGroupItem value="none" id="notif-none" className="mt-1" />
+                  <div className="grid gap-1">
+                    <Label htmlFor="notif-none">No Notifications</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Disable all notifications
+                    </p>
+                  </div>
+                </div>
+              </RadioGroup>
+            </div>
+
+            {/* Plan Selection */}
+            <div className="space-y-3">
+              <Label className="text-sm font-medium">Subscription Plan</Label>
+              <RadioGroup
+                value={preferences.plan}
+                onValueChange={(value) =>
+                  setPreferences((prev) => ({ ...prev, plan: value }))
+                }
+              >
+                <div className="flex items-start space-x-2">
+                  <RadioGroupItem value="free" id="plan-free" className="mt-1" />
+                  <div className="grid gap-1">
+                    <Label htmlFor="plan-free" className="flex items-center gap-2">
+                      Free Plan
+                      <span className="text-xs text-muted-foreground">$0/month</span>
+                    </Label>
+                    <p className="text-sm text-muted-foreground">
+                      Basic features for personal use
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-2">
+                  <RadioGroupItem value="pro" id="plan-pro" className="mt-1" />
+                  <div className="grid gap-1">
+                    <Label htmlFor="plan-pro" className="flex items-center gap-2">
+                      Pro Plan
+                      <span className="text-xs text-muted-foreground">$19/month</span>
+                    </Label>
+                    <p className="text-sm text-muted-foreground">
+                      Advanced features for professionals
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-2">
+                  <RadioGroupItem value="enterprise" id="plan-enterprise" className="mt-1" />
+                  <div className="grid gap-1">
+                    <Label htmlFor="plan-enterprise" className="flex items-center gap-2">
+                      Enterprise Plan
+                      <span className="text-xs text-muted-foreground">Custom pricing</span>
+                    </Label>
+                    <p className="text-sm text-muted-foreground">
+                      Custom solutions for large organizations
+                    </p>
+                  </div>
+                </div>
+              </RadioGroup>
+            </div>
+
+            <div className="flex justify-between items-center pt-4 border-t">
+              <p className="text-sm text-muted-foreground">
+                Changes are saved automatically
+              </p>
+              <button
+                type="submit"
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors"
+              >
+                Save Preferences
+              </button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    );
+  },
+};