@tribepad/themis 1.0.0

package/src/elements/Switch/Switch.stories.tsx

@@ -0,0 +1,441 @@
+/**
+ * Switch Component Stories
+ * Storybook stories for Switch component demonstrating all variants, sizes, and states
+ *
+ * @see React Aria Switch: https://react-spectrum.adobe.com/react-aria/Switch.html
+ * @see ShadCN Switch: https://ui.shadcn.com/docs/components/switch
+ */
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { Switch } from './Switch';
+
+const meta = {
+  title: 'Elements/Switch',
+  component: Switch,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Accessible toggle switch component with React Aria primitives, CVA variant styling, and WCAG 2.2 AAA compliance (7:1 contrast ratio, 44x44px touch targets).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive'],
+      description: 'Switch style variant',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Switch size',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disable switch interaction',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description: 'Make switch read-only (can focus but not toggle)',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    defaultSelected: {
+      control: 'boolean',
+      description: 'Initial selected state (uncontrolled)',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Optional label text',
+    },
+    description: {
+      control: 'text',
+      description: 'Optional description text',
+    },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story
+export const Default: Story = {
+  args: {
+    'aria-label': 'Toggle setting',
+  },
+};
+
+// With label
+export const WithLabel: Story = {
+  args: {
+    label: 'Enable notifications',
+  },
+};
+
+// With label and description
+export const WithDescription: Story = {
+  args: {
+    label: 'Marketing emails',
+    description: 'Receive emails about new products and features',
+  },
+};
+
+// Variant stories
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+    label: 'Delete account',
+    description: 'Permanently delete your account and all data',
+  },
+};
+
+// Size stories
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    label: 'Small switch',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    label: 'Large switch',
+  },
+};
+
+// State stories
+export const Checked: Story = {
+  args: {
+    defaultSelected: true,
+    label: 'Checked by default',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+    label: 'Disabled switch',
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    isDisabled: true,
+    defaultSelected: true,
+    label: 'Disabled and checked',
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    isReadOnly: true,
+    defaultSelected: true,
+    label: 'Read-only switch',
+    description: 'Can focus but cannot toggle',
+  },
+};
+
+// Grid of all variants
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center gap-6">
+        <Switch variant="default" label="Default" />
+        <Switch variant="destructive" label="Destructive" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All 2 switch variants in one view.',
+      },
+    },
+  },
+};
+
+// Grid of all sizes
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-6">
+      <Switch size="sm" label="Small" />
+      <Switch size="default" label="Default" />
+      <Switch size="lg" label="Large" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All 3 switch sizes in one view.',
+      },
+    },
+  },
+};
+
+// Theme integration stories
+export const LightTheme: Story = {
+  args: {
+    label: 'Light theme switch',
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+export const DarkTheme: Story = {
+  args: {
+    label: 'Dark theme switch',
+    defaultSelected: true,
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+    docs: {
+      description: {
+        story: 'Switch adapts to dark theme via semantic tokens.',
+      },
+    },
+  },
+};
+
+export const HighContrast: Story = {
+  args: {
+    label: 'High contrast switch',
+    defaultSelected: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Switch with enhanced outlines for high contrast mode.',
+      },
+    },
+  },
+};
+
+export const ColorblindTheme: Story = {
+  args: {
+    label: 'Colorblind theme switch',
+    defaultSelected: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Switch with colorblind-friendly palette (deuteranopia, protanopia, tritanopia support).',
+      },
+    },
+  },
+};
+
+// Real-world examples
+export const SettingsPanel: Story = {
+  render: () => (
+    <div className="w-96 space-y-4 rounded-lg border border-[var(--themis-border)] bg-[var(--themis-background)] p-6">
+      <h3 className="text-lg font-semibold text-[var(--themis-foreground)]">
+        Notification Settings
+      </h3>
+      <div className="space-y-4">
+        <Switch
+          label="Push notifications"
+          description="Receive push notifications on your device"
+          defaultSelected={true}
+        />
+        <Switch
+          label="Email notifications"
+          description="Receive email updates about your account"
+          defaultSelected={true}
+        />
+        <Switch
+          label="SMS notifications"
+          description="Receive text messages for important updates"
+          defaultSelected={false}
+        />
+        <Switch
+          label="Marketing emails"
+          description="Receive promotional emails and offers"
+          defaultSelected={false}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Switch used in a settings panel with multiple toggles.',
+      },
+    },
+  },
+};
+
+export const PrivacySettings: Story = {
+  render: () => (
+    <div className="w-96 space-y-4 rounded-lg border border-[var(--themis-border)] bg-[var(--themis-background)] p-6">
+      <h3 className="text-lg font-semibold text-[var(--themis-foreground)]">
+        Privacy & Security
+      </h3>
+      <div className="space-y-4">
+        <Switch
+          label="Profile visibility"
+          description="Make your profile visible to other users"
+          defaultSelected={true}
+        />
+        <Switch
+          label="Activity status"
+          description="Show when you're online"
+          defaultSelected={true}
+        />
+        <Switch
+          label="Read receipts"
+          description="Let others know when you've read their messages"
+          defaultSelected={false}
+        />
+        <Switch
+          variant="destructive"
+          label="Delete browsing history"
+          description="Automatically delete your browsing history"
+          defaultSelected={false}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Privacy settings with destructive variant for dangerous actions.',
+      },
+    },
+  },
+};
+
+export const FeatureFlags: Story = {
+  render: () => (
+    <div className="w-96 space-y-4 rounded-lg border border-[var(--themis-border)] bg-[var(--themis-background)] p-6">
+      <h3 className="text-lg font-semibold text-[var(--themis-foreground)]">
+        Feature Flags
+      </h3>
+      <div className="space-y-4">
+        <Switch
+          label="Beta features"
+          description="Enable experimental features (may be unstable)"
+          defaultSelected={false}
+        />
+        <Switch
+          label="Developer mode"
+          description="Show advanced developer options"
+          defaultSelected={false}
+        />
+        <Switch
+          label="Analytics"
+          description="Help us improve by sharing usage data"
+          defaultSelected={true}
+        />
+        <Switch
+          isReadOnly
+          defaultSelected={true}
+          label="Essential features"
+          description="Required for core functionality (cannot be disabled)"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Feature flags panel with read-only switch for essential features.',
+      },
+    },
+  },
+};
+
+export const ControlledExample: Story = {
+  render: () => {
+    const [isSelected, setIsSelected] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <Switch
+          isSelected={isSelected}
+          onChange={setIsSelected}
+          label="Controlled switch"
+          description={`Currently ${isSelected ? 'on' : 'off'}`}
+        />
+        <div className="text-sm text-[var(--themis-muted-foreground)]">
+          State: {isSelected ? 'true' : 'false'}
+        </div>
+        <button
+          onClick={() => setIsSelected(!isSelected)}
+          className="rounded-md bg-[var(--themis-primary)] px-4 py-2 text-sm text-[var(--themis-primary-foreground)]"
+        >
+          Toggle from outside
+        </button>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Controlled switch example with external state management.',
+      },
+    },
+  },
+};
+
+// Accessibility stories
+export const FocusVisible: Story = {
+  args: {
+    label: 'Focus me with keyboard',
+    description: 'Press Tab to see the focus ring',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Press Tab to see the focus ring. Meets WCAG 2.2 AAA standards with visible focus indicator.',
+      },
+    },
+  },
+};
+
+export const TouchTarget: Story = {
+  args: {
+    size: 'sm',
+    label: 'Small but accessible',
+    description: 'Even small switches have 44x44px touch targets',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Even small switches have 44x44px minimum touch targets (exceeds WCAG 2.2 requirement).',
+      },
+    },
+  },
+};
+
+export const WithAriaLabel: Story = {
+  args: {
+    'aria-label': 'Toggle notifications',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Switch without visible label, using aria-label for screen readers.',
+      },
+    },
+  },
+};
+
+// Import React for controlled example
+import { useState } from 'react';