@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Upload/Upload.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import React, { useState } from 'react';
 import { Upload } from './Upload';
 import { SIZES } from '../../lib/constants/components';
@@ -10,8 +11,68 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The Upload component provides a modern file upload interface with drag & drop functionality, progress tracking, file preview, and validation. It supports single and multiple file uploads, custom file size limits, and provides visual feedback throughout the upload process. Ideal for forms requiring file attachments or media uploads.',
+        component: `
+# Upload
+
+## Overview
+
+Upload provides a modern file upload interface with drag & drop functionality, progress tracking, file preview, and validation. It supports single and multiple file uploads, custom file size limits, and provides visual feedback throughout the upload process. Ideal for forms requiring file attachments or media uploads.
+
+## Features
+
+- Drag & drop file upload
+- Progress tracking
+- File preview
+- Validation
+- Multiple file support
+- Customizable size limits
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Keyboard support: Upload via keyboard navigation
+- Screen reader: File selection and status announced appropriately
+- ARIA support: Proper roles and properties for upload components
+- Focus management: Visible focus indicators maintained
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Upload 
+  title="Drag and Drop files here" 
+  onFileSelect={(files) => console.log(files)} 
+/>
+\`\`\`
+
+### Multiple Files
+
+\`\`\`tsx
+<Upload 
+  multiple={true}
+  title="Drag and Drop files here" 
+  onFileSelect={(files) => console.log(files)} 
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Size variant of the upload component |
+| disabled | boolean | false | Whether the upload component is disabled |
+| maxSizeInMB | number | 5 | Maximum file size in MB |
+| multiple | boolean | false | Whether multiple files can be selected |
+| title | string | 'Drag and Drop files here' | Text for the drag and drop section |
+| supportedFilesText | string | 'Files supported: PDF, XSLS, JPEG, PNG, Scanner' | Text describing supported file types |
+| buttonText | string | 'Choose File' | Text for the upload button |
+| helperText | string | 'Maximum size: 5MB' | Helper text displayed below the button |
+| onFileSelect | (files: File[]) => void | - | Callback when files are selected |
+        `,
       },
     },
   },
@@ -20,43 +81,71 @@ const meta = {
     size: {
       control: { type: 'select' },
       options: SIZES,
-      defaultValue: 'md',
       description: 'Size variant of the upload component',
+      table: {
+        type: { summary: '"sm" | "md" | "lg"' },
+        defaultValue: { summary: 'md' },
+      },
     },
     disabled: {
       control: { type: 'boolean' },
-      defaultValue: false,
       description: 'Whether the upload component is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     maxSizeInMB: {
       control: { type: 'number' },
-      defaultValue: 5,
       description: 'Maximum file size in MB',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 5 },
+      },
     },
     multiple: {
       control: { type: 'boolean' },
-      defaultValue: false,
       description: 'Whether multiple files can be selected',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     title: {
       control: { type: 'text' },
-      defaultValue: 'Drag and Drop files here',
       description: 'Text for the drag and drop section',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Drag and Drop files here' },
+      },
     },
     supportedFilesText: {
       control: { type: 'text' },
-      defaultValue: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
       description: 'Text describing supported file types',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner' },
+      },
     },
     buttonText: {
       control: { type: 'text' },
-      defaultValue: 'Choose File',
       description: 'Text for the upload button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Choose File' },
+      },
     },
     helperText: {
       control: { type: 'text' },
-      defaultValue: 'Maximum size: 5MB',
       description: 'Helper text displayed below the button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Maximum size: 5MB' },
+      },
+    },
+    onFileSelect: {
+      action: 'file selected',
+      description: 'Callback when files are selected',
     },
   },
 } satisfies Meta<typeof Upload>;
