@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapTagDropdown/README.md

@@ -1,171 +0,0 @@
-# CapTagDropdown Migration Guide
-
-## Overview
-
-`CapTagDropdown` has been migrated from Ant Design v3 to v6. This document outlines the changes and migration steps.
-
-## Breaking Changes
-
-### None
-
-This component maintains backward compatibility with the previous API.
-
-## Deprecated Props
-
-The following props are deprecated but still supported for backward compatibility. They will show deprecation warnings in development mode.
-
-| Deprecated Prop | Replacement | Migration Guide |
-|----------------|-------------|-----------------|
-| `visible` | `dropdownProps.open` | Use `dropdownProps={{ open: true }}` instead of `visible={true}` |
-| `onVisibleChange` | `dropdownProps.onOpenChange` | Use `dropdownProps={{ onOpenChange: handleChange }}` instead of `onVisibleChange={handleChange}` |
-| `overlayStyle` | `dropdownProps.styles.root` | Use `dropdownProps={{ styles: { root: { width: '200px' } } }}` instead of `overlayStyle={{ width: '200px' }}` |
-
-### Migration Examples
-
-#### Before (Deprecated)
-```tsx
-<CapTagDropdown
-  visible={isOpen}
-  onVisibleChange={setIsOpen}
-  overlayStyle={{ width: '300px' }}
-  list={tags}
-  content={inputValue}
-  handleKeyDownCallback={handleKeyDown}
-/>
-```
-
-#### After (Recommended)
-```tsx
-<CapTagDropdown
-  dropdownProps={{
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    styles: {
-      root: { width: '300px' }
-    }
-  }}
-  list={tags}
-  content={inputValue}
-  handleKeyDownCallback={handleKeyDown}
-/>
-```
-
-## Component API
-
-### Props
-
-| Prop | Type | Default | Description |
-|-----|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS class name |
-| `content` | `string` | `''` | Input field value |
-| `list` | `TagItem[]` | `[]` | Array of tag items to display |
-| `handleRemoveTagCallback` | `(id: string \| number, e: React.MouseEvent) => void` | `() => {}` | Callback when a tag is removed |
-| `handleKeyDownCallback` | `(e: React.KeyboardEvent<HTMLInputElement>) => void` | `() => {}` | Callback for keyboard events |
-| `renderOptionRow` | `(props: RenderOptionRowProps) => React.ReactNode` | `undefined` | Custom render function for option row |
-| `inputProps` | `CapInputProps` | `{ suffix: <CapIcon type="enter" /> }` | Props passed to CapInput |
-| `dropdownProps` | `Omit<CapDropdownProps, 'children' \| 'overlay' \| 'overlayStyle'>` | `{ placement: 'bottomLeft', trigger: ['click'] }` | Props passed to CapDropdown |
-| `width` | `string` | `'24.571rem'` | Width of the dropdown container |
-| `visible` | `boolean` | ⚠️ Deprecated | Use `dropdownProps.open` instead |
-| `showAddedTags` | `boolean` | `false` | Whether to show added tags in collapsed view |
-| `onVisibleChange` | `(visible: boolean) => void` | ⚠️ Deprecated | Use `dropdownProps.onOpenChange` instead |
-| `overlayStyle` | `React.CSSProperties` | ⚠️ Deprecated | Use `dropdownProps.styles.root` instead |
-
-### Types
-
-```typescript
-interface TagItem {
-  id: string | number;
-  tag: string;
-}
-
-interface RenderOptionRowProps {
-  className?: string;
-  formatMessage: (message: { id: string; defaultMessage: string }) => string;
-  list?: TagItem[];
-  handleRemoveTagCallback?: (id: string | number, e: React.MouseEvent) => void;
-  isError?: boolean;
-}
-```
-
-## Usage Examples
-
-### Basic Usage
-
-```tsx
-import CapTagDropdown from '@capillarytech/blaze-ui';
-
-const [tags, setTags] = useState<TagItem[]>([]);
-const [inputValue, setInputValue] = useState('');
-
-const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-  if (e.key === 'Enter' && inputValue.trim()) {
-    setTags([...tags, { id: Date.now(), tag: inputValue.trim() }]);
-    setInputValue('');
-  }
-};
-
-const handleRemoveTag = (id: string | number) => {
-  setTags(tags.filter(tag => tag.id !== id));
-};
-
-<CapTagDropdown
-  list={tags}
-  content={inputValue}
-  handleKeyDownCallback={handleKeyDown}
-  handleRemoveTagCallback={handleRemoveTag}
-  inputProps={{
-    onChange: (e) => setInputValue(e.target.value),
-  }}
-/>
-```
-
-### With Custom Option Row
-
-```tsx
-const customOptionRow = (props: RenderOptionRowProps) => (
-  <CapRow>
-    <CapMenu>
-      {/* Custom menu content */}
-    </CapMenu>
-  </CapRow>
-);
-
-<CapTagDropdown
-  renderOptionRow={customOptionRow}
-  list={tags}
-  content={inputValue}
-/>
-```
-
-### With Show Added Tags
-
-```tsx
-const [isOpen, setIsOpen] = useState(false);
-
-<CapTagDropdown
-  showAddedTags={true}
-  dropdownProps={{
-    open: isOpen,
-    onOpenChange: setIsOpen,
-  }}
-  list={tags}
-  content={inputValue}
-/>
-```
-
-## Internal Changes
-
-- Migrated from PropTypes to TypeScript types
-- Removed `defaultProps` in favor of default parameters
-- Updated to use Ant Design v6 APIs via `antd-v5` import alias
-- Menu styling moved to theme config (`components.Menu` tokens)
-- Component-specific styling preserved in SCSS (no `.ant-*` selectors)
-
-## Related Components
-
-- `CapDropdown` - Base dropdown component
-- `CapMenu` - Menu component used in dropdown overlay
-- `CapInput` - Input component
-- `CapRow` - Row layout component
-- `CapLabel` - Label component
-- `CapIcon` - Icon component

