@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapColoredTag/README.md

@@ -1,167 +0,0 @@
-# CapColoredTag
-
-An extended version of Ant Design's Tag component with custom color styling capabilities and enhanced customization options.
-
-## Migration from Ant Design v3 to v6
-
-This component has been migrated from Ant Design v3 to v6 with the following changes:
-
-### Ant Design Components Used
-
-This component uses the following Ant Design components:
-- **Tag** (`antd-v5`) - Base tag component
-- **Tag.CheckableTag** (`antd-v5`) - Checkable tag variant
-
-**Verification Status:** ✅ No deprecated props found
-- The `Tag` component is not listed in the Ant Design v6 migration guide's deprecated API fixes table
-- All `Tag` component props remain valid and unchanged between v3 and v6
-- No prop mapping or backward compatibility code required for Ant Design props
-
-### Breaking Changes
-
-**No breaking changes** - The component maintains full backward compatibility with the previous version.
-
-**Ant Design Tag Component:** The Ant Design `Tag` component API remains fully compatible between v3 and v6, so no API changes were required. All Ant Design `Tag` props continue to work as before.
-
-### Deprecated Props
-
-**No deprecated Ant Design props** - The Ant Design `Tag` component API remains fully compatible between v3 and v6, with no deprecated props.
-
-**Verification:**
-- ✅ Checked against Ant Design v6 migration guide - `Tag` component is not listed in deprecated API fixes
-- ✅ All Ant Design `Tag` props (`closable`, `onClose`, `color`, `icon`, etc.) remain valid and unchanged
-- ✅ `Tag.CheckableTag` API remains unchanged
-- ✅ No backward compatibility mapping required for Ant Design props
-
-**Note:** This component uses the Ant Design `Tag` component internally. All standard Ant Design `Tag` props are passed through via `{...rest}` and remain fully supported.
-
-### Prop Changes
-
-#### Cap Component Props
-
-| Prop | Status | Notes |
-|------|--------|-------|
-| `tagColor` | ✅ Unchanged | Custom background color for the tag |
-| `tagTextColor` | ✅ Unchanged | Custom text color for the tag |
-| `tagHeight` | ✅ Unchanged | Custom height for the tag (default: '24px') |
-| `tagFontSize` | ✅ Unchanged | Custom font size for the tag (default: 0.857rem / 12px) |
-| `tagBorderColor` | ✅ Unchanged | Custom border color for the tag |
-| `tagCloseIconColor` | ✅ Unchanged | Custom close icon color for the tag (default: white) |
-| `styleProps` | ✅ Unchanged | Unused prop kept for backward compatibility |
-| `type` | ✅ Unchanged | Tag type modifier ('static') |
-| `disabled` | ✅ Unchanged | Whether the tag is disabled |
-| `className` | ✅ Unchanged | Additional CSS class name |
-
-#### Ant Design Tag Component Props
-
-| Prop | Status | Notes |
-|------|--------|-------|
-| `closable` | ✅ Unchanged | Whether the tag can be closed (Ant Design Tag prop) |
-| `onClose` | ✅ Unchanged | Callback when tag is closed (Ant Design Tag prop) |
-| `color` | ✅ Unchanged | Tag color preset (Ant Design Tag prop) |
-| `icon` | ✅ Unchanged | Custom icon (Ant Design Tag prop) |
-| `bordered` | ✅ Unchanged | Whether to show border (Ant Design Tag prop) |
-| All other Ant Design Tag props | ✅ Unchanged | All props from `TagProps` are passed through to underlying Ant Design `Tag` component |
-
-**Note:** This component extends Ant Design's `TagProps` interface, so all standard Ant Design `Tag` component props are supported and passed through unchanged.
-
-### API Changes
-
-- **TypeScript Support:** Full TypeScript support with exported `CapColoredTagProps` interface
-- **Ant Design Version:** Upgraded from Ant Design v3 to v6
-- **Styling:** Uses SCSS modules with design tokens
-
-### Behavioral Changes
-
-- **Dynamic Styling:** The component uses inline styles for dynamic color props (`tagColor`, `tagTextColor`, etc.) to allow runtime customization
-- **Close Icon Styling:** Close icon color is controlled via CSS custom property (`--tag-close-icon-color`) for consistent theming
-- **Static Type:** Tags with `type="static"` have `pointer-events: none` to prevent interaction
-
-### Code Improvements
-
-1. **Design Tokens:** Uses `$CAP_*` variables from the design system
-2. **Type Safety:** Full TypeScript support with proper type definitions
-3. **Backward Compatibility:** All props from previous versions remain supported
-
-### Usage Examples
-
-#### Basic Usage
-
-```tsx
-import { CapColoredTag } from '@capillarytech/blaze-ui';
-
-<CapColoredTag>Default Tag</CapColoredTag>
-```
-
-#### Custom Colors
-
-```tsx
-<CapColoredTag 
-  tagColor="#1890ff" 
-  tagTextColor="#ffffff"
->
-  Custom Colored Tag
-</CapColoredTag>
-```
-
-#### Static Tag
-
-```tsx
-<CapColoredTag type="static">
-  Static Tag (non-interactive)
-</CapColoredTag>
-```
-
-#### Closable Tag with Custom Close Icon Color
-
-```tsx
-<CapColoredTag 
-  closable
-  tagCloseIconColor="#ff0000"
-  onClose={() => console.log('Tag closed')}
->
-  Closable Tag
-</CapColoredTag>
-```
-
-#### Disabled Tag
-
-```tsx
-<CapColoredTag disabled>
-  Disabled Tag
-</CapColoredTag>
-```
-
-#### Checkable Tag
-
-```tsx
-<CapColoredTag.CheckableTag 
-  checked={isChecked}
-  onChange={(checked) => setChecked(checked)}
->
-  Checkable Tag
-</CapColoredTag.CheckableTag>
-```
-
-### Styling
-
-The component uses SCSS modules with the following design tokens:
-- `$CAP_SPACE_24` - Default tag height
-- `$CAP_G08` - Default background color
-- `$CAP_WHITE` - Default text and close icon color
-- `$FONT_SIZE_S` - Default font size
-
-Custom colors can be applied via props (`tagColor`, `tagTextColor`, etc.) which override the default styles.
-
-### Migration Guide
-
-If you're migrating from an older version:
-
-1. **No code changes required** - The component maintains full backward compatibility
-2. **Import path unchanged** - Continue using `@capillarytech/blaze-ui`
-3. **Props unchanged** - All existing props continue to work as before
-
-### Related Components
-
-- `CapTag` - Standard tag component with predefined variants
-- `Tag` (Ant Design) - Base tag component from Ant Design

