@capillarytech/blaze-ui 5.20.0 → 5.22.0

package/CapColorPicker/README.md

@@ -1,112 +0,0 @@
-# CapColorPicker Component
-
-A React component for selecting colors using a color picker interface.
-
-## Migration from cap-ui-library to blaze-ui
-
-### Summary of Changes
-
-This component has been migrated from JavaScript to TypeScript with the following improvements:
-
-1. **TypeScript Conversion**
-   - Converted from JavaScript to TypeScript
-   - Added comprehensive TypeScript interfaces in `types.ts`
-   - Replaced PropTypes with TypeScript types
-   - Removed PropTypes dependency
-
-2. **Modern React Patterns**
-   - Converted from class component to functional component
-   - Uses React.FC for type safety
-   - Better type safety with TypeScript
-
-3. **Styling**
-   - Maintained SCSS structure
-   - Updated border-radius to use rem units for consistency
-   - Uses SCSS variables from `components/styles/_variables.scss`
-
-### Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-All props remain backward compatible. The component maintains the same API and behavior as the cap-ui-library version.
-
-### Deprecated Props
-
-**No deprecated Ant Design props**
-
-This component does not use any Ant Design components. It uses `react-colorful`'s `HexColorPicker` component for color picking functionality. Therefore, there are no Ant Design component prop changes or deprecated props to document.
-
-**Verification:**
-- ✅ No Ant Design components imported (`antd`, `@ant-design/icons`, etc.)
-- ✅ Component uses only `react-colorful` library
-- ✅ No Ant Design props or APIs used
-- ✅ No migration from deprecated Ant Design APIs required
-
-### Props
-
-| Prop Name | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS class name |
-| `color` | `string` | `'#d42020'` | Current color value (hex format) |
-| `setColor` | `(color: string) => void` | `() => {}` | Callback function when color changes |
-| `hexSelector` | `boolean` | `false` | Whether to show hex selector |
-
-### Behavioral Changes
-
-- Component is now a functional component instead of a class component
-- TypeScript provides better type safety and IntelliSense support
-- Border radius uses rem units for consistency with design system
-
-### Usage
-
-#### Basic Usage
-
-```tsx
-import { CapColorPicker } from '@capillarytech/blaze-ui';
-import { useState } from 'react';
-
-const MyComponent = () => {
-  const [color, setColor] = useState('#d42020');
-
-  return (
-    <CapColorPicker color={color} setColor={setColor} />
-  );
-};
-```
-
-#### With Hex Selector
-
-```tsx
-<CapColorPicker 
-  color={color} 
-  setColor={setColor} 
-  hexSelector={true} 
-/>
-```
-
-#### With Custom Class Name
-
-```tsx
-<CapColorPicker 
-  color={color} 
-  setColor={setColor} 
-  className="my-custom-picker" 
-/>
-```
-
-### Notes
-
-- The component uses `react-colorful` library for color picking functionality
-- When `hexSelector` is `false`, the component uses the `cap-slider-v2` class
-- When `hexSelector` is `true`, the component uses the `cap-hexslider-v2` class
-- The saturation control is hidden by default via CSS
-
-### Import Examples
-
-```tsx
-// Named import (recommended)
-import { CapColorPicker } from '@capillarytech/blaze-ui';
-
-// Type import
-import type { CapColorPickerProps } from '@capillarytech/blaze-ui';
-```

package/CapColorPicker/Status.md

@@ -1,52 +0,0 @@
-# Migration Status: CapColorPicker
-
-**Last Updated**: 2026-02-04 02:03:49
-
-## 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-04 02:03:49
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-31 17:05:14
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapColorPicker/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapColorPicker/tests/USE_CASES_ANALYSIS.md

@@ -1,92 +0,0 @@
-# CapColorPicker Use Cases Analysis
-
-## Phase 0: Use Cases Extraction
-
-**Status**: ⚠️ **Unable to access Google Sheets MCP server**
-
-The Google Sheets MCP server (`google_sheets`) was not available during test creation. Use cases were inferred from component analysis and standard color picker requirements.
-
-## Phase 1: Use Cases NOT Fulfilled by Component
-
-Based on analysis of `CapColorPicker` component code, the following use cases are **NOT currently supported**:
-
-### 1. **Preset Color Palette**
-- ❌ No predefined color swatches
-- ❌ No recent colors history
-- ❌ No favorite colors functionality
-
-### 2. **Multiple Color Format Support**
-- ❌ Only supports hex format (`#RRGGBB`)
-- ❌ No RGB input fields
-- ❌ No HSL input fields
-- ❌ No conversion between formats
-
-### 3. **Input Validation**
-- ❌ No validation for invalid hex colors
-- ❌ No error messages for invalid input
-- ❌ No format enforcement
-
-### 4. **Component States**
-- ❌ No disabled state
-- ❌ No loading state
-- ❌ No error state
-- ❌ No readonly state
-
-### 5. **Size Variants**
-- ❌ No size prop (small, medium, large)
-- ❌ Fixed size only
-
-### 6. **Advanced Features**
-- ❌ No alpha/opacity channel support
-- ❌ No color picker presets
-- ❌ No color picker themes
-- ❌ No keyboard shortcuts documentation
-
-### 7. **Accessibility Enhancements**
-- ❌ No aria-label prop (relies on underlying library)
-- ❌ No aria-describedby for helper text
-- ❌ No focus management documentation
-- ⚠️ Limited keyboard navigation (depends on react-colorful)
-
-### 8. **Event Handling**
-- ❌ Only onChange callback (setColor)
-- ❌ No onComplete/onBlur callback
-- ❌ No onFocus callback
-- ❌ No onChangeStart/onChangeEnd callbacks
-
-### 9. **UI Enhancements**
-- ❌ No label prop
-- ❌ No helper text
-- ❌ No error message display
-- ❌ No placeholder/initial value distinction
-
-### 10. **Integration Features**
-- ❌ No form integration helpers (Form.Item wrapper)
-- ❌ No validation integration
-- ❌ No controlled/uncontrolled mode distinction
-
-## Current Component Capabilities
-
-✅ **Supported Features**:
-- Basic hex color selection via visual picker
-- Custom className support
-- Hex selector toggle (visual difference via CSS class)
-- Color change callback (setColor)
-- Default color value
-- CSS class customization
-
-## Recommendations
-
-If the Google Sheets contains use cases requiring any of the above features, the component would need enhancements to support them. The current implementation is a minimal wrapper around `react-colorful`'s `HexColorPicker`.
-
-## Test Coverage
-
-Comprehensive tests have been created covering:
-- ✅ Default rendering and initialization
-- ✅ Prop variations (color, className, hexSelector)
-- ✅ User interactions (click, mouse move)
-- ✅ Callbacks (setColor)
-- ✅ Edge cases (empty, invalid colors)
-- ✅ Accessibility (role, aria-label, tabIndex)
-- ✅ Data flow and state management
-- ✅ Conditional rendering logic

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