@neynar/ui 0.1.1

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

@@ -0,0 +1,297 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Checkbox } from "../checkbox";
+import { Label } from "../label";
+
+const meta = {
+  title: "Form & Input/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A checkbox component that allows users to select one or more items from a set of options. Built on Radix UI with custom Tailwind CSS 4 styling.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    checked: {
+      control: { type: "radio" },
+      options: [true, false, "indeterminate"],
+      description: "The controlled checked state of the checkbox",
+    },
+    defaultChecked: {
+      control: { type: "boolean" },
+      description: "The default checked state when uncontrolled",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the checkbox is disabled",
+    },
+    required: {
+      control: { type: "boolean" },
+      description: "Whether the checkbox is required",
+    },
+    name: {
+      control: { type: "text" },
+      description: "The name of the checkbox for form submission",
+    },
+    value: {
+      control: { type: "text" },
+      description: "The value of the checkbox for form submission",
+    },
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive story with all available controls for testing different checkbox configurations.
+ * This story allows designers and developers to experiment with all checkbox props in Storybook.
+ */
+export const Interactive: Story = {
+  args: {
+    disabled: false,
+    required: false,
+  },
+  render: (args) => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="interactive-checkbox" {...args} />
+      <Label htmlFor="interactive-checkbox">
+        Interactive checkbox
+        {args.required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use the controls panel to test different checkbox configurations including checked states, disabled state, and form properties.",
+      },
+    },
+  },
+};
+
+/**
+ * Comprehensive showcase of all checkbox variants and states.
+ * Displays all possible visual combinations to help designers understand available options.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      {/* Basic States */}
+      <div className="space-y-3">
+        <Label className="text-sm font-semibold">Basic States</Label>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="flex items-center space-x-2">
+            <Checkbox id="unchecked" />
+            <Label htmlFor="unchecked" className="text-sm">Unchecked</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox id="checked" defaultChecked />
+            <Label htmlFor="checked" className="text-sm">Checked</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox id="indeterminate" checked="indeterminate" />
+            <Label htmlFor="indeterminate" className="text-sm">Indeterminate</Label>
+          </div>
+        </div>
+      </div>
+
+      {/* Disabled States */}
+      <div className="space-y-3">
+        <Label className="text-sm font-semibold">Disabled States</Label>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="flex items-center space-x-2">
+            <Checkbox id="disabled-unchecked" disabled />
+            <Label htmlFor="disabled-unchecked" className="text-sm">Disabled unchecked</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox id="disabled-checked" disabled defaultChecked />
+            <Label htmlFor="disabled-checked" className="text-sm">Disabled checked</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox id="disabled-indeterminate" disabled checked="indeterminate" />
+            <Label htmlFor="disabled-indeterminate" className="text-sm">Disabled indeterminate</Label>
+          </div>
+        </div>
+      </div>
+
+      {/* Form States */}
+      <div className="space-y-3">
+        <Label className="text-sm font-semibold">Form Integration</Label>
+        <div className="space-y-2">
+          <div className="flex items-center space-x-2">
+            <Checkbox id="required-field" required />
+            <Label htmlFor="required-field" className="text-sm">
+              Required field <span className="text-destructive">*</span>
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox id="with-value" name="preferences" value="notifications" />
+            <Label htmlFor="with-value" className="text-sm">With form name and value</Label>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Complete overview of all checkbox states including basic, disabled, and form integration variants.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage example showing checkbox in realistic UI context.
+ * Demonstrates practical patterns for business and design teams.
+ */
+export const InContext: Story = {
+  render: function InContextExample() {
+    const [checkedItems, setCheckedItems] = React.useState({
+      terms: false,
+      newsletter: true,
+      marketing: false,
+      analytics: false,
+    });
+
+    const preferenceItems = ['newsletter', 'marketing', 'analytics'];
+    const checkedPreferences = preferenceItems.filter(item => checkedItems[item as keyof typeof checkedItems]);
+    const allPreferencesChecked = checkedPreferences.length === preferenceItems.length;
+    const somePreferencesChecked = checkedPreferences.length > 0;
+    const parentChecked = allPreferencesChecked ? true : somePreferencesChecked ? "indeterminate" : false;
+
+    return (
+      <div className="max-w-md space-y-6 rounded-lg border p-6 shadow-sm">
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Account Settings</h3>
+          <p className="text-sm text-muted-foreground">
+            Manage your account preferences and communications.
+          </p>
+        </div>
+
+        {/* Terms and Conditions */}
+        <div className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="terms"
+              checked={checkedItems.terms}
+              onCheckedChange={(checked) =>
+                setCheckedItems(prev => ({ ...prev, terms: checked === true }))
+              }
+              required
+            />
+            <Label htmlFor="terms" className="text-sm">
+              I agree to the{" "}
+              <a href="#" className="text-primary underline hover:no-underline">
+                Terms and Conditions
+              </a>{" "}
+              <span className="text-destructive">*</span>
+            </Label>
+          </div>
+        </div>
+
+        {/* Email Preferences */}
+        <div className="space-y-3">
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Email Preferences</Label>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="select-all-preferences"
+                checked={parentChecked}
+                onCheckedChange={(checked) => {
+                  const newValue = checked === true;
+                  setCheckedItems(prev => ({
+                    ...prev,
+                    newsletter: newValue,
+                    marketing: newValue,
+                    analytics: newValue,
+                  }));
+                }}
+              />
+              <Label htmlFor="select-all-preferences" className="text-sm font-medium">
+                Select all communications
+              </Label>
+            </div>
+          </div>
+          
+          <div className="ml-6 space-y-2 border-l-2 border-border pl-4">
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="newsletter"
+                checked={checkedItems.newsletter}
+                onCheckedChange={(checked) =>
+                  setCheckedItems(prev => ({ ...prev, newsletter: checked === true }))
+                }
+              />
+              <Label htmlFor="newsletter" className="text-sm">
+                Weekly newsletter
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="marketing"
+                checked={checkedItems.marketing}
+                onCheckedChange={(checked) =>
+                  setCheckedItems(prev => ({ ...prev, marketing: checked === true }))
+                }
+              />
+              <Label htmlFor="marketing" className="text-sm">
+                Marketing updates
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="analytics"
+                checked={checkedItems.analytics}
+                onCheckedChange={(checked) =>
+                  setCheckedItems(prev => ({ ...prev, analytics: checked === true }))
+                }
+              />
+              <Label htmlFor="analytics" className="text-sm">
+                Usage analytics
+              </Label>
+            </div>
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex justify-between pt-4 border-t">
+          <button
+            type="button"
+            className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+            onClick={() => setCheckedItems({ terms: false, newsletter: false, marketing: false, analytics: false })}
+          >
+            Reset
+          </button>
+          <button
+            type="button"
+            className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+              checkedItems.terms
+                ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                : "bg-muted text-muted-foreground cursor-not-allowed"
+            }`}
+            disabled={!checkedItems.terms}
+          >
+            Save Settings
+          </button>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Realistic account settings form demonstrating checkbox usage in a complete UI context with parent-child relationships, form validation, and user interactions.",
+      },
+    },
+  },
+};