@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapTooltip/README.md

@@ -1,336 +0,0 @@
-# CapTooltip
-
-Enhanced tooltip component built on Ant Design v6 with backward compatibility for Ant Design v3 APIs.
-
-## Summary of Changes from cap-ui-library
-
-The `CapTooltip` 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
-- **SCSS Modules**: Converted from styled-components to SCSS modules
-- **Enhanced API**: Added support for controlled/uncontrolled modes and additional Ant Design v6 features
-- **Backward Compatible**: All deprecated props from Ant Design v3 still work with console warnings
-
-## Props
-
-### Supported Props
-
-The component accepts all Ant Design v6 `Tooltip` props, plus the following additions:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `React.ReactNode` | - | Tooltip content |
-| `children` | `React.ReactNode` | - | Trigger element |
-| `placement` | `TooltipPlacement` | `'top'` | Tooltip placement relative to trigger |
-| `open` | `boolean` | - | Controlled open state |
-| `defaultOpen` | `boolean` | `false` | Default open state (uncontrolled) |
-| `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes |
-| `trigger` | `'hover' \| 'focus' \| 'click' \| 'contextMenu' \| Array` | `'hover'` | Tooltip trigger action(s) |
-| `destroyOnHidden` | `boolean` | `false` | Whether to destroy tooltip when hidden |
-| `mouseEnterDelay` | `number` | `0.1` | Delay in seconds before showing tooltip on hover |
-| `mouseLeaveDelay` | `number` | `0.1` | Delay in seconds before hiding tooltip on hover out |
-| `autoAdjustOverflow` | `boolean` | `true` | Whether to adjust tooltip position automatically |
-| `classNames` | `{ root?: string }` | - | Custom class names for tooltip parts |
-| `styles` | `{ root?: React.CSSProperties }` | - | Custom styles for tooltip parts |
-| `align` | `AlignConfig` | - | Tooltip alignment configuration |
-| `getPopupContainer` | `(triggerNode: HTMLElement) => HTMLElement` | - | Container for tooltip rendering |
-| `className` | `string` | `''` | Additional CSS class name for the tooltip wrapper |
-
-### Deprecated Props (Still Supported)
-
-These props are deprecated but still work for backward compatibility. They will show console warnings in development mode:
-
-| Deprecated Prop | Replacement | Notes |
-|----------------|-------------|-------|
-| `visible` | `open` | Use `open` for controlled state |
-| `onVisibleChange` | `onOpenChange` | Use `onOpenChange` for controlled state callbacks |
-| `destroyTooltipOnHide` | `destroyOnHidden` | Use `destroyOnHidden` for destroy behavior |
-| `overlayClassName` | `classNames.root` | Use `classNames.root` for overlay styling |
-| `overlayStyle` | `styles.root` | Use `styles.root` for overlay inline styles |
-
-**Note**: Deprecated props will be removed in the next major version. Please migrate to the new prop names.
-
-## API Changes
-
-### Controlled vs Uncontrolled Mode
-
-The component now supports both controlled and uncontrolled modes:
-
-**Controlled Mode:**
-```tsx
-const [open, setOpen] = useState(false);
-
-<CapTooltip 
-  title="Controlled tooltip" 
-  open={open} 
-  onOpenChange={setOpen}
->
-  <Button>Hover me</Button>
-</CapTooltip>
-```
-
-**Uncontrolled Mode:**
-```tsx
-<CapTooltip 
-  title="Uncontrolled tooltip" 
-  defaultOpen={false}
->
-  <Button>Hover me</Button>
-</CapTooltip>
-```
-
-### Styling API Changes
-
-**Old API (deprecated):**
-```tsx
-<CapTooltip 
-  overlayClassName="custom-class"
-  overlayStyle={{ backgroundColor: 'red' }}
->
-  <Button>Button</Button>
-</CapTooltip>
-```
-
-**New API (recommended):**
-```tsx
-<CapTooltip 
-  classNames={{ root: 'custom-class' }}
-  styles={{ root: { backgroundColor: 'red' } }}
->
-  <Button>Button</Button>
-</CapTooltip>
-```
-
-## Behavioral Changes
-
-### No Breaking Changes
-
-The component maintains **100% backward compatibility** with `cap-ui-library` v8.x. All existing code will continue to work without modifications.
-
-### Enhanced Features
-
-- **Controlled State**: Full support for controlled tooltip state management
-- **Destroy on Hide**: Option to destroy tooltip DOM when hidden for performance optimization
-- **Custom Styling**: Enhanced styling API with `classNames` and `styles` props
-- **Delay Configuration**: Configurable mouse enter/leave delays
-- **Auto Adjust Overflow**: Automatic position adjustment to stay within viewport
-
-## Migration Steps for Consumers
-
-### Step 1: Update Imports
-
-**Before:**
-```tsx
-import { CapTooltip } from '@capillarytech/cap-ui-library';
-```
-
-**After:**
-```tsx
-import { CapTooltip } from '@capillarytech/blaze-ui';
-```
-
-### Step 2: Update Deprecated Props (Optional)
-
-While deprecated props still work, it's recommended to update them:
-
-**Before:**
-```tsx
-<CapTooltip 
-  visible={isOpen}
-  onVisibleChange={setIsOpen}
-  overlayClassName="custom-tooltip"
-  overlayStyle={{ color: 'white' }}
-  destroyTooltipOnHide
->
-  <Button>Button</Button>
-</CapTooltip>
-```
-
-**After:**
-```tsx
-<CapTooltip 
-  open={isOpen}
-  onOpenChange={setIsOpen}
-  classNames={{ root: 'custom-tooltip' }}
-  styles={{ root: { color: 'white' } }}
-  destroyOnHidden
->
-  <Button>Button</Button>
-</CapTooltip>
-```
-
-### Step 3: Use Controlled Mode (Optional)
-
-If you need programmatic control over tooltip visibility:
-
-```tsx
-const [tooltipOpen, setTooltipOpen] = useState(false);
-
-<CapTooltip 
-  title="Controlled tooltip"
-  open={tooltipOpen}
-  onOpenChange={setTooltipOpen}
->
-  <Button onClick={() => setTooltipOpen(true)}>Show Tooltip</Button>
-</CapTooltip>
-```
-
-## Code Examples
-
-### Basic Usage
-
-```tsx
-import { CapTooltip } from '@capillarytech/blaze-ui';
-import { Button } from 'antd-v5';
-
-function MyComponent() {
-  return (
-    <CapTooltip title="This is a tooltip">
-      <Button>Hover me</Button>
-    </CapTooltip>
-  );
-}
-```
-
-### With Different Placements
-
-```tsx
-<CapTooltip title="Top tooltip" placement="top">
-  <Button>Top</Button>
-</CapTooltip>
-
-<CapTooltip title="Bottom tooltip" placement="bottom">
-  <Button>Bottom</Button>
-</CapTooltip>
-
-<CapTooltip title="Left tooltip" placement="left">
-  <Button>Left</Button>
-</CapTooltip>
-
-<CapTooltip title="Right tooltip" placement="right">
-  <Button>Right</Button>
-</CapTooltip>
-```
-
-### With Different Triggers
-
-```tsx
-<CapTooltip title="Hover tooltip" trigger="hover">
-  <Button>Hover</Button>
-</CapTooltip>
-
-<CapTooltip title="Click tooltip" trigger="click">
-  <Button>Click</Button>
-</CapTooltip>
-
-<CapTooltip title="Focus tooltip" trigger="focus">
-  <Button>Focus</Button>
-</CapTooltip>
-```
-
-### With Custom Content
-
-```tsx
-<CapTooltip 
-  title={
-    <div>
-      <strong>Custom HTML</strong>
-      <br />
-      <span>This tooltip contains formatted content</span>
-    </div>
-  }
->
-  <Button>Custom Content</Button>
-</CapTooltip>
-```
-
-### With Disabled Button
-
-**Important**: When using tooltips with disabled buttons, wrap the button with an element having the class `button-disabled-tooltip-wrapper`:
-
-```tsx
-<CapTooltip title="Disabled button tooltip">
-  <span className="button-disabled-tooltip-wrapper">
-    <Button disabled>Disabled Button</Button>
-  </span>
-</CapTooltip>
-```
-
-### Controlled Tooltip
-
-```tsx
-import { useState } from 'react';
-
-function ControlledExample() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div>
-      <CapTooltip 
-        title="This tooltip is controlled" 
-        open={open} 
-        onOpenChange={setOpen}
-      >
-        <Button>Controlled Tooltip</Button>
-      </CapTooltip>
-      <Button onClick={() => setOpen(!open)}>
-        Toggle Tooltip
-      </Button>
-    </div>
-  );
-}
-```
-
-### Custom Styling
-
-```tsx
-<CapTooltip 
-  title="Custom styled tooltip"
-  classNames={{ root: 'my-custom-tooltip-class' }}
-  styles={{ root: { backgroundColor: '#47af46', color: 'white' } }}
->
-  <Button>Styled Tooltip</Button>
-</CapTooltip>
-```
-
-## Import Examples
-
-### Default Import
-
-```tsx
-import CapTooltip from '@capillarytech/blaze-ui/components/CapTooltip';
-```
-
-### Named Import
-
-```tsx
-import { CapTooltip } from '@capillarytech/blaze-ui';
-```
-
-### With TypeScript Types
-
-```tsx
-import { CapTooltip } from '@capillarytech/blaze-ui';
-import type { CapTooltipProps } from '@capillarytech/blaze-ui';
-
-const props: CapTooltipProps = {
-  title: 'Tooltip text',
-  placement: 'top',
-};
-```
-
-## Notes
-
-- **No Breaking Changes**: The component is fully backward compatible with `cap-ui-library` v8.x
-- **Deprecated Props**: Deprecated props will show console warnings in development mode but continue to work
-- **Disabled Buttons**: Always wrap disabled buttons with `button-disabled-tooltip-wrapper` class for tooltips to work correctly
-- **Performance**: Use `destroyOnHidden={true}` when rendering many tooltips to improve performance
-- **Styling**: The component uses SCSS modules. Custom styles can be applied via `classNames` and `styles` props
-
-## Related Components
-
-- `CapTooltipWithInfo` - Tooltip component with info icon
-- `CapButton` - Button component that works well with tooltips
-- `CapIcon` - Icon component that can be wrapped with tooltips
-

package/CapTooltipWithInfo/Status.md

@@ -1,75 +0,0 @@
-# Migration Status: CapTooltipWithInfo
-
-**Last Updated**: 2026-02-06 20:04:51
-
-## 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-02-06 20:04:51
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-_No CSS fixes applied yet._
-
-## Notes
-
-### Unit Test Implementation (2026-01-26)
-
-**Phase 0**: Google Sheets access unavailable - MCP server "google_sheets" not found. Proceeding with comprehensive tests based on component interface.
-
-**Phase 1**: Use Cases Analysis
-
-**Component Currently Supports:**
-- ✅ Default rendering with info-circle icon
-- ✅ Custom icon types (info-circle, question-circle, etc.)
-- ✅ Icon size variations (xs, s, m, l)
-- ✅ Tooltip placement (12 positions: top, bottom, left, right, and their variants)
-- ✅ Multiple trigger types (hover, focus, click, contextMenu, or array combinations)
-- ✅ Custom className support
-- ✅ HTML attributes spreading (id, aria-label, aria-describedby, role, etc.)
-- ✅ React node titles (HTML content)
-- ✅ tooltipProps spreading to CapTooltip
-- ✅ iconProps spreading to CapIcon
-- ✅ Event handlers (onClick, onMouseEnter, onMouseLeave, onFocus, onBlur)
-
-**Use Cases NOT Currently Fulfilled** (based on component analysis):
-- ⚠️ **Unable to verify against Google Sheets requirements** - MCP server unavailable
-- ⚠️ Component relies on CapTooltip/CapIcon - any limitations there would affect this component
-- ⚠️ No built-in validation or error states for title prop
-- ⚠️ No built-in loading states
-- ⚠️ No built-in disabled state (would need to be handled via iconProps or wrapper attributes)
-
-**Phase 2**: Comprehensive test suite implemented with 90%+ coverage:
-- Default rendering and initialization tests
-- Prop variations (iconSize, iconType, placement, trigger, className)
-- User interactions (hover, click, focus, contextMenu, multiple triggers)
-- Event handlers and callbacks
-- Data flow (tooltipProps, iconProps, HTML attributes spreading)
-- Edge cases (empty title, long title, React node title, all custom props)
-- Accessibility (ARIA attributes, keyboard navigation, role support)
-- Conditional rendering logic
-- Backward compatibility
-
-**Test Files Created:**
-- `tests/CapTooltipWithInfo.test.tsx` - Comprehensive test suite
-- `tests/CapTooltipWithInfo.mockData.ts` - Mock data and test props

package/CapTopBar/README.md

@@ -1,146 +0,0 @@
-# CapTopBar
-
-CapTopBar component migrated from Ant Design v3 to v6.
-
-## Migration Summary
-
-This component has been migrated to use Ant Design v6 APIs and design tokens.
-
-## Breaking Changes
-
-**No breaking changes** - The component maintains **100% backward compatibility** with existing code. Deprecated Ant Design APIs continue to work exactly as before. However, deprecated APIs will show console warnings in development mode and should be migrated to the new API for future compatibility.
-
-## Deprecated Props
-
-The following Ant Design component APIs are deprecated but still supported for backward compatibility:
-
-### `visible` / `onVisibleChange` (Drawer, Dropdown, Popover Components)
-
-- **Status:** ⚠️ Deprecated
-- **Ant Design Components:** Drawer, Dropdown, Popover
-- **Deprecated Props:** `visible`, `onVisibleChange`
-- **Replacement:** Use `open` and `onOpenChange` props instead
-- **Migration:** Replace `visible` with `open` and `onVisibleChange` with `onOpenChange`
-- **Removal:** Will be removed in next major version
-
-**Before (Deprecated):**
-```tsx
-<CapDrawer visible={true} onVisibleChange={handleChange} />
-<CapDropdown visible={true} onVisibleChange={handleChange} />
-<CapPopover visible={true} onVisibleChange={handleChange} />
-```
-
-**After (Recommended):**
-```tsx
-<CapDrawer open={true} onOpenChange={handleChange} />
-<CapDropdown open={true} onOpenChange={handleChange} />
-<CapPopover open={true} onOpenChange={handleChange} />
-```
-
-**Note:** A deprecation warning will be shown in development mode when using `visible` instead of `open`.
-
-### `overlay` / `overlayClassName` (Dropdown Component)
-
-- **Status:** ⚠️ Deprecated
-- **Ant Design Component:** Dropdown
-- **Deprecated Props:** `overlay`, `overlayClassName`
-- **Replacement:** Use `menu` and `popupClassName` props instead
-- **Migration:** Replace `overlay` with `menu` (object format) and `overlayClassName` with `popupClassName`
-- **Removal:** Will be removed in next major version
-
-**Before (Deprecated):**
-```tsx
-<CapDropdown overlay={<CapMenu>...</CapMenu>} overlayClassName="custom-class" />
-```
-
-**After (Recommended):**
-```tsx
-<CapDropdown 
-  menu={{ items: [...] }} 
-  popupClassName="custom-class" 
-/>
-```
-
-**Note:** A deprecation warning will be shown in development mode when using `overlay` instead of `menu`.
-
-## Style Changes
-
-**Approach**: The component uses CSS Modules with design tokens. Custom styling is applied through:
-- CSS Modules classes for component-specific styles
-- Design tokens via theme config (`getCapThemeConfig.ts`) for Antd component styling
-- `:global` overrides with `// OVERRIDE:` comments for non-tokenizable cases
-
-### Tokenized Styles
-
-The following Antd component styles are now controlled via design tokens in `getCapThemeConfig.ts`:
-
-- **Layout.Header**: `headerBg`, `headerPadding`, `headerHeight`
-- **Drawer**: `headerBg`, `headerPadding`, `bodyPadding`
-- **Dropdown**: `controlItemHeight`
-- **Menu**: `itemColor`, `itemSelectedColor`, `itemHoverColor`, `itemActiveBorderBottomWidth`
-- **Divider**: `verticalMarginInline`
-
-### Non-Tokenizable Overrides
-
-The following styles remain as `:global` overrides with `// OVERRIDE:` comments:
-
-1. **Menu horizontal margin-right** (line 119-123): Media query specific margin - layout specific, no token available
-2. **Divider horizontal width and margin** (line 171-174): Custom width and margin in user profile context - component specific
-3. **Popover padding-top, width, inner-content padding, arrow display** (line 321-332): Layout-specific popover customization - no tokens available
-
-## Code Improvements
-
-1. **Removed PropTypes**: Replaced with TypeScript interfaces in `types.ts`
-2. **Converted to functional component**: Changed from class component to functional component with hooks
-3. **Using CSS Modules**: All styles use CSS Modules with `styles[classname]` pattern
-4. **Improved backward compatibility**: Deprecated props are handled internally by child components (CapDrawer, CapDropdown, CapPopover)
-5. **Type safety**: Full TypeScript support with proper types exported
-
-## Component Architecture Changes
-
-- **Class Component → Functional Component**: Converted from React class component to functional component
-- **State Management**: Replaced `this.state` with `useState` hooks
-- **Methods → Callbacks**: Converted class methods to `useCallback` hooks for performance optimization
-- **Props Types**: Migrated from PropTypes to TypeScript interfaces
-
-## What Stayed the Same
-
-- All component props and API surface area
-- Component behavior and functionality
-- Styling appearance (maintained through tokens and CSS Modules)
-- Backward compatibility for all existing usage
-
-## What Changed
-
-- **Removed**: PropTypes dependency
-- **Removed**: Class component pattern
-- **Added**: TypeScript type definitions
-- **Added**: CSS Modules support
-- **Added**: Design token integration
-- **Updated**: Antd imports to use `antd-v5` (v6)
-
-## Usage Example
-
-```tsx
-import CapTopBar from '@capillarytech/blaze-ui';
-
-<CapTopBar
-  menuProps={{
-    items: [
-      { key: '1', label: 'Home' },
-      { key: '2', label: 'About' },
-    ],
-    onMenuItemClick: (item) => console.log(item),
-  }}
-  topbarIcons={[
-    { iconType: 'bell', onClickHandler: () => console.log('bell clicked') },
-  ]}
-  dropdownMenuProps={[
-    { key: 'profile', label: 'Profile', onClickHandler: () => {} },
-    { key: 'logout', label: 'Logout', onClickHandler: () => {} },
-  ]}
-  breadcrumbs="Home / Dashboard"
-  isLatestLeftNavigationEnabled={true}
-  leftNavbarExpanded={false}
-/>
-```

