@neynar/ui 0.1.1

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

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Switch } from "../switch";
+import { Label } from "../label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card";
+
+const meta = {
+  title: "Form & Input/Switch",
+  component: Switch,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A versatile toggle switch component built on Radix UI primitives that provides an accessible way to toggle between on/off states. Commonly used for settings, preferences, and feature toggles.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    checked: {
+      control: { type: "boolean" },
+      description: "The controlled checked state of the switch",
+    },
+    defaultChecked: {
+      control: { type: "boolean" },
+      description: "The default checked state when uncontrolled",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the switch is disabled",
+    },
+    required: {
+      control: { type: "boolean" },
+      description: "Whether the switch is required in forms",
+    },
+    name: {
+      control: { type: "text" },
+      description: "Name attribute for form submission",
+    },
+    value: {
+      control: { type: "text" },
+      description: "Value attribute for form submission",
+    },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all Switch props and variants.
+ * Use the controls below to experiment with different configurations.
+ */
+export const Interactive: Story = {
+  args: {
+    defaultChecked: false,
+    disabled: false,
+    required: false,
+  },
+  render: (args) => (
+    <div className="flex items-center space-x-2">
+      <Switch id="interactive-switch" {...args} />
+      <Label htmlFor="interactive-switch">
+        Toggle switch {args.disabled ? "(disabled)" : ""}
+      </Label>
+    </div>
+  ),
+};
+
+/**
+ * Showcase of all Switch states and configurations for design review.
+ * Displays unchecked, checked, disabled unchecked, and disabled checked states.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="grid gap-6 p-4">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">All Switch States</h3>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="flex items-center space-x-2">
+            <Switch id="unchecked" />
+            <Label htmlFor="unchecked">Unchecked</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Switch id="checked" defaultChecked />
+            <Label htmlFor="checked">Checked</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Switch id="disabled-unchecked" disabled />
+            <Label htmlFor="disabled-unchecked">Disabled (off)</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Switch id="disabled-checked" disabled defaultChecked />
+            <Label htmlFor="disabled-checked">Disabled (on)</Label>
+          </div>
+        </div>
+      </div>
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">With Form Context</h3>
+        <div className="space-y-2">
+          <div className="flex items-center space-x-2">
+            <Switch id="required-switch" required />
+            <Label htmlFor="required-switch">Required switch</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Switch id="named-switch" name="notifications" value="enabled" />
+            <Label htmlFor="named-switch">Form switch with name/value</Label>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Real-world usage example in a Farcaster notification settings interface.
+ * Demonstrates Switch components in a practical application context.
+ */
+export const InContext: Story = {
+  render: function NotificationSettingsExample() {
+    const [settings, setSettings] = React.useState({
+      allNotifications: true,
+      mentions: true,
+      follows: false,
+      recasts: true,
+      frames: false,
+    });
+
+    const updateSetting = (key: keyof typeof settings, value: boolean) => {
+      setSettings(prev => ({ ...prev, [key]: value }));
+    };
+
+    return (
+      <Card className="w-[400px]">
+        <CardHeader>
+          <CardTitle>Notification Settings</CardTitle>
+          <CardDescription>
+            Configure which Farcaster notifications you want to receive
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="all-notifications" className="flex flex-col gap-1">
+              <span>All notifications</span>
+              <span className="text-sm font-normal text-muted-foreground">
+                Receive all Farcaster notifications
+              </span>
+            </Label>
+            <Switch
+              id="all-notifications"
+              checked={settings.allNotifications}
+              onCheckedChange={(checked) => updateSetting("allNotifications", checked)}
+            />
+          </div>
+          
+          <div className="ml-4 space-y-4 border-l-2 border-muted pl-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="mentions">Mentions</Label>
+              <Switch
+                id="mentions"
+                checked={settings.mentions}
+                onCheckedChange={(checked) => updateSetting("mentions", checked)}
+                disabled={!settings.allNotifications}
+              />
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <Label htmlFor="follows">New followers</Label>
+              <Switch
+                id="follows"
+                checked={settings.follows}
+                onCheckedChange={(checked) => updateSetting("follows", checked)}
+                disabled={!settings.allNotifications}
+              />
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <Label htmlFor="recasts">Recasts</Label>
+              <Switch
+                id="recasts"
+                checked={settings.recasts}
+                onCheckedChange={(checked) => updateSetting("recasts", checked)}
+                disabled={!settings.allNotifications}
+              />
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <Label htmlFor="frames">Frame interactions</Label>
+              <Switch
+                id="frames"
+                checked={settings.frames}
+                onCheckedChange={(checked) => updateSetting("frames", checked)}
+                disabled={!settings.allNotifications}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  },
+};