@capillarytech/blaze-ui 5.20.0 → 5.22.0

package/CapIcon/README.md

@@ -1,207 +0,0 @@
-# CapIcon
-
-Icon component that supports Ant Design icons, SVG icons, and custom components with various sizes and states.
-
-## Migration from cap-ui-library
-
-### Summary of Changes
-
-The CapIcon component has been migrated from cap-ui-library to blaze-ui with the following updates:
-
-- **TypeScript Migration**: Converted from JavaScript to TypeScript with proper type definitions
-- **Ant Design v6 Compatibility**: Updated to use `@ant-design-v5/icons` instead of Ant Design v3's `<Icon>` component
-- **SCSS Modules**: Converted from styled-components to SCSS modules
-- **Functional Component**: Converted from class component to functional component with React hooks
-- **Enhanced Features**: Added support for `color`, `spin`, `rotate`, and `component` props
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `type` | `string` | - | Icon type (Ant Design icon name or SVG icon name) |
-| `size` | `'xs' \| 's' \| 'm' \| 'l'` | `'m'` | Icon size |
-| `style` | `React.CSSProperties` | `{}` | Custom inline styles |
-| `className` | `string` | `''` | Custom CSS class name |
-| `disabled` | `boolean` | `false` | Whether the icon is disabled |
-| `spin` | `boolean` | `false` | Whether the icon should spin (animation) |
-| `rotate` | `number` | - | Rotation angle in degrees |
-| `withBackground` | `boolean` | `false` | Whether to show circular background |
-| `backgroundProps` | `React.HTMLAttributes<HTMLSpanElement>` | `{}` | Props for background wrapper |
-| `onClick` | `(e: React.MouseEvent<HTMLSpanElement>) => void` | - | Click handler |
-| `textLabel` | `React.ReactNode` | - | Text label to display alongside icon |
-| `component` | `React.ReactNode` | - | Custom component to render instead of icon |
-| `svgProps` | `Record<string, unknown>` | `{}` | Props to pass to SVG icon component |
-| `allowSvg` | `boolean` | `true` | Whether to allow SVG icons |
-| `color` | `string` | - | Icon color |
-| `percent` | `number` | - | Percentage value for SVG icons (used by some SVG components) |
-
-### Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-All props from the original component are supported. The component maintains backward compatibility with existing usage patterns.
-
-### API Changes
-
-#### Icon Rendering Priority
-
-The component follows this priority order for rendering icons:
-
-1. **Custom Component**: If `component` prop is provided, it renders the custom component
-2. **SVG Icon**: If `allowSvg` is `true` and a matching SVG icon is found, it renders the SVG icon
-3. **Ant Design Icon**: If a matching Ant Design icon is found, it renders the Ant Design icon
-4. **Fallback**: Renders an empty icon container
-
-#### Subcomponents
-
-##### CapIcon.AntIcon
-
-A subcomponent for rendering Ant Design icons directly:
-
-```tsx
-<CapIcon.AntIcon className="custom-class" />
-```
-
-##### CapIcon.CapIconAvatar
-
-A subcomponent for rendering an icon with a logo background and text label:
-
-```tsx
-<CapIcon.CapIconAvatar 
-  text="AB" 
-  width={32} 
-  height={32}
-  backgroundProps={{ fill: '#ff0000' }}
-  labelProps={{ className: 'custom-label' }}
-/>
-```
-
-**CapIconAvatar Props:**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | - | Custom CSS class name |
-| `text` | `string` | - | Text to display in the avatar |
-| `width` | `string \| number` | - | Width of the logo background |
-| `height` | `string \| number` | - | Height of the logo background |
-| `backgroundProps` | `React.HTMLAttributes<SVGElement>` | `{}` | Props for the logo background SVG |
-| `labelProps` | `React.HTMLAttributes<HTMLSpanElement>` | `{}` | Props for the text label |
-
-### Usage Examples
-
-#### Basic Icon
-
-```tsx
-import CapIcon from '@capillarytech/blaze-ui/components/CapIcon';
-
-<CapIcon type="user" />
-```
-
-#### Different Sizes
-
-```tsx
-<CapIcon type="user" size="xs" />
-<CapIcon type="user" size="s" />
-<CapIcon type="user" size="m" />
-<CapIcon type="user" size="l" />
-```
-
-#### Icon States
-
-```tsx
-<CapIcon type="heart" disabled />
-<CapIcon type="loading" spin />
-<CapIcon type="arrow-right" rotate={45} />
-```
-
-#### With Background
-
-```tsx
-<CapIcon type="user" withBackground />
-```
-
-#### With Text Label
-
-```tsx
-<CapIcon type="user" textLabel="Profile" />
-```
-
-#### Custom Color
-
-```tsx
-<CapIcon type="heart" color="#ff0000" />
-```
-
-#### Interactive Icon
-
-```tsx
-<CapIcon 
-  type="heart" 
-  onClick={() => console.log('Clicked!')}
-  style={{ cursor: 'pointer' }}
-/>
-```
-
-#### Custom Component
-
-```tsx
-<CapIcon component={<span>★</span>} />
-```
-
-#### SVG Icon with Percent
-
-```tsx
-<CapIcon type="progress" percent={75} />
-```
-
-#### CapIconAvatar
-
-```tsx
-<CapIcon.CapIconAvatar 
-  text="AB" 
-  width={32} 
-  height={32}
-/>
-```
-
-### Behavioral Changes
-
-1. **Icon Name Mapping**: The component includes special mappings for common icon names (e.g., `add` → `plus`)
-2. **Icon Name Conversion**: Icon names are automatically converted from kebab-case to PascalCase for Ant Design icon lookup
-3. **Multiple Icon Variants**: The component tries multiple Ant Design icon variants (Outlined, Filled, TwoTone) when looking up icons
-4. **SVG Icon Support**: SVG icons are prioritized over Ant Design icons when `allowSvg` is `true` and a matching SVG icon exists
-
-### Migration Steps for Consumers
-
-No migration steps required. The component maintains full backward compatibility with cap-ui-library v8.x.
-
-If you want to take advantage of new features:
-
-1. **Use TypeScript types**: Import `CapIconProps` for type safety
-2. **Use new props**: Take advantage of `color`, `spin`, `rotate`, and `component` props
-3. **Use subcomponents**: Use `CapIcon.AntIcon` and `CapIcon.CapIconAvatar` for specific use cases
-
-### Code Examples
-
-#### Before (cap-ui-library)
-
-```jsx
-import CapIcon from '@capillarytech/cap-ui-library/components/CapIcon';
-
-<CapIcon type="user" />
-<CapIcon type="user" withBackground />
-<CapIcon.CapIconAvatar text="AB" />
-```
-
-#### After (blaze-ui)
-
-```tsx
-import CapIcon from '@capillarytech/blaze-ui/components/CapIcon';
-
-<CapIcon type="user" />
-<CapIcon type="user" withBackground />
-<CapIcon.CapIconAvatar text="AB" />
-```
-
-The API remains the same, so no code changes are required for basic usage.
-

