@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapShape/README.md

@@ -1,96 +0,0 @@
-# CapShape
-
-A simple shape component that renders a circle or square with customizable dimensions, background color, and transform.
-
-## Migration Notes (Ant Design v3 → v6)
-
-### Summary of Changes
-
-This component has been migrated from styled-components to SCSS modules with the following changes:
-
-1. **Styled-components → SCSS Modules**: Converted from styled-components to SCSS modules for better maintainability
-2. **TypeScript**: Added full TypeScript support with proper type definitions
-3. **Pixel to Rem Conversion**: Default dimensions converted from `8px` to `0.571rem` (maintaining 8px at base font size)
-4. **Class-based Styling**: Shape variants (circle/square) now use CSS classes instead of dynamic styled-components
-
-### Breaking Changes
-
-**None** - No breaking changes. The component maintains full backward compatibility with the previous version.
-
-### Prop Changes
-
-All props remain the same:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `width` | `string` | `'0.571rem'` (8px) | Width of the shape |
-| `height` | `string` | `'0.571rem'` (8px) | Height of the shape |
-| `bgColor` | `string` | `'#091e42'` (CAP_G01) | Background color of the shape |
-| `shape` | `'circle' \| 'square'` | `'circle'` | Shape type |
-| `transform` | `string` | `'none'` | CSS transform property |
-| `className` | `string` | `undefined` | Additional CSS class name |
-| `style` | `React.CSSProperties` | `undefined` | Inline styles |
-| All other HTML div attributes | - | - | Passed through to the underlying div element |
-
-### CSS/Styling Changes
-
-1. **SCSS Modules**: Replaced styled-components with SCSS modules
-2. **Class Naming**: Uses BEM-style naming (`cap-shape`, `cap-shape--circle`, `cap-shape--square`)
-3. **Rem Units**: Default dimensions use rem units (0.571rem = 8px at base font size of 14px)
-4. **Dynamic Styles**: Width, height, background color, and transform are applied via inline styles for flexibility
-
-### Usage
-
-#### Basic Usage
-
-```tsx
-import { CapShape } from '@capillarytech/blaze-ui';
-
-// Default circle shape (8px × 8px)
-<CapShape />
-
-// Custom size and color
-<CapShape width="1rem" height="1rem" bgColor="#47af46" />
-
-// Square shape
-<CapShape shape="square" width="16px" height="16px" />
-
-// With transform
-<CapShape transform="rotate(45deg)" />
-```
-
-#### With Custom Styling
-
-```tsx
-<CapShape
-  width="2rem"
-  height="2rem"
-  bgColor="#2466ea"
-  shape="circle"
-  className="my-custom-class"
-  style={{ opacity: 0.8 }}
-/>
-```
-
-### Migration Example
-
-No code changes required! The component API is fully backward compatible:
-
-**Before (styled-components)**
-```tsx
-<CapShape width="8px" height="8px" bgColor="#091e42" shape="circle" />
-```
-
-**After (SCSS modules)**
-```tsx
-<CapShape width="0.571rem" height="0.571rem" bgColor="#091e42" shape="circle" />
-```
-
-**Note**: While the default values now use rem units, you can still pass pixel values and they will work correctly.
-
-### Technical Details
-
-- **No Ant Design Dependencies**: This component does not use any Ant Design components
-- **Pure HTML Div**: Renders a simple `<div>` element with custom styling
-- **Forward Ref**: Supports ref forwarding for parent component access
-- **TypeScript**: Full TypeScript support with exported `CapShapeProps` interface

package/CapShape/Status.md

@@ -1,36 +0,0 @@
-# Migration Status: CapShape
-
-**Last Updated**: 2026-01-31 18:42:57
-
-## 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
-- [ ] **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
-
-## Visual Testing Results
-
-**Last Test**: 2026-01-31 18:42:57
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-_No CSS fixes applied yet._
-
-## Notes
-
-_No notes yet._

package/CapShape/tests/USE_CASES_ANALYSIS.md

