@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapSnackBar/README.md

@@ -1,222 +0,0 @@
-# CapSnackBar
-
-A wrapper API around Ant Design's Message component that provides consistent styling and a simplified API for showing snackbar messages in Capillary applications.
-
-## Migration from cap-ui-library to blaze-ui
-
-This component has been migrated from `cap-ui-library` to `blaze-ui` with the following changes:
-
-### Summary of Changes
-
-- **Style Migration**: Moved all Ant Design style overrides from SCSS `:global` selectors to theme tokens in `getCapThemeConfig.ts`
-- **SCSS Import**: Updated to use `import * as styles` pattern (instead of `import styles`)
-- **No Breaking Changes**: The component API remains 100% backward compatible
-
-### Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-The component maintains **100% backward compatibility**. All existing code will continue to work without modifications.
-
-### Deprecated Props
-
-**No deprecated Ant Design props**
-
-CapSnackBar does not expose Ant Design component props directly to users. The component wraps Ant Design's **Message** API internally and only exposes Cap component props (`content`, `showCloseIcon`, `duration`, `onClose`).
-
-#### Ant Design Message Component
-
-- **Ant Design Component:** Message (imperative API)
-- **Status:** ✅ No deprecated props
-- **Reason:** CapSnackBar wraps the Message API and does not expose Ant Design props directly. All Ant Design Message API calls use the correct v6 object-based API internally.
-
-**Internal Implementation Note:** The component internally uses Ant Design Message's object-based API (`message[type]({ content, duration, onClose })`), which is the correct v6 API. The deprecated positional argument API (`message[type](content, duration, onClose)`) is not used.
-
-**What this means for users:**
-- No migration needed - CapSnackBar props remain unchanged
-- No deprecated Ant Design props to migrate
-- The component handles all Ant Design v6 API changes internally
-
-### Style Changes
-
-**Before (cap-ui-library)**:
-- Used `:global` SCSS selectors to override Ant Design's `.ant-message-*` classes
-- Direct CSS overrides for padding, min-height, and background colors
-
-**After (blaze-ui)**:
-- All style overrides moved to Ant Design theme tokens in `getCapThemeConfig.ts`
-- Custom component styles (`.cap-snackbar-content`) remain in SCSS
-- Theme tokens control:
-  - Content padding (horizontal: 16px, vertical: 12px)
-  - Type-specific background colors (success, info, warning, error)
-
-### Code Improvements
-
-1. **Removed `:global` styles**: All Ant Design overrides now use theme tokens
-2. **Removed `.ant-*` selectors**: No direct CSS overrides of Ant Design classes
-3. **Token-based theming**: Background colors and padding controlled through `components.Message` tokens
-4. **SCSS import pattern**: Updated to `import * as styles` for consistency
-
-### What Stayed the Same
-
-- All API methods (`info`, `success`, `error`, `warning`)
-- Props interface (`CapSnackBarProps`)
-- Close icon functionality
-- Duration handling
-- `onClose` callback behavior
-- Component structure and DOM hierarchy
-
-### What Changed
-
-- **Removed**: `:global` SCSS blocks targeting `.ant-message-*` classes
-- **Removed**: Direct CSS overrides for Ant Design Message component
-- **Added**: Theme token configuration in `getCapThemeConfig.ts`
-- **Updated**: SCSS import pattern (`import * as styles`)
-
-## Usage
-
-### Basic Usage
-
-```typescript
-import CapSnackBar from '@capillarytech/blaze-ui/components/CapSnackBar';
-
-// Success snackbar
-CapSnackBar.success({
-  content: 'Operation completed successfully!',
-});
-
-// Error snackbar
-CapSnackBar.error({
-  content: 'Something went wrong. Please try again.',
-});
-
-// Info snackbar
-CapSnackBar.info({
-  content: 'Here is some important information.',
-});
-
-// Warning snackbar
-CapSnackBar.warning({
-  content: 'Please be careful with this action.',
-});
-```
-
-### With Close Icon
-
-```typescript
-CapSnackBar.info({
-  content: 'This message can be manually closed',
-  showCloseIcon: true,
-});
-```
-
-### With Custom Duration
-
-```typescript
-CapSnackBar.success({
-  content: 'This message will stay for 5 seconds',
-  duration: 5, // Duration in seconds
-});
-```
-
-### With Close Callback
-
-```typescript
-CapSnackBar.info({
-  content: 'Message with callback',
-  onClose: () => {
-    console.log('Snackbar closed');
-  },
-});
-```
-
-### With All Options
-
-```typescript
-CapSnackBar.success({
-  content: 'Complete example',
-  showCloseIcon: true,
-  duration: 3,
-  onClose: () => {
-    console.log('Closed');
-  },
-});
-```
-
-### With React Node Content
-
-```typescript
-CapSnackBar.info({
-  content: (
-    <div>
-      <strong>Bold text</strong>
-      <span> and regular text</span>
-    </div>
-  ),
-});
-```
-
-## API Reference
-
-### CapSnackBar Methods
-
-| Method | Description | Parameters |
-|--------|-------------|------------|
-| `info` | Display an info snackbar | `CapSnackBarProps` |
-| `success` | Display a success snackbar | `CapSnackBarProps` |
-| `error` | Display an error snackbar | `CapSnackBarProps` |
-| `warning` | Display a warning snackbar | `CapSnackBarProps` |
-
-### CapSnackBarProps
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `content` | `React.ReactNode` | **Required** | Content to display in the snackbar |
-| `showCloseIcon` | `boolean` | `false` | Whether to show a close icon. When `true`, duration is set to 1000 seconds |
-| `duration` | `number` | `1.5` | Duration in seconds before auto-closing |
-| `onClose` | `() => void` | `undefined` | Callback function called when snackbar is closed |
-
-## Migration Guide
-
-### From cap-ui-library
-
-No migration required! The component API is fully backward compatible. If you're already using `CapSnackBar` from cap-ui-library, you can simply update your imports:
-
-**Before (cap-ui-library)**:
-```typescript
-import CapSnackBar from '@capillarytech/cap-ui-library/components/CapSnackBar';
-```
-
-**After (blaze-ui)**:
-```typescript
-import CapSnackBar from '@capillarytech/blaze-ui/components/CapSnackBar';
-```
-
-All existing code will continue to work without any changes.
-
-## Theme Configuration
-
-The component uses Ant Design theme tokens configured in `getCapThemeConfig.ts`:
-
-```typescript
-Message: {
-  paddingContentHorizontal: 16, // px
-  paddingContentVertical: 12, // px
-  colorSuccessBg: '#dbefda',
-  colorInfoBg: '#fff4d6',
-  colorWarningBg: '#fee5d3',
-  colorErrorBg: '#fbd3d8',
-}
-```
-
-## Notes
-
-- When `showCloseIcon` is `true`, the duration is automatically set to 1000 seconds to allow manual closing
-- The component wraps content in a `<div className="cap-snackbar-content">` when `showCloseIcon` is enabled
-- The close icon is positioned absolutely on the right side of the content
-- All snackbar types (info, success, error, warning) use the same API structure
-
-## Related Components
-
-- `CapNotification` - For more complex notification messages with titles and descriptions
-- `CapAlert` - For inline alert messages