package/CapIllustration/Status.md

@@ -1,41 +0,0 @@
-# Migration Status: CapIllustration
-
-**Last Updated**: 2026-01-31 18:52:06
-
-## 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 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
-
-## Visual Testing Results
-
-**Last Test**: 2026-01-31 18:52:06
-**Maximum Mismatch**: 4.13%
-
-### Mismatched Variants:
-- no-access (with 3 interactions):4.13%
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-29 09:27:05
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapIllustration/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapImage/README.md

@@ -1,50 +0,0 @@
-# CapImage Component
-
-A simple image component with conditional rendering support.
-
-## 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
-   - Replaced PropTypes with TypeScript types
-   
-2. **Modern React Patterns**
-   - Maintained as functional component (already was functional in cap-ui-library)
-   - Better type safety with TypeScript
-   - Cleaner code structure
-
-3. **Styling**
-   - Converted to SCSS modules
-   - Uses `classNames` library for conditional class handling
-   - Removed Fragment wrapper (not needed for single element return)
-
-### 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 image |
-| `src` | `string` | `undefined` | Source URL of the image (required for rendering) |
-| `alt` | `string` | `undefined` | Alternative text for the image |
-| `...rest` | `ImgHTMLAttributes` | - | All standard HTML img element attributes |
-
-### Behavioral Changes
-
-- The component returns `null` instead of an empty `Fragment` when `src` is not provided (no visual change)
-- All standard HTML image attributes are supported through spread props
-
-### Notes
-
-- The component only renders when a valid `src` prop is provided
-- All standard HTML image attributes are supported (width, height, loading, onLoad, onError, etc.)
-- The component uses SCSS modules for styling to avoid style conflicts

package/CapImportMFEComponent/README.md