@@ -1,120 +0,0 @@
-# CapShape Use Cases Analysis
-
-## Component Overview
-CapShape is a simple visual shape component that renders either a circle or square with customizable dimensions, colors, and transforms. It's primarily used as a visual indicator (status dots, badges, etc.).
-
-## Phase 1: Use Cases NOT Fulfilled by Component
-
-**Note**: Unable to access Google Sheets use cases. Analysis based on component API and common patterns.
-
-### 1. **Additional Shape Types**
-- **Status**: ❌ Not Supported
-- **Current Behavior**: Only supports `circle` and `square` shapes
-- **Potential Use Cases**:
-  - Triangle shapes for directional indicators
-  - Diamond shapes for special markers
-  - Custom polygon shapes
-- **Workaround**: Use `transform` prop with `rotate()` to create rotated squares (diamonds)
-
-### 2. **Border/Stroke Support**
-- **Status**: ❌ Not Supported
-- **Current Behavior**: Component only supports background color, no border
-- **Potential Use Cases**:
-  - Outlined shapes (hollow circles/squares)
-  - Bordered shapes with different border colors
-  - Stroke width customization
-- **Workaround**: Use `style` prop with `border` CSS property
-
-### 3. **Gradient Backgrounds**
-- **Status**: ❌ Not Supported
-- **Current Behavior**: Only supports solid `bgColor`
-- **Potential Use Cases**:
-  - Linear gradients
-  - Radial gradients
-  - Multi-color backgrounds
-- **Workaround**: Use `style` prop with `background` CSS property for gradients
-
-### 4. **Preset Size Variants**
-- **Status**: ❌ Not Supported
-- **Current Behavior**: Requires explicit `width` and `height` values
-- **Potential Use Cases**:
-  - Small/Medium/Large preset sizes
-  - Consistent sizing across application
-- **Workaround**: Define constants or use wrapper components
-
-### 5. **Preset Color Schemes**
-- **Status**: ❌ Not Supported
-- **Current Behavior**: Requires explicit color values
-- **Potential Use Cases**:
-  - Status colors (success, error, warning, info)
-  - Theme-aware colors
-  - Semantic color names
-- **Workaround**: Use color constants from `_variables.ts` or wrapper components
-
-### 6. **Shadow Effects**
-- **Status**: ❌ Not Supported
-- **Current Behavior**: No built-in shadow support
-- **Potential Use Cases**:
-  - Elevation effects
-  - Depth indicators
-  - Visual hierarchy
-- **Workaround**: Use `style` prop with `boxShadow` CSS property
-
-### 7. **Animation Support**
-- **Status**: ⚠️ Limited Support
-- **Current Behavior**: Static shapes, no animation props
-- **Potential Use Cases**:
-  - Pulsing animations for status indicators
-  - Rotation animations
-  - Fade in/out animations
-- **Workaround**: Use `style` prop with CSS animations or external CSS classes
-
-### 8. **Aspect Ratio Lock**
-- **Status**: ❌ Not Supported
-- **Current Behavior**: Width and height are independent
-- **Potential Use Cases**:
-  - Maintain square aspect ratio automatically
-  - Responsive sizing that maintains shape
-- **Workaround**: Use same value for `width` and `height` or wrapper logic
-
-### 9. **Opacity/Transparency Control**
-- **Status**: ⚠️ Limited Support
-- **Current Behavior**: No dedicated `opacity` prop
-- **Potential Use Cases**:
-  - Disabled/ghost states
-  - Overlay effects
-- **Workaround**: Use `style` prop with `opacity` CSS property
-
-### 10. **Accessibility Enhancements**
-- **Status**: ⚠️ Partial Support
-- **Current Behavior**: Supports standard HTML attributes but no semantic defaults
-- **Potential Use Cases**:
-  - Default `role="presentation"` for decorative shapes
-  - Default `aria-hidden="true"` for purely visual indicators
-  - Semantic roles for status indicators (`role="status"`)
-- **Workaround**: Manually add ARIA attributes via props
-
-## Recommendations
-
-### High Priority (if required)
-1. **Preset Size Variants**: Add `size` prop with `small | medium | large` options
-2. **Preset Color Schemes**: Add `variant` prop for status colors (success, error, warning, info)
-3. **Border Support**: Add `border` and `borderColor` props
-
-### Medium Priority (if required)
-4. **Additional Shapes**: Add `triangle` and `diamond` shape options
-5. **Animation Support**: Add `animated` prop with animation types
-6. **Default Accessibility**: Set appropriate ARIA attributes by default
-
-### Low Priority (nice to have)
-7. **Gradient Support**: Add `gradient` prop
-8. **Shadow Support**: Add `elevation` prop
-9. **Aspect Ratio Lock**: Add `aspectRatio` prop
-
-## Current Component Strengths
-✅ Simple, focused API
-✅ Full control over dimensions and colors
-✅ Supports all HTML div attributes
-✅ Ref forwarding support
-✅ Transform support for rotations/scaling
-✅ Flexible styling via className and style props