package/CapSnackBar/Status.md

@@ -1,41 +0,0 @@
-# Migration Status: CapSnackBar
-
-**Last Updated**: 2026-02-06 21:19:14
-
-## 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-02-06 21:19:14
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-02-06 20:52:47
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapSnackBar/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapSomethingWentWrong/README.md

@@ -1,97 +0,0 @@
-# CapSomethingWentWrong
-
-A component that displays an error message with a repair illustration when something goes wrong, allowing users to reload or navigate to a different URL.
-
-## Migration Notes (cap-ui-library → blaze-ui)
-
-### Summary of Changes
-
-This component has been migrated from cap-ui-library to blaze-ui with the following changes:
-
-1. **TypeScript Conversion**: Converted from JavaScript to TypeScript with proper interfaces
-2. **Functional Component**: Already a functional component, no conversion needed
-3. **Styling**: Converted from styled-components to SCSS modules
-4. **Dependencies**: Uses migrated `CapHeading` and `CapButton` components from blaze-ui
-
-### Breaking Changes
-
-**None** - No breaking changes from cap-ui-library v8.x
-
-### Prop Changes
-
-All props remain the same:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `undefined` | Additional CSS class name for the container |
-| `titleClassName` | `string` | `undefined` | Additional CSS class name for the title heading |
-| `descClassName` | `string` | `undefined` | Additional CSS class name for the description heading |
-| `buttonClassName` | `string` | `undefined` | Additional CSS class name for the reload button |
-| `title` | `string` | `undefined` | Title text displayed (defaults to translated value via LocaleHoc) |
-| `description` | `string` | `undefined` | Description text displayed (defaults to translated value via LocaleHoc) |
-| `reloadText` | `string` | `undefined` | Text displayed on the reload button (defaults to translated value via LocaleHoc) |
-| `url` | `string` | `undefined` | URL to navigate to when reload button is clicked and pathname includes "somethingwentwrong" |
-| `onClickReload` | `() => void` | `undefined` | Custom reload handler function. If provided, this takes precedence over default reload behavior |
-
-
-### CSS/Styling Changes
-
-1. **SCSS Modules**: Replaced styled-components with SCSS modules
-2. **Class Naming**: Maintained backward compatibility with class name `cap-something-went-wrong`
-3. **Color Variables**: Button color uses SCSS variable value `$cap-secondary-base` (#2466ea)
-
-### Migration Example
-
-No code changes required! The component API is fully backward compatible:
-
-**cap-ui-library (v8.x)**
-```jsx
-import CapSomethingWentWrong from '@capillarytech/cap-ui-library/CapSomethingWentWrong';
-
-<CapSomethingWentWrong
-  title="Sorry, something went wrong."
-  description="Please try again."
-  reloadText="Try refreshing again"
-  url="/dashboard"
-/>
-```
-
-**blaze-ui**
-```jsx
-import { CapSomethingWentWrong } from '@capillarytech/blaze-ui';
-
-<CapSomethingWentWrong
-  title="Sorry, something went wrong."
-  description="Please try again."
-  reloadText="Try refreshing again"
-  url="/dashboard"
-/>
-```
-
-### Default Translations
-
-The component uses `LocaleHoc` to provide default translations. The following translation keys are used:
-
-- `blaze.components.SomethingWentWrong.title`: "Sorry, something went wrong."
-- `blaze.components.SomethingWentWrong.description`: "Please try again. If this issue occurs again, please reach out to Capillary support team."
-- `blaze.components.SomethingWentWrong.reloadText`: "Try refreshing again"
-
-### Reload Behavior
-
-The component handles reload in the following order:
-
-1. If `onClickReload` prop is provided, it will be called when the button is clicked
-2. If `onClickReload` is not provided:
-   - If the current pathname includes "somethingwentwrong", it navigates to the `url` prop (or empty string if not provided)
-   - Otherwise, it reloads the current page using `window.location.reload()`
-
-### Dependencies
-
-This component depends on the following blaze-ui components:
-- `CapHeading` (migrated)
-- `CapButton` (migrated)
-- `LocaleHoc` (migrated)
-
-### Assets
-
-The component uses the `repair.png` image located at `components/assets/images/repair.png`.

package/CapSplit/README.md

@@ -1,19 +0,0 @@
-# CapSplit Component Migration (v3 → v6)
-
-## Migration Status: ✅ COMPLETE
-
-**Migration Date:** 2026-01-23  
-**Migrated By:** Automated Migration System
-
----
-
-## Summary
-
-The `CapSplit` component has been successfully migrated from Ant Design v3 to v6. This component provides an interactive audience splitting interface with a slider-based UI for distributing percentages across multiple groups.
-
-
-## Breaking Changes
-
-### ❌ No Breaking Changes
-
-This component does **not** use any Ant Design components directly - it uses `rc-slider` library. Therefore, there are no API breaking changes from the Ant Design v3 → v6 migration.

package/CapStatisticCard/README.md

@@ -1,138 +0,0 @@
-# CapStatisticCard
-
-A component for displaying statistics in a card layout with optional headers and dividers.
-
-## Migration from cap-ui-library
-
-This component has been migrated from `@capillarytech/cap-ui-library` to `@capillarytech/blaze-ui` with the following changes:
-
-### Breaking Changes
-
-**No breaking changes** - The component maintains full backward compatibility with the previous version.
-
-### Prop Changes
-
-| Prop | Status | Type | Description |
-|------|--------|------|-------------|
-| `statsItems` | ✅ Unchanged | `CapStatisticCardItem[]` | Array of statistic items to display |
-| `width` | ✅ Unchanged | `string` | Width for each statistic item (default: '20%') |
-| `type` | ✅ Unchanged | `string` | Optional type label displayed in the first column |
-| `showHeader` | ✅ Unchanged | `boolean` | Whether to show header row with item text labels |
-
-### TypeScript Interfaces
-
-```typescript
-export interface CapStatisticCardItem {
-  text: string;
-  value: string | number;
-  subText?: string;
-}
-
-export interface CapStatisticCardProps {
-  statsItems: CapStatisticCardItem[];
-  width?: string;
-  type?: string;
-  showHeader?: boolean;
-}
-```
-
-### API Changes
-
-- **TypeScript Support:** Full TypeScript support with exported `CapStatisticCardProps` and `CapStatisticCardItem` interfaces
-- **Styling:** Migrated from global SCSS to SCSS modules for better encapsulation
-- **Spacing:** Converted inline spacing values to use SCSS variables from `blaze-ui/components/styled/variables.scss`
-- **Pixel Values:** Converted pixel values to rem units (base: 14px = 1rem)
-
-### Behavioral Changes
-
-- **Class Names:** Now uses SCSS module class names (e.g., `styles['stats-card']`) instead of global class names
-- **Spacing Constants:** Uses SCSS variables (`$cap-space-04`, `$cap-space-08`, `$cap-space-12`) instead of JavaScript constants
-- **Pixel Conversion:** All pixel values converted to rem:
-  - `10px` → `0.714rem`
-  - `-4px` → `-0.286rem`
-  - `12px` → `0.857rem` (via `$cap-space-12`)
-
-### Usage Examples
-
-#### Basic Usage
-
-```tsx
-import { CapStatisticCard } from '@capillarytech/blaze-ui';
-
-const stats = [
-  { text: 'Total Users', value: 1234 },
-  { text: 'Active Users', value: 856 },
-  { text: 'Revenue', value: '$12,345', subText: '+12% from last month' },
-];
-
-<CapStatisticCard statsItems={stats} />
-```
-
-#### With Type Label
-
-```tsx
-<CapStatisticCard
-  statsItems={stats}
-  type="Monthly Stats"
-  showHeader
-/>
-```
-
-#### Custom Width
-
-```tsx
-<CapStatisticCard
-  statsItems={stats}
-  width="25%"
-/>
-```
-
-#### With Subtext
-
-```tsx
-const statsWithSubtext = [
-  { text: 'Revenue', value: '$12,345', subText: '+12% from last month' },
-  { text: 'Users', value: 1234, subText: '+5% growth' },
-];
-
-<CapStatisticCard statsItems={statsWithSubtext} />
-```
-
-### Migration Steps for Consumers
-
-1. **Update Import:**
-   ```tsx
-   // Before
-   import CapStatisticCard from '@capillarytech/cap-ui-library/components/CapStatisticCard';
-   
-   // After
-   import { CapStatisticCard } from '@capillarytech/blaze-ui';
-   ```
-
-2. **No prop changes required** - All props work exactly as before.
-
-3. **TypeScript Support:** If using TypeScript, you can now import types:
-   ```tsx
-   import { CapStatisticCard, CapStatisticCardProps, CapStatisticCardItem } from '@capillarytech/blaze-ui';
-   ```
-
-### TypeScript
-
-```tsx
-import { CapStatisticCard, CapStatisticCardProps, CapStatisticCardItem } from '@capillarytech/blaze-ui';
-
-const stats: CapStatisticCardItem[] = [
-  { text: 'Total Users', value: 1234 },
-  { text: 'Active Users', value: 856 },
-  { text: 'Revenue', value: '$12,345', subText: '+12% from last month' },
-];
-
-const props: CapStatisticCardProps = {
-  statsItems: stats,
-  type: 'Monthly Stats',
-  showHeader: true,
-  width: '20%',
-};
-
-<CapStatisticCard {...props} />
-```

package/CapStatus/README.md

@@ -1,148 +0,0 @@
-# CapStatus
-
-A status indicator component that displays a colored dot with optional text label.
-
-## Migration from cap-ui-library
-
-This component has been migrated from `@capillarytech/cap-ui-library` to `@capillarytech/blaze-ui` with the following changes:
-
-### Breaking Changes
-
-**No breaking changes** - The component maintains backward compatibility with the previous version.
-
-### Deprecated Props
-
-**No deprecated Ant Design props** - CapStatus does not directly use any Ant Design components, so there are no Ant Design component prop changes to document.
-
-#### Ant Design Component Usage
-
-CapStatus does not directly import or use any Ant Design components (such as Dropdown, Input, Alert, Tooltip, Tabs, etc.). The component only uses:
-
-- `CapRow` - A wrapper component that internally uses Ant Design's `Row` component
-- `CapLabel` - A wrapper component for text labels
-
-**Note:** While `CapRow` uses Ant Design's `Row` component internally, Ant Design's `Row` component does not have any deprecated props in v6. The Ant Design `Row` and `Col` components are not mentioned in the Ant Design v6 migration guide's deprecated API list.
-
-### Prop Changes
-
-| Prop | Status | Notes |
-|------|--------|-------|
-| `type` | ✅ Unchanged | Status type: `'draft'` \| `'pending'` \| `'unsubmitted'` \| `'awaitingApproval'` \| `'approved'` \| `'rejected'` \| `''` |
-| `color` | ✅ Unchanged | Custom color override (string) |
-| `text` | ✅ Unchanged | Text label to display next to the status dot |
-| `height` | ✅ Unchanged | Height of the status dot (default: `CAP_SPACE_08`) |
-| `width` | ✅ Unchanged | Width of the status dot (default: `CAP_SPACE_08`) |
-
-### API Changes
-
-- **TypeScript Support:** Full TypeScript support with exported `CapStatusProps` interface
-- **Ant Design Version:** N/A - Component does not directly use Ant Design components
-- **Styling:** Migrated from styled-components to SCSS modules
-- **Component Structure:** Migrated from class component to functional component
-
-### Behavioral Changes
-
-- **Default Props:** Default values are now set via ES6 default parameters instead of `defaultProps`
-- **Styling:** Uses CSS custom properties (CSS variables) for dynamic styling instead of inline styles
-- **Type Safety:** Full TypeScript type definitions with `CapStatusType` union type
-
-### Usage Examples
-
-#### Basic Usage
-
-```tsx
-import { CapStatus } from '@capillarytech/blaze-ui';
-
-// Approved status
-<CapStatus type="approved" text="Approved" />
-
-// Pending status
-<CapStatus type="pending" text="Pending Review" />
-
-// Rejected status
-<CapStatus type="rejected" text="Rejected" />
-```
-
-#### Custom Color
-
-```tsx
-<CapStatus 
-  type="" 
-  color="#FF5733" 
-  text="Custom Status" 
-/>
-```
-
-#### Custom Size
-
-```tsx
-<CapStatus 
-  type="approved" 
-  text="Approved" 
-  width="12px" 
-  height="12px" 
-/>
-```
-
-#### All Status Types
-
-```tsx
-<CapStatus type="draft" text="Draft" />
-<CapStatus type="pending" text="Pending" />
-<CapStatus type="unsubmitted" text="Unsubmitted" />
-<CapStatus type="awaitingApproval" text="Awaiting Approval" />
-<CapStatus type="approved" text="Approved" />
-<CapStatus type="rejected" text="Rejected" />
-```
-
-### Migration Steps for Consumers
-
-1. **No prop changes required** - All props work exactly as before
-2. **Import path update:**
-   ```tsx
-   // Before
-   import CapStatus from '@capillarytech/cap-ui-library/components/CapStatus';
-   
-   // After
-   import { CapStatus } from '@capillarytech/blaze-ui';
-   ```
-
-3. **TypeScript support (if applicable):**
-   ```tsx
-   import { CapStatus } from '@capillarytech/blaze-ui';
-   import type { CapStatusProps } from '@capillarytech/blaze-ui';
-   
-   const props: CapStatusProps = {
-     type: 'approved',
-     text: 'Approved',
-   };
-   
-   <CapStatus {...props} />
-   ```
-
-### TypeScript
-
-```tsx
-import { CapStatus } from '@capillarytech/blaze-ui';
-import type { CapStatusProps, CapStatusType } from '@capillarytech/blaze-ui';
-
-const props: CapStatusProps = {
-  type: 'approved',
-  text: 'Approved',
-  height: '8px',
-  width: '8px',
-};
-
-<CapStatus {...props} />
-```
-
-### Related Components
-
-- `CapRow` - Used internally for layout (wraps Ant Design `Row`)
-- `CapLabel` - Used internally for text display
-
-### Notes
-
-- The component does not directly use Ant Design components, so there are no Ant Design v6 migration concerns
-- Color mapping follows Capillary design system tokens
-- The status dot uses CSS custom properties for dynamic styling