@capillarytech/blaze-ui 5.20.0 → 5.22.0

package/CapDrawer/README.md

@@ -1,207 +0,0 @@
-# CapDrawer
-
-A wrapper component around Ant Design's Drawer component that provides consistent styling and a simplified API for displaying drawer panels in Capillary applications.
-
-## Migration from Ant Design v3 to v6
-
-This component has been migrated from Ant Design v3 to v6 with the following changes:
-
-### Breaking Changes
-
-#### 1. Ant Design Drawer Component API Changes
-
-The following Ant Design `Drawer` component props have been deprecated in v6:
-
-| Ant Design Component | Deprecated Prop (v3/v5) | New Prop (v6) | Status | Migration Guide |
-|---------------------|-------------------------|---------------|--------|-----------------|
-| **Drawer** | `visible` | `open` | ⚠️ Deprecated | Replace `visible={...}` with `open={...}`. Backward compatibility maintained. |
-| **Drawer** | `onVisibleChange` | `onOpenChange` | ⚠️ Deprecated | Replace `onVisibleChange={...}` with `onOpenChange={...}`. Backward compatibility maintained. |
-
-**Example:**
-```tsx
-// ❌ Deprecated (still works with warning)
-<CapDrawer visible={isOpen} onVisibleChange={setIsOpen} />
-
-// ✅ Recommended
-<CapDrawer open={isOpen} onOpenChange={setIsOpen} />
-```
-
-### Backward Compatibility
-
-The component maintains backward compatibility for deprecated Ant Design Drawer props:
-
-- **`visible` prop** (Ant Design Drawer): Still works but logs a deprecation warning in development. Use `open` instead.
-- **`onVisibleChange` prop** (Ant Design Drawer): Still works but logs a deprecation warning in development. Use `onOpenChange` instead.
-
-### Style Changes
-
-**Approach**: The component uses Ant Design v6's Drawer component which applies styling through theme tokens. No custom SCSS overrides are needed for the drawer itself.
-
-**Note**: Consumer components like `CapTopBar` and `CapHamburgerMenu` may have their own drawer styling overrides, but these are handled within those components' stylesheets.
-
-### Code Improvements
-
-1. **TypeScript support**: Full TypeScript definitions with proper prop types
-2. **Using deprecation warning utility**: Now uses `logDeprecationWarning` utility for consistent deprecation warnings
-3. **Improved backward compatibility**: Deprecated props are mapped using nullish coalescing (`??`) for cleaner code
-4. **Modern React patterns**: Uses functional component with React.FC
-
-### What Stayed the Same
-
-- Custom `content` prop (maps to children)
-- Custom `size` prop for width presets (`'s'`, `'r'`, `'l'`)
-- Custom `width` prop for explicit width values
-- All other Ant Design Drawer props pass through unchanged
-
-### What Changed
-
-- **Removed**: PropTypes (replaced with TypeScript)
-- **Updated**: Import from `antd` to `antd-v5`
-- **Added**: TypeScript type definitions in `types.ts`
-- **Added**: Deprecation warnings for `visible` and `onVisibleChange` props
-
-## Props
-
-### Standard Props
-
-All standard Ant Design Drawer props are supported. Refer to [Ant Design Drawer documentation](https://ant.design/components/drawer) for complete API reference.
-
-### Custom Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `content` | `ReactNode` | - | Content to display inside the drawer (maps to children) |
-| `width` | `number \| string` | `256` | Width of the drawer in pixels or CSS units |
-| `size` | `'s' \| 'r' \| 'l'` | - | Size preset: 's' = 25vw, 'r' = 50vw, 'l' = 75vw |
-| `open` | `boolean` | - | Controlled open state |
-| `defaultOpen` | `boolean` | `false` | Default open state (uncontrolled) |
-| `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes |
-
-### Deprecated Props
-
-The following props are deprecated but still supported for backward compatibility. They will show console warnings in development mode and will be removed in v10.0.0.
-
-#### Ant Design Drawer Component Props
-
-| Deprecated Prop | Ant Design Component | Replacement | Migration Example |
-|----------------|---------------------|-------------|-------------------|
-| `visible` | **Drawer** | `open` | See example below |
-| `onVisibleChange` | **Drawer** | `onOpenChange` | See example below |
-
-**Migration Example:**
-```tsx
-// Before (deprecated)
-<CapDrawer
-  visible={isOpen}
-  onVisibleChange={setIsOpen}
-  title="Drawer"
-  content={<div>Content</div>}
-/>
-
-// After (recommended)
-<CapDrawer
-  open={isOpen}
-  onOpenChange={setIsOpen}
-  title="Drawer"
-  content={<div>Content</div>}
-/>
-```
-
-**Note:** The deprecated `visible` and `onVisibleChange` props are automatically mapped to `open` and `onOpenChange` internally. However, you should migrate to the new API to avoid future breaking changes.
-
-## Examples
-
-### Basic Usage
-
-```tsx
-import { CapDrawer, CapButton } from '@capillarytech/blaze-ui';
-import { useState } from 'react';
-
-const MyComponent = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <CapButton onClick={() => setOpen(true)}>Open Drawer</CapButton>
-      <CapDrawer
-        open={open}
-        onOpenChange={setOpen}
-        title="Drawer Title"
-        content={<div>Drawer content goes here</div>}
-      />
-    </>
-  );
-};
-```
-
-### Using Size Presets
-
-```tsx
-<CapDrawer
-  open={open}
-  onOpenChange={setOpen}
-  size="l" // 75vw width
-  title="Large Drawer"
-  content={<div>Content</div>}
-/>
-
-<CapDrawer
-  open={open}
-  onOpenChange={setOpen}
-  size="r" // 50vw width
-  title="Regular Drawer"
-  content={<div>Content</div>}
-/>
-
-<CapDrawer
-  open={open}
-  onOpenChange={setOpen}
-  size="s" // 25vw width
-  title="Small Drawer"
-  content={<div>Content</div>}
-/>
-```
-
-### Custom Width
-
-```tsx
-<CapDrawer
-  open={open}
-  onOpenChange={setOpen}
-  width={400} // 400px
-  title="Custom Width Drawer"
-  content={<div>Content</div>}
-/>
-
-<CapDrawer
-  open={open}
-  onOpenChange={setOpen}
-  width="30vw" // 30% viewport width
-  title="Viewport Width Drawer"
-  content={<div>Content</div>}
-/>
-```
-
-
-## TypeScript
-
-The component is fully typed with TypeScript. Import types as needed:
-
-```tsx
-import type { CapDrawerProps } from '@capillarytech/blaze-ui';
-
-const MyDrawer: React.FC<CapDrawerProps> = (props) => {
-  // ...
-};
-```
-
-## Related Components
-
-- `CapModal` - Modal dialog component
-- `CapPopover` - Popover component
-- `CapTooltip` - Tooltip component
-
-## References
-
-- [Ant Design Drawer Documentation](https://ant.design/components/drawer)
-- [Ant Design Migration Guide](https://ant.design/docs/react/migration-v6)

package/CapDrawer/Status.md

@@ -1,52 +0,0 @@
-# Migration Status: CapDrawer
-
-**Last Updated**: 2026-02-06 02:24:50
-
-## 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 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
-- [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
-
-## Deprecated Props Verification
-
-_No deprecated props verification results yet._
-
-**Note**: Step 2.5 is REQUIRED and enforced. 
-- Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
-- Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
-- Skip: If original component doesn't exist in cap-ui-library
-- All deprecated Ant Design props and prop changes must be documented before proceeding.
-
-## Visual Testing Results
-
-**Last Test**: 2026-02-06 02:24:50
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-31 20:57:16
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapDrawer/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapDrawer/tests/MISSING_USE_CASES.md

@@ -1,170 +0,0 @@
-# CapDrawer - Missing Use Cases Analysis
-
-## Phase 1: Use Cases NOT Fulfilled by Component
-
-**Note**: Unable to access Google Sheets spreadsheet. Analysis based on component code review, Ant Design Drawer API, and common drawer use cases.
-
-### 1. **Footer Support**
-- ❌ **No footer prop** - Ant Design Drawer supports `footer` prop, but CapDrawer doesn't expose it
-- ❌ **No footer slot** - Cannot add footer content (e.g., action buttons) without custom content manipulation
-- **Impact**: Users must manually add footer elements to content prop
-- **Workaround**: Add footer elements to `content` prop
-
-### 2. **Extra Actions/Header Actions**
-- ❌ **No extra prop** - Ant Design Drawer supports `extra` prop for header actions, but CapDrawer doesn't expose it
-- ❌ **No header actions slot** - Cannot add custom header buttons/icons without modifying title
-- **Impact**: Limited header customization options
-- **Workaround**: Include extra actions in `title` prop as React node
-
-### 3. **Force Render**
-- ❌ **No forceRender prop** - Ant Design Drawer supports `forceRender` to render drawer content even when closed
-- **Impact**: Cannot pre-render drawer content for performance optimization
-- **Workaround**: None - would need to add prop passthrough
-
-### 4. **Get Container**
-- ❌ **No getContainer prop** - Ant Design Drawer supports `getContainer` to control portal container
-- **Impact**: Drawer always renders in document.body portal, cannot be scoped to specific container
-- **Workaround**: None - would need to add prop passthrough
-
-### 5. **Keyboard Support**
-- ⚠️ **Limited keyboard handling** - ESC key support exists but not explicitly tested or documented
-- ❌ **No keyboard prop** - Cannot disable keyboard shortcuts
-- ❌ **No custom keyboard handlers** - Cannot override default keyboard behavior
-- **Impact**: Limited control over keyboard interactions
-
-### 6. **Z-Index Control**
-- ❌ **No zIndex prop** - Ant Design Drawer supports `zIndex` prop, but CapDrawer doesn't expose it
-- **Impact**: Cannot control drawer stacking order when multiple drawers are present
-- **Workaround**: Use CSS to override z-index, but not ideal
-
-### 7. **Auto Focus**
-- ❌ **No autoFocus prop** - Ant Design Drawer supports `autoFocus` to control focus behavior
-- **Impact**: Cannot prevent auto-focus on open (may interfere with form inputs)
-- **Workaround**: None - would need to add prop passthrough
-
-### 8. **Root Class Name**
-- ❌ **No rootClassName prop** - Ant Design Drawer v6 supports `rootClassName` for root element styling
-- **Impact**: Limited styling options for drawer wrapper
-- **Workaround**: Use `className` prop, but may not target root element
-
-### 9. **Styles API**
-- ❌ **No styles prop** - Ant Design Drawer v6 supports `styles` prop for body/header/footer styling
-- **Impact**: Cannot customize individual drawer sections without CSS overrides
-- **Workaround**: Use CSS classes, but less flexible than styles API
-
-### 10. **Class Names API**
-- ❌ **No classNames prop** - Ant Design Drawer v6 supports `classNames` prop for body/header/footer classes
-- **Impact**: Limited ability to target specific drawer sections with CSS
-- **Workaround**: Use `className` prop, but may not target specific sections
-
-### 11. **After Open/Close Callbacks**
-- ❌ **No afterOpenChange callback** - Ant Design Drawer supports `afterOpenChange` for post-animation callbacks
-- **Impact**: Cannot execute logic after drawer animation completes
-- **Workaround**: Use `onOpenChange` with timeout, but not ideal
-
-### 12. **Drawer Content Loading States**
-- ❌ **No loading prop** - Cannot show loading state within drawer
-- ❌ **No loading indicator** - No built-in loading spinner support
-- **Impact**: Must manually handle loading states in content
-- **Workaround**: Add loading components to `content` prop
-
-### 13. **Drawer Content Error States**
-- ❌ **No error prop** - Cannot display error messages or error states
-- ❌ **No error styling** - No built-in error state support
-- **Impact**: Must manually handle error states in content
-- **Workaround**: Add error components to `content` prop
-
-### 14. **Drawer Size Presets Limitations**
-- ⚠️ **Limited size options** - Only supports 's', 'r', 'l' presets (25vw, 50vw, 75vw)
-- ❌ **No extra-small or extra-large** - Cannot use 'xs' or 'xl' sizes
-- ❌ **No custom preset sizes** - Cannot define custom size presets
-- **Impact**: Limited size options, must use `width` prop for other sizes
-
-### 15. **Drawer Content Validation**
-- ❌ **No content validation** - Doesn't validate content prop type
-- ❌ **No empty state handling** - No built-in empty state support
-- **Impact**: Must manually handle empty/null content cases
-
-### 16. **Drawer Animation Control**
-- ❌ **No motion customization** - Cannot customize open/close animations
-- ❌ **No animation duration control** - Cannot adjust animation speed
-- **Impact**: Limited animation customization options
-
-### 17. **Drawer Resize Support**
-- ❌ **No resizable prop** - Ant Design Drawer doesn't support resizing, but some use cases may require it
-- **Impact**: Cannot allow users to resize drawer width
-- **Workaround**: Would need custom implementation
-
-### 18. **Multiple Drawers**
-- ⚠️ **No multi-drawer coordination** - No built-in support for managing multiple drawers
-- ❌ **No drawer stack management** - Cannot control which drawer is on top
-- **Impact**: Complex scenarios with multiple drawers require manual management
-
-### 19. **Drawer State Persistence**
-- ❌ **No state persistence** - Cannot persist drawer open state across page reloads
-- ❌ **No localStorage integration** - No built-in state persistence
-- **Impact**: Must manually implement state persistence if needed
-
-### 20. **Drawer Content Scrolling**
-- ⚠️ **Limited scroll control** - Ant Design Drawer handles scrolling, but no custom scroll behavior
-- ❌ **No scroll restoration** - Cannot restore scroll position on reopen
-- **Impact**: Scroll position resets when drawer closes/reopens
-
-### 21. **Drawer Content Lazy Loading**
-- ❌ **No lazy loading** - Content always renders when drawer is open
-- ❌ **No code splitting support** - Cannot lazy load drawer content
-- **Impact**: All drawer content loads immediately, may affect performance
-
-### 22. **Drawer Form Integration**
-- ❌ **No form integration helpers** - No built-in Form.Item wrapper or validation
-- ❌ **No form state management** - Must manually handle form state
-- **Impact**: Forms in drawers require manual setup
-
-### 23. **Drawer Content Preloading**
-- ❌ **No preload prop** - Cannot preload drawer content before opening
-- **Impact**: Content loads only when drawer opens, may cause delay
-
-### 24. **Drawer Accessibility Enhancements**
-- ⚠️ **Basic accessibility** - Relies on Ant Design defaults
-- ❌ **No aria-label prop** - Cannot provide custom aria-label
-- ❌ **No aria-describedby** - Cannot link to descriptive text
-- ❌ **No focus trap customization** - Cannot customize focus trap behavior
-- **Impact**: Limited accessibility customization options
-
-### 25. **Drawer Content Templates**
-- ❌ **No content templates** - No built-in templates for common drawer patterns
-- ❌ **No drawer types** - No preset drawer types (form, list, detail, etc.)
-- **Impact**: Must build drawer content from scratch each time
-
-## Recommendations
-
-### High Priority
-1. Add `footer` prop passthrough for action buttons
-2. Add `extra` prop passthrough for header actions
-3. Add `getContainer` prop passthrough for portal control
-4. Add `zIndex` prop passthrough for stacking control
-5. Add `afterOpenChange` callback for post-animation logic
-
-### Medium Priority
-1. Add `forceRender` prop for performance optimization
-2. Add `autoFocus` prop for focus control
-3. Add `rootClassName`, `styles`, and `classNames` props (Ant Design v6 API)
-4. Add `keyboard` prop for keyboard control
-5. Improve accessibility props (aria-label, aria-describedby)
-
-### Low Priority
-1. Add more size presets (xs, xl)
-2. Add drawer content loading state helpers
-3. Add drawer state persistence helpers
-4. Add drawer content templates
-5. Add resizable drawer support (custom feature)
-
-## Current Component Strengths
-✅ Backward compatibility with `visible` and `onVisibleChange` props  
-✅ Custom `content` prop mapping to children  
-✅ Custom `size` prop for width presets  
-✅ Custom `width` prop for explicit width values  
-✅ Comprehensive Ant Design Drawer prop passthrough (most props)  
-✅ Deprecation warnings for legacy props  
-✅ TypeScript support with proper types  
-✅ Clean API with sensible defaults