@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapDateTimeRangePicker/README.md

@@ -1,243 +0,0 @@
-# CapDateTimeRangePicker
-
-Migrated from `cap-ui-library` (antd v3 + moment.js) to `blaze-ui` (antd v6 + dayjs).
-
-A comprehensive date and time range picker component with timezone support, locked date modes, and intelligent default time handling.
-
-## Breaking Changes (v3 → v6)
-
-| v3 API | v6 API | Notes |
-|--------|--------|-------|
-| `dropdownClassName` | `popupClassName` | Backward compatible via fallback |
-| `getCalendarContainer` | `getPopupContainer` | Backward compatible via fallback |
-| `dateRender` | `cellRender` | Signature changed: `(current, info) => ReactNode` |
-| Moment.js values | Dayjs values | Auto-detected: moment values are converted internally |
-| `.ant-calendar-*` CSS classes | `.ant-picker-*` CSS classes | SCSS fully rewritten |
-
-## Backward Compatibility
-
-| Deprecated Prop | Replacement | Fallback |
-|----------------|-------------|----------|
-| `dropdownClassName` | `popupClassName` | `popupClassName ?? dropdownClassName` |
-| `getCalendarContainer` | `getPopupContainer` | `getPopupContainer ?? getCalendarContainer` |
-| `dateRender` | `cellRender` | Legacy `dateRender` wrapped with capture handlers |
-| `dropdownStyle` | `popupStyle` | `popupStyle ?? dropdownStyle` |
-
-All deprecated props log a development-only console warning.
-
-## Moment.js Compatibility
-
-The component auto-detects when consumers pass moment.js values:
-- Moment values in `value` prop are converted to dayjs internally
-- Results returned via `onChange` are converted back to moment format
-
-## Props
-
-### Core Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `[DateValue, DateValue]` | `undefined` | Current date range value. Accepts Dayjs, Moment, or ISO strings. |
-| `onChange` | `(result: CapDateTimeRangePickerOnChangeResult) => void` | `() => {}` | Callback fired when the date range is confirmed. Returns `{ start, end, startTime, endTime }`. |
-| `timezone` | `string` | `'UTC'` | Timezone string (e.g., 'America/New_York'). All dates are converted to this timezone. |
-| `format` | `string` | `'DD-MM-YYYY \| HH:mm'` | Display format for the date/time string. |
-| `showTime` | `boolean \| Record<string, unknown>` | `{ format: 'HH:mm' }` | Whether to show time selection alongside dates. Can be an object with format options. |
-| `showNow` | `boolean` | `true` | Whether to show the "Now" button. Automatically disabled when dates are locked. |
-| `placeholder` | `[string, string]` | `['Start Date', 'End Date']` | Placeholder text as `[startPlaceholder, endPlaceholder]`. |
-| `className` | `string` | `undefined` | Additional class name for the picker input. |
-| `disabledDate` | `(current: dayjs.Dayjs) => boolean` | `() => false` | Function to determine if a date is disabled. |
-| `disabledTime` | `RangePickerProps['disabledTime']` | `undefined` | Function to determine if specific times are disabled. |
-| `disabledDateRanges` | `Array<{ start: DateValue; end: DateValue }>` | `undefined` | Array of disabled date ranges. Each range specifies a start and end date that should be disabled. |
-
-### Locked Date Mode Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `disableStartDate` | `boolean` | `false` | Whether the start date is locked and cannot be changed. Enables one-click range selection. |
-| `disableEndDate` | `boolean` | `false` | Whether the end date is locked and cannot be changed. Enables one-click range selection. |
-| `disabledStartDateText` | `string` | `'Start date is disabled...'` | Custom tooltip text when start date is disabled. |
-| `disabledEndDateText` | `string` | `'End date is disabled...'` | Custom tooltip text when end date is disabled. |
-| `disabledBothDatesText` | `string` | `'Both start and end dates are disabled'` | Custom tooltip text when both dates are disabled. |
-
-### Customization Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `cellRender` | `RangePickerProps['cellRender']` | `undefined` | Custom cell render function (v6 API). Signature: `(current, info) => ReactNode`. |
-| `suffixIcon` | `React.ReactNode` | `<CapIcon type="calendar" />` | Custom suffix icon for the picker input. |
-| `separator` | `React.ReactNode` | `<CapIcon type="forward-arrow" />` | Custom separator between start and end inputs. |
-| `popupClassName` | `string` | `undefined` | Custom class name for the popup/dropdown (v6 API). |
-| `popupStyle` | `React.CSSProperties` | `undefined` | Custom style for the popup/dropdown (v6 API). |
-| `getPopupContainer` | `(triggerNode: HTMLElement) => HTMLElement` | `undefined` | Function returning the container node for the popup (v6 API). |
-| `showTimezoneRow` | `boolean` | `true` | Whether to show the timezone row in the footer. |
-| `todayButtonText` | `string` | `'Today'` | Text for the Today button. |
-| `onTodaySelect` | `(dates: [dayjs.Dayjs, dayjs.Dayjs]) => void` | `() => {}` | Callback fired when the Today button is clicked. |
-| `allowClearSelection` | `boolean` | `true` | Whether to allow clearing the selection. |
-| `allowClearSelectionText` | `string` | `undefined` | Custom text for the clear selection button. |
-
-### Deprecated Props
-
-| Prop | Type | Replacement | Notes |
-|------|------|-------------|-------|
-| `dropdownClassName` | `string` | `popupClassName` | Logs deprecation warning |
-| `dropdownStyle` | `React.CSSProperties` | `popupStyle` | Logs deprecation warning |
-| `getCalendarContainer` | `(triggerNode: HTMLElement) => HTMLElement` | `getPopupContainer` | Logs deprecation warning |
-| `dateRender` | `(current: dayjs.Dayjs) => React.ReactNode` | `cellRender` | Logs deprecation warning |
-
-## Features
-
-### Locked Date Modes
-
-When `disableStartDate` or `disableEndDate` is enabled, the component enters a locked date mode:
-
-- **One-click selection**: Clicking a date immediately selects the range (locked start + clicked end, or clicked start + locked end)
-- **Input focus management**: Automatically focuses the unlocked input and prevents interaction with the locked input
-- **Visual feedback**: Locked inputs are visually dimmed and show tooltips explaining the locked state
-- **Smart constraints**: Disabled dates are automatically adjusted based on locked dates (end cannot be before locked start, start cannot be after locked end)
-- **Today button**: Automatically adjusts to respect locked dates when selecting today's range
-
-### Default Time Handling
-
-The component intelligently handles default times:
-
-- **Today's date**: If the selected start date is today, uses the current time instead of midnight
-- **Past dates**: Uses midnight (00:00:00) for start dates
-- **End dates**: Uses end of day (23:59:59) for end dates when different from start date
-- **Midnight detection**: Automatically detects when times are at midnight and applies appropriate defaults
-
-### Timezone Support
-
-- All dates are converted to the specified `timezone`
-- Timezone label is displayed in the footer (can be hidden with `showTimezoneRow={false}`)
-- Format: `{timezone} (UTC{offset})` (e.g., "America/New_York (UTC-05:00)")
-
-### onChange Result Shape
-
-The `onChange` callback receives an object with:
-
-```typescript
-{
-  start: dayjs.Dayjs | Moment | null;  // Same type as input (auto-detected)
-  end: dayjs.Dayjs | Moment | null;    // Same type as input (auto-detected)
-  startTime: string | null;             // ISO string
-  endTime: string | null;               // ISO string
-}
-```
-
-## Non-Tokenizable Overrides
-
-The following antd class overrides use `:global` in `styles.scss` with `// OVERRIDE:` comments:
-
-| Override | Reason |
-|----------|--------|
-| `.ant-picker-ok { display: none }` | Component uses custom Confirm button |
-| `.ant-picker-now { display: none }` | Component uses custom Today button |
-| `.ant-picker-cell-inner { border-radius: 50% }` | Round date cells; no per-cell radius token |
-| `.ant-picker-cell-in-range` styling | Custom in-range appearance with rounded edges |
-| Month/year/decade panel selection colors | No dedicated panel selection color tokens |
-| Time panel `text-transform: capitalize` | No text-transform token |
-| Locked panel dimming (`.cap-cal-lock-start`, `.cap-cal-lock-end`) | Custom feature with no antd token support |
-| Footer layout (`display: contents`, flex) | Custom footer button arrangement |
-
-## Design Tokens
-
-DatePicker tokens are configured in `getCapThemeConfig.ts`:
-
-```typescript
-DatePicker: {
-  colorTextPlaceholder: styledVars.CAP_G05,
-  colorBorder: styledVars.CAP_G06,
-  colorPrimaryHover: styledVars.CAP_G06,
-  colorBgContainer: styledVars.CAP_WHITE,
-  colorBgElevated: styledVars.CAP_WHITE,
-  controlItemBgHover: styledVars.CAP_COLOR_08,
-  colorTextDisabled: styledVars.CAP_G06,
-  activeBorderColor: styledVars.CAP_G06,
-  activeShadow: 'transparent',
-}
-```
-
-## Usage
-
-### Basic Usage
-
-```tsx
-import CapDateTimeRangePicker from 'blaze-ui/components/CapDateTimeRangePicker';
-
-<CapDateTimeRangePicker
-  timezone="America/New_York"
-  showTime={{ format: 'HH:mm' }}
-  format="DD-MM-YYYY | HH:mm"
-  onChange={({ start, end, startTime, endTime }) => {
-    console.log(start, end, startTime, endTime);
-  }}
-/>
-```
-
-### Locked Start Date
-
-```tsx
-<CapDateTimeRangePicker
-  value={[lockedStartDate, null]}
-  disableStartDate={true}
-  timezone="UTC"
-  onChange={({ start, end }) => {
-    // start will always be lockedStartDate
-    // end will be the selected date
-  }}
-/>
-```
-
-### Locked End Date
-
-```tsx
-<CapDateTimeRangePicker
-  value={[null, lockedEndDate]}
-  disableEndDate={true}
-  timezone="America/New_York"
-  disabledEndDateText="End date is fixed"
-  onChange={({ start, end }) => {
-    // start will be the selected date
-    // end will always be lockedEndDate
-  }}
-/>
-```
-
-### Custom Cell Rendering
-
-```tsx
-<CapDateTimeRangePicker
-  cellRender={(current, info) => {
-    if (info.type === 'date') {
-      // Custom rendering for date cells
-      return <span className="custom-date">{current.date()}</span>;
-    }
-    return info.originNode;
-  }}
-/>
-```
-
-### Without Timezone Display
-
-```tsx
-<CapDateTimeRangePicker
-  showTimezoneRow={false}
-  timezone="UTC"
-  onChange={({ start, end }) => {
-    // Timezone row hidden in footer
-  }}
-/>
-```
-
-### Custom Placeholders and Icons
-
-```tsx
-<CapDateTimeRangePicker
-  placeholder={['From', 'To']}
-  suffixIcon={<CustomIcon />}
-  separator={<span>→</span>}
-  onChange={({ start, end }) => {
-    // Custom UI elements
-  }}
-/>
-```

