@capillarytech/blaze-ui 5.20.0 → 5.22.0

package/CapCustomCard/README.md

@@ -1,182 +0,0 @@
-# CapCustomCard
-
-A custom Card component wrapper around Ant Design's Card component that provides specialized styling and content rendering for various communication channel types (SMS, Email, Mobile Push, WeChat, etc.).
-
-## Migration from Ant Design v3 to v6
-
-This component has been migrated from Ant Design v3 to v6 with the following changes:
-
-### Breaking Changes
-
-#### 1. API Changes
-
-| v3 API | v6 API | Status | Migration Guide |
-|--------|--------|--------|-----------------|
-| `Avatar icon="user"` | `Avatar icon={<UserOutlined />}` | Breaking | Import `UserOutlined` from `@ant-design/icons` and use as React component |
-
-**Example Migration:**
-
-```tsx
-// ❌ v3 (deprecated)
-import { Avatar } from 'antd';
-<Avatar icon="user" />
-
-// ✅ v6 (current)
-import { Avatar } from 'antd-v5';
-import { UserOutlined } from '@ant-design/icons';
-<Avatar icon={<UserOutlined />} />
-```
-
-### Deprecated Props
-
-**No deprecated props exposed to consumers** - This component doesn't expose any deprecated Ant Design props to consumers. All Ant Design Card props passed via `{...rest}` are supported and passed through to the underlying Card component.
-
-#### Internal Changes
-
-The component uses Ant Design v6 APIs internally:
-- **Avatar icon prop**: Updated from string (`icon="user"`) to React component (`icon={<UserOutlined />}`)
-- **Note**: This change is internal to the component. Consumers don't need to change their code.
-
-### Backward Compatibility
-
-**Full backward compatibility** - All existing code using CapCustomCard will continue to work without changes. The component maintains the same API surface area and behavior as the v3 version.
-
-### Style Changes
-
-**Approach**: The component uses `:global()` wrapper in SCSS (nested inside component classes) to target Ant Design's internal Card component structure. All styling has been preserved from the v3 version.
-
-### Code Improvements
-
-1. **TypeScript Migration**: Converted from PropTypes to TypeScript interfaces
-2. **Functional Component**: Converted CapCustomCardList from class component to functional component
-3. **Icon Updates**: Updated Avatar icon prop to use React component instead of string
-4. **Type Safety**: Added proper TypeScript types for all helper functions and props
-5. **Import Updates**: Updated imports to use `antd-v5` instead of `antd`
-6. **CSS Modules**: Updated to use CSS modules with `import * as styles`
-
-### What Stayed the Same
-
-- All card types and channel-specific rendering logic
-- All styling and visual appearance
-- Component API surface area
-- Static method `getRichMediaPreview`
-- `CapCustomCardList` subcomponent access via `CapCustomCard.CapCustomCardList`
-- DOM structure (no wrapper divs added)
-
-### What Changed
-
-- **Removed**: PropTypes dependency
-- **Updated**: Ant Design imports from `antd` to `antd-v5`
-- **Updated**: Avatar icon prop from string to React component (internal change)
-- **Added**: TypeScript type definitions in `types.ts`
-- **Updated**: CapCustomCardList converted to functional component with TypeScript
-
-### Props
-
-CapCustomCard accepts all props from Ant Design's [Card component](https://ant.design/components/card) plus:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | - | Additional CSS class name |
-| `type` | `string` | - | Card type/channel (SMS, EMAIL, MOBILEPUSH, WECHAT, etc.) |
-| `content` | `React.ReactNode` | - | Card content to display |
-| `hoverOption` | `React.ReactNode` | - | Content to show on hover |
-| `url` | `string` | - | Image URL for card |
-| `width` | `number \| string` | - | Image width |
-| `height` | `number \| string` | - | Image height |
-| `cardTop` | `React.ReactNode` | - | Content to render above the card |
-| `FBDynamicComponent` | `React.ComponentType` | - | Dynamic component for Facebook card type |
-| `buttonText` | `React.ReactNode` | - | Button text for Viber card type |
-| `fbType` | `string` | - | Facebook card type ('list' or default) |
-| `mediaContent` | `React.ReactNode` | - | Custom media content for Viber |
-| `isNewMobilePush` | `boolean` | - | Whether to use new mobile push format |
-
-### Usage
-
-```tsx
-import { CapCustomCard } from '@capillarytech/blaze-ui';
-
-// Basic usage
-<CapCustomCard type="SMS" content="Hello world" />
-
-// With image
-<CapCustomCard 
-  type="EMAIL" 
-  url="/path/to/image.jpg" 
-  width={244} 
-  height={279} 
-/>
-
-// With hover option
-<CapCustomCard 
-  type="MOBILEPUSH"
-  content={previewContent}
-  hoverOption={<button>Edit</button>}
-/>
-
-// Using CapCustomCardList
-import CapCustomCard from '@capillarytech/blaze-ui/components/CapCustomCard';
-
-<CapCustomCard.CapCustomCardList
-  cardList={[
-    { type: 'SMS', content: 'Message 1', key: '1' },
-    { type: 'EMAIL', content: 'Message 2', key: '2' },
-  ]}
-  type="SMS"
-/>
-```
-
-### Import Examples
-
-```tsx
-// Default import
-import CapCustomCard from '@capillarytech/blaze-ui/components/CapCustomCard';
-
-// Named import
-import { CapCustomCard } from '@capillarytech/blaze-ui';
-
-// Type import
-import type { CapCustomCardProps, CapCustomCardListProps } from '@capillarytech/blaze-ui';
-```
-
-### Supported Channel Types
-
-The component supports the following channel types with specialized rendering:
-
-- `SMS` - Text message preview
-- `EMAIL` - Email template preview with image support
-- `MOBILEPUSH` / `MPUSH` - Mobile push notification preview
-- `WECHAT` - WeChat message preview with rich media support
-- `FACEBOOK` - Facebook post preview
-- `VIBER` - Viber message preview
-- `WHATSAPP` - WhatsApp message preview
-- `RCS` - RCS message preview
-- `ZALO` - Zalo message preview
-- `INAPP` - In-app message preview
-- `LINE` - LINE message preview
-- `CALL_TASK` - Call task preview
-
-### Static Methods
-
-#### `getRichMediaPreview`
-
-Static method to generate rich media preview content:
-
-```tsx
-import CapCustomCard from '@capillarytech/blaze-ui/components/CapCustomCard';
-
-const preview = CapCustomCard.getRichMediaPreview(contentDetails);
-```
-
-### Styling
-
-The component uses SCSS with CSS modules. Key classes:
-
-- `.cap-custom-card` - Applied to the Ant Design Card component
-- `.hover-content` - Content shown on hover
-- `.app-name` - App name header for mobile push/in-app cards
-- `.ios-action-buttons` - iOS action buttons container
-- `.wechat-card-body` - WeChat card body container
-- `.richmedia-template` - Rich media template container
-
-Custom styling can be applied via the `className` prop or by overriding the SCSS classes.

