@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapRoadMap/README.md

@@ -1,126 +0,0 @@
-# CapRoadMap
-
-A roadmap component built on Ant Design's Timeline component, displaying a series of roadmap items with custom styling.
-
-## Migration from cap-ui-library
-
-This component has been migrated from `@capillarytech/cap-ui-library` to `@capillarytech/blaze-ui` with the following changes:
-
-- Converted from JavaScript to TypeScript
-- Converted from styled-components to SCSS modules
-- Migrated to Ant Design v6 APIs
-- 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 backward compatibility with the previous version.
-
-## Deprecated Props
-
-### Ant Design Component Usage
-
-This component uses Ant Design's **Timeline** component internally. The following Ant Design API changes are relevant:
-
-#### `Timeline.Item` (Internal Usage - Deprecated)
-
-- **Status:** Deprecated in Ant Design v6
-- **Replacement:** Use Timeline's `items` prop instead of `Timeline.Item` children
-- **Impact:** Internal implementation detail - no impact on CapRoadMap API
-- **Migration:** The component will be migrated to use Timeline's `items` prop pattern in a future update
-
-**Note:** `Timeline.Item` still works in Ant Design v6 for backward compatibility, but the recommended approach is to use the `items` prop pattern. This is an internal implementation detail and does not affect the CapRoadMap component's public API.
-
-**Example of Ant Design Timeline v6 pattern (for reference):**
-
-```tsx
-// ❌ Deprecated pattern (currently used internally)
-<Timeline>
-  <Timeline.Item icon={icon}>Content</Timeline.Item>
-  <Timeline.Item>Content</Timeline.Item>
-</Timeline>
-
-// ✅ Recommended pattern (future migration)
-<Timeline
-  items={[
-    { icon: icon, children: 'Content' },
-    { children: 'Content' }
-  ]}
-/>
-```
-
-### CapRoadMap Props
-
-**No deprecated props** - All CapRoadMap props remain unchanged and fully supported.
-
-## Prop Changes
-
-| Prop | Status | Notes |
-|------|--------|-------|
-| `className` | ✅ Unchanged | Custom CSS class name |
-| `roadMapPanes` | ✅ Unchanged | Array of roadmap pane objects |
-| `defaultRoadMapDisabledMessage` | ✅ Unchanged | Message shown when a roadmap item is disabled |
-
-### RoadMapPane Interface
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `key` | `string` | `''` | Unique identifier for the roadmap item |
-| `roadMapImage` | `string` | `''` | Image/icon to display as the timeline dot |
-| `title` | `string` | `''` | Title text for the roadmap item |
-| `description` | `string` | `''` | Description text for the roadmap item |
-| `disabled` | `boolean` | `false` | Whether the roadmap item is disabled |
-
-## API Changes
-
-- **TypeScript Support:** Full TypeScript support with exported `CapRoadMapProps` and `RoadMapPane` interfaces
-- **Ant Design Version:** Upgraded from Ant Design v3 to v6
-- **Styling:** Migrated from styled-components to SCSS modules
-
-## Usage
-
-```tsx
-import { CapRoadMap } from '@capillarytech/blaze-ui';
-
-const roadMapPanes = [
-  {
-    key: '1',
-    roadMapImage: '🚀',
-    title: 'Phase 1',
-    description: 'Initial setup and configuration',
-    disabled: false,
-  },
-  {
-    key: '2',
-    roadMapImage: '📊',
-    title: 'Phase 2',
-    description: 'Data migration and validation',
-    disabled: false,
-  },
-  {
-    key: '3',
-    roadMapImage: '✅',
-    title: 'Phase 3',
-    description: 'Final testing and deployment',
-    disabled: true,
-  },
-];
-
-<CapRoadMap
-  roadMapPanes={roadMapPanes}
-  defaultRoadMapDisabledMessage="This phase is not yet available"
-/>
-```
-
-## Internal Implementation Notes
-
-- The component uses Ant Design's `Timeline.Item` internally, which is deprecated in Ant Design v6
-- Future migration will update to use Timeline's `items` prop pattern
-- This change will be internal and will not affect the component's public API
-
-## Related Components
-
-- `CapTimeline` - More advanced timeline component with additional features
-- `CapTimelineNested` - Nested timeline component

