@capillarytech/blaze-ui 5.20.0 → 5.22.0

package/CapSlider/README.md

@@ -1,423 +0,0 @@
-# CapSlider
-
-A slider component built on Ant Design v6 with Capillary-specific styling and custom tip formatter support.
-
-## Summary of Changes from cap-ui-library
-
-The `CapSlider` component has been migrated from `cap-ui-library` to `blaze-ui` with the following updates:
-
-- **TypeScript**: Full TypeScript implementation with proper type definitions
-- **Ant Design v6**: Updated to use Ant Design v6 APIs while maintaining backward compatibility
-- **Functional Component**: Converted from class component to functional component
-- **SCSS Modules**: Converted from regular SCSS to SCSS modules
-- **Theme Tokens**: Migrated color overrides to Ant Design theme tokens
-- **Backward Compatible**: All deprecated props from Ant Design v3 still work with console warnings
-
-## Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-The component maintains backward compatibility with deprecated props. However, deprecated props will show console warnings in development mode and should be migrated to the new API.
-
-## Prop Changes
-
-### New Props (v6 API)
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `tooltip` | `{ formatter?: (value?: number) => React.ReactNode, ... }` | `undefined` | Tooltip configuration object (v6 API) |
-
-### Deprecated Props (Still Supported)
-
-The following props are deprecated but still work for backward compatibility. They will show console warnings in development mode:
-
-#### Ant Design Slider Component Props
-
-These props are deprecated Ant Design `Slider` component props that have been replaced in v6:
-
-| Deprecated Prop | Type | Status | Replacement | Ant Design Component |
-|----------------|------|--------|-------------|---------------------|
-| `tipFormatter` | `((value?: number) => React.ReactNode) \| null` | ⚠️ Deprecated | Use `tooltip.formatter` instead | Slider |
-| `tooltipPlacement` | `string` | ⚠️ Deprecated | Use `tooltip.placement` instead | Slider |
-| `tooltipVisible` | `boolean` | ⚠️ Deprecated | Use `tooltip.open` instead | Slider |
-| `tooltipPrefixCls` | `string` | ⚠️ Deprecated | Use `tooltip.prefixCls` instead | Slider |
-
-**Reference**: These deprecations follow Ant Design v6 migration patterns documented in `ANTD_V6_MIGRATION.md` and `MIGRATION_CHANGELOG_TEMPLATE.md`.
-
-#### Cap Component Props
-
-| Deprecated Prop | Type | Status | Replacement | Notes |
-|----------------|------|--------|-------------|-------|
-| `type` | `'ratio' \| string` | ⚠️ Deprecated | Use `tooltip.formatter` instead | Cap-specific convenience prop |
-
-**Note**: Deprecated props will be removed in v10.0.0. Please migrate to the new prop names.
-
-### Other Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `number \| [number, number]` | `undefined` | Current value (controlled mode) |
-| `defaultValue` | `number \| [number, number]` | `undefined` | Default value (uncontrolled mode) |
-| `min` | `number` | `0` | Minimum value |
-| `max` | `number` | `100` | Maximum value |
-| `step` | `number \| null` | `1` | Step value |
-| `marks` | `Record<number, React.ReactNode>` | `undefined` | Marks on the slider |
-| `range` | `boolean` | `false` | Whether to use range slider |
-| `disabled` | `boolean` | `false` | Whether slider is disabled |
-| `vertical` | `boolean` | `false` | Whether slider is vertical |
-| `reverse` | `boolean` | `false` | Whether to reverse slider |
-| `included` | `boolean` | `true` | Whether marks are included in track |
-| `onChange` | `(value: number \| [number, number]) => void` | `undefined` | Callback when value changes |
-| `onAfterChange` | `(value: number \| [number, number]) => void` | `undefined` | Callback after value changes |
-| `sliderRaleColor` | `string` | `undefined` | Whether to apply slider rail color styling (note: typo preserved for backward compatibility) |
-| `className` | `string` | `undefined` | Additional CSS class name |
-| `children` | `React.ReactNode` | `undefined` | Slider children (marks or custom elements) |
-
-**Note**: The component accepts all other Ant Design v6 `Slider` props. See [Ant Design Slider documentation](https://ant.design/components/slider) for complete prop list.
-
-## API Changes
-
-### Ant Design Slider Component Prop Changes (v6 API)
-
-In Ant Design v6, several Slider component props have been consolidated into a `tooltip` object prop:
-
-#### tipFormatter → tooltip.formatter
-
-**Before (deprecated):**
-```tsx
-<CapSlider 
-  tipFormatter={(value) => `${value}%`}
-  defaultValue={50}
-/>
-```
-
-**After (recommended):**
-```tsx
-<CapSlider 
-  tooltip={{ formatter: (value) => `${value}%` }}
-  defaultValue={50}
-/>
-```
-
-#### tooltipPlacement → tooltip.placement
-
-**Before (deprecated):**
-```tsx
-<CapSlider 
-  tipFormatter={(value) => `${value}%`}
-  tooltipPlacement="top"
-  defaultValue={50}
-/>
-```
-
-**After (recommended):**
-```tsx
-<CapSlider 
-  tooltip={{ 
-    formatter: (value) => `${value}%`,
-    placement: 'top'
-  }}
-  defaultValue={50}
-/>
-```
-
-#### tooltipVisible → tooltip.open
-
-**Before (deprecated):**
-```tsx
-<CapSlider 
-  tipFormatter={(value) => `${value}%`}
-  tooltipVisible={true}
-  defaultValue={50}
-/>
-```
-
-**After (recommended):**
-```tsx
-<CapSlider 
-  tooltip={{ 
-    formatter: (value) => `${value}%`,
-    open: true
-  }}
-  defaultValue={50}
-/>
-```
-
-#### tooltipPrefixCls → tooltip.prefixCls
-
-**Before (deprecated):**
-```tsx
-<CapSlider 
-  tipFormatter={(value) => `${value}%`}
-  tooltipPrefixCls="custom-tooltip"
-  defaultValue={50}
-/>
-```
-
-**After (recommended):**
-```tsx
-<CapSlider 
-  tooltip={{ 
-    formatter: (value) => `${value}%`,
-    prefixCls: 'custom-tooltip'
-  }}
-  defaultValue={50}
-/>
-```
-
-### Cap Component Prop Changes
-
-#### Type Prop Migration
-
-The `type` prop was a Cap-specific convenience prop that translated to `tipFormatter`. It's now deprecated:
-
-**Before (deprecated):**
-```tsx
-<CapSlider 
-  type="ratio"
-  defaultValue={30}
-/>
-```
-
-**After (recommended):**
-```tsx
-<CapSlider 
-  tooltip={{ formatter: (value) => value !== undefined ? `${value} | ${100 - value}` : '' }}
-  defaultValue={30}
-/>
-```
-
-## Backward Compatibility
-
-The component maintains backward compatibility for deprecated props:
-
-### Ant Design Slider Component Props
-
-- **`tipFormatter` prop**: Still works but logs a deprecation warning in development. Use `tooltip.formatter` instead.
-- **`tooltipPlacement` prop**: Still works but is deprecated. Use `tooltip.placement` instead.
-- **`tooltipVisible` prop**: Still works but is deprecated. Use `tooltip.open` instead.
-- **`tooltipPrefixCls` prop**: Still works but is deprecated. Use `tooltip.prefixCls` instead.
-
-**Note**: Deprecated Ant Design Slider props (`tooltipPlacement`, `tooltipVisible`, `tooltipPrefixCls`) are passed directly to the underlying Ant Design `Slider` component. Ant Design v6 may still accept these props but they are deprecated and should be migrated to the `tooltip` object API.
-
-### Cap Component Props
-
-- **`type` prop**: Still works but logs a deprecation warning in development. Use `tooltip.formatter` instead.
-
-**Note**: If both `tooltip.formatter` and `tipFormatter` are provided, `tooltip.formatter` takes precedence. If `type` is provided, it will be translated to a formatter function and used if no other formatter is specified.
-
-## Code Examples
-
-### Basic Usage
-
-```tsx
-import { CapSlider } from '@capillarytech/blaze-ui';
-
-function MyComponent() {
-  const [value, setValue] = useState(50);
-
-  return (
-    <CapSlider 
-      value={value}
-      onChange={setValue}
-    />
-  );
-}
-```
-
-### Uncontrolled Mode
-
-```tsx
-<CapSlider 
-  defaultValue={30}
-  onChange={(value) => {
-    console.log('Slider value:', value);
-  }}
-/>
-```
-
-### Range Slider
-
-```tsx
-<CapSlider 
-  range
-  defaultValue={[20, 80]}
-  onChange={(values) => {
-    console.log('Range:', values);
-  }}
-/>
-```
-
-### With Marks
-
-```tsx
-<CapSlider 
-  marks={{
-    0: '0°C',
-    26: '26°C',
-    37: '37°C',
-    100: '100°C',
-  }}
-  defaultValue={26}
-/>
-```
-
-### Custom Tooltip Formatter (v6 API)
-
-```tsx
-<CapSlider 
-  tooltip={{ 
-    formatter: (value) => value !== undefined ? `$${value}` : ''
-  }}
-  defaultValue={50}
-/>
-```
-
-### Ratio Type (Deprecated - Use tooltip.formatter instead)
-
-```tsx
-// ⚠️ Deprecated but still works
-<CapSlider 
-  type="ratio"
-  defaultValue={30}
-/>
-
-// ✅ Recommended
-<CapSlider 
-  tooltip={{ 
-    formatter: (value) => value !== undefined ? `${value} | ${100 - value}` : ''
-  }}
-  defaultValue={30}
-/>
-```
-
-### With Custom Rail Color
-
-```tsx
-<CapSlider 
-  sliderRaleColor="custom"
-  defaultValue={50}
-/>
-```
-
-### Disabled State
-
-```tsx
-<CapSlider 
-  defaultValue={50}
-  disabled
-/>
-```
-
-### Vertical Slider
-
-```tsx
-<CapSlider 
-  vertical
-  defaultValue={50}
-  style={{ height: 200 }}
-/>
-```
-
-### With Step
-
-```tsx
-<CapSlider 
-  step={10}
-  defaultValue={30}
-/>
-```
-
-## Migration Steps for Consumers
-
-### Step 1: Update Imports
-
-**Before:**
-```tsx
-import { CapSlider } from '@capillarytech/cap-ui-library';
-```
-
-**After:**
-```tsx
-import { CapSlider } from '@capillarytech/blaze-ui';
-```
-
-### Step 2: Update Tooltip Configuration (If Using tipFormatter or type)
-
-**Before:**
-```tsx
-<CapSlider 
-  tipFormatter={(value) => `${value}%`}
-  defaultValue={50}
-/>
-
-// or
-
-<CapSlider 
-  type="ratio"
-  defaultValue={30}
-/>
-```
-
-**After:**
-```tsx
-<CapSlider 
-  tooltip={{ formatter: (value) => `${value}%` }}
-  defaultValue={50}
-/>
-
-// or for ratio type
-
-<CapSlider 
-  tooltip={{ 
-    formatter: (value) => value !== undefined ? `${value} | ${100 - value}` : ''
-  }}
-  defaultValue={30}
-/>
-```
-
-### Step 3: No Other Changes Required
-
-All other props and usage patterns remain the same. The component is fully backward compatible.
-
-## Import Examples
-
-### Default Import
-
-```tsx
-import CapSlider from '@capillarytech/blaze-ui/components/CapSlider';
-```
-
-### Named Import
-
-```tsx
-import { CapSlider } from '@capillarytech/blaze-ui';
-```
-
-### With TypeScript Types
-
-```tsx
-import { CapSlider } from '@capillarytech/blaze-ui';
-import type { CapSliderProps } from '@capillarytech/blaze-ui';
-
-const props: CapSliderProps = {
-  defaultValue: 50,
-  min: 0,
-  max: 100,
-};
-```
-
-## Notes
-
-- **No Breaking Changes**: The component is fully backward compatible with `cap-ui-library` v8.x
-- **Deprecated Ant Design Slider Props**: The following Ant Design `Slider` component props are deprecated: `tipFormatter`, `tooltipPlacement`, `tooltipVisible`, `tooltipPrefixCls`. These should be migrated to the `tooltip` object API (e.g., `tooltip.formatter`, `tooltip.placement`, `tooltip.open`, `tooltip.prefixCls`). They will be removed in Ant Design v7.
-- **Deprecated Cap Props**: `type` prop is deprecated but still supported. It will be removed in v10.0.0.
-- **Tooltip Configuration**: In Ant Design v6, tooltip configuration moved to a `tooltip` object prop. See [Ant Design Slider documentation](https://ant.design/components/slider) for complete `tooltip` API.
-- **Rail Color**: The `sliderRaleColor` prop name contains a typo but is preserved for backward compatibility
-- **Styling**: Uses SCSS modules with theme tokens for colors and custom CSS for dimensions/positioning
-
-## Related Components
-
-- `CapInput` - Input component for numeric values
-- `CapInputNumber` - Number input component
-- `CapSwitch` - Switch component for boolean toggles

package/CapSlider/Status.md

@@ -1,48 +0,0 @@
-# Migration Status: CapSlider
-
-**Last Updated**: 2026-02-04 09:56:53
-
-## 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 9**: CSS Analysis (if mismatches found)
-- [ ] **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 09:56:53
-**Maximum Mismatch**: 8.33%
-
-### Mismatched Variants:
-- tooltip-hover (with 3 interactions):8.33%
-
-
-## CSS Fixes Applied
-
-_No CSS fixes applied yet._
-
-## Notes
-
-_No notes yet._

package/CapSlider/tests/TEST_COVERAGE.md

@@ -1,118 +0,0 @@
-# CapSlider Test Coverage Summary
-
-## Phase 0: Use Cases Extraction
-**Status**: ⚠️ **Could not access Google Sheets MCP server**
-- Attempted to access spreadsheet via `google_sheets` MCP server
-- Server was not available/configured
-- Tests were created based on component code, README, and Storybook stories
-
-## Phase 1: Missing Use Cases Analysis
-**Status**: ⚠️ **Cannot determine without Google Sheets data**
-
-Without access to the use cases spreadsheet, I cannot identify specific use cases the component is NOT fulfilling. However, based on the component implementation review:
-
-### Component Capabilities (Verified):
-- ✅ Single and range slider modes
-- ✅ Controlled and uncontrolled modes
-- ✅ Custom min/max/step values
-- ✅ Marks/labels support
-- ✅ Tooltip formatters (v6 API and deprecated)
-- ✅ Disabled, vertical, reverse, included props
-- ✅ Backward compatibility for deprecated props
-- ✅ Custom className and styling
-- ✅ Children support
-
-### Potential Gaps (Requires Google Sheets verification):
-- Unknown: Specific business use cases from spreadsheet
-- Unknown: Edge cases or requirements not in standard Ant Design Slider API
-
-## Phase 2: Test Implementation
-**Status**: ✅ **Complete**
-
-### Test File Structure:
-```
-components/CapSlider/tests/
-  ├── CapSlider.test.tsx      (Main test file)
-  └── CapSlider.mockData.ts   (Mock data and helpers)
-```
-
-### Test Coverage Areas:
-
-1. **Default rendering and initialization** ✅
-   - Basic rendering
-   - DisplayName verification
-   - Default value handling
-
-2. **Prop variations** ✅
-   - Value and defaultValue (single and range)
-   - Min, max, step values
-   - Range, disabled, vertical, reverse, included
-   - Marks with custom labels
-   - Tooltip formatters (v6 API)
-   - Deprecated props (tipFormatter, type)
-   - className and sliderRaleColor
-   - Children support
-
-3. **User interactions** ✅
-   - onChange callback acceptance
-   - onAfterChange callback acceptance
-   - Range slider callbacks
-
-4. **Edge cases** ✅
-   - Empty/null values
-   - Boundary values (min/max)
-   - Step edge cases (null, very small, large)
-   - Undefined values
-
-5. **Accessibility** ✅
-   - Slider role verification
-   - Disabled state accessibility
-   - Focusable elements
-
-6. **Backward compatibility** ✅
-   - Deprecated tipFormatter prop
-   - Deprecated type prop
-   - Prop priority (tooltip.formatter > tipFormatter > type)
-   - Deprecation warnings in development
-
-7. **Data flow and state management** ✅
-   - Controlled mode updates
-   - Uncontrolled mode state
-   - Value prop changes
-
-8. **Conditional rendering logic** ✅
-   - Single vs range slider
-   - Tooltip config application
-   - Deprecated prop fallbacks
-
-9. **Integration tests** ✅
-   - All props combined
-   - Range slider with all props
-
-### Test Statistics:
-- **Total test cases**: 60+
-- **Test patterns used**:
-  - `it.each()` for repetitive prop variations
-  - Reusable helper functions (`renderSlider`, `getSlider`)
-  - Grouped `describe()` blocks by functionality
-  - Mock data in separate file for reusability
-
-### Code Quality:
-- ✅ DRY principles (reusable helpers)
-- ✅ No component source code modifications
-- ✅ Uses @testing-library/react
-- ✅ No mocking of Cap UI components
-- ✅ Focuses on functional behavior
-- ✅ No styling/CSS class testing
-
-## Next Steps:
-1. **Access Google Sheets** to complete Phase 0 and Phase 1
-2. **Run tests** to verify coverage percentage
-3. **Add missing use case tests** if any gaps are identified from spreadsheet
-4. **Verify 90%+ coverage** target is met
-
-## Notes:
-- Tests are designed to be maintainable and follow existing codebase patterns
-- All deprecated props are tested for backward compatibility
-- Edge cases cover boundary conditions and null/undefined handling
-- Integration tests verify complex prop combinations work correctly