@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapCheckbox/README.md

@@ -1,254 +0,0 @@
-# CapCheckbox Component
-
-A checkbox component built on top of Ant Design v6 Checkbox with additional features like error messages, inductive text, and custom label types.
-
-## 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 improvements:
-
-1. **TypeScript Conversion**
-   - Converted from JavaScript to TypeScript
-   - Added comprehensive TypeScript interfaces in separate `CapCheckbox.interfaces.ts` file
-   - Replaced PropTypes with TypeScript types
-   - Full type safety with no `any` types
-
-2. **Modern React Patterns**
-   - Maintained as functional component
-   - Uses React hooks (already functional in cap-ui-library)
-   - Better type safety with TypeScript
-
-3. **Styling**
-   - Converted from styled-components to SCSS modules
-   - Uses SCSS variables from `components/styled/` directory
-   - Maintains backward design compatibility with existing class names
-
-4. **Ant Design v6 Migration**
-   - Updated to use Ant Design v6 APIs (`antd-v5` package)
-   - All Ant Design Checkbox props are supported through prop spreading
-
-### 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.
-
-### Props
-
-| Prop Name | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `className` | `string` | `undefined` | Additional CSS class name for the checkbox wrapper |
-| `children` | `React.ReactNode` | `undefined` | Label text/content for the checkbox |
-| `errorMessage` | `string` | `undefined` | Error message displayed below the checkbox when `className` contains "error" |
-| `inductiveText` | `string` | `undefined` | Additional text displayed below the checkbox label |
-| `suffix` | `React.ReactNode` | `undefined` | Additional content displayed after the label |
-| `labelType` | `string` | `'h4'` | Type of label to use (passed to `CapLabel.CapLabelInline`) |
-| `checked` | `boolean` | `undefined` | Whether the checkbox is checked (Ant Design prop) |
-| `disabled` | `boolean` | `undefined` | Whether the checkbox is disabled (Ant Design prop) |
-| `onChange` | `(e: CheckboxChangeEvent) => void` | `undefined` | Callback when checkbox state changes (Ant Design prop) |
-| `...rest` | `CheckboxProps` | - | All other Ant Design Checkbox props are supported |
-
-### Deprecated Props
-
-**No deprecated props** - All props from cap-ui-library v8.x are still supported.
-
-The Checkbox component in Ant Design v6 does not have deprecated props that require backward compatibility mapping.
-
-### TypeScript Interfaces
-
-```typescript
-import type { CapCheckboxProps } from '@capillarytech/blaze-ui';
-
-interface CapCheckboxProps extends Omit<CheckboxProps, 'children'> {
-  className?: string;
-  children?: React.ReactNode;
-  errorMessage?: string;
-  inductiveText?: string;
-  suffix?: React.ReactNode;
-  labelType?: string;
-}
-```
-
-### Static Properties
-
-The component exposes `CapCheckbox.Group` for checkbox groups:
-
-```tsx
-import { CapCheckbox } from '@capillarytech/blaze-ui';
-
-<CapCheckbox.Group>
-  <CapCheckbox value="option1">Option 1</CapCheckbox>
-  <CapCheckbox value="option2">Option 2</CapCheckbox>
-</CapCheckbox.Group>
-```
-
-### Behavioral Changes
-
-None. The component behaves identically to the original cap-ui-library implementation.
-
-### Migration Steps
-
-#### 1. Update Import
-
-```tsx
-// Before (cap-ui-library)
-import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
-
-// After (blaze-ui)
-import { CapCheckbox } from '@capillarytech/blaze-ui';
-// or
-import CapCheckbox from '@capillarytech/blaze-ui/CapCheckbox';
-```
-
-#### 2. Usage (No Changes Required)
-
-```tsx
-// Basic usage - works exactly the same
-<CapCheckbox>Checkbox Label</CapCheckbox>
-
-// With error message
-<CapCheckbox className="error" errorMessage="This field is required">
-  Required Field
-</CapCheckbox>
-
-// With inductive text
-<CapCheckbox inductiveText="Additional information">
-  Checkbox with Info
-</CapCheckbox>
-
-// With suffix
-<CapCheckbox suffix={<span>★</span>}>Checkbox with Suffix</CapCheckbox>
-
-// Controlled checkbox
-<CapCheckbox checked={isChecked} onChange={handleChange}>
-  Controlled Checkbox
-</CapCheckbox>
-
-// Disabled checkbox
-<CapCheckbox disabled>Disabled Checkbox</CapCheckbox>
-```
-
-#### 3. TypeScript (New Benefit)
-
-If using TypeScript, you now get full type checking:
-
-```tsx
-import { CapCheckbox, CapCheckboxProps } from '@capillarytech/blaze-ui';
-
-// Type-safe props
-const props: CapCheckboxProps = {
-  labelType: 'h3',
-  errorMessage: 'Error message',
-  children: 'Checkbox Label'
-};
-
-<CapCheckbox {...props} />
-```
-
-### Examples
-
-#### Basic Usage
-
-```tsx
-import { CapCheckbox } from '@capillarytech/blaze-ui';
-
-function Form() {
-  const [checked, setChecked] = React.useState(false);
-
-  return (
-    <CapCheckbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
-      I agree to the terms and conditions
-    </CapCheckbox>
-  );
-}
-```
-
-#### With Error Message
-
-```tsx
-import { CapCheckbox } from '@capillarytech/blaze-ui';
-
-function Form() {
-  const [hasError, setHasError] = React.useState(true);
-
-  return (
-    <CapCheckbox
-      className={hasError ? 'error' : ''}
-      errorMessage="Please accept the terms to continue"
-    >
-      Accept Terms
-    </CapCheckbox>
-  );
-}
-```
-
-#### With Inductive Text
-
-```tsx
-import { CapCheckbox } from '@capillarytech/blaze-ui';
-
-function Form() {
-  return (
-    <CapCheckbox inductiveText="By checking this, you agree to receive marketing emails">
-      Subscribe to newsletter
-    </CapCheckbox>
-  );
-}
-```
-
-#### Checkbox Group
-
-```tsx
-import { CapCheckbox } from '@capillarytech/blaze-ui';
-
-function Form() {
-  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
-
-  return (
-    <CapCheckbox.Group
-      value={selectedValues}
-      onChange={(values) => setSelectedValues(values as string[])}
-    >
-      <CapCheckbox value="option1">Option 1</CapCheckbox>
-      <CapCheckbox value="option2">Option 2</CapCheckbox>
-      <CapCheckbox value="option3">Option 3</CapCheckbox>
-    </CapCheckbox.Group>
-  );
-}
-```
-
-#### Custom Label Type
-
-```tsx
-import { CapCheckbox } from '@capillarytech/blaze-ui';
-
-function Form() {
-  return (
-    <CapCheckbox labelType="h3">
-      Large Label Checkbox
-    </CapCheckbox>
-  );
-}
-```
-
-### Styling
-
-The component uses SCSS modules with the following class structure:
-
-- `.cap-checkbox-wrapper` - Main wrapper
-- `.cap-checkbox-v2` - Checkbox container
-- `.title` - Label styling
-- `.title.has-suffix` - Label with suffix spacing
-- `.inductive-text` - Inductive text styling
-- `.error-message` - Error message styling
-
-All styles use SCSS variables from `components/styled/variables` for consistency.
-
-### Notes
-
-- The component wraps Ant Design's Checkbox component and extends it with additional features
-- Error messages are only displayed when `className` contains the string "error" and `errorMessage` is provided
-- The `labelType` prop is passed directly to `CapLabel.CapLabelInline` component
-- All Ant Design Checkbox props are supported through prop spreading
-- The component maintains backward compatibility with existing designs and class names

package/CapCheckbox/Status.md

@@ -1,41 +0,0 @@
-# Migration Status: CapCheckbox
-
-**Last Updated**: 2026-01-19 02:40:52
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [x] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 2**: Migration Prompt 2 (Storybook support)
-- [x] **Step 3**: Migration Prompt 3 (Unit tests)
-- [x] **Step 4**: Linting (ESLint)
-- [x] **Step 5**: Pre-build Validation
-- [x] **Step 6**: Build blaze-ui
-- [x] **Step 7**: Visual Testing
-- [x] **Step 8**: CSS Analysis (if mismatches found)
-- [x] **Step 8.5**: CSS Analysis Completed
-- [x] **Step 8.9**: Run Tests & Fix Failures
-- [ ] **Step 9**: Git Commit & Push to branch
-- [ ] **Step 10**: Create Pull Request
-
-## Visual Testing Results
-
-**Last Test**: 2026-01-19 02:40:52
-**Maximum Mismatch**: 2.48%
-
-### Mismatched Variants:
-- ✅ All variants match perfectly!
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-19 02:40:52
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapCheckbox/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._
-

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