package/CapRoadMap/Status.md

@@ -1,53 +0,0 @@
-# Migration Status: CapRoadMap
-
-**Last Updated**: 2026-02-06 09:38:10
-
-## 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 09:38:10
-**Maximum Mismatch**: 4.62%
-
-### Mismatched Variants:
-- with-images:4.62%
-- long-content:4.37%
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-31 23:36:33
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapRoadMap/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapRoadMap/tests/USE_CASE_GAPS.md

@@ -1,92 +0,0 @@
-# CapRoadMap Use Case Gaps Analysis
-
-## Phase 0: Google Sheets Access
-
-**Status**: ⚠️ **Unable to access Google Sheets**
-
-- MCP Server `google_sheets` was not available
-- Spreadsheet ID: `1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg`
-- Tab: `CapRoadMap`
-
-**Action Required**: Manual review of Google Sheets to compare use cases against component implementation.
-
----
-
-## Phase 1: Use Cases NOT Fulfilled by CapRoadMap
-
-Based on component analysis, the following use cases are **NOT** currently supported:
-
-### 1. **Interactive Features**
-- ❌ **Click handlers**: No `onClick` or `onPaneClick` callbacks
-- ❌ **Navigation**: No ability to navigate to different phases
-- ❌ **Selection**: No way to mark/select active or current phase
-- ❌ **Hover effects**: No hover state handling or tooltips
-- ❌ **Focus management**: No keyboard navigation or focus handling
-
-### 2. **Dynamic Content**
-- ❌ **Loading states**: No loading indicator for async data
-- ❌ **Error states**: No error handling or error display
-- ❌ **Empty states**: No custom empty state message
-- ❌ **Progress tracking**: No progress indicators or completion status
-
-### 3. **Customization**
-- ❌ **Custom styling per pane**: All panes use same styling
-- ❌ **Custom icons/images per state**: Only single `roadMapImage` per pane
-- ❌ **Conditional rendering**: No ability to show/hide specific panes
-- ❌ **Sorting/filtering**: No ability to reorder or filter panes
-
-### 4. **Accessibility Enhancements**
-- ❌ **ARIA labels**: No custom ARIA labels for panes
-- ❌ **Keyboard navigation**: No arrow key navigation between panes
-- ❌ **Screen reader announcements**: No announcements for state changes
-- ❌ **Focus indicators**: No visible focus indicators for keyboard users
-
-### 5. **Data Features**
-- ❌ **Date/time display**: No date or time information per phase
-- ❌ **Status indicators**: No status beyond disabled/enabled
-- ❌ **Completion tracking**: No percentage or completion status
-- ❌ **Dependencies**: No way to show phase dependencies
-
-### 6. **User Interactions**
-- ❌ **Expand/collapse**: No ability to expand/collapse panes
-- ❌ **Drag and drop**: No reordering capability
-- ❌ **Inline editing**: No editing capabilities
-- ❌ **Actions menu**: No action buttons per pane
-
----
-
-## Current Component Capabilities
-
-The component **DOES** support:
-
-✅ **Basic rendering**: Displays roadmap panes in timeline format
-✅ **Disabled state**: Shows disabled message when pane is disabled
-✅ **Custom images**: Supports `roadMapImage` per pane
-✅ **Custom className**: Supports custom CSS classes
-✅ **Title and description**: Displays title and description per pane
-✅ **Conditional description**: Shows disabled message when disabled
-
----
-
-## Recommendations
-
-1. **Review Google Sheets**: Manually review the use cases in Google Sheets to identify which gaps are actual requirements
-2. **Prioritize gaps**: Determine which missing features are critical vs. nice-to-have
-3. **Enhance component**: Add missing features based on priority
-4. **Update tests**: Add tests for any new features added
-
----
-
-## Test Coverage Status
-
-✅ **Tests implemented** covering:
-- Default rendering
-- Prop variations
-- Disabled state handling
-- Edge cases (empty, null, undefined)
-- Data flow and state management
-- Conditional rendering logic
-- Accessibility (basic)
-- Backward compatibility
-
-**Note**: Tests focus on current component capabilities. Additional tests will be needed if new features are added.