package/CapTree/README.md

@@ -1,124 +0,0 @@
-# CapTree
-
-CapTree component migrated from Ant Design v3 to v6.
-
-## Migration Summary
-
-This component has been migrated to use Ant Design v6 APIs and design tokens.
-
-## Breaking Changes
-
-**No breaking changes** - The component maintains **100% backward compatibility** with existing code. Deprecated APIs (`CapTree.CapTreeNode` and `children` prop with TreeNode pattern) continue to work exactly as before. However, deprecated APIs will show console warnings in development mode and should be migrated to the new API for future compatibility.
-
-## Deprecated Props
-
-The following Ant Design component APIs are deprecated but still supported for backward compatibility:
-
-### `CapTree.CapTreeNode` Component (Ant Design Tree Component)
-
-- **Status:** ⚠️ Deprecated
-- **Ant Design Component:** Tree
-- **Deprecated Prop:** `CapTree.CapTreeNode` component usage
-- **Replacement:** Use `treeData` prop instead
-- **Migration:** Convert TreeNode children structure to `treeData` array format
-- **Removal:** Will be removed in v10.0.0
-
-**Before (Deprecated):**
-
-```tsx
-import CapTree from '@capillarytech/blaze-ui';
-
-<CapTree>
-  <CapTree.CapTreeNode title="Node 1" key="1">
-    <CapTree.CapTreeNode title="Child 1" key="1-1" />
-  </CapTree.CapTreeNode>
-</CapTree>
-```
-
-**After (Recommended):**
-
-```tsx
-import CapTree from '@capillarytech/blaze-ui';
-
-<CapTree
-  treeData={[
-    {
-      title: 'Node 1',
-      key: '1',
-      children: [
-        {
-          title: 'Child 1',
-          key: '1-1',
-        },
-      ],
-    },
-  ]}
-/>
-```
-
-### `children` Prop (Ant Design Tree Component - TreeNode Pattern)
-
-- **Status:** ⚠️ Deprecated
-- **Ant Design Component:** Tree
-- **Deprecated Prop:** `children` prop (when used with TreeNode pattern)
-- **Replacement:** Use `treeData` prop instead
-- **Migration:** Pass tree structure via `treeData` prop instead of children
-- **Removal:** Will be removed in v10.0.0
-
-**Before (Deprecated):**
-
-```tsx
-import CapTree from '@capillarytech/blaze-ui';
-
-<CapTree>
-  <CapTree.CapTreeNode title="Node 1" key="1" />
-</CapTree>
-```
-
-**After (Recommended):**
-
-```tsx
-import CapTree from '@capillarytech/blaze-ui';
-
-<CapTree treeData={[{ title: 'Node 1', key: '1' }]} />
-```
-
-**Note:** A deprecation warning will be shown in development mode when using TreeNode children instead of `treeData` prop.
-
-## Deprecated APIs Summary
-
-| Deprecated API | Ant Design Component | Replacement | Removal Version |
-|----------------|---------------------|-------------|----------------|
-| `CapTree.CapTreeNode` component | Tree | `treeData` prop | v10.0.0 |
-| `children` prop (TreeNode pattern) | Tree | `treeData` prop | v10.0.0 |
-
-## Backward Compatibility
-
-- `CapTree.CapTreeNode` is still exported and functional for backward compatibility
-- A deprecation warning will be shown in development mode when using `CapTreeNode`
-- A deprecation warning will be shown when using children instead of `treeData` prop
-- All existing code using TreeNode pattern will continue to work without modifications
-
-## Theme Configuration
-
-Tree component styling is now handled via design tokens in `getCapThemeConfig.ts`:
-
-- `nodeHoverBg`: Background color on node hover (`#faf9f4`)
-
-## Migration Guide
-
-1. **Replace TreeNode children with treeData prop:**
-   - Convert your TreeNode structure to a data array
-   - Pass it via the `treeData` prop
-
-2. **Update event handlers:**
-   - All Tree event handlers remain the same (onSelect, onExpand, etc.)
-
-3. **Styling:**
-   - Custom styles are now handled via theme config
-   - No SCSS overrides needed
-
-## References
-
-- [Ant Design Tree Component](https://ant.design/components/tree)
-- [Ant Design v6 Migration Guide](https://ant.design/docs/react/migration-v6)