package/CapCustomCard/Status.md

@@ -1,40 +0,0 @@
-# Migration Status: CapCustomCard
-
-**Last Updated**: 2026-02-12 11:35:43
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [x] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 2**: Migration Prompt 2 (Storybook support)
-- [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
-- [ ] **Step 7**: Build blaze-ui
-- [ ] **Step 8**: Visual Testing
-- [ ] **Step 9**: CSS Analysis (if mismatches found)
-- [ ] **Step 9.5**: CSS Analysis Completed
-- [ ] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [ ] **Step 11**: Create Pull Request
-
-## Visual Testing Results
-
-**Last Test**: 2026-02-12 11:35:43
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-29 09:37:38
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapCustomCard/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapCustomCarousel/Status.md

@@ -1,69 +0,0 @@
-# Migration Status: CapCustomCarousel
-
-**Last Updated**: 2026-02-21 19:00:00
-
-## 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 8.1**: Pre-visual-test check (agent verification)
-- [x] **Step 8.2**: Visual comparison
-- [x] **Step 8.3**: Visual diff analysis (agent analysis)
-- [x] **Step 9**: CSS Analysis (if mismatches found)
-- [x] **Step 9.5**: CSS Analysis Completed
-- [ ] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [ ] **Step 11**: Create Pull Request
-
-## Deprecated Props Verification
-
-_No deprecated props verification results yet._
-
-**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
-
-All 8 variants passed (threshold: 1.5%):
-
-| Variant | Diff % | Status |
-|---------|--------|--------|
-| default | 0.34% | ✓ Pass |
-| custom-gap | 0.35% | ✓ Pass |
-| no-heading | 0.27% | ✓ Pass |
-| long-list | 0.34% | ✓ Pass |
-| single-card | 0.42% | ✓ Pass |
-| empty-data | 0.18% | ✓ Pass |
-| second-slide-selected | 0.34% | ✓ Pass |
-| third-slide-selected | 0.34% | ✓ Pass |
-
-Screenshots confirmed:
-- `second-slide-selected`: Slide 2 tab selected (bold + underline), Card 2 visible — click switching WORKING ✓
-- `third-slide-selected`: Slide 2 tab selected (bold + underline), Card 2 and Card 3 visible — click switching WORKING ✓
-
-Minor diffs (0.34–0.42%) are from antd v3→v6 styling differences (Row/Col flex layout). Not regressions.
-
-## CSS Fixes Applied
-
-1. **Card shrinking (antd v6 flex)**: Added `style={{ flexShrink: 0 }}` inline to the card item CapRow in `index.tsx`. antd v5 `Row` renders as `display: flex` with default `flex-shrink: 1`, causing cards to shrink. Inline style overrides any CSS-in-JS conflicts.
-
-## Notes
-
-- Fixed `carouselId` to use `useRef` so it remains stable across re-renders (was `Math.random()` outside any hook, causing a new ID on every state update)
-- Fixed `handleSlidesOnAction` to directly call `setCarouselItemIndex(index)` so the selected tab indicator updates immediately on click (previously relied solely on scroll event which may not fire in all cases)
-- Added `second-slide-selected` and `third-slide-selected` interaction test cases to both consumer testCases.js to verify click/switching behavior visually
-- Used `type: 'evaluate'` interactions with `.cap-custom-carousel-header-item:nth-child(N)` selectors (avoid `]` chars in scripts due to test-case-loader.js regex limitation)
-- Fixed `image-utils.js` to handle `evaluate` interaction type (runs arbitrary JS in page context)
-- Fixed `test-case-loader.js` fallback parser to extract `script` property from `evaluate` interactions
-

package/CapCustomCheckboxList/README.md

@@ -1,178 +0,0 @@
-# CapCustomCheckboxList Component
-
-A component that renders a horizontal list of custom checkbox items, each with an icon, title, and optional inductive text.
-
-## Migration from Ant Design v3 to v6
-
-This component has been migrated from Ant Design v3 to v6 with the following changes:
-
-### Breaking Changes
-
-**No breaking changes** - The component maintains full backward compatibility.
-
-The component uses `CapCheckbox.Group` which is already migrated to Ant Design v6. The Checkbox.Group API is stable across v3→v6 with no deprecated props.
-
-### Deprecated Props
-
-**No deprecated Ant Design props** - The component uses `Checkbox.Group` from Ant Design v6, which has no deprecated props in the v3→v6 migration.
-
-**Ant Design Component Used:**
-- **Checkbox.Group** (`antd-v5` package) - Used via `CapCheckbox.Group`
-
-**Verification:**
-According to the [Ant Design v6 Migration Guide](https://ant.design/docs/react/migration-v6) and the project's `ANTD_V6_MIGRATION.md`, `Checkbox.Group` is not listed among components with deprecated props. The Checkbox.Group API remains stable across Ant Design v3→v6 with no prop changes required.
-
-**Note:** If you encounter any deprecated prop warnings related to Checkbox.Group in the future, please report them as they would indicate a change in Ant Design's API.
-
-### Backward Compatibility
-
-All props remain backward compatible. The component maintains the same API and behavior as before.
-
-### Style Changes
-
-**Approach**: The component uses custom SCSS classes with no Ant Design style overrides. All styling is handled through component-specific classes and SCSS variables.
-
-### Code Improvements
-
-1. **TypeScript Conversion**: Converted from JavaScript with PropTypes to TypeScript with proper type definitions
-2. **Type Safety**: Added comprehensive TypeScript interfaces in `types.ts`
-3. **Modern React Patterns**: Uses functional component with React.FC
-4. **Improved Code Quality**: Uses `classnames` library (consistent with codebase), proper type exports
-
-### What Stayed the Same
-
-- Component API (`paneList`, `className`, and all Checkbox.Group props)
-- Visual appearance and styling
-- Behavior and functionality
-- Class names for backward compatibility
-
-### What Changed
-
-- **Added**: TypeScript types and interfaces
-- **Added**: Proper type exports
-- **Improved**: Code structure and maintainability
-- **Updated**: Dependencies (uses `classnames` instead of `classNames` require)
-
-## Props
-
-| Prop Name | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `paneList` | `PaneListItem[]` | **Required** | Array of checkbox items to render |
-| `className` | `string` | `undefined` | Additional CSS class name |
-| `value` | `(string \| number)[]` | `undefined` | Controlled value (Checkbox.Group prop) |
-| `defaultValue` | `(string \| number)[]` | `undefined` | Default value (Checkbox.Group prop) |
-| `onChange` | `(checkedValue: (string \| number)[]) => void` | `undefined` | Callback when selection changes (Checkbox.Group prop) |
-| `disabled` | `boolean` | `undefined` | Whether all checkboxes are disabled (Checkbox.Group prop) |
-| `...rest` | `CheckboxGroupProps` | - | All other Ant Design Checkbox.Group props are supported |
-
-### PaneListItem Interface
-
-| Prop Name | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `key` | `string \| number` | `undefined` | Unique key for React (falls back to index if not provided) |
-| `title` | `string` | **Required** | Title text displayed as the checkbox label |
-| `inductiveText` | `string` | `undefined` | Optional inductive text displayed below the title |
-| `iconProps` | `CapIconProps` | `undefined` | Optional props for the icon component |
-| `...rest` | `CapCheckboxProps` | - | All other CapCheckbox props are supported (e.g., `value`, `checked`, `disabled`) |
-
-## Usage
-
-### Basic Example
-
-```tsx
-import { CapCustomCheckboxList } from '@capillarytech/blaze-ui';
-import type { PaneListItem } from '@capillarytech/blaze-ui';
-
-const items: PaneListItem[] = [
-  {
-    key: '1',
-    title: 'Option 1',
-    value: 'option1',
-    iconProps: { type: 'check' },
-  },
-  {
-    key: '2',
-    title: 'Option 2',
-    value: 'option2',
-    iconProps: { type: 'star' },
-    inductiveText: 'Additional information',
-  },
-];
-
-function MyComponent() {
-  return <CapCustomCheckboxList paneList={items} />;
-}
-```
-
-### Controlled Example
-
-```tsx
-import { useState } from 'react';
-import { CapCustomCheckboxList } from '@capillarytech/blaze-ui';
-
-function Form() {
-  const [selectedValues, setSelectedValues] = useState<string[]>([]);
-
-  const items = [
-    { key: '1', title: 'Option 1', value: 'option1', iconProps: { type: 'check' } },
-    { key: '2', title: 'Option 2', value: 'option2', iconProps: { type: 'star' } },
-  ];
-
-  return (
-    <CapCustomCheckboxList
-      paneList={items}
-      value={selectedValues}
-      onChange={(values) => setSelectedValues(values as string[])}
-    />
-  );
-}
-```
-
-### With All Checkbox.Group Props
-
-```tsx
-<CapCustomCheckboxList
-  paneList={items}
-  defaultValue={['option1']}
-  disabled={false}
-  onChange={(values) => console.log(values)}
-/>
-```
-
-## Styling
-
-The component uses SCSS with the following class structure:
-
-- `.cap-customCheckboxList-v2` - Main container for each checkbox item
-- `.div-icon` - Icon container
-- `.customCheckbox-icon` - Icon styling
-- `.customCheckbox-inductive-text` - Inductive text styling
-- `.customCheckbox` - Checkbox wrapper styling
-
-All styles use SCSS variables from `components/styles/_variables.scss` for consistency.
-
-## TypeScript
-
-```typescript
-import type { CapCustomCheckboxListProps, PaneListItem } from '@capillarytech/blaze-ui';
-
-const items: PaneListItem[] = [
-  {
-    key: '1',
-    title: 'Option 1',
-    value: 'option1',
-    iconProps: { type: 'check' },
-  },
-];
-
-const MyComponent: React.FC = () => {
-  return <CapCustomCheckboxList paneList={items} />;
-};
-```
-
-## Notes
-
-- Each item in `paneList` should have a unique `key` prop for optimal React performance. If not provided, the array index is used as fallback.
-- The component renders items horizontally using flexbox (`display: flex`).
-- All Ant Design Checkbox.Group props are supported through prop spreading.
-- The component maintains backward compatibility with existing class names and structure.

package/CapCustomCheckboxList/Status.md

@@ -1,52 +0,0 @@
-# Migration Status: CapCustomCheckboxList
-
-**Last Updated**: 2026-02-06 09:53:16
-
-## 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
-
-_No deprecated props verification results yet._
-
-**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 09:53:16
-**Maximum Mismatch**: 4.47%
-
-### Mismatched Variants:
-- long-content:4.47%
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-02-01 01:37:16
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapCustomCheckboxList/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._