@tribepad/themis 1.0.0

package/src/elements/FileField/FileProgress.stories.tsx

@@ -0,0 +1,359 @@
+/**
+ * FileProgress Component Stories
+ * Storybook stories for standalone FileProgress component
+ *
+ * @see future-plan.md Section 2: Upload Progress Indication
+ */
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { FileProgress } from './FileProgress';
+
+// Create mock file helper
+function createMockFile(name: string, size: number = 1024 * 100): File {
+  const file = new File(['x'.repeat(Math.min(size, 100))], name, {
+    type: name.endsWith('.pdf')
+      ? 'application/pdf'
+      : name.endsWith('.jpg') || name.endsWith('.jpeg')
+        ? 'image/jpeg'
+        : name.endsWith('.png')
+          ? 'image/png'
+          : 'application/octet-stream',
+  });
+  // Override size property for display
+  Object.defineProperty(file, 'size', { value: size });
+  return file;
+}
+
+const meta = {
+  title: 'Elements/FileProgress',
+  component: FileProgress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible upload progress indicator using React Aria ProgressBar. Shows upload status with shimmer animation for pending, progress bar for uploading, and error/success states.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    file: {
+      control: false,
+      description: 'File object being uploaded',
+    },
+    progress: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Upload progress percentage (0-100)',
+    },
+    status: {
+      control: 'select',
+      options: ['pending', 'uploading', 'complete', 'error'],
+      description: 'Current upload status',
+    },
+    error: {
+      control: 'text',
+      description: 'Error message (when status is "error")',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Size variant',
+    },
+  },
+} satisfies Meta<typeof FileProgress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Status States
+// ============================================================================
+
+export const Pending: Story = {
+  args: {
+    file: createMockFile('document.pdf', 1024 * 500),
+    progress: 0,
+    status: 'pending',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Pending state shows shimmer animation indicating the file is queued for upload.',
+      },
+    },
+  },
+};
+
+export const Uploading: Story = {
+  args: {
+    file: createMockFile('image.jpg', 1024 * 1024 * 2),
+    progress: 45,
+    status: 'uploading',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Uploading state shows determinate progress bar with percentage.',
+      },
+    },
+  },
+};
+
+export const UploadingHalfway: Story = {
+  args: {
+    file: createMockFile('video.mp4', 1024 * 1024 * 50),
+    progress: 50,
+    status: 'uploading',
+  },
+};
+
+export const UploadingAlmostComplete: Story = {
+  args: {
+    file: createMockFile('archive.zip', 1024 * 1024 * 100),
+    progress: 95,
+    status: 'uploading',
+  },
+};
+
+export const Complete: Story = {
+  args: {
+    file: createMockFile('report.pdf', 1024 * 1024),
+    progress: 100,
+    status: 'complete',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Complete state shows success color. Screen readers announce completion via aria-live region.',
+      },
+    },
+  },
+};
+
+export const Error: Story = {
+  args: {
+    file: createMockFile('large-file.zip', 1024 * 1024 * 500),
+    progress: 30,
+    status: 'error',
+    error: 'Network error: Connection timeout',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Error state shows destructive color and error message. Screen readers announce failure.',
+      },
+    },
+  },
+};
+
+export const ErrorWithRetry: Story = {
+  args: {
+    file: createMockFile('important-doc.pdf', 1024 * 1024 * 5),
+    progress: 65,
+    status: 'error',
+    error: 'Upload failed: Server unavailable',
+    onRetry: () => alert('Retry clicked!'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Error state with retry button. Clicking retry triggers the onRetry callback.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Size Variants
+// ============================================================================
+
+export const Small: Story = {
+  args: {
+    file: createMockFile('small-file.txt', 1024),
+    progress: 60,
+    status: 'uploading',
+    size: 'sm',
+  },
+};
+
+export const Default: Story = {
+  args: {
+    file: createMockFile('medium-file.pdf', 1024 * 500),
+    progress: 60,
+    status: 'uploading',
+    size: 'default',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    file: createMockFile('large-file.zip', 1024 * 1024 * 10),
+    progress: 60,
+    status: 'uploading',
+    size: 'lg',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6 w-[400px]">
+      <div>
+        <h4 className="text-xs text-[var(--muted-foreground)] mb-2">Small</h4>
+        <FileProgress
+          file={createMockFile('small.pdf')}
+          progress={45}
+          status="uploading"
+          size="sm"
+        />
+      </div>
+      <div>
+        <h4 className="text-xs text-[var(--muted-foreground)] mb-2">Default</h4>
+        <FileProgress
+          file={createMockFile('default.pdf')}
+          progress={45}
+          status="uploading"
+          size="default"
+        />
+      </div>
+      <div>
+        <h4 className="text-xs text-[var(--muted-foreground)] mb-2">Large</h4>
+        <FileProgress
+          file={createMockFile('large.pdf')}
+          progress={45}
+          status="uploading"
+          size="lg"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All three size variants for comparison.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// All States Comparison
+// ============================================================================
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[400px]">
+      <div>
+        <h4 className="text-xs text-[var(--muted-foreground)] mb-2">Pending</h4>
+        <FileProgress
+          file={createMockFile('pending.pdf')}
+          progress={0}
+          status="pending"
+        />
+      </div>
+      <div>
+        <h4 className="text-xs text-[var(--muted-foreground)] mb-2">Uploading (25%)</h4>
+        <FileProgress
+          file={createMockFile('uploading.pdf')}
+          progress={25}
+          status="uploading"
+        />
+      </div>
+      <div>
+        <h4 className="text-xs text-[var(--muted-foreground)] mb-2">Complete</h4>
+        <FileProgress
+          file={createMockFile('complete.pdf')}
+          progress={100}
+          status="complete"
+        />
+      </div>
+      <div>
+        <h4 className="text-xs text-[var(--muted-foreground)] mb-2">Error</h4>
+        <FileProgress
+          file={createMockFile('error.pdf')}
+          progress={50}
+          status="error"
+          error="Upload failed"
+          onRetry={() => alert('Retry')}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All four status states shown together for comparison.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Long File Names
+// ============================================================================
+
+export const LongFileName: Story = {
+  args: {
+    file: createMockFile(
+      'this-is-a-very-long-filename-that-should-be-truncated-for-display.pdf',
+      1024 * 1024
+    ),
+    progress: 75,
+    status: 'uploading',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Long file names are truncated with ellipsis while preserving the extension.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Accessibility
+// ============================================================================
+
+export const AccessibilityDemo: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6 w-[400px]">
+      <div className="p-4 rounded-lg border border-[var(--border)]">
+        <h3 className="font-semibold mb-4">Accessibility Features</h3>
+        <ul className="text-sm text-[var(--muted-foreground)] space-y-2 mb-4">
+          <li>- Uses React Aria ProgressBar for ARIA compliance</li>
+          <li>- aria-valuenow/min/max for progress tracking</li>
+          <li>- aria-label with file name for screen readers</li>
+          <li>- aria-live region announces completion/failure</li>
+          <li>- aria-describedby links to error messages</li>
+          <li>- 44x44px minimum touch targets on retry button</li>
+        </ul>
+      </div>
+      <FileProgress
+        file={createMockFile('accessible-demo.pdf')}
+        progress={75}
+        status="uploading"
+      />
+      <FileProgress
+        file={createMockFile('error-demo.pdf')}
+        progress={30}
+        status="error"
+        error="Connection lost"
+        onRetry={() => alert('Retrying...')}
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'FileProgress is fully accessible with WCAG 2.2 AAA compliance. Use a screen reader to hear progress announcements.',
+      },
+    },
+  },
+};