@tribepad/themis 1.0.0

package/src/elements/Select/Select.stories.tsx

@@ -0,0 +1,362 @@
+/**
+ * Select Component Storybook Stories
+ *
+ * @see select-prd.md US-1 to US-10 (Select Requirements)
+ * @see plan.md (Implementation Plan)
+ */
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { useState } from 'react';
+import { Select, MultiSelect } from './Select';
+
+const meta = {
+  title: 'Elements/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible select/dropdown component with WCAG 2.2 AAA compliance, React Aria primitives, single/multiple selection modes, keyboard navigation, validation integration, and form support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Required label for accessibility',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when no value selected',
+    },
+    description: {
+      control: 'text',
+      description: 'Helper text displayed below the select',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message to display (from form validation)',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disable the entire select',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Mark field as required with asterisk',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Show loading spinner',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Size variant',
+    },
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default story: Basic single selection with 3-5 options
+ */
+export const Default: Story = {
+  render: () => (
+    <Select label="Framework" placeholder="Select a framework">
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+      <Select.Item value="svelte">Svelte</Select.Item>
+    </Select>
+  ),
+};
+
+/**
+ * WithDescription: Select with helper text
+ */
+export const WithDescription: Story = {
+  render: () => (
+    <Select
+      label="Framework"
+      description="Choose your preferred JavaScript framework"
+      placeholder="Select a framework"
+    >
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select>
+  ),
+};
+
+/**
+ * Required: Select with required indicator
+ */
+export const Required: Story = {
+  render: () => (
+    <Select label="Framework" isRequired placeholder="Select a framework">
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select>
+  ),
+};
+
+/**
+ * WithError: Select showing validation error
+ */
+export const WithError: Story = {
+  render: () => (
+    <Select
+      label="Framework"
+      errorMessage="Please select a framework"
+      placeholder="Select a framework"
+    >
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select>
+  ),
+};
+
+/**
+ * Disabled: Disabled select component
+ */
+export const Disabled: Story = {
+  render: () => (
+    <Select label="Framework" isDisabled value="react">
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select>
+  ),
+};
+
+/**
+ * WithDisabledItems: Select with some disabled options
+ */
+export const WithDisabledItems: Story = {
+  render: () => (
+    <Select label="Framework" placeholder="Select a framework">
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue" isDisabled>
+        Vue (Coming Soon)
+      </Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+      <Select.Item value="svelte" isDisabled>
+        Svelte (Coming Soon)
+      </Select.Item>
+    </Select>
+  ),
+};
+
+/**
+ * Loading: Select in loading state
+ */
+export const Loading: Story = {
+  render: () => (
+    <Select label="Framework" isLoading placeholder="Loading options...">
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+    </Select>
+  ),
+};
+
+/**
+ * Sizes: Different size variants
+ */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Select label="Small" size="sm" value="react">
+        <Select.Item value="react">React</Select.Item>
+        <Select.Item value="vue">Vue</Select.Item>
+      </Select>
+      <Select label="Default" size="default" value="react">
+        <Select.Item value="react">React</Select.Item>
+        <Select.Item value="vue">Vue</Select.Item>
+      </Select>
+      <Select label="Large" size="lg" value="react">
+        <Select.Item value="react">React</Select.Item>
+        <Select.Item value="vue">Vue</Select.Item>
+      </Select>
+    </div>
+  ),
+};
+
+/**
+ * WithSections: Grouped options with section headers
+ */
+export const WithSections: Story = {
+  render: () => (
+    <Select label="Framework" placeholder="Select a framework">
+      <Select.Section>
+        <Select.Header>Frontend</Select.Header>
+        <Select.Item value="react">React</Select.Item>
+        <Select.Item value="vue">Vue</Select.Item>
+        <Select.Item value="angular">Angular</Select.Item>
+      </Select.Section>
+      <Select.Section>
+        <Select.Header>Backend</Select.Header>
+        <Select.Item value="express">Express</Select.Item>
+        <Select.Item value="fastify">Fastify</Select.Item>
+      </Select.Section>
+    </Select>
+  ),
+};
+
+/**
+ * CustomValueRendering: Items with icons and badges
+ */
+export const CustomValueRendering: Story = {
+  render: () => (
+    <Select label="Status" placeholder="Select status">
+      <Select.Item value="draft" textValue="Draft">
+        <span className="flex items-center gap-2">
+          <span className="h-2 w-2 rounded-full bg-gray-400" />
+          Draft
+        </span>
+      </Select.Item>
+      <Select.Item value="published" textValue="Published">
+        <span className="flex items-center gap-2">
+          <span className="h-2 w-2 rounded-full bg-green-500" />
+          Published
+        </span>
+      </Select.Item>
+      <Select.Item value="archived" textValue="Archived">
+        <span className="flex items-center gap-2">
+          <span className="h-2 w-2 rounded-full bg-red-500" />
+          Archived
+        </span>
+      </Select.Item>
+    </Select>
+  ),
+};
+
+/**
+ * Controlled: Controlled select with state management
+ */
+export const Controlled: Story = {
+  render: function ControlledStory() {
+    const [value, setValue] = useState<string>('react');
+
+    return (
+      <div className="flex flex-col gap-4">
+        <Select
+          label="Framework"
+          value={value}
+          onChange={(newValue) => setValue(newValue as string)}
+        >
+          <Select.Item value="react">React</Select.Item>
+          <Select.Item value="vue">Vue</Select.Item>
+          <Select.Item value="angular">Angular</Select.Item>
+        </Select>
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Selected: <strong>{value}</strong>
+        </p>
+      </div>
+    );
+  },
+};
+
+/**
+ * MultipleSelection: Multiple selection mode
+ */
+export const MultipleSelection: Story = {
+  render: () => (
+    <MultiSelect label="Frameworks" placeholder="Select frameworks">
+      <MultiSelect.Item value="react">React</MultiSelect.Item>
+      <MultiSelect.Item value="vue">Vue</MultiSelect.Item>
+      <MultiSelect.Item value="angular">Angular</MultiSelect.Item>
+      <MultiSelect.Item value="svelte">Svelte</MultiSelect.Item>
+    </MultiSelect>
+  ),
+};
+
+/**
+ * MultipleControlled: Controlled multiple selection
+ */
+export const MultipleControlled: Story = {
+  render: function MultipleControlledStory() {
+    const [values, setValues] = useState<string[]>(['react', 'vue']);
+
+    return (
+      <div className="flex flex-col gap-4">
+        <MultiSelect
+          label="Frameworks"
+          value={values}
+          onChange={(newValues) => setValues(newValues as string[])}
+        >
+          <MultiSelect.Item value="react">React</MultiSelect.Item>
+          <MultiSelect.Item value="vue">Vue</MultiSelect.Item>
+          <MultiSelect.Item value="angular">Angular</MultiSelect.Item>
+          <MultiSelect.Item value="svelte">Svelte</MultiSelect.Item>
+        </MultiSelect>
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Selected: <strong>{values.join(', ')}</strong>
+        </p>
+      </div>
+    );
+  },
+};
+
+/**
+ * EmptyState: Select with no options
+ */
+export const EmptyState: Story = {
+  render: () => (
+    <Select label="Framework" emptyStateMessage="No frameworks available">
+      {/* No children */}
+    </Select>
+  ),
+};
+
+/**
+ * LargeDataset: Select with many options
+ */
+export const LargeDataset: Story = {
+  render: () => (
+    <Select label="Country" placeholder="Select a country">
+      {Array.from({ length: 50 }, (_, i) => {
+        const countryName = `Country ${i + 1}`;
+        return (
+          <Select.Item key={i} value={`country-${i}`} textValue={countryName}>
+            {countryName}
+          </Select.Item>
+        );
+      })}
+    </Select>
+  ),
+};
+
+/**
+ * InForm: Select within a form context
+ */
+export const InForm: Story = {
+  render: () => (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        console.log('Form submitted:', Object.fromEntries(formData));
+      }}
+      className="flex flex-col gap-4"
+    >
+      <Select label="Framework" name="framework" isRequired defaultValue="react">
+        <Select.Item value="react">React</Select.Item>
+        <Select.Item value="vue">Vue</Select.Item>
+        <Select.Item value="angular">Angular</Select.Item>
+      </Select>
+      <button
+        type="submit"
+        className="rounded-md bg-[var(--primary)] px-4 py-2 text-[var(--primary-foreground)]"
+      >
+        Submit
+      </button>
+    </form>
+  ),
+};