package/CapSideBar/README.md

@@ -1,298 +0,0 @@
-# CapSideBar
-
-A sidebar navigation component with collapsible menu items and optional search functionality.
-
-## Migration from cap-ui-library
-
-This component has been migrated from `@capillarytech/cap-ui-library` to `@capillarytech/blaze-ui` with the following changes:
-
-### Summary of Changes
-
-- **TypeScript Migration**: Converted from JavaScript to TypeScript with proper type definitions
-- **Ant Design v6 Compatibility**: Updated to use Ant Design v6 APIs
-- **SCSS Modules**: Uses SCSS modules for styling
-- **Class Component**: Maintained as class component (no functional conversion)
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `sidebarItems` | `SidebarItem[]` | - | Array of sidebar menu items |
-| `defaultActiveKey` | `string` | - | Default active key for the collapse component |
-| `selectedMenuItem` | `string` | - | Currently selected menu item key |
-| `searchData` | `SidebarItem[]` | - | Search data array |
-| `handleSearch` | `(searchText: string) => void` | - | Handler function for search |
-| `searchSupportPortalUrl` | `string` | - | Support portal URL for search |
-| `onLinkClick` | `(item: SidebarItem) => void` | - | Handler function for link clicks |
-| `pageHeading` | `string` | - | Page heading text |
-| `showSearchbar` | `boolean` | - | Whether to show the search bar |
-
-### SidebarItem Interface
-
-```typescript
-interface SidebarItem {
-  title: string;
-  key: string;
-  link?: string;
-  children?: SidebarItem[];
-}
-```
-
-## Breaking Changes
-
-**No breaking changes** - The component maintains backward compatibility with the previous version.
-
-## Deprecated Props
-
-**Status:** ✅ **No deprecated props currently in use**
-
-All Ant Design component APIs have been updated to use current APIs. The component does not use any deprecated Ant Design props.
-
-The following Ant Design component API migrations were completed during the migration from cap-ui-library. These deprecated APIs are no longer used:
-
-### Summary Table
-
-| Ant Design Component | Deprecated API | New API | Status | Location |
-|---------------------|----------------|---------|--------|----------|
-| **Icon** | `<Icon type="..." />` | Individual icon imports | ✅ Migrated | `expandIcon` prop |
-| **Popover** | `visible`, `onVisibleChange` | `open`, `onOpenChange` | ✅ Migrated | MenuSearch subcomponent |
-| **Popover** | `overlayClassName` | `classNames.root` | ✅ Migrated | MenuSearch subcomponent |
-| **Collapse** | - | - | ✅ Current | All props current |
-
-### `<Icon type="..." />` API (Ant Design Icon Component)
-
-- **Status:** ✅ Migrated (no longer in use)
-- **Ant Design Component:** Icon
-- **Deprecated API:** `<Icon type="caret-right" />` from `antd` (Ant Design v3 API)
-- **Replacement:** Individual icon imports from `@ant-design-v5/icons`
-- **Location:** Used internally in `expandIcon` prop for Collapse component
-- **Migration:** Replace `<Icon type="..." />` with individual icon component imports
-
-**Before (Deprecated - cap-ui-library):**
-
-```tsx
-import { Icon, Collapse } from 'antd';
-
-<Collapse
-  expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} />}
-/>
-```
-
-**After (Current - blaze-ui):**
-
-```tsx
-import { CaretRightOutlined } from '@ant-design-v5/icons';
-import { Collapse } from 'antd-v5';
-
-<Collapse
-  expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
-/>
-```
-
-**Note:** The deprecated `<Icon type="..." />` API was replaced with individual icon imports. This migration is complete and no deprecated Icon APIs are used.
-
-### `visible` and `onVisibleChange` Props (Ant Design Popover Component)
-
-- **Status:** ✅ Migrated (no longer in use)
-- **Ant Design Component:** Popover
-- **Deprecated Props:** `visible`, `onVisibleChange`
-- **Replacement:** `open`, `onOpenChange`
-- **Location:** Used internally in `MenuSearch` component
-- **Migration:** Replace `visible` with `open` and `onVisibleChange` with `onOpenChange`
-
-**Before (Deprecated - Ant Design v5):**
-
-```tsx
-<Popover
-  visible={open}
-  onVisibleChange={handleVisibleChange}
-  ...
-/>
-```
-
-**After (Current - Ant Design v6 API):**
-
-```tsx
-<Popover
-  open={open}
-  onOpenChange={handleOpenChange}
-  ...
-/>
-```
-
-**Note:** Popover component uses current Ant Design v6 APIs. No deprecated props are used.
-
-### `overlayClassName` Prop (Ant Design Popover Component)
-
-- **Status:** ✅ Migrated (no longer in use)
-- **Ant Design Component:** Popover
-- **Deprecated Prop:** `overlayClassName`
-- **Replacement:** `classNames.root`
-- **Location:** Used internally in `MenuSearch` component
-- **Migration:** Replace `overlayClassName` with `classNames={{ root: ... }}`
-
-**Before (Deprecated - Ant Design v5):**
-
-```tsx
-<Popover
-  overlayClassName="custom-popover"
-  ...
-/>
-```
-
-**After (Current - Ant Design v6 API):**
-
-```tsx
-<Popover
-  classNames={{ root: "custom-popover" }}
-  ...
-/>
-```
-
-**Note:** Popover component uses current Ant Design v6 APIs. No deprecated props are used.
-
-### Collapse Component (Ant Design)
-
-- **Status:** ✅ Current APIs (no deprecated props)
-- **Ant Design Component:** Collapse
-- **Props Used:** `defaultActiveKey`, `className`, `bordered`, `accordion`, `expandIcon`
-- **Status:** All props are current and not deprecated in Ant Design v6
-
-**Note:** The `bordered` prop is still valid in Ant Design v6 and is not deprecated.
-
-## Usage Examples
-
-### Basic Usage
-
-```tsx
-import CapSideBar from '@capillarytech/blaze-ui/components/CapSideBar';
-
-const sidebarItems = [
-  {
-    title: 'Dashboard',
-    key: 'dashboard',
-    link: '/dashboard',
-  },
-  {
-    title: 'Settings',
-    key: 'settings',
-    children: [
-      {
-        title: 'General',
-        key: 'general',
-        link: '/settings/general',
-      },
-      {
-        title: 'Advanced',
-        key: 'advanced',
-        link: '/settings/advanced',
-      },
-    ],
-  },
-];
-
-<CapSideBar
-  sidebarItems={sidebarItems}
-  defaultActiveKey="dashboard"
-  selectedMenuItem="dashboard"
-/>
-```
-
-### With Search
-
-```tsx
-<CapSideBar
-  sidebarItems={sidebarItems}
-  showSearchbar
-  handleSearch={(searchText) => {
-    console.log('Searching for:', searchText);
-  }}
-  searchSupportPortalUrl="https://support.example.com/search?q={{searchText}}"
-/>
-```
-
-### With Page Heading
-
-```tsx
-<CapSideBar
-  sidebarItems={sidebarItems}
-  pageHeading="Navigation"
-  selectedMenuItem="dashboard"
-/>
-```
-
-### With Link Click Handler
-
-```tsx
-<CapSideBar
-  sidebarItems={sidebarItems}
-  onLinkClick={(item) => {
-    console.log('Link clicked:', item);
-    // Handle navigation programmatically
-  }}
-/>
-```
-
-## API Changes
-
-### TypeScript Support
-
-- **Full TypeScript Support:** All props are typed with TypeScript interfaces
-- **Exported Types:** `CapSideBarProps` and `SidebarItem` interfaces are exported from `types.ts`
-
-### Ant Design Version
-
-- **Ant Design Version:** Currently using `antd-v5` (Ant Design v5)
-- **Status:** All Ant Design component APIs used are current and not deprecated
-- **Icon Migration:** Successfully migrated from deprecated `<Icon type="..." />` API to individual icon imports
-- **Popover API:** Using Ant Design v6-compatible APIs (`open`, `onOpenChange`, `classNames.root`)
-- **Future Updates:** Component will be upgraded to use `antd` (v6) in a future release
-
-## Behavioral Changes
-
-1. **Search Functionality:** Search is debounced by 200ms for better performance
-2. **Nested Menus:** Supports unlimited nesting levels of menu items
-3. **Active State:** Visual indication of selected menu item via `selectedMenuItem` prop
-
-## 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 `CapSideBarProps` and `SidebarItem` for type safety
-2. **Use search functionality**: Enable `showSearchbar` prop and provide `handleSearch` handler
-3. **Use link click handler**: Provide `onLinkClick` for programmatic navigation
-
-## Code Examples
-
-### Before (cap-ui-library)
-
-```jsx
-import CapSideBar from '@capillarytech/cap-ui-library/components/CapSideBar';
-
-<CapSideBar
-  sidebarItems={sidebarItems}
-  defaultActiveKey="dashboard"
-  selectedMenuItem="dashboard"
-/>
-```
-
-### After (blaze-ui)
-
-```tsx
-import CapSideBar from '@capillarytech/blaze-ui/components/CapSideBar';
-import type { CapSideBarProps, SidebarItem } from '@capillarytech/blaze-ui/components/CapSideBar/types';
-
-<CapSideBar
-  sidebarItems={sidebarItems}
-  defaultActiveKey="dashboard"
-  selectedMenuItem="dashboard"
-/>
-```
-
-## Related Components
-
-- `CapHeading` - Used for page heading and menu item titles
-- `MenuSearch` - Subcomponent for search functionality
-- `Collapse` (Ant Design) - Used for collapsible menu structure

