@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapErrorStateIllustration/README.md

@@ -1,222 +0,0 @@
-# CapErrorStateIllustration Migration Documentation
-
-## Summary
-
-`CapErrorStateIllustration` has been migrated from `@capillarytech/cap-ui-library` (Ant Design v3) to `@capillarytech/blaze-ui` (Ant Design v6). The component displays error state illustrations with optional refresh functionality or expiry messages.
-
-## Migration Changes
-
-### Component Structure
-
-**Before (cap-ui-library):**
-- Used PropTypes for runtime type checking
-- Used defaultProps for default values
-- Used styled-components for styling
-- Function component with destructuring
-
-**After (blaze-ui):**
-- TypeScript types from `types.ts` (no PropTypes)
-- Default values in function argument destructuring (no defaultProps)
-- CSS Modules with SCSS (no styled-components)
-- Functional component with React.FC type
-
-## Props
-
-### Props Comparison
-
-| Prop | cap-ui-library | blaze-ui | Status |
-|------|----------------|----------|--------|
-| `showImage` | ✅ | ✅ | **Unchanged** |
-| `className` | ✅ | ✅ | **Unchanged** |
-| `refreshText` | ✅ | ✅ | **Unchanged** |
-| `expiryTitle` | ✅ | ✅ | **Unchanged** |
-| `refreshTitle` | ✅ | ✅ | **Unchanged** |
-| `onRefreshClick` | ✅ | ✅ | **Unchanged** |
-| `isRefreshExpired` | ✅ | ✅ | **Unchanged** |
-| `expiryDescription` | ✅ | ✅ | **Unchanged** |
-| `...rest` | ✅ | ✅ | **Unchanged** (HTML div attributes) |
-
-### All Props
-
-#### `showImage`
-- **Type:** `boolean`
-- **Default:** `true`
-- **Description:** Whether to show the error state illustration image
-- **Example:**
-  ```tsx
-  <CapErrorStateIllustration showImage={false} />
-  ```
-
-#### `className`
-- **Type:** `string`
-- **Default:** `''`
-- **Description:** Additional CSS class name
-- **Example:**
-  ```tsx
-  <CapErrorStateIllustration className="custom-class" />
-  ```
-
-#### `refreshText`
-- **Type:** `string | React.ReactNode`
-- **Default:** `''`
-- **Description:** Text or node to display in the refresh button (when not expired)
-- **Example:**
-  ```tsx
-  <CapErrorStateIllustration refreshText="Refresh" />
-  <CapErrorStateIllustration refreshText={<span>Custom Refresh</span>} />
-  ```
-
-#### `expiryTitle`
-- **Type:** `string | React.ReactNode`
-- **Default:** `''`
-- **Description:** Title to display when refresh is expired
-- **Example:**
-  ```tsx
-  <CapErrorStateIllustration expiryTitle="Session Expired" isRefreshExpired />
-  ```
-
-#### `refreshTitle`
-- **Type:** `string | React.ReactNode`
-- **Default:** `''`
-- **Description:** Title to display when refresh is available
-- **Example:**
-  ```tsx
-  <CapErrorStateIllustration refreshTitle="Something went wrong" />
-  ```
-
-#### `onRefreshClick`
-- **Type:** `() => void`
-- **Default:** `() => {}`
-- **Description:** Callback function when refresh button is clicked
-- **Example:**
-  ```tsx
-  <CapErrorStateIllustration 
-    onRefreshClick={() => window.location.reload()} 
-  />
-  ```
-
-#### `isRefreshExpired`
-- **Type:** `boolean`
-- **Default:** `false`
-- **Description:** Whether the refresh has expired
-- **Example:**
-  ```tsx
-  <CapErrorStateIllustration isRefreshExpired={true} />
-  ```
-
-#### `expiryDescription`
-- **Type:** `string | React.ReactNode`
-- **Default:** `''`
-- **Description:** Description to display when refresh is expired
-- **Example:**
-  ```tsx
-  <CapErrorStateIllustration 
-    expiryDescription="Please refresh the page" 
-    isRefreshExpired 
-  />
-  ```
-
-## Usage Examples
-
-### Basic Usage
-
-```tsx
-import CapErrorStateIllustration from '@capillarytech/blaze-ui/CapErrorStateIllustration';
-
-<CapErrorStateIllustration 
-  refreshTitle="Something went wrong"
-  refreshText="Refresh"
-  onRefreshClick={() => window.location.reload()}
-/>
-```
-
-### Expired State
-
-```tsx
-<CapErrorStateIllustration 
-  isRefreshExpired={true}
-  expiryTitle="Session Expired"
-  expiryDescription="Please refresh the page"
-/>
-```
-
-### Without Image
-
-```tsx
-<CapErrorStateIllustration 
-  showImage={false}
-  refreshTitle="Error occurred"
-  refreshText="Try again"
-  onRefreshClick={handleRefresh}
-/>
-```
-
-### Custom Content
-
-```tsx
-<CapErrorStateIllustration 
-  refreshTitle={<strong>Error</strong>}
-  refreshText={<span>Click to <em>refresh</em></span>}
-  onRefreshClick={handleRefresh}
-/>
-```
-
-## Style Changes
-
-**Approach**: The component now uses CSS Modules with SCSS instead of styled-components. All styling is done through CSS classes.
-
-### Removed Dependencies
-- `styled-components` - Replaced with CSS Modules
-- `prop-types` - Replaced with TypeScript types
-
-### CSS Classes
-
-The component uses the following CSS classes:
-- `.cap-error-state-illustration` - Main container
-- `.error-state-image` - Image wrapper
-- `.error-state-refresh-button` - Refresh button
-- `.error-state-refresh-icon` - Refresh icon
-- `.refresh-button-text-container` - Refresh button text container
-
-## Code Improvements
-
-1. **Removed PropTypes**: Replaced with TypeScript types from `types.ts`
-2. **Removed defaultProps**: Default values now in function argument destructuring
-3. **Removed styled-components**: Converted to CSS Modules with SCSS
-4. **Type safety**: Full TypeScript support with proper type exports
-5. **Better maintainability**: CSS Modules provide better encapsulation
-
-## What Stayed the Same
-
-- All props and their behavior
-- Component functionality and logic
-- Visual appearance (styling preserved)
-- API surface area (backward compatible)
-
-## What Changed
-
-- **Removed**: `PropTypes` import and usage
-- **Removed**: `defaultProps` assignment
-- **Removed**: `styled-components` dependency
-- **Added**: TypeScript types in `types.ts`
-- **Added**: CSS Modules classes in `styles.scss`
-- **Changed**: Default values now in function arguments
-
-## Migration Guide
-
-If you're migrating from the old version:
-
-1. **No code changes required** - The component API is backward compatible
-2. **TypeScript users**: You can now import types:
-   ```tsx
-   import type { CapErrorStateIllustrationProps } from '@capillarytech/blaze-ui/CapErrorStateIllustration';
-   ```
-3. **Styling**: If you were overriding styles, update selectors to use CSS Modules classes
-
-## Related Components
-
-- `CapButton` - Used for the refresh button
-- `CapHeading` - Used for titles
-- `CapIcon` - Used for refresh icon
-- `CapImage` - Used for error illustrations
-- `CapRow` - Used for layout