package/src/elements/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,284 @@
+/**
+ * Skeleton Component Stories
+ * Storybook stories for Skeleton component demonstrating all variants, compositions, and themes
+ *
+ * @see tasks.md Phase 3.1 (Storybook Stories)
+ * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)
+ */
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { Skeleton } from './Skeleton';
+
+const meta = {
+  title: 'Elements/Skeleton',
+  component: Skeleton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Loading placeholder component with pulse animation and theme-aware styling. WCAG 2.2 AAA compliant (7:1 contrast ratio via semantic tokens). Non-interactive presentational component.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['rectangle', 'circle', 'text'],
+      description: 'Shape of the skeleton placeholder',
+      table: {
+        defaultValue: { summary: 'rectangle' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Custom className for width/height (e.g., "w-20 h-20")',
+    },
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic variant stories
+export const Default: Story = {
+  args: {
+    className: 'w-[250px] h-[20px]',
+  },
+};
+
+export const Circle: Story = {
+  args: {
+    variant: 'circle',
+    className: 'w-12 h-12',
+  },
+};
+
+export const Text: Story = {
+  args: {
+    variant: 'text',
+    className: 'w-[200px]',
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    variant: 'rectangle',
+    className: 'w-[300px] h-[100px]',
+  },
+};
+
+// Variant comparison grid
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="flex items-center gap-4">
+        <span className="w-24 text-sm text-muted-foreground">Rectangle:</span>
+        <Skeleton className="w-[250px] h-[20px]" />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-24 text-sm text-muted-foreground">Circle:</span>
+        <Skeleton variant="circle" className="w-12 h-12" />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-24 text-sm text-muted-foreground">Text:</span>
+        <Skeleton variant="text" className="w-[200px]" />
+      </div>
+    </div>
+  ),
+};
+
+// Composition examples
+export const CardSkeleton: Story = {
+  render: () => (
+    <div className="w-[350px] p-6 border border-border rounded-lg space-y-3">
+      <div className="flex items-center gap-4">
+        <Skeleton variant="circle" className="w-12 h-12" />
+        <div className="space-y-2 flex-1">
+          <Skeleton variant="text" className="w-3/4" />
+          <Skeleton variant="text" className="w-1/2" />
+        </div>
+      </div>
+      <Skeleton className="w-full h-[200px]" />
+      <div className="space-y-2">
+        <Skeleton variant="text" className="w-full" />
+        <Skeleton variant="text" className="w-full" />
+        <Skeleton variant="text" className="w-3/4" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example of a card skeleton with avatar, image, and text placeholders.',
+      },
+    },
+  },
+};
+
+export const AvatarSkeleton: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Skeleton variant="circle" className="w-16 h-16" />
+      <div className="space-y-2">
+        <Skeleton variant="text" className="w-[200px]" />
+        <Skeleton variant="text" className="w-[150px]" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example of an avatar skeleton with circle and text lines.',
+      },
+    },
+  },
+};
+
+export const TableSkeleton: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-3">
+      {/* Table header */}
+      <div className="flex gap-4">
+        <Skeleton variant="text" className="w-1/4" />
+        <Skeleton variant="text" className="w-1/4" />
+        <Skeleton variant="text" className="w-1/4" />
+        <Skeleton variant="text" className="w-1/4" />
+      </div>
+      {/* Table rows */}
+      {[...Array(5)].map((_, i) => (
+        <div key={i} className="flex gap-4">
+          <Skeleton className="w-1/4 h-4" />
+          <Skeleton className="w-1/4 h-4" />
+          <Skeleton className="w-1/4 h-4" />
+          <Skeleton className="w-1/4 h-4" />
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example of a table skeleton with header and multiple rows.',
+      },
+    },
+  },
+};
+
+export const FormSkeleton: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-4">
+      <div className="space-y-2">
+        <Skeleton variant="text" className="w-24" />
+        <Skeleton className="w-full h-10" />
+      </div>
+      <div className="space-y-2">
+        <Skeleton variant="text" className="w-32" />
+        <Skeleton className="w-full h-10" />
+      </div>
+      <div className="space-y-2">
+        <Skeleton variant="text" className="w-28" />
+        <Skeleton className="w-full h-24" />
+      </div>
+      <Skeleton className="w-32 h-10" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example of a form skeleton with labels, inputs, and a button.',
+      },
+    },
+  },
+};
+
+// Theme stories
+export const DarkTheme: Story = {
+  render: () => (
+    <div className="dark bg-background p-4 rounded-lg">
+      <div className="space-y-3">
+        <Skeleton className="w-[250px] h-[20px]" />
+        <Skeleton variant="circle" className="w-12 h-12" />
+        <Skeleton variant="text" className="w-[200px]" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skeleton component in dark theme.',
+      },
+    },
+  },
+};
+
+export const HighContrast: Story = {
+  render: () => (
+    <div className="high-contrast bg-background p-4 rounded-lg">
+      <div className="space-y-3">
+        <Skeleton className="w-[250px] h-[20px]" />
+        <Skeleton variant="circle" className="w-12 h-12" />
+        <Skeleton variant="text" className="w-[200px]" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skeleton component in high contrast theme (WCAG 2.2 AAA - 7:1 contrast ratio).',
+      },
+    },
+  },
+};
+
+export const ColorblindTheme: Story = {
+  render: () => (
+    <div className="colorblind bg-background p-4 rounded-lg">
+      <div className="space-y-3">
+        <Skeleton className="w-[250px] h-[20px]" />
+        <Skeleton variant="circle" className="w-12 h-12" />
+        <Skeleton variant="text" className="w-[200px]" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skeleton component in colorblind theme (optimized for deuteranopia, protanopia, tritanopia).',
+      },
+    },
+  },
+};
+
+// Animation stories
+export const WithAnimation: Story = {
+  args: {
+    className: 'w-[250px] h-[20px]',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skeleton with default pulse animation (2s duration, ease-in-out).',
+      },
+    },
+  },
+};
+
+export const WithReducedMotion: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground mb-4">
+        Note: This story demonstrates reduced motion support. Set your system
+        to prefer reduced motion to see the static skeleton.
+      </p>
+      <Skeleton className="w-[250px] h-[20px]" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skeleton respects prefers-reduced-motion media query (no animation when set).',
+      },
+    },
+  },
+};