@@ -1,121 +0,0 @@
-# CapImportMFEComponent
-
-A React component for dynamically importing and rendering remote components using Module Federation (MFE). This component requires Webpack 5 and Module Federation support.
-
-## Migration from cap-ui-library to blaze-ui
-
-### Summary of Changes
-
-- **Styled-components → SCSS Modules**: Converted from styled-components to SCSS modules for better performance and maintainability
-- **TypeScript**: Added full TypeScript support with proper type definitions
-- **Functional Component**: Already a functional component, maintained with React hooks
-- **Prop Types**: Replaced PropTypes with TypeScript interfaces
-- **Error Display**: Uses original `CapSomethingWentWrong` component from cap-ui-library
-- **Translation**: Updated translation scope from `components.CapImportMFECOmponent` to `blaze.components.CapImportMFEComponent`
-
-### Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `system` | `CapImportMFESystem` | Yes | Configuration object for the remote module |
-| `system.url` | `string \| (() => Promise<string>)` | Yes | URL of the remote module (can be a string or async function) |
-| `system.scope` | `string` | Yes | Module Federation scope name |
-| `system.module` | `string` | Yes | Module name to import from the remote |
-| `loadingFallback` | `React.ReactElement \| string` | No | Custom loading fallback component or string |
-| `...rest` | `unknown` | No | Additional props passed to the imported component |
-
-### Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-All existing props and behaviors are maintained. The API remains identical.
-
-### Behavioral Changes
-
-- Error display uses original `CapSomethingWentWrong` component from cap-ui-library
-- Styles are now defined using SCSS modules with variables for consistency
-- Translation scope updated to follow blaze-ui naming conventions
-
-### Usage
-
-#### Basic Usage
-
-```tsx
-import { CapImportMFEComponent } from '@capillarytech/blaze-ui';
-
-<CapImportMFEComponent
-  system={{
-    url: 'https://remote-app.example.com/remoteEntry.js',
-    scope: 'remoteApp',
-    module: './Component',
-  }}
-/>
-```
-
-#### With Custom Loading Fallback
-
-```tsx
-<CapImportMFEComponent
-  system={{
-    url: 'https://remote-app.example.com/remoteEntry.js',
-    scope: 'remoteApp',
-    module: './Component',
-  }}
-  loadingFallback={<div>Custom loading...</div>}
-/>
-```
-
-#### With Dynamic URL Function
-
-```tsx
-<CapImportMFEComponent
-  system={{
-    url: async () => {
-      const config = await fetch('/api/config').then(r => r.json());
-      return config.remoteUrl;
-    },
-    scope: 'remoteApp',
-    module: './Component',
-  }}
-/>
-```
-
-#### Passing Props to Remote Component
-
-```tsx
-<CapImportMFEComponent
-  system={{
-    url: 'https://remote-app.example.com/remoteEntry.js',
-    scope: 'remoteApp',
-    module: './Component',
-  }}
-  customProp="value"
-  onClick={handleClick}
-/>
-```
-
-### Import Examples
-
-```tsx
-// Named import (recommended)
-import { CapImportMFEComponent } from '@capillarytech/blaze-ui';
-
-// With types
-import type { CapImportMFEComponentProps, CapImportMFESystem } from '@capillarytech/blaze-ui';
-```
-
-### Requirements
-
-- **Webpack 5**: This component requires Webpack 5 with Module Federation plugin
-- **Module Federation**: The remote application must be configured with Module Federation
-- **@module-federation/utilities**: The `importRemote` utility from `@module-federation/utilities` is required
-
-### Error Handling
-
-If the `system` prop is missing required fields (`url`, `scope`, or `module`), the component will display an error message using `CapError` and `CapHeading` components.
-
-### Notes
-
-- This component uses `React.lazy` and `React.Suspense` for code splitting
-- The remote component is memoized based on `url`, `scope`, and `module` values
-- All additional props passed to `CapImportMFEComponent` are forwarded to the imported remote component

package/CapInfoNote/Status.md