package/CapDivider/README.md

@@ -1,122 +0,0 @@
-# CapDivider
-
-A divider component for separating content sections.
-
-## Migration from cap-ui-library
-
-### Summary of Changes
-
-CapDivider has been migrated from cap-ui-library to blaze-ui with minimal breaking changes. The component now uses Ant Design v6 APIs while maintaining backward compatibility with deprecated props.
-
-### Prop Changes
-
-#### Renamed Props
-- None
-
-#### Deprecated Props (Still Supported)
-- `orientation="left"` → Maps to `orientation="start"` (deprecated, use `start` instead)
-- `orientation="right"` → Maps to `orientation="end"` (deprecated, use `end` instead)
-
-**Note:** Deprecated values (`left` and `right`) will show console warnings in development mode but continue to work for backward compatibility.
-
-#### New Props
-- `type` - Controls divider direction: `'horizontal' | 'vertical'` (maps to Ant Design's `orientation` prop)
-- `orientation` - Controls text alignment: `'start' | 'center' | 'end'` (maps to Ant Design's `titlePlacement` prop)
-
-### API Changes
-
-#### Before (cap-ui-library)
-```jsx
-import CapDivider from '@capillarytech/cap-ui-library/components/CapDivider';
-
-<CapDivider orientation="left">Text</CapDivider>
-```
-
-#### After (blaze-ui)
-```jsx
-import { CapDivider } from '@capillarytech/blaze-ui';
-
-// New API (recommended)
-<CapDivider orientation="start">Text</CapDivider>
-
-// Legacy API (still works, shows deprecation warning)
-<CapDivider orientation="left">Text</CapDivider>
-```
-
-### Behavioral Changes
-
-- **No breaking changes** - All existing functionality is preserved
-- Deprecated `orientation` values (`left`/`right`) are automatically mapped to their new equivalents (`start`/`end`)
-- Console warnings are shown in development mode when deprecated props are used
-
-### Migration Steps for Consumers
-
-1. **Update imports:**
-   ```jsx
-   // Old
-   import CapDivider from '@capillarytech/cap-ui-library/components/CapDivider';
-   
-   // New
-   import { CapDivider } from '@capillarytech/blaze-ui';
-   ```
-
-2. **Update deprecated prop values (optional, but recommended):**
-   ```jsx
-   // Old
-   <CapDivider orientation="left">Text</CapDivider>
-   <CapDivider orientation="right">Text</CapDivider>
-   
-   // New
-   <CapDivider orientation="start">Text</CapDivider>
-   <CapDivider orientation="end">Text</CapDivider>
-   ```
-
-   **Note:** The old values still work, but you'll see deprecation warnings in development.
-
-### Code Examples
-
-#### Basic Usage
-```jsx
-import { CapDivider } from '@capillarytech/blaze-ui';
-
-// Horizontal divider without text
-<CapDivider />
-
-// Horizontal divider with centered text
-<CapDivider>Section Title</CapDivider>
-
-// Horizontal divider with left-aligned text
-<CapDivider orientation="start">Left Text</CapDivider>
-
-// Horizontal divider with right-aligned text
-<CapDivider orientation="end">Right Text</CapDivider>
-
-// Vertical divider
-<CapDivider type="vertical" />
-```
-
-#### With Custom Styling
-```jsx
-<CapDivider className="custom-divider" style={{ margin: '2rem 0' }}>
-  Custom Styled Divider
-</CapDivider>
-```
-
-#### With Ant Design Props
-```jsx
-<CapDivider dashed plain>
-  Dashed Plain Divider
-</CapDivider>
-```
-
-### Import Examples
-
-```tsx
-// Default import
-import { CapDivider } from '@capillarytech/blaze-ui';
-
-// With type import
-import { CapDivider } from '@capillarytech/blaze-ui';
-import type { CapDividerProps } from '@capillarytech/blaze-ui';
-```
-

package/CapDrawer/README.md

@@ -1,207 +0,0 @@
-# CapDrawer
-
-A wrapper component around Ant Design's Drawer component that provides consistent styling and a simplified API for displaying drawer panels 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. Ant Design Drawer Component API Changes
-
-The following Ant Design `Drawer` component props have been deprecated in v6:
-
-| Ant Design Component | Deprecated Prop (v3/v5) | New Prop (v6) | Status | Migration Guide |
-|---------------------|-------------------------|---------------|--------|-----------------|
-| **Drawer** | `visible` | `open` | ⚠️ Deprecated | Replace `visible={...}` with `open={...}`. Backward compatibility maintained. |
-| **Drawer** | `onVisibleChange` | `onOpenChange` | ⚠️ Deprecated | Replace `onVisibleChange={...}` with `onOpenChange={...}`. Backward compatibility maintained. |
-
-**Example:**
-```tsx
-// ❌ Deprecated (still works with warning)
-<CapDrawer visible={isOpen} onVisibleChange={setIsOpen} />
-
-// ✅ Recommended
-<CapDrawer open={isOpen} onOpenChange={setIsOpen} />
-```
-
-### Backward Compatibility
-
-The component maintains backward compatibility for deprecated Ant Design Drawer props:
-
-- **`visible` prop** (Ant Design Drawer): Still works but logs a deprecation warning in development. Use `open` instead.
-- **`onVisibleChange` prop** (Ant Design Drawer): Still works but logs a deprecation warning in development. Use `onOpenChange` instead.
-
-### Style Changes
-
-**Approach**: The component uses Ant Design v6's Drawer component which applies styling through theme tokens. No custom SCSS overrides are needed for the drawer itself.
-
-**Note**: Consumer components like `CapTopBar` and `CapHamburgerMenu` may have their own drawer styling overrides, but these are handled within those components' stylesheets.
-
-### Code Improvements
-
-1. **TypeScript support**: Full TypeScript definitions with proper prop types
-2. **Using deprecation warning utility**: Now uses `logDeprecationWarning` utility for consistent deprecation warnings
-3. **Improved backward compatibility**: Deprecated props are mapped using nullish coalescing (`??`) for cleaner code
-4. **Modern React patterns**: Uses functional component with React.FC
-
-### What Stayed the Same
-
-- Custom `content` prop (maps to children)
-- Custom `size` prop for width presets (`'s'`, `'r'`, `'l'`)
-- Custom `width` prop for explicit width values
-- All other Ant Design Drawer props pass through unchanged
-
-### What Changed
-
-- **Removed**: PropTypes (replaced with TypeScript)
-- **Updated**: Import from `antd` to `antd-v5`
-- **Added**: TypeScript type definitions in `types.ts`
-- **Added**: Deprecation warnings for `visible` and `onVisibleChange` props
-
-## Props
-
-### Standard Props
-
-All standard Ant Design Drawer props are supported. Refer to [Ant Design Drawer documentation](https://ant.design/components/drawer) for complete API reference.
-
-### Custom Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `content` | `ReactNode` | - | Content to display inside the drawer (maps to children) |
-| `width` | `number \| string` | `256` | Width of the drawer in pixels or CSS units |
-| `size` | `'s' \| 'r' \| 'l'` | - | Size preset: 's' = 25vw, 'r' = 50vw, 'l' = 75vw |
-| `open` | `boolean` | - | Controlled open state |
-| `defaultOpen` | `boolean` | `false` | Default open state (uncontrolled) |
-| `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes |
-
-### Deprecated Props
-
-The following props are deprecated but still supported for backward compatibility. They will show console warnings in development mode and will be removed in v10.0.0.
-
-#### Ant Design Drawer Component Props
-
-| Deprecated Prop | Ant Design Component | Replacement | Migration Example |
-|----------------|---------------------|-------------|-------------------|
-| `visible` | **Drawer** | `open` | See example below |
-| `onVisibleChange` | **Drawer** | `onOpenChange` | See example below |
-
-**Migration Example:**
-```tsx
-// Before (deprecated)
-<CapDrawer
-  visible={isOpen}
-  onVisibleChange={setIsOpen}
-  title="Drawer"
-  content={<div>Content</div>}
-/>
-
-// After (recommended)
-<CapDrawer
-  open={isOpen}
-  onOpenChange={setIsOpen}
-  title="Drawer"
-  content={<div>Content</div>}
-/>
-```
-
-**Note:** The deprecated `visible` and `onVisibleChange` props are automatically mapped to `open` and `onOpenChange` internally. However, you should migrate to the new API to avoid future breaking changes.
-
-## Examples
-
-### Basic Usage
-
-```tsx
-import { CapDrawer, CapButton } from '@capillarytech/blaze-ui';
-import { useState } from 'react';
-
-const MyComponent = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <CapButton onClick={() => setOpen(true)}>Open Drawer</CapButton>
-      <CapDrawer
-        open={open}
-        onOpenChange={setOpen}
-        title="Drawer Title"
-        content={<div>Drawer content goes here</div>}
-      />
-    </>
-  );
-};
-```
-
-### Using Size Presets
-
-```tsx
-<CapDrawer
-  open={open}
-  onOpenChange={setOpen}
-  size="l" // 75vw width
-  title="Large Drawer"
-  content={<div>Content</div>}
-/>
-
-<CapDrawer
-  open={open}
-  onOpenChange={setOpen}
-  size="r" // 50vw width
-  title="Regular Drawer"
-  content={<div>Content</div>}
-/>
-
-<CapDrawer
-  open={open}
-  onOpenChange={setOpen}
-  size="s" // 25vw width
-  title="Small Drawer"
-  content={<div>Content</div>}
-/>
-```
-
-### Custom Width
-
-```tsx
-<CapDrawer
-  open={open}
-  onOpenChange={setOpen}
-  width={400} // 400px
-  title="Custom Width Drawer"
-  content={<div>Content</div>}
-/>
-
-<CapDrawer
-  open={open}
-  onOpenChange={setOpen}
-  width="30vw" // 30% viewport width
-  title="Viewport Width Drawer"
-  content={<div>Content</div>}
-/>
-```
-
-
-## TypeScript
-
-The component is fully typed with TypeScript. Import types as needed:
-
-```tsx
-import type { CapDrawerProps } from '@capillarytech/blaze-ui';
-
-const MyDrawer: React.FC<CapDrawerProps> = (props) => {
-  // ...
-};
-```
-
-## Related Components
-
-- `CapModal` - Modal dialog component
-- `CapPopover` - Popover component
-- `CapTooltip` - Tooltip component
-
-## References
-
-- [Ant Design Drawer Documentation](https://ant.design/components/drawer)
-- [Ant Design Migration Guide](https://ant.design/docs/react/migration-v6)

package/CapDrawer/Status.md

@@ -1,52 +0,0 @@
-# Migration Status: CapDrawer
-
-**Last Updated**: 2026-02-06 02:24:50
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [x] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 1.5**: Export component in blaze-ui/components/index.ts
-- [x] **Step 2**: Migration Prompt 2 (Storybook support)
-- [x] **Step 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
-- [x] **Step 3**: Migration Prompt 3 (Unit tests)
-- [x] **Step 4**: Migration Prompt 4 (Visual test cases)
-- [x] **Step 5**: Linting (ESLint)
-- [x] **Step 6**: Pre-build Validation
-- [x] **Step 7**: Build blaze-ui
-- [x] **Step 8**: Visual Testing
-- [x] **Step 9**: CSS Analysis (if mismatches found)
-- [x] **Step 9.5**: CSS Analysis Completed
-- [x] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [x] **Step 11**: Create Pull Request
-
-## Deprecated Props Verification
-
-_No deprecated props verification results yet._
-
-**Note**: Step 2.5 is REQUIRED and enforced. 
-- Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
-- Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
-- Skip: If original component doesn't exist in cap-ui-library
-- All deprecated Ant Design props and prop changes must be documented before proceeding.
-
-## Visual Testing Results
-
-**Last Test**: 2026-02-06 02:24:50
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-31 20:57:16
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapDrawer/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._