package/CapErrorStateIllustration/USE_CASES.md

@@ -1,33 +0,0 @@
-# Test Cases: CapErrorStateIllustration (Antd v3→v6)
-
-## Component Analysis
-- **Component**: CapErrorStateIllustration
-- **Complexity**: simple
-- **Test Case Limit**: ≤10 test cases
-
-## Generated Test Cases
-
-| ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
-|----|----------|--------------|-------------------------|----------|-----------------|-------|
-| UC-001 | Default rendering | All default props (showImage: true, isRefreshExpired: false, empty strings) | Component renders with refresh illustration image, no visible text or button | P0 | Default | Basic rendering with default props |
-| UC-002 | Refresh state vs Expiry state | isRefreshExpired: false vs true | When false: shows refreshErrorStateIllustration, refreshTitle, refresh button. When true: shows expiryErrorStateIllustration, expiryTitle, expiryDescription | P0 | StateVariants | Grouped both state variants into single test |
-| UC-003 | Image visibility toggle | showImage: true vs false | When true: image renders. When false: no image displayed | P1 | ImageVisibility | Grouped both image states |
-| UC-004 | Content variants | refreshTitle, expiryTitle, expiryDescription, refreshText with various values (string, node, empty) | All text props render correctly. String and node types supported. Empty strings hide elements | P1 | ContentVariants | Grouped all text content props |
-| UC-005 | Refresh button interaction | refreshText: "Refresh", onRefreshClick: mock function | Button renders with refresh icon and text. Click triggers onRefreshClick handler | P0 | RefreshInteraction | Critical user interaction |
-| UC-006 | Custom styling | className: "custom-class" | Custom className applied to container element | P2 | CustomStyling | Basic styling support |
-| UC-007 | Edge cases - minimal content | Only showImage: true, all text props empty | Component renders with only image, no text or buttons | P1 | MinimalContent | Edge case for empty content |
-| UC-008 | HTML attributes passthrough | {...rest} props (data-testid, aria-label, etc.) | Additional HTML attributes passed to container element | P2 | AttributesPassthrough | Grouped all HTML/ARIA attributes |
-| UC-009 | Refresh button with node content | refreshText: <span>Custom Node</span> | Button accepts node type for refreshText and renders correctly | P1 | NodeContentSupport | Tests PropTypes.oneOfType support |
-| UC-010 | Complete refresh state | showImage: true, isRefreshExpired: false, refreshTitle: "Error", refreshText: "Retry", onRefreshClick: handler | All refresh state elements visible: image, title, button with icon and text | P0 | CompleteRefreshState | Full refresh state integration |
-
-## Summary
-- **Total Test Cases**: 10
-- **P0 (Blocking)**: 3
-- **P1 (High)**: 5
-- **P2 (Medium)**: 2
-
-## Grouping Rationale
-- State variants (UC-002): Combined refresh and expiry states as they're mutually exclusive
-- Content variants (UC-004): Grouped all text props since they follow similar patterns
-- Image visibility (UC-003): Simple boolean toggle grouped together
-- Attributes (UC-008): All HTML/ARIA attributes grouped as passthrough props

