@capillarytech/blaze-ui 5.20.0 → 5.22.0

package/CapUploader/README.md

@@ -1,313 +0,0 @@
-# CapUploader
-
-A wrapper component around Ant Design's Upload component that provides consistent styling and a simplified API for file uploads in Capillary applications.
-
-## Migration from cap-ui-library
-
-This component has been migrated from `@capillarytech/cap-ui-library` to `@capillarytech/blaze-ui` with the following changes:
-
-- Converted from JavaScript to TypeScript
-- Converted from styled-components to SCSS modules
-- Migrated to Ant Design v6 APIs
-- Added TypeScript interfaces for props
-- Maintained backward compatibility with the existing API
-
-## Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-The component maintains backward compatibility with all existing props. All Ant Design Upload props are passed through directly to the underlying Upload component.
-
-## Deprecated Props
-
-### Ant Design Upload Component Props
-
-**No deprecated props** - The Ant Design Upload component does not have deprecated props in v6 that require backward compatibility mapping.
-
-The Upload component in Ant Design v6 does not have any deprecated props that were renamed or removed. Unlike popup components (Dropdown, Tooltip, etc.), the Upload component did not undergo prop name changes in the v5 to v6 migration.
-
-**Verified Ant Design Components Used:**
-- **Upload** - No deprecated props in Ant Design v6
-
-**Common Ant Design deprecated props that do NOT apply to Upload:**
-- `visible` → `open` (not applicable - Upload is not a popup component)
-- `onVisibleChange` → `onOpenChange` (not applicable - Upload is not a popup component)
-- `overlayClassName` → `classNames.root` (not applicable - Upload doesn't have overlay)
-- `overlayStyle` → `styles.root` (not applicable - Upload doesn't have overlay)
-
-## Prop Changes
-
-### Cap Component Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `undefined` | Additional CSS class name for the uploader wrapper |
-| All other Ant Design Upload props | `UploadProps` | - | Passed through to underlying Upload component |
-
-### Ant Design Upload Props (All Supported)
-
-All Ant Design Upload props are supported and passed through directly. Common props include:
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `action` | `string` | Upload URL endpoint |
-| `accept` | `string` | Accepted file types (e.g., ".jpg,.png") |
-| `beforeUpload` | `(file: File, fileList: File[]) => boolean \| Promise<boolean>` | Validation function called before upload |
-| `fileList` | `UploadFile[]` | Controlled file list |
-| `onChange` | `(info: UploadChangeParam) => void` | Callback when file list changes |
-| `onRemove` | `(file: UploadFile) => boolean \| void \| Promise<boolean \| void>` | Callback when file is removed |
-| `disabled` | `boolean` | Whether upload is disabled |
-| `multiple` | `boolean` | Allow multiple files |
-| `maxCount` | `number` | Maximum number of files |
-| `listType` | `'text' \| 'picture' \| 'picture-card'` | Upload list style |
-| `showUploadList` | `boolean \| UploadListProps` | Show upload list |
-| `name` | `string` | File field name (default: 'file') |
-| `headers` | `Record<string, string>` | Custom headers |
-| `data` | `Record<string, any>` | Additional form data |
-| `method` | `'post' \| 'put'` | HTTP method (default: 'post') |
-| `withCredentials` | `boolean` | Send cookies with request |
-| `openFileDialogOnClick` | `boolean` | Open file dialog on click (default: true) |
-
-For a complete list of all supported props, refer to the [Ant Design Upload documentation](https://ant.design/components/upload).
-
-## API Changes
-
-- **TypeScript Support:** Full TypeScript support with exported `CapUploaderProps` interface
-- **Ant Design Version:** Upgraded from Ant Design v3 to v6
-- **Styling:** Migrated from styled-components to SCSS modules
-
-## Behavioral Changes
-
-None. The component behaves identically to the original cap-ui-library implementation.
-
-## Static Properties
-
-The component exposes `CapUploader.CapDragger` for drag-and-drop uploads:
-
-```tsx
-import { CapUploader } from '@capillarytech/blaze-ui';
-
-<CapUploader.CapDragger
-  action="/upload"
-  onChange={handleChange}
->
-  <p className="ant-upload-drag-icon">📁</p>
-  <p className="ant-upload-text">Click or drag file to this area to upload</p>
-</CapUploader.CapDragger>
-```
-
-## Usage Examples
-
-### Basic Usage
-
-```tsx
-import { CapUploader } from '@capillarytech/blaze-ui';
-
-function FileUpload() {
-  const handleChange = (info) => {
-    console.log('File list:', info.fileList);
-  };
-
-  return (
-    <CapUploader
-      action="/api/upload"
-      onChange={handleChange}
-    />
-  );
-}
-```
-
-### Controlled File List
-
-```tsx
-import { CapUploader } from '@capillarytech/blaze-ui';
-import { useState } from 'react';
-import type { UploadFile } from 'antd';
-
-function ControlledUpload() {
-  const [fileList, setFileList] = useState<UploadFile[]>([]);
-
-  const handleChange = (info) => {
-    setFileList(info.fileList);
-  };
-
-  return (
-    <CapUploader
-      action="/api/upload"
-      fileList={fileList}
-      onChange={handleChange}
-    />
-  );
-}
-```
-
-### File Type Validation
-
-```tsx
-import { CapUploader } from '@capillarytech/blaze-ui';
-import { message } from 'antd';
-
-function ValidatedUpload() {
-  const handleBeforeUpload = (file) => {
-    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
-    if (!isJPG) {
-      message.error('You can only upload JPG/PNG files!');
-      return false;
-    }
-    const isLt2M = file.size / 1024 / 1024 < 2;
-    if (!isLt2M) {
-      message.error('Image must be smaller than 2MB!');
-      return false;
-    }
-    return true;
-  };
-
-  return (
-    <CapUploader
-      action="/api/upload"
-      accept=".jpg,.jpeg,.png"
-      beforeUpload={handleBeforeUpload}
-    />
-  );
-}
-```
-
-### Multiple Files with Limit
-
-```tsx
-import { CapUploader } from '@capillarytech/blaze-ui';
-
-function MultipleUpload() {
-  return (
-    <CapUploader
-      action="/api/upload"
-      multiple
-      maxCount={5}
-    />
-  );
-}
-```
-
-### Picture Upload
-
-```tsx
-import { CapUploader } from '@capillarytech/blaze-ui';
-
-function PictureUpload() {
-  return (
-    <CapUploader
-      action="/api/upload"
-      listType="picture"
-      accept="image/*"
-    />
-  );
-}
-```
-
-### Drag and Drop Upload
-
-```tsx
-import { CapUploader } from '@capillarytech/blaze-ui';
-
-function DragDropUpload() {
-  return (
-    <CapUploader.CapDragger
-      action="/api/upload"
-      multiple
-    >
-      <p className="ant-upload-drag-icon">📁</p>
-      <p className="ant-upload-text">Click or drag file to this area to upload</p>
-      <p className="ant-upload-hint">Support for single or bulk upload</p>
-    </CapUploader.CapDragger>
-  );
-}
-```
-
-## Migration Steps for Consumers
-
-### 1. Update Import
-
-```tsx
-// Before (cap-ui-library)
-import CapUploader from '@capillarytech/cap-ui-library/CapUploader';
-
-// After (blaze-ui)
-import { CapUploader } from '@capillarytech/blaze-ui';
-// or
-import CapUploader from '@capillarytech/blaze-ui/CapUploader';
-```
-
-### 2. Usage (No Changes Required)
-
-All existing code will continue to work without modifications:
-
-```tsx
-// Works exactly the same
-<CapUploader
-  action="/api/upload"
-  onChange={handleChange}
-  multiple
-  maxCount={5}
-/>
-```
-
-### 3. TypeScript (New Benefit)
-
-If using TypeScript, you now get full type checking:
-
-```tsx
-import { CapUploader, CapUploaderProps } from '@capillarytech/blaze-ui';
-import type { UploadFile } from 'antd';
-
-const props: CapUploaderProps = {
-  action: '/api/upload',
-  accept: '.jpg,.png',
-  multiple: true,
-  maxCount: 5,
-};
-
-<CapUploader {...props} />
-```
-
-## TypeScript
-
-```tsx
-import { CapUploader, CapUploaderProps } from '@capillarytech/blaze-ui';
-import type { UploadFile, UploadChangeParam } from 'antd';
-
-const props: CapUploaderProps = {
-  className: 'custom-uploader',
-  action: '/api/upload',
-  accept: '.jpg,.jpeg,.png',
-  multiple: true,
-  maxCount: 5,
-  onChange: (info: UploadChangeParam) => {
-    console.log('Upload info:', info);
-  },
-};
-
-<CapUploader {...props} />
-```
-
-## Styling
-
-The component uses SCSS modules with the following class structure:
-
-- `.cap-uploader-v2` - Main wrapper class
-- All Ant Design Upload classes are preserved and work as expected
-
-All styles use SCSS variables from `components/styled/variables` for consistency.
-
-## Notes
-
-- The component wraps Ant Design's Upload component and passes all props through directly
-- All Ant Design Upload props are supported through prop spreading
-- The component maintains backward compatibility with existing designs and class names
-- `CapUploader.CapDragger` is available for drag-and-drop upload functionality
-- No deprecated props require migration - the Upload component did not have prop changes in Ant Design v6
-
-## References
-
-- [Ant Design Upload Component](https://ant.design/components/upload)
-- [Ant Design v6 Migration Guide](https://ant.design/docs/react/migration-v6)
-- [CapUploader Storybook Stories](../../stories/CapUploader.stories.tsx)

package/CapUploader/Status.md

@@ -1,76 +0,0 @@
-# Migration Status: CapUploader
-
-**Last Updated**: 2026-02-06 19:21:53
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [x] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 1.5**: Export component in blaze-ui/components/index.ts
-- [x] **Step 2**: Migration Prompt 2 (Storybook support)
-- [x] **Step 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
-- [x] **Step 3**: Migration Prompt 3 (Unit tests)
-- [x] **Step 4**: Migration Prompt 4 (Visual test cases)
-- [x] **Step 5**: Linting (ESLint)
-- [x] **Step 6**: Pre-build Validation
-- [x] **Step 7**: Build blaze-ui
-- [x] **Step 8**: Visual Testing
-- [x] **Step 9**: CSS Analysis (if mismatches found)
-- [x] **Step 9.5**: CSS Analysis Completed
-- [x] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [x] **Step 11**: Create Pull Request
-
-## Deprecated Props Verification
-
-✅ **Verification Complete** - 2026-01-31
-
-### Ant Design Components Used
-- **Upload** - No deprecated props in Ant Design v6
-
-### Verification Results
-
-**No deprecated props found** - The Ant Design Upload component does not have deprecated props in v6 that require backward compatibility mapping.
-
-**Analysis:**
-- CapUploader wraps Ant Design's Upload component
-- Upload component is not a popup component (unlike Dropdown, Tooltip, etc.)
-- Upload component did not undergo prop name changes in Ant Design v5 → v6 migration
-- Common deprecated props (`visible` → `open`, `overlayClassName` → `classNames.root`, etc.) do not apply to Upload
-
-**Documentation:**
-- ✅ README.md created with complete "Deprecated Props" section
-- ✅ Documented that Upload has no deprecated props
-- ✅ Verified against ANTD_V6_MIGRATION.md - Upload not listed in deprecated API fixes
-- ✅ No backward compatibility code needed
-- ✅ No @deprecated JSDoc comments needed (no deprecated props exist)
-
-**Reference:**
-- README.md: `/components/CapUploader/README.md`
-- Migration Guide: `/docs/ANTD_V6_MIGRATION.md`
-
-**Note**: Step 2.5 is REQUIRED and enforced. 
-- Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
-- Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
-- Skip: If original component doesn't exist in cap-ui-library
-- All deprecated Ant Design props and prop changes must be documented before proceeding.
-
-## Visual Testing Results
-
-**Last Test**: 2026-02-06 19:21:53
-**Maximum Mismatch**: 15.62%
-
-### Mismatched Variants:
-- picture-card:15.62%
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-31 16:50:31
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapUploader/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapUploader/tests/USE_CASES_ANALYSIS.md

@@ -1,225 +0,0 @@
-# CapUploader Use Cases Analysis
-
-**Date**: 2026-01-31  
-**Status**: Comprehensive test suite created
-
-## Phase 0: Use Cases Extraction
-
-**Note**: Google Sheets access was not available during test creation. Tests were created based on:
-- Component API (`types.ts`)
-- Storybook stories (`CapUploader.stories.tsx`)
-- Ant Design Upload documentation patterns
-- Common upload component use cases from codebase
-
-## Phase 1: Use Cases NOT Fulfilled by Component
-
-### Component Architecture
-
-CapUploader is a **thin wrapper** around Ant Design's Upload component. It provides:
-1. Consistent className (`cap-uploader-v2`)
-2. Static property `CapDragger` for drag-and-drop functionality
-3. Pass-through of all Ant Design Upload props
-
-### Use Cases Analysis
-
-#### ✅ Fulfilled (via Ant Design Upload)
-
-The following use cases are **fulfilled** through Ant Design Upload props:
-
-1. **Basic File Upload**
-   - ✅ Single file upload
-   - ✅ Multiple file upload (`multiple` prop)
-   - ✅ File type restrictions (`accept` prop)
-   - ✅ File size validation (`beforeUpload` callback)
-   - ✅ Maximum file count (`maxCount` prop)
-
-2. **Upload Configuration**
-   - ✅ Custom upload endpoint (`action` prop)
-   - ✅ HTTP method selection (`method` prop: 'post' | 'put')
-   - ✅ Custom headers (`headers` prop)
-   - ✅ Additional form data (`data` prop)
-   - ✅ CORS credentials (`withCredentials` prop)
-
-3. **File List Management**
-   - ✅ Controlled file list (`fileList` prop)
-   - ✅ File list change callbacks (`onChange` callback)
-   - ✅ File removal (`onRemove` callback)
-   - ✅ File preview (`onPreview` callback)
-   - ✅ File download (`onDownload` callback)
-
-4. **UI Customization**
-   - ✅ List type variants (`listType`: 'text' | 'picture' | 'picture-card')
-   - ✅ Show/hide upload list (`showUploadList` prop)
-   - ✅ Custom item rendering (`itemRender` prop)
-   - ✅ Custom icon rendering (`iconRender` prop)
-   - ✅ Custom preview function (`previewFile` prop)
-
-5. **Validation & Error Handling**
-   - ✅ Pre-upload validation (`beforeUpload` callback)
-   - ✅ Error state handling (via `fileList` status)
-   - ✅ Upload progress tracking (via `fileList` percent)
-
-6. **Drag and Drop**
-   - ✅ Drag-and-drop upload (`CapUploader.CapDragger`)
-
-7. **Accessibility**
-   - ✅ Keyboard navigation (inherited from Ant Design)
-   - ✅ ARIA attributes support (via props)
-
-#### ⚠️ Potentially Missing (Requires Wrapper Logic)
-
-The following use cases might **require additional wrapper functionality** that is not currently implemented:
-
-1. **Built-in File Size Validation**
-   - ❌ No built-in `maxSize` prop (requires `beforeUpload` callback)
-   - ❌ No built-in `minSize` prop (requires `beforeUpload` callback)
-   - **Workaround**: Use `beforeUpload` callback for validation
-
-2. **Built-in File Type Validation Messages**
-   - ❌ No automatic error messages for invalid file types
-   - **Workaround**: Use `beforeUpload` callback with custom messaging
-
-3. **CSV-Specific Features**
-   - ❌ No built-in CSV parsing/validation (see `CapCSVFileUploader` for CSV-specific needs)
-   - ❌ No built-in row count display
-   - **Note**: This is intentional - CSV features are in separate component
-
-4. **Custom Upload UI Components**
-   - ❌ No pre-built upload button component (requires custom children)
-   - ❌ No pre-built upload area component (use `CapDragger` instead)
-   - **Note**: This is by design - component is a wrapper, not a full UI kit
-
-5. **Advanced Progress Tracking**
-   - ❌ No built-in progress percentage display (Ant Design shows progress bar)
-   - ❌ No built-in upload speed calculation
-   - **Workaround**: Use `onChange` callback with `file.percent`
-
-6. **Batch Operations**
-   - ❌ No built-in "select all" / "remove all" functionality
-   - **Workaround**: Implement via `fileList` state management
-
-7. **File Transformation**
-   - ❌ No built-in image compression/resizing
-   - ❌ No built-in file format conversion
-   - **Workaround**: Use `beforeUpload` or `customRequest` for transformations
-
-8. **Upload Queue Management**
-   - ❌ No built-in upload queue/pause/resume functionality
-   - **Workaround**: Implement via `customRequest` with manual queue management
-
-### Recommendations
-
-1. **For Basic Upload Needs**: ✅ CapUploader is sufficient
-2. **For CSV Upload**: Use `CapCSVFileUploader` component
-3. **For Advanced Features**: Extend CapUploader with wrapper logic or use `customRequest`
-4. **For Drag-and-Drop**: Use `CapUploader.CapDragger`
-
-### Component Design Philosophy
-
-CapUploader follows a **minimal wrapper** approach:
-- ✅ Provides consistent styling (`cap-uploader-v2` class)
-- ✅ Exposes Ant Design Upload functionality
-- ✅ Maintains backward compatibility
-- ❌ Does NOT add wrapper-specific features (by design)
-
-This design allows:
-- Maximum flexibility (all Ant Design features accessible)
-- Minimal maintenance overhead
-- Easy migration from Ant Design Upload to CapUploader
-
-## Phase 2: Test Coverage
-
-### Test Files Created
-
-1. **`CapUploader.test.tsx`** - Comprehensive test suite (758 lines)
-2. **`CapUploader.mockData.ts`** - Reusable test data and props
-
-### Test Coverage Areas
-
-✅ **Default Rendering and Initialization** (5 tests)
-- Base class application
-- Custom className handling
-- CapDragger static property
-
-✅ **Prop Variations** (15+ tests)
-- Basic configuration props
-- File list management
-- List type variants
-- HTTP configuration
-
-✅ **User Interactions** (5+ tests)
-- File selection
-- Multiple file selection
-- Disabled state handling
-- File type restrictions
-
-✅ **Callbacks and Event Handlers** (10+ tests)
-- onChange callback
-- onRemove callback
-- beforeUpload callback
-- customRequest callback
-- onPreview callback
-- onDownload callback
-
-✅ **Edge Cases** (10+ tests)
-- Empty/undefined values
-- Max count limits
-- Large files
-- Mixed file statuses
-- Error handling
-- Promise-based beforeUpload
-
-✅ **Accessibility** (6 tests)
-- Keyboard navigation
-- ARIA attributes
-- Disabled state
-- Focus management
-
-✅ **Backward Compatibility** (3 tests)
-- Ant Design props pass-through
-- className functionality
-- Rest props handling
-
-✅ **Data Flow and State Management** (4 tests)
-- Controlled fileList updates
-- File removal logic
-- State synchronization
-
-✅ **Conditional Rendering** (5 tests)
-- showUploadList toggle
-- List type rendering
-- Disabled state rendering
-
-✅ **CapDragger Static Property** (4 tests)
-- Component rendering
-- Props pass-through
-- File selection
-- className handling
-
-### Total Test Count
-
-**~70+ test cases** covering all major functionality areas.
-
-### Test Patterns Used
-
-- ✅ `it.each` for repetitive prop variations
-- ✅ Reusable helper functions (`renderWithProps`)
-- ✅ Mock data in separate file
-- ✅ Focus on functional behavior (not styling)
-- ✅ User interaction testing with `@testing-library/user-event`
-- ✅ Accessibility testing
-- ✅ Edge case coverage
-
-## Next Steps
-
-1. **Run Test Suite**: Execute tests to verify coverage
-2. **Coverage Report**: Generate coverage report to verify 90%+ target
-3. **Google Sheets Sync**: If access becomes available, cross-reference use cases
-4. **Documentation**: Update README with test coverage information
-
-## Notes
-
-- Tests follow codebase patterns from `CapButton`, `CapTag`, `CapLabel` tests
-- No component source code was modified (tests only)
-- Tests use `@testing-library/react` (not enzyme, matching codebase pattern)
-- Mock data is reusable and follows DRY principles