@@ -1,40 +0,0 @@
-# Migration Status: CapInfoNote
-
-**Last Updated**: 2026-02-05 10:05:16
-
-## 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
-- [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
-
-## Visual Testing Results
-
-**Last Test**: 2026-02-05 10:05:16
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-26 11:31:20
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapInfoNote/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapInfoNote/tests/USE_CASES_ANALYSIS.md

@@ -1,114 +0,0 @@
-# CapInfoNote - Use Cases Analysis
-
-## Use Cases the Component is NOT Fulfilling
-
-Based on analysis of the component implementation and comparison with similar components (CapAlert, CapNotification), the following use cases are **NOT** currently supported:
-
-### 1. **Dismissible/Closable Functionality**
-- **Missing**: `closable` prop to allow users to dismiss the info note
-- **Missing**: `onClose` callback when the note is dismissed
-- **Impact**: Users cannot dismiss informational notes, even if they've read them
-- **Example Use Case**: "This feature will be deprecated soon" - user should be able to dismiss after reading
-
-### 2. **Action Buttons**
-- **Missing**: Support for action buttons within the info note
-- **Missing**: `actions` prop to add interactive buttons
-- **Impact**: Cannot provide actionable info notes (e.g., "Update available" with "Update Now" button)
-- **Example Use Case**: "New version available" with "Learn More" and "Dismiss" buttons
-
-### 3. **Description/Additional Content**
-- **Missing**: `description` prop for secondary content
-- **Impact**: Cannot display detailed information beyond the main message
-- **Example Use Case**: Title "Note" with message "System maintenance" and description "Scheduled for Jan 30, 2026 from 2-4 AM EST"
-
-### 4. **Banner Mode**
-- **Missing**: `banner` prop for top-of-page banner style
-- **Impact**: Cannot use as a page-level banner notification
-- **Example Use Case**: Site-wide announcement banner at the top of the page
-
-### 5. **Custom Icon Override**
-- **Missing**: Ability to pass custom icon component
-- **Current Limitation**: Icon is hardcoded with `CapIcon` and specific styling (`color: CAP_G01, top: 9`)
-- **Impact**: Cannot customize icon appearance or use different icon types per instance
-- **Example Use Case**: Custom branded icon or different icon size/color
-
-### 6. **User Interactions**
-- **Missing**: `onClick` handler for clickable info notes
-- **Missing**: Hover state management
-- **Missing**: Focus management for keyboard navigation
-- **Impact**: Component is purely presentational with no interactive capabilities
-- **Example Use Case**: Clickable info note that expands to show more details
-
-### 7. **Loading/Disabled States**
-- **Missing**: `loading` prop to show loading state
-- **Missing**: `disabled` prop to disable interactions
-- **Impact**: Cannot show loading information or disable during async operations
-- **Example Use Case**: "Fetching data..." with loading spinner
-
-### 8. **Animation/Transition Control**
-- **Missing**: `fadeIn`/`fadeOut` animation props
-- **Missing**: Transition duration control
-- **Impact**: No control over entry/exit animations
-- **Example Use Case**: Smooth fade-in when info note appears
-
-### 9. **Conditional Visibility**
-- **Missing**: Built-in `visible` prop for show/hide control
-- **Missing**: Auto-hide after duration (`duration` prop)
-- **Impact**: Must manage visibility externally, no built-in auto-dismiss
-- **Example Use Case**: Auto-dismiss after 5 seconds
-
-### 10. **Accessibility Enhancements**
-- **Missing**: `aria-live` region control
-- **Missing**: `aria-atomic` for screen reader announcements
-- **Missing**: Keyboard shortcuts (e.g., Escape to dismiss)
-- **Impact**: Limited accessibility features beyond basic ARIA alert role
-- **Example Use Case**: Announce info note changes to screen readers with appropriate politeness
-
-### 11. **Size Variants**
-- **Missing**: `size` prop (small, medium, large)
-- **Impact**: Cannot control the size of the info note
-- **Example Use Case**: Compact info note for dense layouts
-
-### 12. **Placement/Layout Options**
-- **Missing**: `placement` prop (inline, banner, floating)
-- **Impact**: Limited layout flexibility
-- **Example Use Case**: Floating info note in corner vs inline content
-
-### 13. **Rich Content Support**
-- **Missing**: Support for links, formatted text, or embedded components in message
-- **Current**: Supports React nodes but no structured content helpers
-- **Impact**: Must manually structure complex content
-- **Example Use Case**: Message with clickable links or formatted text
-
-### 14. **State Persistence**
-- **Missing**: `key` prop for unique identification
-- **Missing**: State management for dismissed notes (localStorage)
-- **Impact**: Cannot persist dismissal state across page reloads
-- **Example Use Case**: "First time user" note that shouldn't reappear after dismissal
-
-### 15. **Event Callbacks**
-- **Missing**: `onShow` callback when component mounts/becomes visible
-- **Missing**: `onHide` callback when component unmounts/becomes hidden
-- **Impact**: Cannot track when info notes are displayed
-- **Example Use Case**: Analytics tracking for info note views
-
----
-
-## Summary
-
-**Total Missing Use Cases**: 15
-
-**Priority Categories**:
-- **High Priority**: Dismissible functionality, Action buttons, Description prop
-- **Medium Priority**: Custom icon override, User interactions, Conditional visibility
-- **Low Priority**: Animation control, Size variants, Event callbacks
-
-**Current Component Capabilities**:
-- ✅ Display informational notes with icon
-- ✅ Customizable note text and message
-- ✅ Support for different icon types (info, warning, success, error)
-- ✅ Custom styling via className and style props
-- ✅ React node support for message content
-- ✅ Basic accessibility (alert role)
-
-**Recommendation**: The component is currently a **presentational component** with limited interactivity. To fulfill more use cases, consider exposing additional CapAlert props or adding new interactive features.