package/CapExpressionEditor/README.md

@@ -1,32 +0,0 @@
-# CapExpressionEditor
-
-Expression editor component with grammar validation, syntax highlighting, and autocomplete. Uses a jQuery-based expredit plugin for parsing and validation.
-
-## Migration Notes (Antd v3 → v6)
-
-### Changes Applied
-
-- **Runtime prop validation removed**: Replaced with TypeScript types from `types.ts`
-- **defaultProps removed**: Default values now use destructuring in function arguments
-- **Class → Functional component**: Converted to React.FC with hooks
-- **SCSS**: Hardcoded colors replaced with `$CAP_*` design tokens from `_variables.scss`
-- **No Antd overrides**: Component uses `CapInput.TextArea` (wraps Antd Input); no theme config changes required
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `grammar` | `ExpressionGrammar` | defaultGrammar | Expression grammar configuration |
-| `expected` | `string[]` | `['boolean']` | Expected types for validation |
-| `typeSource` | `string` | - | Type source identifier |
-| `delims` | `string[]` | `['{{', '}}']` | Delimiters for expression parsing |
-| `expression` | `string` | `''` | Initial expression value |
-| `onChange` | `(expressionJSON, expression, isError) => void` | - | Callback when expression changes |
-| `className` | `string` | - | Additional CSS class |
-| `disabled` | `boolean` | - | Disable the editor |
-| ...rest | `CapInputTextAreaProps` | - | Passed through to underlying TextArea |
-
-### Dependencies
-
-- **jquery** (^3.6.0): Required for expredit plugin
-- **rangy** (^1.3.2): Selection/range library used by expredit plugin

package/CapForm/README.md

