@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapSKUUploader/README.md

@@ -1,189 +0,0 @@
-# CapSKUUploader Migration Guide
-
-## Summary
-
-CapSKUUploader has been migrated from `cap-ui-library` to `blaze-ui` with the following changes:
-
-- Converted from JavaScript to TypeScript
-- Converted from styled-components to SCSS modules
-- 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 full backward compatibility with the existing API.
-
-## Ant Design Component Usage
-
-**CapSKUUploader does not directly use any Ant Design components.**
-
-The component only uses Cap components from the blaze-ui library:
-- `CapCSVFileUploader`
-- `CapRow`
-- `CapIcon`
-- `CapLabel`
-- `CapTag`
-- `CapTruncateList`
-
-All Ant Design component prop changes are handled internally by these Cap components. If you need to verify Ant Design prop changes, please refer to the documentation for the specific Cap components used.
-
-## Deprecated Props
-
-**No deprecated Ant Design props in CapSKUUploader**
-
-Since CapSKUUploader does not directly consume Ant Design components, there are no Ant Design deprecated props to document for this component.
-
-### Verification Results
-
-- ✅ **Ant Design Imports**: None found
-- ✅ **Direct Ant Design Usage**: None found
-- ✅ **Deprecated Props**: None to document
-
-**Verification Date**: 2026-02-01
-
-## Prop Changes
-
-### Component Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `validateSkuIds` | `(skuIds: string[]) => Promise<{result?: Array<Array<{skuId: string; isValidSku: boolean}>>}>` | - | Function to validate SKU IDs |
-| `setSkuList` | `(skuList: SKUList) => void` | - | Callback to set the SKU list |
-| `skuList` | `SKUList` | `undefined` | Current SKU list state |
-| `removeUploadedSkus` | `() => void` | - | Callback to remove uploaded SKUs |
-| `validatingSKUs` | `string` | - | Locale message for validating SKUs |
-| `invalid` | `string` | - | Locale message for invalid SKUs |
-| `invalidSKUs` | `string` | - | Locale message for invalid SKUs label |
-| `valid` | `string` | - | Locale message for valid SKUs |
-| `addedSKUsMsg` | `string` | - | Locale message for added SKUs |
-| `skuFileName` | `string` | - | Filename for valid SKU CSV download |
-| `invalidSKUFilename` | `string` | - | Filename for invalid SKU CSV download |
-| `uploadedMsg` | `string` | - | Locale message for uploaded SKUs |
-
-### SKUList Interface
-
-```typescript
-interface SKUList {
-  valid?: string[];
-  inValid?: string[];
-}
-```
-
-## Migration Steps
-
-### Step 1: Update Import
-
-```tsx
-// Before (cap-ui-library)
-import CapSKUUploader from '@capillarytech/cap-ui-library/CapSKUUploader';
-
-// After (blaze-ui)
-import { CapSKUUploader } from '@capillarytech/blaze-ui';
-// or
-import CapSKUUploader from '@capillarytech/blaze-ui/components/CapSKUUploader';
-```
-
-### Step 2: TypeScript Support (New Benefit)
-
-If using TypeScript, you now get full type checking:
-
-```tsx
-import { CapSKUUploader } from '@capillarytech/blaze-ui';
-import type { CapSKUUploaderProps } from '@capillarytech/blaze-ui';
-
-const props: CapSKUUploaderProps = {
-  validateSkuIds: async (skuIds) => {
-    // Validation logic
-    return { result: [] };
-  },
-  setSkuList: (skuList) => {
-    // Set SKU list logic
-  },
-  skuList: { valid: [], inValid: [] },
-  removeUploadedSkus: () => {
-    // Remove logic
-  },
-};
-```
-
-## Examples
-
-### Basic Usage
-
-```tsx
-import { CapSKUUploader } from '@capillarytech/blaze-ui';
-import { useState } from 'react';
-
-function MyComponent() {
-  const [skuList, setSkuList] = useState({ valid: [], inValid: [] });
-
-  const validateSkuIds = async (skuIds: string[]) => {
-    // Your validation API call
-    const response = await fetch('/api/validate-skus', {
-      method: 'POST',
-      body: JSON.stringify({ skuIds }),
-    });
-    return response.json();
-  };
-
-  const removeUploadedSkus = () => {
-    setSkuList({ valid: [], inValid: [] });
-  };
-
-  return (
-    <CapSKUUploader
-      validateSkuIds={validateSkuIds}
-      setSkuList={setSkuList}
-      skuList={skuList}
-      removeUploadedSkus={removeUploadedSkus}
-    />
-  );
-}
-```
-
-## TypeScript Types
-
-```typescript
-import type { CapSKUUploaderProps, SKUList } from '@capillarytech/blaze-ui/CapSKUUploader';
-
-interface CapSKUUploaderProps {
-  validateSkuIds: (skuIds: string[]) => Promise<{
-    result?: Array<Array<{ skuId: string; isValidSku: boolean }>>;
-  }>;
-  setSkuList: (skuList: SKUList) => void;
-  skuList?: SKUList;
-  removeUploadedSkus: () => void;
-  /* Locale messages */
-  validatingSKUs?: string;
-  invalid?: string;
-  invalidSKUs?: string;
-  valid?: string;
-  addedSKUsMsg?: string;
-  skuFileName?: string;
-  invalidSKUFilename?: string;
-  uploadedMsg?: string;
-}
-
-interface SKUList {
-  valid?: string[];
-  inValid?: string[];
-}
-```
-
-## Notes
-
-- The component uses SCSS modules for styling to avoid style conflicts
-- All props maintain backward compatibility with `cap-ui-library` v8.x
-- The component does not directly use Ant Design components, so no Ant Design prop migration is required
-- Child components (CapCSVFileUploader, CapRow, etc.) handle their own Ant Design prop changes internally
-
-## Related Components
-
-- `CapCSVFileUploader` - CSV file uploader component used internally
-- `CapRow` - Row layout component
-- `CapTag` - Tag component for displaying SKU list
-- `CapTruncateList` - Component for truncating long lists
-- `CapIcon` - Icon component
-- `CapLabel` - Label component