package/CapTagDropdown/Status.md

@@ -1,55 +0,0 @@
-# Migration Status: CapTagDropdown
-
-**Last Updated**: 2026-02-19 14:26:33
-
-## 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 8.1**: Pre-visual-test check (agent verification)
-- [ ] **Step 8.2**: Visual comparison
-- [ ] **Step 8.3**: Visual diff analysis (agent analysis)
-- [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-19 14:26:33
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-02-19 14:00:45
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapTagDropdown/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapTimePicker/README.md

@@ -1,170 +0,0 @@
-# CapTimePicker Migration Guide
-
-## Overview
-
-CapTimePicker has been migrated to support Ant Design v6 APIs while maintaining backward compatibility with deprecated props from v3-v5.
-
-## Breaking Changes
-
-### API Changes (v3 → v6)
-
-| Old API (v3-v5) | New API (v6) | Migration |
-|----------------|--------------|-----------|
-| `allowEmpty` | `allowClear` | Use `allowClear` prop |
-| `addon` | `renderExtraFooter` | Use `renderExtraFooter` prop |
-| `dropdownClassName` | `classNames.popup.root` or `popupClassName` | Use `popupClassName` or `classNames.popup.root` |
-| `popupStyle` (v5) | `styles.popup.root` or `popupStyle` | Use `popupStyle` or `styles.popup.root` |
-| `bordered` | `variant` | Use `variant` prop (`'outlined'`, `'borderless'`, or `'filled'`) |
-
-## Deprecated Props
-
-The following props are deprecated but still supported for backward compatibility. They will be removed in the next major version.
-
-| Deprecated Prop | Replacement | Notes |
-|----------------|-------------|-------|
-| `allowEmpty` | `allowClear` | Maps to `allowClear` internally |
-| `addon` | `renderExtraFooter` | Maps to `renderExtraFooter` internally |
-| `dropdownClassName` | `popupClassName` or `classNames.popup.root` | Merged with `popupClassName` |
-| `dropdownStyle` | `popupStyle` or `styles.popup.root` | Merged with `popupStyle` |
-| `bordered` | `variant` | `bordered={false}` → `variant="borderless"`, `bordered={true}` → `variant="outlined"` |
-
-## Migration Examples
-
-### Example 1: Basic Usage
-
-**Before (v3-v5):**
-```tsx
-import CapTimePicker from '@capillarytech/blaze-ui/components/CapTimePicker';
-
-<CapTimePicker
-  value={moment('12:00:00', 'HH:mm:ss')}
-  onChange={(time) => console.log(time)}
-  allowEmpty={false}
-  bordered={true}
-/>
-```
-
-**After (v6):**
-```tsx
-import CapTimePicker from '@capillarytech/blaze-ui/components/CapTimePicker';
-import dayjs from 'dayjs';
-
-<CapTimePicker
-  value={dayjs('12:00:00', 'HH:mm:ss')}
-  onChange={(time) => console.log(time)}
-  allowClear={false}
-  variant="outlined"
-/>
-```
-
-### Example 2: Custom Popup Styling
-
-**Before (v5):**
-```tsx
-<CapTimePicker
-  dropdownClassName="custom-popup"
-  dropdownStyle={{ zIndex: 1000 }}
-/>
-```
-
-**After (v6) - Option 1 (Direct props):**
-```tsx
-<CapTimePicker
-  popupClassName="custom-popup"
-  popupStyle={{ zIndex: 1000 }}
-/>
-```
-
-**After (v6) - Option 2 (Object-based API):**
-```tsx
-<CapTimePicker
-  classNames={{
-    popup: {
-      root: 'custom-popup'
-    }
-  }}
-  styles={{
-    popup: {
-      root: { zIndex: 1000 }
-    }
-  }}
-/>
-```
-
-### Example 3: Custom Footer
-
-**Before (v5):**
-```tsx
-<CapTimePicker
-  addon={() => <div>Custom Footer</div>}
-/>
-```
-
-**After (v6):**
-```tsx
-<CapTimePicker
-  renderExtraFooter={() => <div>Custom Footer</div>}
-/>
-```
-
-## Backward Compatibility
-
-All deprecated props are automatically mapped to their new equivalents:
-
-- `allowEmpty` → `allowClear`
-- `addon` → `renderExtraFooter`
-- `dropdownClassName` → merged with `popupClassName`
-- `dropdownStyle` → merged with `popupStyle`
-- `bordered` → converted to `variant` (`false` → `'borderless'`, `true` → `'outlined'`)
-
-**Note:** Deprecated props will log warnings in development mode when used.
-
-## Moment.js → Day.js Migration
-
-CapTimePicker supports both Moment.js and Day.js for backward compatibility:
-
-```tsx
-// Both work:
-<CapTimePicker value={moment('12:00:00', 'HH:mm:ss')} />
-<CapTimePicker value={dayjs('12:00:00', 'HH:mm:ss')} />
-```
-
-However, **Day.js is recommended** as Moment.js is deprecated. The component automatically detects and converts Moment objects to Day.js internally.
-
-## Theme Customization
-
-CapTimePicker styling is now handled via design tokens in `getCapThemeConfig.ts`:
-
-```typescript
-components: {
-  TimePicker: {
-    controlHeight: 40, // Input height
-    colorIcon: '#091e42', // Icon color
-  },
-}
-```
-
-All previous SCSS overrides have been migrated to design tokens. No `:global` overrides are needed.
-
-## TypeScript Support
-
-Full TypeScript support is available:
-
-```tsx
-import CapTimePicker, { CapTimePickerProps } from '@capillarytech/blaze-ui/components/CapTimePicker';
-
-const props: CapTimePickerProps = {
-  value: dayjs('12:00:00', 'HH:mm:ss'),
-  onChange: (time, timeString) => {},
-};
-```
-
-## Validation
-
-This migration has been validated against:
-
-- ✅ **SCSS File Content**: No `:global` or `.ant-` overrides without comments
-- ✅ **Theme Config Update**: `getCapThemeConfig.ts` updated with TimePicker tokens
-- ✅ **TypeScript Compilation**: Zero compilation errors
-- ✅ **Backward Compatibility**: All deprecated props supported with warnings
-- ✅ **CSS Modules**: Component uses CSS Modules pattern