package/CapRow/README.md

@@ -1,424 +0,0 @@
-# CapRow Migration Documentation
-
-## Summary
-
-`CapRow` has been migrated from `@capillarytech/cap-ui-library` (Ant Design v3) to `@capillarytech/blaze-ui` (Ant Design v6). The component is a wrapper around Ant Design's `Row` component with additional styling and layout utilities.
-
-## Migration Changes
-
-### Component Structure
-
-**Before (cap-ui-library):**
-- Class component
-- Simple wrapper with minimal props
-- Basic className support
-
-**After (blaze-ui):**
-- Functional component with React hooks
-- Enhanced props for layout control
-- TypeScript with full type definitions
-- SCSS modules instead of styled-components
-
-## Props
-
-### Props Comparison
-
-| Prop | cap-ui-library | blaze-ui | Status |
-|------|----------------|----------|--------|
-| `children` | ✅ | ✅ | **Unchanged** |
-| `className` | ✅ | ✅ | **Unchanged** |
-| `style` | ❌ | ✅ | **Added** |
-| `justify` | ❌ | ✅ | **Added** |
-| `align` | ❌ | ✅ | **Added** |
-| `gutter` | ❌ | ✅ | **Added** |
-| `wrap` | ❌ | ✅ | **Added** |
-| `width` | ❌ | ✅ | **Added** |
-| `height` | ❌ | ✅ | **Added** |
-| `margin` | ❌ | ✅ | **Added** |
-| `padding` | ❌ | ✅ | **Added** |
-| `fullWidth` | ❌ | ✅ | **Added** |
-| `fullHeight` | ❌ | ✅ | **Added** |
-| `fillSpace` | ❌ | ✅ | **Added** |
-| `responsive` | ❌ | ✅ | **Added** |
-| `vertical` | ❌ | ✅ | **Added** (deprecated) |
-| `noWrap` | ❌ | ✅ | **Added** |
-| `gap` | ❌ | ✅ | **Added** |
-
-### All Ant Design Row Props
-
-The component extends all Ant Design v6 `Row` props, so you can use any valid `RowProps` from Ant Design v6.
-
-## New Props
-
-### Layout Control Props
-
-#### `justify`
-- **Type:** `'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'`
-- **Default:** `'start'`
-- **Description:** Defines how items are distributed along the main axis (horizontal alignment)
-- **Example:**
-  ```tsx
-  <CapRow justify="space-between">
-    <div>Left</div>
-    <div>Right</div>
-  </CapRow>
-  ```
-
-#### `align`
-- **Type:** `'top' | 'middle' | 'bottom' | 'stretch'`
-- **Default:** `'top'`
-- **Description:** Defines how items are aligned along the cross axis (vertical alignment)
-- **Example:**
-  ```tsx
-  <CapRow align="middle">
-    <div>Item 1</div>
-    <div>Item 2</div>
-  </CapRow>
-  ```
-
-#### `gutter`
-- **Type:** `number | Record<string, unknown> | number[]`
-- **Default:** `0`
-- **Description:** Spacing between columns (in pixels). Can be a number, object with breakpoints, or array for [horizontal, vertical]
-- **Example:**
-  ```tsx
-  <CapRow gutter={16}>
-    <CapColumn span={12}>Column 1</CapColumn>
-    <CapColumn span={12}>Column 2</CapColumn>
-  </CapRow>
-  ```
-
-#### `wrap`
-- **Type:** `boolean`
-- **Default:** `true`
-- **Description:** Whether items should wrap to next line when they don't fit
-- **Example:**
-  ```tsx
-  <CapRow wrap={false}>
-    {/* Items will not wrap */}
-  </CapRow>
-  ```
-
-### Size & Spacing Props
-
-#### `width`
-- **Type:** `string | number`
-- **Description:** Custom width for the row. If number, treated as pixels
-- **Example:**
-  ```tsx
-  <CapRow width={500}>Content</CapRow>
-  <CapRow width="50%">Content</CapRow>
-  ```
-
-#### `height`
-- **Type:** `string | number`
-- **Description:** Custom height for the row. If number, treated as pixels
-- **Example:**
-  ```tsx
-  <CapRow height={200}>Content</CapRow>
-  ```
-
-#### `margin`
-- **Type:** `string | number`
-- **Description:** Custom margin. If number, treated as pixels
-- **Example:**
-  ```tsx
-  <CapRow margin={16}>Content</CapRow>
-  ```
-
-#### `padding`
-- **Type:** `string | number`
-- **Description:** Custom padding. If number, treated as pixels
-- **Example:**
-  ```tsx
-  <CapRow padding={16}>Content</CapRow>
-  ```
-
-### Utility Props
-
-#### `fullWidth`
-- **Type:** `boolean`
-- **Default:** `false`
-- **Description:** Makes the row take 100% width
-- **Example:**
-  ```tsx
-  <CapRow fullWidth>Full width content</CapRow>
-  ```
-
-#### `fullHeight`
-- **Type:** `boolean`
-- **Default:** `false`
-- **Description:** Makes the row take 100% height
-- **Example:**
-  ```tsx
-  <CapRow fullHeight>Full height content</CapRow>
-  ```
-
-#### `fillSpace`
-- **Type:** `boolean`
-- **Default:** `false`
-- **Description:** Makes the row flex-grow to fill available space (`flex: 1`)
-- **Example:**
-  ```tsx
-  <CapRow fillSpace>Fills available space</CapRow>
-  ```
-
-#### `responsive`
-- **Type:** `boolean`
-- **Default:** `true`
-- **Description:** Whether to use Ant Design's responsive grid system. If `false`, uses flexbox directly
-- **Example:**
-  ```tsx
-  <CapRow responsive={false}>Non-responsive flex layout</CapRow>
-  ```
-
-#### `noWrap`
-- **Type:** `boolean`
-- **Default:** `false`
-- **Description:** Prevents items from wrapping (equivalent to `wrap={false}`)
-- **Example:**
-  ```tsx
-  <CapRow noWrap>Items won't wrap</CapRow>
-  ```
-
-#### `gap`
-- **Type:** `number | number[] | string | null`
-- **Default:** `null`
-- **Description:** CSS gap property for spacing between items. Takes precedence over `gutter`. If `null`, uses `gutter` instead
-- **Example:**
-  ```tsx
-  <CapRow gap={16}>Items with 16px gap</CapRow>
-  <CapRow gap={[16, 8]}>16px horizontal, 8px vertical gap</CapRow>
-  ```
-
-### Deprecated Props
-
-#### `vertical`
-- **Type:** `boolean`
-- **Default:** `false`
-- **Status:** ⚠️ **Deprecated** - Not currently used in implementation
-- **Description:** This prop exists in the interface but is not actively used. It may be removed in future versions.
-
-## API Changes
-
-### Component Import
-
-**Before:**
-```javascript
-import CapRow from '@capillarytech/cap-ui-library/components/CapRow';
-```
-
-**After:**
-```typescript
-import { CapRow } from '@capillarytech/blaze-ui';
-// or
-import CapRow from '@capillarytech/blaze-ui/components/CapRow';
-```
-
-### Type Exports
-
-**After:**
-```typescript
-import type { CapRowProps } from '@capillarytech/blaze-ui';
-// or
-import type { CapRowProps } from '@capillarytech/blaze-ui/components/CapRow/types';
-```
-
-## Behavioral Changes
-
-### Children Handling
-
-**Before:**
-- Children were converted to array using `React.Children.toArray(children)`
-
-**After:**
-- Children are passed directly without conversion (Ant Design Row handles this internally)
-
-### Styling
-
-**Before:**
-- Simple className application: `"cap-row-v2"`
-- No additional styling utilities
-
-**After:**
-- Enhanced className system with conditional classes:
-  - `with-custom-width` - Applied when `width` prop is set
-  - `with-custom-height` - Applied when `height` prop is set
-  - `fill-space` - Applied when `fillSpace` prop is `true`
-  - `full-width` - Applied when `fullWidth` prop is `true`
-  - `full-height` - Applied when `fullHeight` prop is `true`
-  - `ant-row-no-wrap` - Applied when `noWrap` prop is `true`
-  - `with-gap` - Applied when `gap` prop is set (uses CSS Grid)
-
-## Code Examples
-
-### Basic Usage
-
-**Before:**
-```jsx
-<CapRow className="my-row">
-  <div>Item 1</div>
-  <div>Item 2</div>
-</CapRow>
-```
-
-**After:**
-```tsx
-<CapRow className="my-row">
-  <div>Item 1</div>
-  <div>Item 2</div>
-</CapRow>
-```
-
-### With Layout Props
-
-**New functionality:**
-```tsx
-<CapRow 
-  justify="space-between" 
-  align="middle"
-  gutter={16}
-  fullWidth
->
-  <CapColumn span={12}>Left Column</CapColumn>
-  <CapColumn span={12}>Right Column</CapColumn>
-</CapRow>
-```
-
-### With Custom Sizing
-
-```tsx
-<CapRow 
-  width={800}
-  height={200}
-  margin={16}
-  padding={24}
->
-  Content with custom dimensions
-</CapRow>
-```
-
-### With Gap (CSS Grid)
-
-```tsx
-<CapRow gap={16}>
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</CapRow>
-```
-
-### Fill Available Space
-
-```tsx
-<div style={{ display: 'flex', height: '100vh' }}>
-  <CapRow fillSpace>
-    Takes remaining space
-  </CapRow>
-</div>
-```
-
-## Migration Steps for Consumers
-
-### Step 1: Update Import
-
-```diff
-- import CapRow from '@capillarytech/cap-ui-library/components/CapRow';
-+ import { CapRow } from '@capillarytech/blaze-ui';
-```
-
-### Step 2: Add Type Imports (TypeScript)
-
-```typescript
-import type { CapRowProps } from '@capillarytech/blaze-ui';
-```
-
-### Step 3: Utilize New Props (Optional)
-
-You can now use enhanced layout props:
-
-```tsx
-// Before: Only className
-<CapRow className="my-row">Content</CapRow>
-
-// After: Enhanced layout control
-<CapRow 
-  justify="space-between"
-  align="middle"
-  gutter={16}
-  fullWidth
-  className="my-row"
->
-  Content
-</CapRow>
-```
-
-### Step 4: Update TypeScript Types (if applicable)
-
-If you have custom TypeScript types extending CapRow props:
-
-```typescript
-// Before
-interface MyRowProps {
-  customProp: string;
-}
-
-// After
-import type { CapRowProps } from '@capillarytech/blaze-ui';
-
-interface MyRowProps extends CapRowProps {
-  customProp: string;
-}
-```
-
-## Breaking Changes
-
-### None
-
-✅ **No breaking changes from cap-ui-library v8.x**
-
-The component maintains backward compatibility. All existing usage patterns continue to work. New props are optional and provide enhanced functionality.
-
-## File Structure
-
-```
-blaze-ui/components/CapRow/
-├── index.tsx          # Main component file
-├── types.ts           # TypeScript interfaces and types
-├── styles.scss        # SCSS module styles
-├── tests/
-│   └── index.test.tsx # Unit tests
-└── README.md          # This file
-```
-
-## TypeScript Support
-
-Full TypeScript support is provided:
-
-```typescript
-import { CapRow } from '@capillarytech/blaze-ui';
-import type { CapRowProps } from '@capillarytech/blaze-ui';
-
-const MyComponent: React.FC = () => {
-  const rowProps: CapRowProps = {
-    justify: 'center',
-    align: 'middle',
-    gutter: 16,
-  };
-
-  return <CapRow {...rowProps}>Content</CapRow>;
-};
-```
-
-## Related Components
-
-- `CapColumn` - Used together with `CapRow` for grid layouts
-- Ant Design `Row` - Base component that `CapRow` wraps
-
-## Notes
-
-- The component uses Ant Design v6's `Row` component internally
-- All Ant Design v6 `RowProps` are supported via spread props
-- The `gap` prop uses CSS Grid when set, otherwise uses Ant Design's `gutter` system
-- The `vertical` prop is deprecated and may be removed in future versions
-