package/CapColoredTag/Status.md

@@ -1,49 +0,0 @@
-# Migration Status: CapColoredTag
-
-**Last Updated**: 2026-01-31 11:15:48
-
-## 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
-- [ ] **Step 9**: CSS Analysis (if mismatches found)
-- [ ] **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-01-31 11:14:49
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- ✅ All variants match perfectly!
-
-
-## CSS Fixes Applied
-
-_No CSS fixes applied yet._
-
-## Notes
-
-_No notes yet._
-

package/CapConditionPreview/MIGRATION_ANALYSIS.md

@@ -1,70 +0,0 @@
-# Stage 1: Pre-Analysis Report for CapConditionPreview
-
-## 1. Antd Style Overrides Found
-
-| Line # | Old Override | Can Tokenize? | Token Path | Token Value | Override Reason |
-|--------|-------------|---------------|------------|-------------|-----------------|
-| — | — | — | — | — | — |
-
-**Tokenizable overrides**: 0  
-**Non-tokenizable overrides**: 0  
-**No antd overrides found - will skip theme config update.**
-
-CapConditionPreview does not use any Ant Design components. It uses only Cap UI primitives (CapRow, CapColumn, CapLabel, CapIcon, CapTruncateList) and react-intl FormattedMessage. `styles.scss` contains only BEM class `.capConditionPreview__string` (text-overflow/ellipsis) with no `:global` or `.ant-` usage.
-
----
-
-## 2. API Breaking Changes
-
-| Old API | New API | Affected Props |
-|---------|---------|----------------|
-| — | — | None |
-
-No Antd components are used; no v3→v6 API changes apply to this component.
-
----
-
-## 3. Backward Compatibility Plan
-
-| Deprecated Prop | Fallback Logic |
-|----------------|----------------|
-| — | — |
-
-No deprecated props in this component.
-
----
-
-## 4. Type Definitions Needed
-
-- **CapConditionPreviewProps** – Main props interface (all current props with TypeScript types).
-- **LinkedConditionExpression** – Shape for `additionalFields[key].expression` (operator, operand, storeSource, isStoreUploadFailed, isStoreUploadInvalid, storeUploadIsInProgress).
-- **AdditionalFieldEntry** – Shape for `additionalFields[key]` (description, factId, expression).
-- **DateTypeData** – Shape for `dateTypeData` (dateType, startDate, endDate, date, days, contextData with profileName).
-- **DstData** – Shape for `dstData` (e.g. couponSeriesNames); optional/minimal for type safety.
-- **ViewMoreLinkComponent** – React component type for `ViewMoreLink` (e.g. `React.ComponentType<{ onClick: () => void; children: React.ReactNode }>`).
-
-Complex types: `operand` and `listData` are polymorphic (number, string, string[], etc.) depending on `type`; we will use union types or careful typing to avoid `any`.
-
----
-
-## 5. PropTypes Removal
-
-- [x] Component uses PropTypes: **YES**
-- [x] PropTypes file exists: **NO** (PropTypes live in index.tsx)
-- [x] PropTypes imports found: **YES** (`import PropTypes from 'prop-types'` in index.tsx)
-- [x] Component.propTypes assignments found: **YES** (`CapConditionPreview.propTypes = { ... }` in index.tsx)
-- **Action**: Remove all PropTypes and replace with TypeScript types from `types.ts`.
-
----
-
-## 6. DefaultProps Removal
-
-- [x] Component uses defaultProps: **NO**
-- [x] Component.defaultProps assignments found: **NO**
-- [x] Old function syntax with props parameter: **NO** (already uses destructuring `({ ... })`)
-- [x] Default values assigned inside function body: **NO** (only `listData = null` and `hideNumberAndProductFields = false` in destructuring)
-- **Action**: No defaultProps to remove. Keep destructuring defaults as-is; ensure any other optional props that need defaults get them in destructuring in index.tsx.
-
----
-
-**STAGE 1 COMPLETE. Proceeding to Stage 2 (skip theme config) and Stage 3 (implementation).**