package/CapSKUUploader/Status.md

@@ -1,66 +0,0 @@
-# Migration Status: CapSKUUploader
-
-**Last Updated**: 2026-02-22 20:15: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 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-02-01
-
-**Result**: CapSKUUploader does not directly use any Ant Design components.
-
-**Findings**:
-- ✅ No Ant Design imports found in component code
-- ✅ Component only uses Cap components (CapCSVFileUploader, CapRow, CapIcon, CapLabel, CapTag, CapTruncateList)
-- ✅ No deprecated Ant Design props to document
-- ✅ README.md created with verification results
-
-**Note**: All Ant Design component prop changes are handled internally by the Cap components used by CapSKUUploader. If Ant Design prop verification is needed, refer to the documentation for those specific Cap components.
-
-## Visual Testing Results
-
-**Last Test**: 2026-02-22
-**Threshold**: 2.0% (font rendering differences from antd v3→v5 migration)
-**Maximum Mismatch**: 1.70%
-
-| Variant | Diff % | Status |
-|---------|--------|--------|
-| default | 0% | ✓ Pass |
-| validating | 0% | ✓ Pass |
-| valid-skus | 1.70% | ✓ Pass |
-| mixed-results | 1.70% | ✓ Pass |
-| invalid-only | 1.07% | ✓ Pass |
-| long-list | 1.61% | ✓ Pass |
-| with-locale | 1.47% | ✓ Pass |
-
-**Threshold rationale**: Variants showing the CapTag edit mode (valid-skus, mixed-results, long-list) have 1.61–1.70% diff due to font/text anti-aliasing rendering differences between antd v3 and v5. These are cosmetic only — the component renders visually correctly and the differences are imperceptible to the human eye.
-
-## CSS Fixes Applied
-
-**Date**: 2026-02-22
-**Summary**:
-- Updated CapSKUUploader/styles.scss to use `.cap-tag-v2` instead of `.ant-tag.cap-tag-v2` (antd v3 selector)
-- Updated `.anticon-close` to `.ant-tag-close-icon` (antd v5 close icon class)
-
-
-## Notes
-
-_No notes yet._
-

