@tribepad/themis 1.0.16 → 1.0.19

package/src/elements/Chart/Chart.stories.tsx

@@ -29,8 +29,8 @@ const meta = {
   argTypes: {
     type: {
       control: 'select',
-      options: ['bar', 'line'],
-      description: 'Chart type: bar or line',
+      options: ['bar', 'line', 'area', 'scatter', 'pie', 'radar'],
+      description: 'Chart type',
     },
     variant: {
       control: 'select',
@@ -614,3 +614,187 @@ export const AllThemes: Story = {
     </div>
   ),
 };
+
+// ============================================================================
+// Area Chart Stories
+// ============================================================================
+
+const areaData: DataSeries[] = [
+  {
+    name: 'Done',
+    color: '#155e75',
+    data: [
+      { label: 'Week 1', value: 5 },
+      { label: 'Week 2', value: 12 },
+      { label: 'Week 3', value: 18 },
+      { label: 'Week 4', value: 25 },
+    ],
+  },
+  {
+    name: 'In Progress',
+    color: '#1e40af',
+    data: [
+      { label: 'Week 1', value: 8 },
+      { label: 'Week 2', value: 6 },
+      { label: 'Week 3', value: 10 },
+      { label: 'Week 4', value: 7 },
+    ],
+  },
+  {
+    name: 'Backlog',
+    color: '#64748b',
+    data: [
+      { label: 'Week 1', value: 20 },
+      { label: 'Week 2', value: 15 },
+      { label: 'Week 3', value: 10 },
+      { label: 'Week 4', value: 6 },
+    ],
+  },
+];
+
+export const AreaChart: Story = {
+  args: {
+    data: areaData,
+    type: 'area',
+    title: 'Cumulative Flow',
+    description: 'Stacked area showing card distribution over time',
+    xAxisLabel: 'Week',
+    yAxisLabel: 'Cards',
+    stacked: true,
+  },
+};
+
+export const AreaChartUnstacked: Story = {
+  args: {
+    data: areaData.slice(0, 2),
+    type: 'area',
+    title: 'Overlapping Areas',
+    description: 'Non-stacked area chart with overlapping series',
+    xAxisLabel: 'Week',
+    yAxisLabel: 'Cards',
+    stacked: false,
+  },
+};
+
+// ============================================================================
+// Scatter Chart Stories
+// ============================================================================
+
+const scatterData: DataSeries[] = [
+  {
+    name: 'Story',
+    color: '#1e40af',
+    data: [
+      { label: '1 SP', value: 2 },
+      { label: '2 SP', value: 3 },
+      { label: '3 SP', value: 5 },
+      { label: '5 SP', value: 8 },
+      { label: '8 SP', value: 12 },
+    ],
+  },
+  {
+    name: 'Bug',
+    color: '#9a3412',
+    data: [
+      { label: '1 SP', value: 1 },
+      { label: '2 SP', value: 2 },
+      { label: '3 SP', value: 4 },
+      { label: '5 SP', value: 6 },
+    ],
+  },
+];
+
+export const ScatterChart: Story = {
+  args: {
+    data: scatterData,
+    type: 'scatter',
+    title: 'Cycle Time vs Story Points',
+    description: 'Each point represents a completed card',
+    xAxisLabel: 'Story Points',
+    yAxisLabel: 'Cycle Time (days)',
+  },
+};
+
+// ============================================================================
+// Pie / Donut Chart Stories
+// ============================================================================
+
+const pieData: DataSeries[] = [
+  {
+    name: 'Investment',
+    data: [
+      { label: 'Features', value: 12 },
+      { label: 'Bugs', value: 5 },
+      { label: 'Tech Debt', value: 3 },
+      { label: 'Spikes', value: 2 },
+    ],
+  },
+];
+
+export const PieChart: Story = {
+  args: {
+    data: pieData,
+    type: 'pie',
+    title: 'Investment Balance',
+    description: 'Distribution of cards by type',
+  },
+};
+
+export const DonutChart: Story = {
+  args: {
+    data: pieData,
+    type: 'pie',
+    innerRadius: 50,
+    title: 'Investment Balance (Donut)',
+    description: 'Donut variant with inner radius',
+  },
+};
+
+// ============================================================================
+// Radar Chart Stories
+// ============================================================================
+
+const radarData: DataSeries[] = [
+  {
+    name: 'Performance',
+    color: '#1e40af',
+    data: [
+      { label: 'Deploy Freq', value: 75 },
+      { label: 'Lead Time', value: 50 },
+      { label: 'Change Fail', value: 25 },
+      { label: 'Recovery', value: 75 },
+      { label: 'Rework', value: 75 },
+    ],
+  },
+];
+
+export const RadarChart: Story = {
+  args: {
+    data: radarData,
+    type: 'radar',
+    title: 'DORA Performance',
+    description: 'Radar view of DORA metrics',
+  },
+};
+
+export const RadarChartMultiSeries: Story = {
+  args: {
+    data: [
+      ...radarData,
+      {
+        name: 'Target',
+        color: '#155e75',
+        data: [
+          { label: 'Deploy Freq', value: 90 },
+          { label: 'Lead Time', value: 80 },
+          { label: 'Change Fail', value: 90 },
+          { label: 'Recovery', value: 85 },
+          { label: 'Rework', value: 80 },
+        ],
+      },
+    ],
+    type: 'radar',
+    title: 'DORA: Actual vs Target',
+    description: 'Multi-series radar comparing current performance to targets',
+  },
+};

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 />,
+};

package/src/elements/Modal/Modal.stories.tsx

@@ -357,8 +357,8 @@ export const NotDismissable: Story = {
 
 /**
  * Controlled Mode
- * Modal with external state control
- * Demonstrates programmatic open/close
+ * Modal with external state control and no trigger
+ * Demonstrates programmatic open/close without Modal.Trigger
  */
 export const ControlledMode: Story = {
   render: () => {
@@ -368,8 +368,8 @@ export const ControlledMode: Story = {
       return (
         <div className="space-y-4">
           <div className="flex gap-2">
-            <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
-            <Button variant="outline" onClick={() => setIsOpen(false)}>
+            <Button onPress={() => setIsOpen(true)}>Open Modal</Button>
+            <Button variant="outline" onPress={() => setIsOpen(false)}>
               Close Modal
             </Button>
           </div>
@@ -377,15 +377,12 @@ export const ControlledMode: Story = {
             Modal is currently: {isOpen ? 'Open' : 'Closed'}
           </p>
           <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
-            <Modal.Trigger>
-              <Button>Toggle Modal</Button>
-            </Modal.Trigger>
             <Modal.Content>
               <Modal.Header>
                 <Modal.Title>Controlled Modal</Modal.Title>
                 <Modal.Description>
-                  This modal is controlled via external state. You can open or
-                  close it using the buttons above.
+                  This modal is controlled via external state with no
+                  Modal.Trigger. Open and close it using the buttons above.
                 </Modal.Description>
               </Modal.Header>
               <Modal.Footer>