@@ -1,132 +0,0 @@
-# CapForm Migration: Ant Design v3 → v6
-
-## Migration Summary
-
-CapForm has been migrated from Ant Design v3 to v6. This component is a thin wrapper around Ant Design's Form component that provides consistent styling and layout defaults.
-
-## Breaking Changes
-
-### Form.create() No Longer Exported
-
-**Breaking Change:** The original `cap-ui-library` component exported `Form.create` as part of its API. This is **no longer exported** in the migrated component.
-
-**Before (cap-ui-library):**
-```javascript
-import CapForm from '@capillarytech/cap-ui-library/CapForm';
-
-// Form.create was available
-const WrappedForm = CapForm.create()(MyComponent);
-```
-
-**After (blaze-ui):**
-```tsx
-import { Form } from 'antd-v5';
-import CapForm from '@capillarytech/blaze-ui';
-
-// Use Form.useForm() hook instead
-const [form] = Form.useForm();
-
-<CapForm form={form}>
-  {/* form content */}
-</CapForm>
-```
-
-**Migration:** Replace `Form.create()` HOC pattern with `Form.useForm()` hook pattern, which is the recommended approach in Ant Design v6.
-
-### All Other Props
-
-All other CapForm props maintain full backward compatibility. All Ant Design Form props are passed through unchanged.
-
-## Deprecated Props
-
-### Ant Design Form Component Props
-
-**Status:** ✅ **No deprecated props**
-
-The Ant Design `Form` component does not have any deprecated props in v6 that require backward compatibility mapping. Unlike other Ant Design components (Dropdown, Tooltip, Tabs, etc.), the Form component's prop API remained stable during the v3 → v6 migration.
-
-**Verified Ant Design Form Props (All Supported):**
-- `layout` - Form layout type (`'horizontal' | 'vertical' | 'inline'`)
-- `labelCol` - Label layout configuration
-- `wrapperCol` - Wrapper layout configuration
-- `colon` - Whether to show colon after label
-- `preserve` - Whether to preserve field values
-- `scrollToFirstError` - Whether to scroll to first error on submit
-- `size` - Form size (`'small' | 'middle' | 'large'`)
-- `requiredMark` - Required mark style
-- `form` - Form instance (from `Form.useForm()`)
-- All other `FormProps` from Ant Design v6
-
-**Note:** The Form component API changed from using `Form.create()` HOC to `Form.useForm()` hook, but this is an API pattern change, not a prop deprecation.
-
-## API Changes
-
-CapForm maintains full compatibility with Ant Design v6 Form API:
-- Uses `Form.useForm()` hook pattern (recommended in v6)
-- Passes through all `FormProps` from Ant Design v6
-- Maintains the same prop interface (except `Form.create` export)
-
-## Styling Migration
-
-### Before (v3/v5)
-- Used `:global` SCSS blocks to override Ant Design form styles
-- Multiple `.ant-form-*` class overrides for spacing and layout
-
-### After (v6)
-- All form styling migrated to theme tokens in `getCapThemeConfig.ts`
-- Removed all `:global` blocks and `.ant-*` selectors from `styles.scss`
-- Form spacing controlled via Ant Design design tokens:
-  - `components.Form.itemMarginBottom` - Form item spacing (24px)
-  - `components.Form.labelColonMarginInlineEnd` - Label padding (16px)
-
-### Custom Styles
-
-The component now only includes minimal wrapper styles. All Ant Design form styling is handled through the theme configuration system.
-
-## Usage
-
-```tsx
-import CapForm from '@capillarytech/blaze-ui';
-import { Form } from 'antd-v5';
-
-// Basic usage
-<CapForm layout="vertical">
-  <Form.Item name="username">
-    <Input />
-  </Form.Item>
-</CapForm>
-
-// With form instance (v6 recommended pattern)
-const [form] = Form.useForm();
-
-<CapForm form={form} layout="horizontal">
-  <Form.Item name="email">
-    <Input />
-  </Form.Item>
-</CapForm>
-```
-
-## Theme Configuration
-
-Form styling is controlled via `getCapThemeConfig()`. To customize form appearance:
-
-```tsx
-import { getCapThemeConfig } from '@capillarytech/blaze-ui/utils';
-
-const customTheme = getCapThemeConfig({
-  components: {
-    Form: {
-      itemMarginBottom: 32, // Custom spacing
-      labelColonMarginInlineEnd: 20, // Custom label padding
-    },
-  },
-});
-```
-
-## Migration Notes
-
-- **Breaking Change:** If you were using `CapForm.create()`, you must migrate to `Form.useForm()` hook pattern
-- **No prop changes required** - All Form props work identically to v5/v6
-- Form validation, layout, and styling work identically to v5
-- Component is fully compatible with Ant Design v6 Form API
-- All Ant Design Form props are passed through unchanged (no deprecated props to handle)

package/CapForm/Status.md

@@ -1,40 +0,0 @@
-# Migration Status: CapForm
-
-**Last Updated**: 2026-01-31 19:17:58
-
-## 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**: Migration Prompt 4 (Visual test cases)
-- [x] **Step 5**: Linting (ESLint)
-- [x] **Step 6**: Pre-build Validation
-- [] **Step 7**: Build blaze-ui
-- [] **Step 8**: Visual Testing
-- [] **Step 9**: CSS Analysis (if mismatches found)
-- [] **Step 9.5**: CSS Analysis Completed
-- [] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [] **Step 11**: Create Pull Request
-
-## Visual Testing Results
-
-**Last Test**: 2026-01-31 19:17:58
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-31 12:41:18
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapForm/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapForm/tests/PHASE1_UNFULFILLED_USE_CASES.md