package/CapSecondaryTopBar/README.md

@@ -1,7 +0,0 @@
-# CapSecondaryTopBar
-
-A secondary top bar component that displays primary and secondary menu items along with action menu items. Used for application navigation and actions.
-
-## Breaking Changes
-
-None - This component maintains backward compatibility with existing usage.

package/CapSelect/README.md

@@ -1,243 +0,0 @@
-# CapSelect
-
-A wrapper component around Ant Design's Select component that provides consistent styling and a simplified API for select dropdowns in Capillary applications.
-
-## 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 → v4
-
-| v3 API | v4 API | Status | Migration Guide |
-|--------|--------|--------|-----------------|
-| `combobox` | `mode="combobox"` | Removed | Use `<Select mode="combobox" />` instead. |
-| `dropdownClassName` | `popupClassName` | Deprecated | Replace `dropdownClassName` with `popupClassName`. Backward compatibility maintained. |
-| `dropdownStyle` | `popupStyle` | Deprecated | Replace `dropdownStyle` with `popupStyle`. Backward compatibility maintained. |
-| `getPopupContainer` | `getPopupContainer` | Behavior Change | Default changed to `document.body`. Explicitly set if different behavior needed. |
-
-##### v4 → v5
-
-| v4 API | v5 API | Status | Migration Guide |
-|--------|--------|--------|-----------------|
-| `showArrow` | N/A | Deprecated | Arrow visibility is handled internally. Remove this prop. |
-| `clearIcon` | `allowClear={{ clearIcon }}` | Deprecated | Use `allowClear={{ clearIcon }}` instead. Backward compatibility maintained. |
-| `removeIcon` | `menuItemSelectedIcon` | Deprecated | Use `menuItemSelectedIcon` for selected items in dropdown. Backward compatibility maintained. |
-| `bordered` | `variant="outlined" \| "borderless"` | Deprecated | Use `variant="outlined"` (bordered) or `variant="borderless"` (unbordered). Backward compatibility maintained. |
-| `dropdownMatchSelectWidth` | `popupMatchSelectWidth` | Deprecated | Replace `dropdownMatchSelectWidth` with `popupMatchSelectWidth`. Backward compatibility maintained. |
-
-##### v5 → v6
-
-| v5 API | v6 API | Status | Migration Guide |
-|--------|--------|--------|-----------------|
-| `dropdownRender` | `popupRender` | Deprecated | Replace `dropdownRender` with `popupRender`. Backward compatibility maintained. |
-| `onDropdownVisibleChange` | `onPopupVisibleChange` | Deprecated | Replace `onDropdownVisibleChange` with `onPopupVisibleChange`. Backward compatibility maintained. |
-| `virtual` | N/A | Deprecated | Virtual scroll is always enabled. Remove this prop. |
-| `status` | Form.Item | Deprecated | Use `Form.Item` for validation status instead. Remove this prop. |
-
-### Backward Compatibility
-
-The component maintains backward compatibility for all deprecated props:
-
-**v3 → v4:**
-- **`dropdownClassName`**: Still works but logs a deprecation warning. Use `popupClassName` instead.
-- **`dropdownStyle`**: Still works but logs a deprecation warning. Use `popupStyle` instead.
-- **`getPopupContainer`**: Still works. Note: Default behavior changed to `document.body`.
-
-**v4 → v5:**
-- **`showArrow`**: Ignored (arrow visibility handled internally). Logs a deprecation warning.
-- **`clearIcon`**: Mapped to `allowClear={{ clearIcon }}`. Logs a deprecation warning.
-- **`removeIcon`**: Still works but logs a deprecation warning. Use `menuItemSelectedIcon` instead.
-- **`bordered`**: Mapped to `variant` (`true` → `"outlined"`, `false` → `"borderless"`). Logs a deprecation warning.
-- **`dropdownMatchSelectWidth`**: Still works but logs a deprecation warning. Use `popupMatchSelectWidth` instead.
-
-**v5 → v6:**
-- **`dropdownRender`**: Still works but logs a deprecation warning. Use `popupRender` instead.
-- **`onDropdownVisibleChange`**: Still works but logs a deprecation warning. Use `onPopupVisibleChange` instead.
-- **`virtual`**: Ignored (virtual scroll always enabled). Logs a deprecation warning.
-- **`status`**: Ignored. Use `Form.Item` for validation status. Logs a deprecation warning.
-
-### Style Changes
-
-**Approach**: The component now uses Ant Design v6's design token system for most styling. Custom styles are applied via CSS Modules with `styles[classname]` syntax.
-
-**Tokenizable Styles**: The following styles are now controlled through theme tokens in `getCapThemeConfig.ts`:
-- Border colors (default, hover, active, disabled)
-- Background colors (container, disabled, selected, active)
-- Text colors (default, placeholder, disabled, selected)
-- Font sizes and weights
-- Option padding
-- Multiple selection item styling
-
-**Non-Tokenizable Styles**: The following styles require `:global` blocks with `// OVERRIDE:` comments:
-- Arrow icon positioning and transforms
-- Clear icon positioning
-- Multiple selection choice remove icon vertical alignment
-- Multiple selection rendered padding positioning
-- Selected option pseudo-element indicator (::before)
-- Selected icon colors in hover/selected states
-
-### Code Improvements
-
-1. **Removed PropTypes**: Replaced with TypeScript interfaces
-2. **Using CSS Modules**: Now uses `styles[classname]` pattern instead of global class names
-3. **Improved backward compatibility**: Deprecated props are mapped using nullish coalescing (`??`) for cleaner code
-4. **Tokenization over CSS overrides**: Most styling is now controlled through Ant Design theme tokens instead of custom CSS
-5. **Type safety**: Full TypeScript support with proper type exports
-
-### What Stayed the Same
-
-- All select functionality (single, multiple, searchable)
-- Option rendering with tooltips
-- Custom icons (remove, suffix, selected)
-- `getMenuOptionsProps` function support
-- `propToBeMadeLabel` functionality
-- Integration with `ComponentWithLabelHOC`
-- `CapCustomSelect` static property
-
-### What Changed
-
-- **Removed**: PropTypes dependency
-- **Changed**: `dropdownClassName` → `popupClassName` (with backward compatibility)
-- **Changed**: Styling approach from SCSS overrides to design tokens + CSS Modules
-- **Changed**: Import from `antd` to `antd-v5`
-
-## Usage
-
-```tsx
-import CapSelect from '@capillarytech/blaze-ui/components/CapSelect';
-
-const options = [
-  { value: '1', label: 'Option 1' },
-  { value: '2', label: 'Option 2', tooltip: 'Tooltip for option 2' },
-];
-
-<CapSelect
-  options={options}
-  placeholder="Select an option"
-  popupClassName="custom-dropdown-class"
-/>
-```
-
-## Props
-
-See `types.ts` for complete TypeScript interface definitions.
-
-### Required Props
-
-- `options`: Array of select options (required)
-
-### Optional Props
-
-- `componentClassName`: Custom className for the select component
-- `popupClassName`: Custom className for the dropdown popup (use instead of deprecated `dropdownClassName`)
-- `dropdownClassName`: **Deprecated** - Use `popupClassName` instead
-- `propToBeMadeLabel`: Property name to use as label if different from 'label'
-- `getMenuOptionsProps`: Function to get additional props for menu options
-- All other `SelectProps` from `antd-v5` are supported
-
-## Theme Customization
-
-The component uses design tokens from `getCapThemeConfig()`. To customize the appearance, override Select component tokens:
-
-```tsx
-import { ConfigProvider } from 'antd-v5';
-import { getCapThemeConfig } from '@capillarytech/blaze-ui/utils';
-
-const themeConfig = getCapThemeConfig({
-  components: {
-    Select: {
-      colorBorder: '#custom-color',
-      optionSelectedBg: '#custom-selected-bg',
-      // ... other Select tokens
-    },
-  },
-});
-
-<ConfigProvider theme={themeConfig}>
-  <CapSelect options={options} />
-</ConfigProvider>
-```
-
-## Migration Guide
-
-### Updating from v3 to v6
-
-1. **Replace deprecated className/style props**:
-   ```tsx
-   // Before
-   <CapSelect dropdownClassName="my-class" dropdownStyle={{ width: 200 }} />
-   
-   // After
-   <CapSelect popupClassName="my-class" popupStyle={{ width: 200 }} />
-   ```
-
-2. **Replace deprecated clearIcon**:
-   ```tsx
-   // Before
-   <CapSelect clearIcon={<Icon />} />
-   
-   // After
-   <CapSelect allowClear={{ clearIcon: <Icon /> }} />
-   ```
-
-3. **Replace deprecated bordered**:
-   ```tsx
-   // Before
-   <CapSelect bordered={true} />
-   <CapSelect bordered={false} />
-   
-   // After
-   <CapSelect variant="outlined" />
-   <CapSelect variant="borderless" />
-   ```
-
-4. **Replace deprecated dropdownMatchSelectWidth**:
-   ```tsx
-   // Before
-   <CapSelect dropdownMatchSelectWidth={false} />
-   
-   // After
-   <CapSelect popupMatchSelectWidth={false} />
-   ```
-
-5. **Replace deprecated render/change handlers**:
-   ```tsx
-   // Before
-   <CapSelect 
-     dropdownRender={(menu) => <div>{menu}</div>}
-     onDropdownVisibleChange={(open) => {}}
-   />
-   
-   // After
-   <CapSelect 
-     popupRender={(menu) => <div>{menu}</div>}
-     onPopupVisibleChange={(open) => {}}
-   />
-   ```
-
-6. **Remove deprecated props**:
-   ```tsx
-   // Before
-   <CapSelect showArrow={true} virtual={true} status="error" />
-   
-   // After
-   <CapSelect />
-   // showArrow: handled internally
-   // virtual: always enabled
-   // status: use Form.Item instead
-   ```
-
-7. **Update imports** (if importing directly):
-   ```tsx
-   // Before
-   import { Select } from 'antd';
-   
-   // After (if needed)
-   import { Select } from 'antd-v5';
-   ```
-
-8. **Theme configuration**: Ensure your app is wrapped with `ConfigProvider` using `getCapThemeConfig()` for proper styling.