package/CapConditionPreview/README.md

@@ -1,40 +0,0 @@
-# CapConditionPreview
-
-Preview block for condition configuration (e.g. "Include whose [condition name] is [operator] [operand]").
-
-## Migration (Antd v3 → v6)
-
-- **Antd usage**: This component does **not** use any Ant Design components. It uses only Cap UI primitives (CapRow, CapColumn, CapLabel, CapIcon, CapTruncateList) and `react-intl` FormattedMessage. No theme config or antd API changes apply.
-- **PropTypes removed**: All runtime PropTypes were removed and replaced with TypeScript types from `types.ts`.
-- **defaultProps**: None were present; default values use destructuring in the component signature (`listData = null`, `hideNumberAndProductFields = false`).
-- **Styles**: `styles.scss` has no `:global` or `.ant-` overrides. A single BEM-style class is used for the string truncation state, applied via CSS Modules (`styles.capConditionPreview__string`).
-
-## Props
-
-See `types.ts` for full interfaces. Main props:
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `type` | `string` | Data type: NUMBER, STRING, LIST, MULTI_SELECT, STRING_LIST, DATE, entryTriggerEventAttribute, etc. |
-| `operand` | `number \| string \| string[]` | Value(s) for the condition. |
-| `operator` | `string` | Operator key (EQ, GT, LT, IN, NOT_IN, IS_EXACT_DATE, etc.). |
-| `conditionName` | `string` | Label for the condition (e.g. "Extended fields in the transaction"). |
-| `isExcluded` | `boolean` | When true, shows "Exclude" instead of "Include". |
-| `listData` | `string[] \| null` | List of values for MULTI_SELECT (e.g. SKU list). Default `null`. |
-| `additionalFields` | `Record<string, AdditionalFieldEntry>` | Extra condition entries (EXTENDED_FIELD, CUSTOM_FIELD, STORE_FILTER, etc.). |
-| `hideNumberAndProductFields` | `boolean` | When true, hides operand/operator block (e.g. journey context). Default `false`. |
-| `dateTypeData` | `DateTypeData \| null` | For DATE type: RANGE, SINGLE, DAYS_AFTER, DAYS_BEFORE. |
-| `ViewMoreLink` | `ComponentType<ViewMoreLinkProps>` | Custom link component for "View more" (e.g. store filter). |
-| `onClickConfigure` | `(blockId: string) => void` | Called when "View more" is clicked. |
-| `setPopoverVisible` | `(visible: boolean) => void` | Called to close popover when "View more" is used. |
-
-Message props (`includeMsg`, `excludeMsg`, `whoseMsg`, `equalMsg`, etc.) are typically provided by `LocaleHoc` from translations.
-
-## Breaking changes
-
-None. This component did not use antd or deprecated APIs.
-
-## Dependencies
-
-- `classnames`, `lodash`, `react-intl` (already in blaze-ui dependencies).
-- No new package.json entries required for this migration.

package/CapConditionPreview/tests/USE_CASES_CapConditionPreview.md

