@tribepad/themis 1.0.0

package/src/elements/Progress/Progress.stories.tsx

@@ -0,0 +1,668 @@
+/**
+ * Progress Component Stories
+ * Storybook stories for Progress component demonstrating all variants, states, and themes
+ *
+ * @see tasks.md Phase 3.1 (Storybook Stories)
+ * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)
+ */
+
+import { useState, useEffect } from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { Progress } from './Progress';
+
+const meta = {
+  title: 'Elements/Progress',
+  component: Progress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible progress bar component with React Aria primitives and CVA styling. WCAG 2.2 AAA compliant (7:1 contrast ratio). Supports determinate and indeterminate states, custom value formatting, and multiple size/color variants.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Current progress value (0-100 by default)',
+      table: {
+        defaultValue: { summary: '0' },
+      },
+    },
+    minValue: {
+      control: { type: 'number' },
+      description: 'Minimum value',
+      table: {
+        defaultValue: { summary: '0' },
+      },
+    },
+    maxValue: {
+      control: { type: 'number' },
+      description: 'Maximum value',
+      table: {
+        defaultValue: { summary: '100' },
+      },
+    },
+    isIndeterminate: {
+      control: 'boolean',
+      description: 'Shows indeterminate animation when progress is unknown',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Label text displayed above or beside the progress bar',
+    },
+    showValueLabel: {
+      control: 'boolean',
+      description: 'Show/hide the value label',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+    valueLabel: {
+      control: 'text',
+      description: 'Custom value label text (overrides formatted value)',
+    },
+    labelPosition: {
+      control: 'select',
+      options: ['top', 'side'],
+      description: 'Label position relative to progress bar',
+      table: {
+        defaultValue: { summary: 'top' },
+      },
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'success', 'warning', 'destructive'],
+      description: 'Color variant for semantic meaning',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Size variant controlling track height',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// Basic Stories
+// ============================================
+
+export const Default: Story = {
+  args: {
+    value: 50,
+    'aria-label': 'Default progress',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Empty: Story = {
+  args: {
+    value: 0,
+    'aria-label': 'Empty progress',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Complete: Story = {
+  args: {
+    value: 100,
+    'aria-label': 'Complete progress',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Indeterminate: Story = {
+  args: {
+    isIndeterminate: true,
+    'aria-label': 'Loading',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Indeterminate progress with pulse animation for unknown duration tasks.',
+      },
+    },
+  },
+};
+
+// ============================================
+// Label Stories
+// ============================================
+
+export const WithLabel: Story = {
+  args: {
+    value: 67,
+    label: 'Uploading file...',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithValueLabel: Story = {
+  args: {
+    value: 45,
+    label: 'Progress',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress bar with both label and percentage value displayed.',
+      },
+    },
+  },
+};
+
+export const CustomValueLabel: Story = {
+  args: {
+    value: 3,
+    maxValue: 5,
+    label: 'Step',
+    valueLabel: '3 of 5',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress bar with custom value label override (e.g., "3 of 5" for step progress).',
+      },
+    },
+  },
+};
+
+export const HiddenValueLabel: Story = {
+  args: {
+    value: 75,
+    label: 'Processing',
+    showValueLabel: false,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress bar with value label hidden.',
+      },
+    },
+  },
+};
+
+export const LabelPositionSide: Story = {
+  args: {
+    value: 60,
+    label: 'Progress',
+    labelPosition: 'side',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress bar with label positioned to the side instead of top.',
+      },
+    },
+  },
+};
+
+// ============================================
+// Variant Stories
+// ============================================
+
+export const AllColors: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-6">
+      <div className="space-y-2">
+        <span className="text-sm text-muted-foreground">Default:</span>
+        <Progress value={75} variant="default" aria-label="Default variant" />
+      </div>
+      <div className="space-y-2">
+        <span className="text-sm text-muted-foreground">Success:</span>
+        <Progress value={100} variant="success" aria-label="Success variant" />
+      </div>
+      <div className="space-y-2">
+        <span className="text-sm text-muted-foreground">Warning:</span>
+        <Progress value={85} variant="warning" aria-label="Warning variant" />
+      </div>
+      <div className="space-y-2">
+        <span className="text-sm text-muted-foreground">Destructive:</span>
+        <Progress value={95} variant="destructive" aria-label="Destructive variant" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All color variants for semantic meaning: default, success, warning, destructive.',
+      },
+    },
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-6">
+      <div className="space-y-2">
+        <span className="text-sm text-muted-foreground">Small (4px):</span>
+        <Progress value={60} size="sm" aria-label="Small size" />
+      </div>
+      <div className="space-y-2">
+        <span className="text-sm text-muted-foreground">Default (8px):</span>
+        <Progress value={60} size="default" aria-label="Default size" />
+      </div>
+      <div className="space-y-2">
+        <span className="text-sm text-muted-foreground">Large (12px):</span>
+        <Progress value={60} size="lg" aria-label="Large size" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All size variants: sm (4px), default (8px), lg (12px).',
+      },
+    },
+  },
+};
+
+export const Success: Story = {
+  args: {
+    value: 100,
+    variant: 'success',
+    label: 'Upload complete!',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Warning: Story = {
+  args: {
+    value: 85,
+    variant: 'warning',
+    label: 'Storage almost full',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Destructive: Story = {
+  args: {
+    value: 95,
+    variant: 'destructive',
+    label: 'Critical: Storage full',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// ============================================
+// Theme Stories
+// ============================================
+
+export const DarkTheme: Story = {
+  render: () => (
+    <div className="dark bg-background p-6 rounded-lg w-[400px]">
+      <div className="space-y-4">
+        <Progress value={50} label="Default" />
+        <Progress value={100} variant="success" label="Success" />
+        <Progress isIndeterminate label="Loading..." />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress component in dark theme.',
+      },
+    },
+  },
+};
+
+export const HighContrast: Story = {
+  render: () => (
+    <div className="high-contrast bg-background p-6 rounded-lg w-[400px]">
+      <div className="space-y-4">
+        <Progress value={50} label="Default" />
+        <Progress value={100} variant="success" label="Success" />
+        <Progress isIndeterminate label="Loading..." />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress component in high contrast theme (WCAG 2.2 AAA - 7:1 contrast ratio).',
+      },
+    },
+  },
+};
+
+export const ColorblindTheme: Story = {
+  render: () => (
+    <div className="colorblind bg-background p-6 rounded-lg w-[400px]">
+      <div className="space-y-4">
+        <Progress value={50} label="Default" />
+        <Progress value={100} variant="success" label="Success" />
+        <Progress value={85} variant="warning" label="Warning" />
+        <Progress value={95} variant="destructive" label="Critical" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress component in colorblind theme (optimized for deuteranopia, protanopia, tritanopia).',
+      },
+    },
+  },
+};
+
+// ============================================
+// Animation Stories
+// ============================================
+
+export const IndeterminateAnimated: Story = {
+  args: {
+    isIndeterminate: true,
+    label: 'Loading data...',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Indeterminate progress with pulse/fade animation (consistent with Skeleton component).',
+      },
+    },
+  },
+};
+
+export const ReducedMotion: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-4">
+      <p className="text-sm text-muted-foreground">
+        Note: Set your system to prefer reduced motion to see the static indeterminate state.
+      </p>
+      <Progress isIndeterminate label="Loading..." />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress respects prefers-reduced-motion media query (no animation when set).',
+      },
+    },
+  },
+};
+
+// ============================================
+// Use Case Stories
+// ============================================
+
+export const FileUpload: Story = {
+  render: function FileUploadStory() {
+    const [progress, setProgress] = useState(0);
+    const [status, setStatus] = useState<'idle' | 'uploading' | 'complete'>('idle');
+
+    useEffect(() => {
+      if (status === 'uploading' && progress < 100) {
+        const timer = setTimeout(() => {
+          setProgress((prev) => Math.min(prev + 10, 100));
+        }, 500);
+        return () => clearTimeout(timer);
+      } else if (progress === 100) {
+        setStatus('complete');
+      }
+    }, [status, progress]);
+
+    const handleStart = () => {
+      setProgress(0);
+      setStatus('uploading');
+    };
+
+    const handleReset = () => {
+      setProgress(0);
+      setStatus('idle');
+    };
+
+    return (
+      <div className="w-[400px] space-y-4">
+        <Progress
+          value={progress}
+          label={status === 'complete' ? 'Upload complete!' : 'Uploading document.pdf...'}
+          variant={status === 'complete' ? 'success' : 'default'}
+        />
+        <div className="flex gap-2">
+          <button
+            onClick={handleStart}
+            disabled={status === 'uploading'}
+            className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md disabled:opacity-50"
+          >
+            Start Upload
+          </button>
+          <button
+            onClick={handleReset}
+            className="px-4 py-2 text-sm border border-input rounded-md"
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive file upload progress simulation with status changes.',
+      },
+    },
+  },
+};
+
+export const StepProgress: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-6">
+      <Progress
+        value={1}
+        maxValue={4}
+        label="Account Setup"
+        valueLabel="Step 1 of 4"
+      />
+      <Progress
+        value={2}
+        maxValue={4}
+        label="Profile Information"
+        valueLabel="Step 2 of 4"
+      />
+      <Progress
+        value={3}
+        maxValue={4}
+        label="Preferences"
+        valueLabel="Step 3 of 4"
+      />
+      <Progress
+        value={4}
+        maxValue={4}
+        label="Complete!"
+        valueLabel="Step 4 of 4"
+        variant="success"
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Step progress indicator with custom value labels (e.g., "Step 1 of 4").',
+      },
+    },
+  },
+};
+
+export const StorageUsage: Story = {
+  render: () => {
+    const usedGB = 7.5;
+    const totalGB = 10;
+    const percentUsed = (usedGB / totalGB) * 100;
+    const variant = percentUsed > 90 ? 'destructive' : percentUsed > 75 ? 'warning' : 'default';
+
+    return (
+      <div className="w-[400px]">
+        <Progress
+          value={usedGB}
+          maxValue={totalGB}
+          label="Storage"
+          valueLabel={`${usedGB} GB of ${totalGB} GB`}
+          variant={variant}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Storage usage indicator with semantic color based on usage percentage.',
+      },
+    },
+  },
+};
+
+export const MultipleProgress: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-4">
+      <Progress
+        value={100}
+        label="Task 1: Download files"
+        variant="success"
+        size="sm"
+      />
+      <Progress
+        value={75}
+        label="Task 2: Process data"
+        size="sm"
+      />
+      <Progress
+        value={30}
+        label="Task 3: Generate report"
+        size="sm"
+      />
+      <Progress
+        isIndeterminate
+        label="Task 4: Waiting..."
+        size="sm"
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Multiple progress bars showing task list with different states.',
+      },
+    },
+  },
+};
+
+export const LoadingData: Story = {
+  args: {
+    isIndeterminate: true,
+    label: 'Fetching data from server...',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Indeterminate progress for data loading with unknown duration.',
+      },
+    },
+  },
+};