@@ -64,8 +153,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Default upload component
-export const Default: Story = {
+export const BasicUsage: Story = {
   render: args => (
     <div style={{ padding: '30px', maxWidth: '600px' }}>
       <Upload {...args} />
@@ -77,6 +165,7 @@ export const Default: Story = {
     supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
     buttonText: 'Choose File',
     helperText: 'Maximum size: 5MB',
+    onFileSelect: fn(),
   },
   parameters: {
     docs: {
@@ -90,48 +179,48 @@ export const Default: Story = {
 // Size Variants
 export const SizeVariants: Story = {
   render: () => (
-  <div style={{ padding: '30px' }}>
-    <div style={{ marginBottom: '40px' }}>
-      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Small Size</h3>
-      <div style={{ maxWidth: '400px' }}>
-        <Upload
-          size="sm"
-          title="Small Upload Area"
-          supportedFilesText="PDF, JPEG, PNG"
-          buttonText="Choose File"
-          helperText="Max: 2MB"
-        />
+    <div style={{ padding: '30px' }}>
+      <div style={{ marginBottom: '40px' }}>
+        <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Small Size</h3>
+        <div style={{ maxWidth: '400px' }}>
+          <Upload
+            size="sm"
+            title="Small Upload Area"
+            supportedFilesText="PDF, JPEG, PNG"
+            buttonText="Choose File"
+            helperText="Max: 2MB"
+          />
+        </div>
       </div>
-    </div>
 
-    <div style={{ marginBottom: '40px' }}>
-      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>
-        Medium Size (Default)
-      </h3>
-      <div style={{ maxWidth: '500px' }}>
-        <Upload
-          size="md"
-          title="Drag and Drop files here"
-          supportedFilesText="Files supported: PDF, XSLS, JPEG, PNG, Scanner"
-          buttonText="Choose File"
-          helperText="Maximum size: 5MB"
-        />
+      <div style={{ marginBottom: '40px' }}>
+        <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>
+          Medium Size (Default)
+        </h3>
+        <div style={{ maxWidth: '500px' }}>
+          <Upload
+            size="md"
+            title="Drag and Drop files here"
+            supportedFilesText="Files supported: PDF, XSLS, JPEG, PNG, Scanner"
+            buttonText="Choose File"
+            helperText="Maximum size: 5MB"
+          />
+        </div>
       </div>
-    </div>
 
-    <div>
-      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Large Size</h3>
-      <div style={{ maxWidth: '700px' }}>
-        <Upload
-          size="lg"
-          title="Drop your files here for upload"
-          supportedFilesText="Supported formats: PDF, Excel, Word, Images, and more"
-          buttonText="Browse Files"
-          helperText="Maximum file size: 10MB per file"
-        />
+      <div>
+        <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Large Size</h3>
+        <div style={{ maxWidth: '700px' }}>
+          <Upload
+            size="lg"
+            title="Drop your files here for upload"
+            supportedFilesText="Supported formats: PDF, Excel, Word, Images, and more"
+            buttonText="Browse Files"
+            helperText="Maximum file size: 10MB per file"
+          />
+        </div>
       </div>
     </div>
-  </div>
   ),
   parameters: {
     docs: {
@@ -142,8 +231,7 @@ export const SizeVariants: Story = {
   },
 };
 
-// Disabled state
-export const Disabled: Story = {
+export const DisabledState: Story = {
   render: args => (
     <div style={{ padding: '30px', maxWidth: '600px' }}>
       <Upload {...args} />
@@ -151,16 +239,17 @@ export const Disabled: Story = {
   ),
   args: {
     size: 'md',
-    title: 'Drag and Drop files here',
-    supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
-    buttonText: 'Choose File',
-    helperText: 'Maximum size: 5MB',
     disabled: true,
+    title: 'Upload Disabled',
+    supportedFilesText: 'PDF, JPEG, PNG',
+    buttonText: 'Choose File',
+    helperText: 'This upload component is disabled',
+    onFileSelect: fn(),
   },
   parameters: {
     docs: {
       description: {
-        story: 'Upload component in disabled state with reduced opacity and no interactions.',
+        story: 'Upload component in disabled state.',
       },
     },
   },
@@ -353,7 +442,6 @@ export const CustomIcon: Story = {
   },
 };
 
-// Multiple file upload
 export const MultipleFiles: Story = {
   render: args => (
     <div style={{ padding: '30px', maxWidth: '600px' }}>
@@ -363,15 +451,16 @@ export const MultipleFiles: Story = {
   args: {
     size: 'md',
     multiple: true,
+    title: 'Drag and Drop files here',
+    supportedFilesText: 'PDF, JPEG, PNG, DOCX',
     buttonText: 'Choose Files',
-    title: 'Upload multiple files',
-    supportedFilesText: 'Select multiple files at once',
-    helperText: 'Maximum size: 5MB per file',
+    helperText: 'Multiple files supported, max size: 5MB each',
+    onFileSelect: fn(),
   },
   parameters: {
     docs: {
       description: {
-        story: 'Upload component configured to accept multiple files at once.',
+        story: 'Upload component configured to allow multiple file selections.',
       },
     },
   },
@@ -383,73 +472,73 @@ export const DragDropDemo: Story = {
     const [dragState, setDragState] = useState<'idle' | 'dragging'>('idle');
     const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
 
-  const handleFileSelect = (files: File[]) => {
-    const fileNames = files.map(file => file.name);
-    setUploadedFiles(prev => [...prev, ...fileNames]);
-  };
+    const handleFileSelect = (files: File[]) => {
+      const fileNames = files.map(file => file.name);
+      setUploadedFiles(prev => [...prev, ...fileNames]);
+    };
 
-  return (
-    <div style={{ padding: '30px' }}>
-      <div style={{ marginBottom: '20px' }}>
-        <h3 style={{ fontSize: '18px', fontWeight: '600', marginBottom: '10px' }}>
-          Interactive Drag & Drop Demo
-        </h3>
-        <p style={{ color: '#666', fontSize: '14px', marginBottom: '20px' }}>
-          Try dragging files over the upload area to see the hover effects, or click to select
-          files.
-        </p>
-      </div>
+    return (
+      <div style={{ padding: '30px' }}>
+        <div style={{ marginBottom: '20px' }}>
+          <h3 style={{ fontSize: '18px', fontWeight: '600', marginBottom: '10px' }}>
+            Interactive Drag & Drop Demo
+          </h3>
+          <p style={{ color: '#666', fontSize: '14px', marginBottom: '20px' }}>
+            Try dragging files over the upload area to see the hover effects, or click to select
+            files.
+          </p>
+        </div>
 
-      <div style={{ maxWidth: '600px', marginBottom: '20px' }}>
-        <Upload
-          title="Drag files here to see the magic ✨"
-          supportedFilesText="PDF, Images, Documents - All welcome!"
-          buttonText="Or click to browse"
-          helperText="Watch the upload area respond to your interactions"
-          onFileSelect={handleFileSelect}
-          multiple={true}
-        />
-      </div>
+        <div style={{ maxWidth: '600px', marginBottom: '20px' }}>
+          <Upload
+            title="Drag files here to see the magic ✨"
+            supportedFilesText="PDF, Images, Documents - All welcome!"
+            buttonText="Or click to browse"
+            helperText="Watch the upload area respond to your interactions"
+            onFileSelect={handleFileSelect}
+            multiple={true}
+          />
+        </div>
 
-      {uploadedFiles.length > 0 && (
-        <div
-          style={{
-            padding: '16px',
-            backgroundColor: '#f8f9fa',
-            borderRadius: '8px',
-            border: '1px solid #e9ecef',
-          }}
-        >
-          <h4
-            style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px', color: '#495057' }}
-          >
-            Selected Files:
-          </h4>
-          <ul style={{ margin: 0, paddingLeft: '20px' }}>
-            {uploadedFiles.map((fileName, index) => (
-              <li key={index} style={{ fontSize: '14px', color: '#6c757d', marginBottom: '4px' }}>
-                {fileName}
-              </li>
-            ))}
-          </ul>
-          <button
-            onClick={() => setUploadedFiles([])}
+        {uploadedFiles.length > 0 && (
+          <div
             style={{
-              marginTop: '12px',
-              padding: '6px 12px',
-              fontSize: '12px',
-              backgroundColor: '#6c757d',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
+              padding: '16px',
+              backgroundColor: '#f8f9fa',
+              borderRadius: '8px',
+              border: '1px solid #e9ecef',
             }}
           >
-            Clear List
-          </button>
-        </div>
-      )}
-    </div>
+            <h4
+              style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px', color: '#495057' }}
+            >
+              Selected Files:
+            </h4>
+            <ul style={{ margin: 0, paddingLeft: '20px' }}>
+              {uploadedFiles.map((fileName, index) => (
+                <li key={index} style={{ fontSize: '14px', color: '#6c757d', marginBottom: '4px' }}>
+                  {fileName}
+                </li>
+              ))}
+            </ul>
+            <button
+              onClick={() => setUploadedFiles([])}
+              style={{
+                marginTop: '12px',
+                padding: '6px 12px',
+                fontSize: '12px',
+                backgroundColor: '#6c757d',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              Clear List
+            </button>
+          </div>
+        )}
+      </div>
     );
   },
   parameters: {
@@ -466,39 +555,41 @@ export const DragDropDemo: Story = {
 export const FileTypeRestrictions: Story = {
   render: () => (
     <div style={{ padding: '30px' }}>
-    <div style={{ marginBottom: '40px' }}>
-      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Images Only</h3>
-      <div style={{ maxWidth: '500px' }}>
-        <Upload
-          title="Upload Images"
-          supportedFilesText="JPEG, PNG, GIF, WebP"
-          buttonText="Choose Images"
-          helperText="Maximum size: 10MB"
-          acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif', 'image/webp']}
-          multiple={true}
-        />
+      <div style={{ marginBottom: '40px' }}>
+        <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Images Only</h3>
+        <div style={{ maxWidth: '500px' }}>
+          <Upload
+            title="Upload Images"
+            supportedFilesText="JPEG, PNG, GIF, WebP"
+            buttonText="Choose Images"
+            helperText="Maximum size: 10MB"
+            acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif', 'image/webp']}
+            multiple={true}
+          />
+        </div>
       </div>
-    </div>
 
-    <div style={{ marginBottom: '40px' }}>
-      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Documents Only</h3>
-      <div style={{ maxWidth: '500px' }}>
-        <Upload
-          title="Upload Documents"
-          supportedFilesText="PDF, Word, Excel, PowerPoint"
-          buttonText="Choose Documents"
-          helperText="Maximum size: 25MB"
-          acceptedFileTypes={[
-            'application/pdf',
-            'application/msword',
-            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-            'application/vnd.ms-excel',
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-          ]}
-        />
+      <div style={{ marginBottom: '40px' }}>
+        <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>
+          Documents Only
+        </h3>
+        <div style={{ maxWidth: '500px' }}>
+          <Upload
+            title="Upload Documents"
+            supportedFilesText="PDF, Word, Excel, PowerPoint"
+            buttonText="Choose Documents"
+            helperText="Maximum size: 25MB"
+            acceptedFileTypes={[
+              'application/pdf',
+              'application/msword',
+              'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+              'application/vnd.ms-excel',
+              'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            ]}
+          />
+        </div>
       </div>
     </div>
-  </div>
   ),
   parameters: {
     docs: {