@tribepad/themis 1.0.16 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",

package/src/elements/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,289 @@
+/**
+ * ColorPicker Component Stories
+ *
+ * Storybook stories demonstrating all modes, variants, sizes, and states.
+ */
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ColorPicker } from './ColorPicker';
+import type { Color } from 'react-aria-components';
+
+const meta = {
+  title: 'Elements/ColorPicker',
+  component: ColorPicker,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible color picker with swatch presets, advanced picker, or both. Built on React Aria ColorPicker and ColorSwatchPicker primitives for WCAG 2.2 AAA compliance.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'select',
+      options: ['swatch', 'advanced', 'both'],
+      description: 'Which picker UI to display',
+      table: { defaultValue: { summary: 'both' } },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Size variant',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    label: {
+      control: 'text',
+      description: 'Label text',
+    },
+    description: {
+      control: 'text',
+      description: 'Helper text below the label',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message when isInvalid is true',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the picker is disabled',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Whether a value is required',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the field is in an invalid state',
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description: 'Whether the field is read-only',
+    },
+  },
+} satisfies Meta<typeof ColorPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// =============================================================================
+// Default (Both Mode)
+// =============================================================================
+
+export const Default: Story = {
+  args: {
+    label: 'Brand Color',
+    defaultValue: '#7c3aed',
+  },
+};
+
+// =============================================================================
+// Swatch Only
+// =============================================================================
+
+export const SwatchOnly: Story = {
+  args: {
+    label: 'Pick a color',
+    mode: 'swatch',
+    defaultValue: '#ff0000',
+  },
+};
+
+// =============================================================================
+// Advanced Only
+// =============================================================================
+
+export const AdvancedOnly: Story = {
+  args: {
+    label: 'Custom Color',
+    mode: 'advanced',
+    defaultValue: '#4a86e8',
+  },
+};
+
+// =============================================================================
+// Custom Swatch Colors
+// =============================================================================
+
+export const CustomColors: Story = {
+  args: {
+    label: 'Theme Color',
+    mode: 'swatch',
+    colors: [
+      '#ef4444', '#f97316', '#eab308', '#22c55e',
+      '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899',
+    ],
+    defaultValue: '#3b82f6',
+  },
+};
+
+// =============================================================================
+// With Description
+// =============================================================================
+
+export const WithDescription: Story = {
+  args: {
+    label: 'Brand Color',
+    description: 'Choose the primary color for your brand. This will be used across all marketing materials.',
+    defaultValue: '#7c3aed',
+  },
+};
+
+// =============================================================================
+// Required
+// =============================================================================
+
+export const Required: Story = {
+  args: {
+    label: 'Primary Color',
+    isRequired: true,
+    defaultValue: '#000000',
+  },
+};
+
+// =============================================================================
+// Invalid State
+// =============================================================================
+
+export const Invalid: Story = {
+  args: {
+    label: 'Color',
+    isInvalid: true,
+    errorMessage: 'Please select a valid brand color',
+    defaultValue: '#000000',
+  },
+};
+
+// =============================================================================
+// Disabled
+// =============================================================================
+
+export const Disabled: Story = {
+  args: {
+    label: 'Color',
+    isDisabled: true,
+    defaultValue: '#7c3aed',
+  },
+};
+
+// =============================================================================
+// Read Only
+// =============================================================================
+
+export const ReadOnly: Story = {
+  args: {
+    label: 'Assigned Color',
+    isReadOnly: true,
+    defaultValue: '#22c55e',
+  },
+};
+
+// =============================================================================
+// Size: Small
+// =============================================================================
+
+export const SizeSmall: Story = {
+  args: {
+    label: 'Color',
+    size: 'sm',
+    defaultValue: '#ff0000',
+  },
+};
+
+// =============================================================================
+// Size: Large
+// =============================================================================
+
+export const SizeLarge: Story = {
+  args: {
+    label: 'Color',
+    size: 'lg',
+    defaultValue: '#0000ff',
+  },
+};
+
+// =============================================================================
+// Controlled
+// =============================================================================
+
+function ControlledExample() {
+  const [hex, setHex] = useState('#7c3aed');
+
+  return (
+    <div className="flex flex-col gap-4">
+      <ColorPicker
+        label="Controlled Color"
+        value={hex}
+        onChange={(color: Color) => setHex(color.toString('hex'))}
+      />
+      <p className="text-sm text-[var(--muted-foreground)]">
+        Selected: <code className="font-mono">{hex}</code>
+      </p>
+    </div>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledExample />,
+};
+
+// =============================================================================
+// With Form Name
+// =============================================================================
+
+export const WithFormName: Story = {
+  args: {
+    label: 'Brand Color',
+    name: 'brand_color',
+    defaultValue: '#7c3aed',
+    description: 'This color will be submitted as a hidden form field named "brand_color".',
+  },
+};
+
+// =============================================================================
+// All Sizes Comparison
+// =============================================================================
+
+function AllSizesExample() {
+  return (
+    <div className="flex flex-col gap-6">
+      <ColorPicker label="Small" size="sm" mode="advanced" defaultValue="#ef4444" />
+      <ColorPicker label="Default" size="default" mode="advanced" defaultValue="#3b82f6" />
+      <ColorPicker label="Large" size="lg" mode="advanced" defaultValue="#22c55e" />
+    </div>
+  );
+}
+
+export const AllSizes: Story = {
+  render: () => <AllSizesExample />,
+};
+
+// =============================================================================
+// All Modes Comparison
+// =============================================================================
+
+function AllModesExample() {
+  return (
+    <div className="flex flex-col gap-8">
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-[var(--content-foreground)]">Swatch Only</h3>
+        <ColorPicker mode="swatch" defaultValue="#ff0000" />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-[var(--content-foreground)]">Advanced Only</h3>
+        <ColorPicker mode="advanced" defaultValue="#3b82f6" />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-[var(--content-foreground)]">Both (Default)</h3>
+        <ColorPicker mode="both" defaultValue="#7c3aed" />
+      </div>
+    </div>
+  );
+}
+
+export const AllModes: Story = {
+  render: () => <AllModesExample />,
+};