@tribepad/themis 1.0.0

package/src/elements/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,514 @@
+/**
+ * Checkbox Component Stories
+ * Storybook stories for Checkbox component demonstrating all variants, sizes, and states
+ *
+ * @see React Aria Checkbox: https://react-spectrum.adobe.com/react-aria/Checkbox.html
+ */
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { Checkbox } from './Checkbox';
+
+const meta = {
+  title: 'Elements/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible standalone checkbox 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: 'Checkbox style variant',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Checkbox size',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disable checkbox interaction',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description: 'Make checkbox read-only (can focus but not toggle)',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isIndeterminate: {
+      control: 'boolean',
+      description: 'Show indeterminate (partial selection) state',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Mark checkbox as invalid',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Mark checkbox as required',
+      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 Checkbox>;
+
+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: 'Accept terms and conditions',
+  },
+};
+
+// 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 all data',
+    description: 'This action cannot be undone',
+  },
+};
+
+// Size stories
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    label: 'Small checkbox',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    label: 'Large checkbox',
+  },
+};
+
+// State stories
+export const Checked: Story = {
+  args: {
+    defaultSelected: true,
+    label: 'Checked by default',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+    label: 'Disabled checkbox',
+  },
+};
+
+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 checkbox',
+    description: 'Can focus but cannot toggle',
+  },
+};
+
+export const Indeterminate: Story = {
+  args: {
+    isIndeterminate: true,
+    label: 'Indeterminate state',
+    description: 'Indicates partial selection (e.g., some child items selected)',
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    isInvalid: true,
+    label: 'Invalid checkbox',
+    description: 'This field is required',
+  },
+};
+
+export const Required: Story = {
+  args: {
+    isRequired: true,
+    label: 'Required checkbox',
+    description: 'You must accept to continue',
+  },
+};
+
+// 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">
+        <Checkbox variant="default" label="Default" />
+        <Checkbox variant="destructive" label="Destructive" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All 2 checkbox variants in one view.',
+      },
+    },
+  },
+};
+
+// Grid of all sizes
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-6">
+      <Checkbox size="sm" label="Small" />
+      <Checkbox size="default" label="Default" />
+      <Checkbox size="lg" label="Large" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All 3 checkbox sizes in one view.',
+      },
+    },
+  },
+};
+
+// Theme integration stories
+export const LightTheme: Story = {
+  args: {
+    label: 'Light theme checkbox',
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+export const DarkTheme: Story = {
+  args: {
+    label: 'Dark theme checkbox',
+    defaultSelected: true,
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+    docs: {
+      description: {
+        story: 'Checkbox adapts to dark theme via semantic tokens.',
+      },
+    },
+  },
+};
+
+export const HighContrast: Story = {
+  args: {
+    label: 'High contrast checkbox',
+    defaultSelected: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkbox with enhanced outlines for high contrast mode.',
+      },
+    },
+  },
+};
+
+export const ColorblindTheme: Story = {
+  args: {
+    label: 'Colorblind theme checkbox',
+    defaultSelected: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkbox with colorblind-friendly palette (deuteranopia, protanopia, tritanopia support).',
+      },
+    },
+  },
+};
+
+// Real-world examples
+export const TermsAndConditions: 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)]">
+        Registration
+      </h3>
+      <div className="space-y-4">
+        <Checkbox
+          label="I agree to the Terms of Service"
+          description="Read our terms before continuing"
+          isRequired
+        />
+        <Checkbox
+          label="I agree to the Privacy Policy"
+          description="Learn how we handle your data"
+          isRequired
+        />
+        <Checkbox
+          label="Subscribe to newsletter"
+          description="Get updates about new features"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Common pattern for terms acceptance during registration.',
+      },
+    },
+  },
+};
+
+export const PreferencesPanel: 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)]">
+        Email Preferences
+      </h3>
+      <div className="space-y-4">
+        <Checkbox
+          label="Product updates"
+          description="New features and improvements"
+          defaultSelected={true}
+        />
+        <Checkbox
+          label="Security alerts"
+          description="Important security notifications"
+          defaultSelected={true}
+          isReadOnly
+        />
+        <Checkbox
+          label="Marketing emails"
+          description="Promotions and special offers"
+        />
+        <Checkbox
+          variant="destructive"
+          label="Unsubscribe from all"
+          description="Stop receiving all emails"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Email preferences with read-only required options and destructive unsubscribe.',
+      },
+    },
+  },
+};
+
+export const FilterPanel: Story = {
+  render: () => (
+    <div className="w-64 space-y-4 rounded-lg border border-[var(--themis-border)] bg-[var(--themis-background)] p-4">
+      <h3 className="text-sm font-semibold text-[var(--themis-foreground)]">
+        Filter by Status
+      </h3>
+      <div className="space-y-2">
+        <Checkbox size="sm" label="Active" defaultSelected={true} />
+        <Checkbox size="sm" label="Pending" defaultSelected={true} />
+        <Checkbox size="sm" label="Completed" />
+        <Checkbox size="sm" label="Cancelled" />
+        <Checkbox size="sm" label="Archived" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Small checkboxes used for filtering in a sidebar.',
+      },
+    },
+  },
+};
+
+export const SelectAllPattern: Story = {
+  render: () => {
+    const [items, setItems] = useState([
+      { id: 1, label: 'Item 1', selected: true },
+      { id: 2, label: 'Item 2', selected: true },
+      { id: 3, label: 'Item 3', selected: false },
+      { id: 4, label: 'Item 4', selected: false },
+    ]);
+
+    const selectedCount = items.filter((item) => item.selected).length;
+    const allSelected = selectedCount === items.length;
+    const someSelected = selectedCount > 0 && selectedCount < items.length;
+
+    const toggleAll = () => {
+      setItems((prev) => prev.map((item) => ({ ...item, selected: !allSelected })));
+    };
+
+    const toggleItem = (id: number) => {
+      setItems((prev) =>
+        prev.map((item) => (item.id === id ? { ...item, selected: !item.selected } : item))
+      );
+    };
+
+    return (
+      <div className="w-64 space-y-2 rounded-lg border border-[var(--themis-border)] bg-[var(--themis-background)] p-4">
+        <Checkbox
+          isSelected={allSelected}
+          isIndeterminate={someSelected}
+          onChange={toggleAll}
+          label="Select all"
+          className="border-b border-[var(--themis-border)] pb-2"
+        />
+        {items.map((item) => (
+          <Checkbox
+            key={item.id}
+            isSelected={item.selected}
+            onChange={() => toggleItem(item.id)}
+            label={item.label}
+            className="ml-4"
+          />
+        ))}
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Select all pattern with indeterminate state for partial selection.',
+      },
+    },
+  },
+};
+
+export const ControlledExample: Story = {
+  render: () => {
+    const [isSelected, setIsSelected] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <Checkbox
+          isSelected={isSelected}
+          onChange={setIsSelected}
+          label="Controlled checkbox"
+          description={`Currently ${isSelected ? 'checked' : 'unchecked'}`}
+        />
+        <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 checkbox 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 checkboxes have 44x44px touch targets',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Even small checkboxes have 44x44px minimum touch targets (exceeds WCAG 2.2 requirement).',
+      },
+    },
+  },
+};
+
+export const WithAriaLabel: Story = {
+  args: {
+    'aria-label': 'Toggle notifications',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkbox without visible label, using aria-label for screen readers.',
+      },
+    },
+  },
+};