@@ -1,113 +0,0 @@
-# Phase 1: CapForm Use Cases NOT Currently Fulfilled
-
-## Overview
-This document identifies use cases that CapForm component does **NOT** currently fulfill or support out-of-the-box.
-
-## ⚠️ Use Cases NOT Fulfilled
-
-### 1. Form Instance Access via Ref Forwarding
-**Status**: ❌ **NOT Supported**
-- **Issue**: Component doesn't expose Form instance methods via ref forwarding
-- **Current Behavior**: 
-  - Users must use `Form.useForm()` hook separately
-  - No `ref` prop that forwards to Form instance
-  - Cannot access form methods directly from parent component via ref
-- **Workaround**: Users must use `Form.useForm()` hook and pass `form` prop
-- **Impact**: Medium - Requires additional boilerplate code
-- **Recommendation**: Consider adding `React.forwardRef` to expose form instance methods
-
-### 2. Built-in Loading State Management
-**Status**: ❌ **NOT Built-in**
-- **Issue**: No built-in loading state management during form submission
-- **Current Behavior**: 
-  - Users must manage loading state manually
-  - No `loading` prop on CapForm
-  - Form doesn't automatically disable during async submission
-- **Expected Behavior** (if required):
-  - Add `loading` prop that disables form fields during submission
-  - Or provide loading state management helper
-- **Impact**: Low - Typically handled at application level
-- **Recommendation**: This is typically handled at application level, but could be a convenience feature
-
-### 3. Nested Forms Support
-**Status**: ❌ **NOT Supported/Recommended**
-- **Issue**: Ant Design doesn't officially support nested forms, and CapForm doesn't prevent or handle this
-- **Current Behavior**: 
-  - Nested forms may cause unexpected behavior
-  - Not tested or documented
-  - No validation or prevention mechanism
-- **Impact**: Low - Nested forms are anti-pattern
-- **Recommendation**: Document that nested forms are not supported and may cause issues
-
-### 4. Form.create() HOC Pattern
-**Status**: ❌ **NOT Supported** (Breaking Change from v3)
-- **Issue**: Original `cap-ui-library` component exported `Form.create` HOC, which is no longer available
-- **Current Behavior**: 
-  - `Form.create()` is not exported
-  - Must use `Form.useForm()` hook pattern instead
-- **Migration Required**: Replace `Form.create()` HOC with `Form.useForm()` hook
-- **Impact**: High - Breaking change for existing codebases
-- **Recommendation**: Document migration path clearly
-
-## ✅ Use Cases Supported (But Require Explicit Implementation)
-
-The following use cases ARE supported via Ant Design FormProps passthrough, but require users to implement them explicitly:
-
-### 5. Form List/Dynamic Fields
-**Status**: ✅ Supported (via Ant Design Form.List)
-- **Note**: Component passes through all FormProps, so Form.List works
-- **Requirement**: Users must implement Form.List manually
-- **Test Coverage**: ✅ Now tested
-
-### 6. Form Field Dependencies
-**Status**: ✅ Supported (via Ant Design Form.Item dependencies)
-- **Note**: Component passes through FormProps, so dependencies work
-- **Requirement**: Users must implement `shouldUpdate` or `dependencies` manually
-- **Test Coverage**: ✅ Now tested
-
-### 7. Custom Validation Rules
-**Status**: ✅ Supported (via Ant Design Form.Item rules)
-- **Note**: Component passes through FormProps, so custom validation rules work
-- **Requirement**: Users must implement custom validators manually
-- **Test Coverage**: ✅ Now tested
-
-### 8. Form Reset Functionality
-**Status**: ✅ Supported (via Ant Design Form instance methods)
-- **Note**: Form reset is available via form instance methods
-- **Requirement**: Users must call `form.resetFields()` manually
-- **Test Coverage**: ✅ Now tested
-
-### 9. Form Field Value Watching
-**Status**: ✅ Supported (via Ant Design Form.Item shouldUpdate or Form.useWatch)
-- **Note**: Component supports this via Ant Design APIs
-- **Requirement**: Users must implement `Form.useWatch` or `shouldUpdate` manually
-- **Test Coverage**: ✅ Now tested
-
-### 10. Form Validation Feedback Timing
-**Status**: ✅ Supported (via Ant Design validateTrigger)
-- **Note**: Component passes through FormProps, so validateTrigger works
-- **Requirement**: Users must set `validateTrigger` prop manually
-- **Test Coverage**: ✅ Now tested
-
-## Summary
-
-### Critical Gaps (Must Address)
-1. **Form.create() HOC removal** - Breaking change requiring migration
-2. **No ref forwarding** - Cannot access form instance via ref
-
-### Nice-to-Have Features
-1. **Built-in loading state** - Convenience feature, typically handled at app level
-2. **Nested forms prevention** - Documentation/warning needed
-
-### Well-Supported (Via Passthrough)
-- All Ant Design Form features work via FormProps passthrough
-- Form instance methods available via `Form.useForm()` hook
-- Dynamic fields, dependencies, validation all supported
-- Test coverage now comprehensive
-
-## Recommendations
-
-1. **High Priority**: Document `Form.create()` migration path clearly
-2. **Medium Priority**: Consider adding ref forwarding for form instance access
-3. **Low Priority**: Add `loading` prop if commonly needed across codebase
-4. **Low Priority**: Add warning/documentation for nested forms anti-pattern