package/CapSelectFilter/README.md

@@ -1,121 +0,0 @@
-# CapSelectFilter
-
-A dropdown select filter component with badge support.
-
-## Migration from cap-ui-library to blaze-ui
-
-### Summary of Changes
-
-This component has been migrated from `cap-ui-library` to `blaze-ui` with the following updates:
-
-1. **Converted to TypeScript** - Full type safety with proper interfaces
-2. **Functional Component** - Migrated from functional component (no changes needed)
-3. **SCSS Modules** - Replaced styled-components with SCSS modules
-4. **Ant Design v6** - Updated to use Ant Design v6 compatible APIs:
-   - Changed from `overlay` prop to `menu={{ items }}` API
-   - Used `dropdownRender` to wrap menu with custom styling
-   - Removed direct usage of `CapMenu` components in favor of menu items array
-5. **CSS Units** - Converted all pixel values to rem units (base: 14px = 1rem)
-6. **SCSS Variables** - Replaced hardcoded colors/spacing with SCSS variables
-7. **React Hooks** - Added `useMemo` to optimize menu items generation
-
-### Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-All props remain the same and work identically to the cap-ui-library version.
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | - | Additional CSS class for the dropdown wrapper |
-| `overlayClassName` | `string` | - | Additional CSS class for the dropdown overlay |
-| `onSelect` | `(event: React.MouseEvent<HTMLElement>) => void` | - | Callback when a menu item is selected |
-| `selectedValue` | `string` | - | Currently selected value |
-| `placeholder` | `React.ReactNode` | - | Placeholder text or node |
-| `placement` | `'bottomLeft' \| 'bottom' \| 'bottomRight' \| 'topLeft' \| 'top' \| 'topRight'` | `'bottomLeft'` | Dropdown placement |
-| `width` | `string` | `'80px'` | Width of the trigger element |
-| `dropdownMaxHeight` | `string` | `'320px'` | Maximum height of dropdown menu |
-| `dropdownWidth` | `string` | `'228px'` | Width of dropdown menu |
-| `data` | `CapSelectFilterMenuItem[]` | `[]` | Array of menu items |
-| `showBadge` | `boolean` | `false` | Whether to show a badge with count |
-
-### Data Item Structure
-
-```typescript
-interface CapSelectFilterMenuItem {
-  key: string;      // Unique key for React
-  value: string;    // Value to match against selectedValue
-  label: React.ReactNode;  // Display label
-}
-```
-
-### API Changes
-
-None - all APIs remain backward compatible.
-
-### Behavioral Changes
-
-None - component behaves identically to cap-ui-library version.
-
-### Migration Guide for Consumers
-
-No migration needed! Simply update your import path:
-
-**Before (cap-ui-library):**
-```javascript
-import CapSelectFilter from '@capillarytech/cap-ui-library/components/CapSelectFilter';
-```
-
-**After (blaze-ui):**
-```javascript
-import CapSelectFilter from '@capillarytech/blaze-ui/components/CapSelectFilter';
-// Or from the main export
-import { CapSelectFilter } from '@capillarytech/blaze-ui';
-```
-
-### Usage Example
-
-```tsx
-import React, { useState } from 'react';
-import CapSelectFilter from '@capillarytech/blaze-ui/components/CapSelectFilter';
-
-const MyComponent = () => {
-  const [selectedValue, setSelectedValue] = useState('option1');
-
-  const data = [
-    { key: '1', value: 'option1', label: 'Option 1' },
-    { key: '2', value: 'option2', label: 'Option 2' },
-    { key: '3', value: 'option3', label: 'Option 3' },
-  ];
-
-  const handleSelect = (e: React.MouseEvent<HTMLElement>) => {
-    const target = e.currentTarget;
-    const value = target.getAttribute('value');
-    if (value) {
-      setSelectedValue(value);
-    }
-  };
-
-  return (
-    <CapSelectFilter
-      placeholder="Select an option"
-      data={data}
-      selectedValue={selectedValue}
-      onSelect={handleSelect}
-      showBadge
-    />
-  );
-};
-```
-
-### Internal Implementation Notes
-
-- Uses `CapDropdown` with Ant Design v6 `menu` API (not the old `overlay` API)
-- Menu items are generated as an array of objects with `key`, `label`, `className`, and `onClick`
-- Uses `dropdownRender` to wrap the menu with custom styling (border and scrolling)
-- Styled with SCSS modules instead of styled-components
-- All spacing and colors use SCSS variables from `components/styled/variables.scss`
-- Badge count is calculated as `[selectedValue].length` (always shows 1 for single selection)
-- Uses `useMemo` to optimize menu items generation and prevent unnecessary re-renders