package/CapSideBar/Status.md

@@ -1,5 +0,0 @@
-
-- 
-
-
-

package/CapSlideBox/README.md

@@ -1,68 +0,0 @@
-# CapSlideBox
-
-A slide-out panel component for displaying content in a side drawer.
-
-## Migration from cap-ui-library to blaze-ui
-
-### Summary of Changes
-
-- ✅ **TypeScript conversion**: Converted from JavaScript to TypeScript with proper type definitions
-- ✅ **Functional component**: Converted from class component to functional component using React hooks
-- ✅ **SCSS modules**: Migrated styles to SCSS modules with proper namespacing
-- ✅ **Pixel to rem conversion**: All pixel values converted to rem units (14px = 1rem)
-- ✅ **SCSS variables**: Using design system variables from `components/styled/variables.scss`
-
-### Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-The component API remains fully backward compatible. All props work exactly the same as before.
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `header` | `ReactNode` | required | Header content (string or React element) |
-| `content` | `ReactNode` | required | Main content to display in the slide box |
-| `handleClose` | `() => void` | required | Callback function when close icon is clicked |
-| `show` | `boolean` | `undefined` | Controls visibility of the slide box |
-| `footer` | `ReactNode` | `undefined` | Optional footer content |
-| `size` | `'size-s' \| 'size-r' \| 'size-l' \| 'size-xl'` | `'size-r'` | Size variant of the slide box |
-| `position` | `'left' \| 'right'` | `'right'` | Position of the slide box |
-| `className` | `string` | `undefined` | Additional CSS class names |
-| `closeIconSize` | `'xs' \| 's' \| 'm' \| 'l'` | `'m'` | Size of the close icon |
-| `closeIconPosition` | `'left' \| 'right'` | `'right'` | Position of the close icon in header |
-| `closeIconType` | `'close' \| 'back'` | `'close'` | Type of close icon to display |
-
-### Size Variants
-
-- **size-s**: Small (25vw width, min: 372px, max: 400px)
-- **size-r**: Regular (50vw width, min: 660px, max: 800px) - Default
-- **size-l**: Large (75vw width, min: 948px, max: 1140px)
-- **size-xl**: Extra Large (fixed: 1180px)
-
-### Features
-
-- **Automatic scroll shadow**: Shows shadow on header/footer when content is scrolled
-- **Body scroll lock**: Prevents body scrolling when slide box is open
-- **Responsive sizes**: Adapts to viewport width with min/max constraints
-- **Flexible positioning**: Can slide from left or right
-- **Custom header layout**: Close icon can be positioned on left or right
-- **Footer support**: Optional fixed footer at bottom
-- **Throttled scroll**: Optimized scroll event handling
-
-### Migration Guide for Consumers
-
-No migration required! The component API is fully backward compatible. If you're already using `CapSlideBox` from cap-ui-library, you can simply update your imports to point to blaze-ui:
-
-**Before:**
-```tsx
-import CapSlideBox from '@capillarytech/cap-ui-library/components/CapSlideBox';
-```
-
-**After:**
-```tsx
-import CapSlideBox from '@capillarytech/blaze-ui/components/CapSlideBox';
-```
-
-All your existing props and usage patterns will continue to work without any changes.