@@ -1,65 +0,0 @@
-# Test Cases: CapConditionPreview (Antd v3→v6)
-
-**Component:** CapConditionPreview  
-**Complexity:** medium (≤20 test cases)  
-**Source:** blaze-ui/components/CapConditionPreview/
-
----
-
-## Google Sheets
-
-**Spreadsheet ID:** `1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg`  
-**Tab:** CapConditionPreview
-
-### Steps (run in your environment)
-
-1. Check connection: `COMPOSIO_CHECK_ACTIVE_CONNECTION` toolkit="googlesheets"
-2. Create tab: `GOOGLESHEETS_ADD_SHEET` with title `CapConditionPreview`, gridProperties `{ "rowCount": 100, "columnCount": 7 }`
-3. Write data: `GOOGLESHEETS_VALUES_UPDATE` with range `CapConditionPreview!A1` and the values table below.
-
----
-
-## Use cases table (for Storybook + migration validation)
-
-| ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
-|----|----------|--------------|---------------------------|----------|-----------------|--------|
-| UC-001 | All data type and operator variants | type: NUMBER \| STRING \| LIST \| MULTI_SELECT \| STRING_LIST \| ENTRY_TRIGGER_EVENT_ATTRIBUTE \| DATE; operator: EQ, GT, LT, GTE, LTE, IN_RANGE, NEQ, IN, NOT_IN, IS_EXACT_DATE, IS_BEFORE_DATE, IS_AFTER_DATE, IS_INBETWEEN_DATES, IS_BEFORE_DAYS, IS_AFTER_DAYS; operand/listData/dateTypeData as needed | Correct label and value for each type and operator (e.g. "greater than" + "42" for NUMBER+GT; "Include whose … is on 1/15/2024" for DATE SINGLE) | P0 | TypeAndOperatorVariants | Grouped all type + operator combos into one test |
-| UC-002 | Include vs Exclude and hideNumberAndProductFields | isExcluded: true \| false; hideNumberAndProductFields: true \| false | "Exclude" vs "Include"; when hideNumberAndProductFields true, operand/operator block hidden for STRING/NUMBER/etc., condition name and "whose" still visible | P0 | VisualStates | Default, excluded, and journey/store profile modes |
-| UC-003 | Store upload states (STORE_FILTER) | additionalFields.STORE_FILTER with storeSource: UPLOAD; storeUploadIsInProgress \| isStoreUploadFailed \| isStoreUploadInvalid \| success (operand count) | Progress icon + "Upload in progress"; error icon + "Upload failed" or "Invalid file uploaded"; or "N Stores" when success | P0 | StoreUploadStates | Grouped in progress / failed / invalid / success |
-| UC-004 | ViewMoreLink and SKU download interactions | ViewMoreLink with onClick; setPopoverVisible, onClickConfigure, blockId; MULTI_SELECT + listData (SKU) for download link | Click View more → setPopoverVisible(false) and onClickConfigure(blockId); click "uploaded" → CSV download with SKU list and skuFileName | P0 | Interactions | All interactive handlers in one test |
-| UC-005 | Content: normal, empty, long | operand/listData: normal values; empty listData or []; long operand string; additionalFields: {} vs multiple entries | Renders without crash; empty list shows attachment icon or empty state; long text truncates or wraps; multiple additional conditions show "and" + lineItemMsg | P1 | ContentVariants | Normal, empty, long, multiple conditions |
-| UC-006 | Styling (className) | className: "custom-class" | Root has class "custom-class" and "cap-condition-wrapper"; layout and styled labels (pill background) unchanged | P1 | Styling | className only; no style prop on component |
-| UC-007 | Additional fields (EXTENDED_FIELD, CUSTOM_FIELD, STORE_FILTER, multiple) | additionalFields: EXTENDED_FIELD, CUSTOM_FIELD, STORE_FILTER; expression with operator/operand; multiple keys | Correct description, operator label, and OperandValues for each; "only for lineitems with" and "and" between items when multiple | P0 | AdditionalFields | Grouped all additional field variants |
-| UC-008 | DATE_TYPE sub-variants (RANGE, SINGLE, DAYS_AFTER, DAYS_BEFORE) | type: DATE; dateTypeData: RANGE (startDate, endDate), SINGLE (date or contextData.profileName), DAYS_AFTER/DAYS_BEFORE (days, contextData) | RANGE: "between" + two formatted dates; SINGLE: date or "End date of {profileName} event date attribute"; DAYS_AFTER/BEFORE: "{days} days after/before" + End date of profile | P0 | DateTypeVariants | Grouped RANGE, SINGLE, DAYS_AFTER, DAYS_BEFORE |
-| UC-009 | DATE_TYPE edge cases | dateTypeData: null, undefined; dateType: null, "", "INVALID_TYPE"; startDate/endDate/date: null, undefined, "", invalid string | No date content rendered when null/undefined/invalid; no crash; empty dates show "and" only where applicable | P1 | DateTypeEdgeCases | Production-safe null/undefined/invalid handling |
-| UC-010 | STRING_LIST single vs multiple | type: STRING_LIST; operand: [single] vs [v1, v2, …] | Single: "value1" only; multiple: "value1 +N more" with correct count | P1 | StringListContent | Grouped single and multiple values |
-| UC-011 | MULTI_SELECT: SKU (download) vs non-SKU vs store upload | type: MULTI_SELECT; listData; additionalFields SKU vs none vs STORE_FILTER with UPLOAD | SKU: TruncateList + "uploaded" download link; non-SKU: TruncateList only; store upload: StoreUploadMsg + View more | P0 | MultiSelectVariants | SKU download, list-only, store upload |
-| UC-012 | Entry trigger event attribute | type: ENTRY_TRIGGER_EVENT_ATTRIBUTE; entryTriggerEventAttribute: string; operator | Shows operator label and "Entry trigger event attribute" + attribute name (e.g. "fact1") | P1 | EntryTriggerAttribute | Single test for entry trigger block |
-| UC-013 | Event handlers and callbacks | ViewMoreLink onClick, setPopoverVisible, onClickConfigure; download (setAttribute href/download) | All callbacks invoked with correct args; download link gets correct data URI and filename | P1 | EventHandlers | Grouped all handlers; no mock of Cap components |
-| UC-014 | OperandsMapping labels (i18n) | All operator keys: equalMsg, greaterThanMsg, lessThanMsg, greaterThanOrEqualMsg, lessThanorEqualMsg, inRangeMsg, notEqualMsg, inMsg, notInMsg, date msgs | Correct translated label for each operator in UI | P1 | OperandsMapping | Grouped all operator label props |
-| UC-015 | Empty or missing operand / listData | operand: null, undefined, ""; listData: null, []; type NUMBER/STRING/LIST/MULTI_SELECT | No crash; missing values render empty or fallback (e.g. attachment icon for MULTI_SELECT with no listData) | P1 | EmptyOperand | Edge case for missing data |
-| UC-016 | DATE_TYPE_SINGLE with contextData vs raw date | dateTypeData: SINGLE with date only vs contextData only vs both (contextData takes precedence) | Raw date: formatted date; contextData: "End date of {profileName} event date attribute"; both: contextData branch shown | P1 | DateSingleContext | Precedence and profile name display |
-| UC-017 | Format date for preview (YYYY-MM-DD, ISO, invalid) | dateTypeData with date: "2024-01-15", "2024-01-15T00:00:00.000Z", "invalid" | YYYY-MM-DD and ISO format as en-US locale; invalid returns empty string, no broken UI | P1 | FormatDateForPreview | Timezone-safe and invalid handling |
-| UC-018 | Migration parity (v3 → v6) | Same props as v3 usage; FormattedMessage (react-intl); no antd in component | Same copy and structure as v3; FormattedMessage resolves; no antd dependency in CapConditionPreview | P0 | MigrationParity | i18n and structure parity |
-| UC-019 | Default and optional props | listData=null, hideNumberAndProductFields=false; omit optional msg props (use defaults from LocaleHoc) | Sensible defaults; no crash when optional props omitted; LocaleHoc provides messages | P2 | DefaultProps | Grouped default/optional behavior |
-| UC-020 | Multiple additional conditions (and + lineItemMsg) | additionalFields with 2+ entries (e.g. EXTENDED_FIELD + CUSTOM_FIELD) | First condition without "and"; subsequent with "and" + lineItemMsg; each shows description + operator + OperandValues | P1 | MultipleAdditionalConditions | And/lineItemMsg grouping |
-
----
-
-## Requirements checklist
-
-- Stay within strict limit for complexity level: **medium ≤20** (20 rows).
-- Group similar scenarios aggressively (types, operators, store states, date variants, events).
-- Each test is manually verifiable in Storybook and with RTL.
-- Focus on real-world usage (conditions, store filter, SKU, dates).
-- Prioritize P0/P1 over P2.
-- Grouping rationale noted in Notes column.
-
----
-
-## Testing notes (Do / Don't)
-
-- **Do:** Use React Testing Library with Jest; prefer `data-testid` for querying; clear mocks between tests if applicable.
-- **Don't:** Mock Cap UI Library components unless instructed; avoid over-reliance on getByRole; don’t write overly complex tests.
-
-**If approaching limit, merge more test cases. Quality > quantity.**

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._