@capillarytech/blaze-ui 5.20.0 → 5.22.0

package/CapHamburgerMenu/README.md

@@ -1,234 +0,0 @@
-# CapHamburgerMenu
-
-A hamburger menu component for mobile view that provides a drawer-based navigation menu with organization selection, product switching, and sidebar content.
-
-## 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. Component Structure Changes
-
-| Change | Description | Migration Guide |
-|--------|-------------|-----------------|
-| Class Component → Functional Component | Component converted from class to functional component | No API changes required, internal refactoring only |
-| PropTypes → TypeScript | All PropTypes removed, replaced with TypeScript interfaces | No migration needed, types are now in `types.ts` |
-| styled-components → CSS Modules | Removed styled-components dependency, using CSS Modules | No API changes, styling approach updated internally |
-
-#### 2. Ant Design Drawer Component API Changes
-
-The component uses `CapDrawer` which handles the `visible` → `open` prop migration internally. No changes needed in consumer code.
-
-### Backward Compatibility
-
-The component maintains full backward compatibility:
-- All props remain the same
-- Component behavior is unchanged
-- Internal implementation updated to use modern React patterns
-
-### Style Changes
-
-**Approach**: Most styling uses CSS Modules with design tokens. Some Ant Design overrides remain due to structural requirements:
-
-- **Drawer width (75% viewport)**: Cannot be tokenized, uses `:global` override with comment
-- **Custom padding values**: Cannot use single-value tokens, uses CSS Modules
-- **Layout positioning**: Footer positioning requires structural overrides
-
-All overrides include `// OVERRIDE:` comments explaining why tokenization is not possible.
-
-### Code Improvements
-
-1. **Removed PropTypes**: Replaced with TypeScript interfaces in `types.ts`
-2. **Removed defaultProps**: Using destructuring with default values in function arguments
-3. **Converted to functional component**: Modern React hooks (`useState`, `useEffect`, `useMemo`)
-4. **Removed styled-components**: Replaced with CSS Modules
-5. **TypeScript support**: Full type definitions for all props and internal structures
-6. **Improved state management**: Using React hooks for cleaner state handling
-
-### What Stayed the Same
-
-- All component props and API
-- Component behavior and functionality
-- Sidebar menu structure
-- Organization selection logic
-- Product switching functionality
-- Visual appearance (styling preserved)
-
-### What Changed
-
-- **Removed**: `PropTypes` (replaced with TypeScript types)
-- **Removed**: `styled-components` dependency (replaced with CSS Modules)
-- **Removed**: Class component syntax (converted to functional component)
-- **Updated**: State management (using React hooks)
-- **Added**: TypeScript type definitions in `types.ts`
-- **Added**: CSS Modules with `styles[classname]` syntax
-
-## Props
-
-### Standard Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `goToHome` | `() => void` | - | Function to navigate to home page |
-| `placement` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'left'` | Drawer placement |
-| `productName` | `string` | - | Product name to display in drawer header |
-| `userData` | `UserData` | `{}` | User data including organization and module information |
-| `loadStorageItem` | `(key: string) => string \| number \| null` | - | Function to load item from storage |
-| `changeOrgEntity` | `(orgId: number, ouId?: number) => void` | - | Function to change organization entity |
-| `selectOrganization` | `string` | - | Text for organization selection label |
-| `sidebarContent` | `SidebarMenuItem[]` | `[]` | Sidebar menu content items |
-| `selectedSidebarItem` | `string` | - | Currently selected sidebar item value |
-| `onSidebarClick` | `(item: SidebarMenuItem) => void` | - | Handler for sidebar item click |
-| `noResultsText` | `string` | - | Text to display when no results found |
-| `footer` | `React.ReactElement` | - | Footer element to display in drawer |
-| `screenHeight` | `number` | - | Screen height in pixels (for virtualized list) |
-| `screenWidth` | `number` | - | Screen width in pixels (for virtualized list) |
-| `insights` | `string` | - | Insights product name (for internationalization) |
-| `selectProduct` | `string` | - | Text for product selection label |
-| `defaultSelectedProduct` | `string` | - | Default selected product value |
-
-### Type Definitions
-
-#### SidebarMenuItem
-
-```typescript
-interface SidebarMenuItem {
-  label: string;
-  value: string;
-  children?: SidebarMenuItem[];
-}
-```
-
-#### UserData
-
-```typescript
-interface UserData {
-  user?: {
-    loginName?: string;
-    org_id?: string | number;
-    proxyOrgList?: Array<{
-      orgID: string | number;
-      orgName: string;
-      ouList?: Array<{
-        ouName: string;
-        ouID: string | number;
-      }>;
-    }>;
-    accessibleOUList?: Record<string, string | number>;
-  };
-  currentOrgDetails?: {
-    module_details?: Array<{
-      name: string;
-      namespace: string;
-      url: string;
-      code: string;
-    }>;
-  };
-  orgDetails?: {
-    name?: string;
-    org_id?: string | number;
-  };
-}
-```
-
-## Usage
-
-### Basic Example
-
-```tsx
-import CapHamburgerMenu from '@capillarytech/blaze-ui/components/CapHamburgerMenu';
-
-const MyComponent = () => {
-  const sidebarContent = [
-    {
-      label: 'Dashboard',
-      value: 'dashboard',
-    },
-    {
-      label: 'Reports',
-      value: 'reports',
-      children: [
-        { label: 'Sales Report', value: 'sales-report' },
-        { label: 'Customer Report', value: 'customer-report' },
-      ],
-    },
-  ];
-
-  return (
-    <CapHamburgerMenu
-      productName="My Product"
-      sidebarContent={sidebarContent}
-      userData={{
-        user: {
-          loginName: 'john.doe',
-        },
-      }}
-      loadStorageItem={(key) => localStorage.getItem(key)}
-      changeOrgEntity={(orgId, ouId) => {
-        console.log('Changed org:', orgId, ouId);
-      }}
-      selectOrganization="Select Organization"
-      onSidebarClick={(item) => {
-        console.log('Clicked:', item.value);
-      }}
-    />
-  );
-};
-```
-
-### With Organization Selection
-
-```tsx
-<CapHamburgerMenu
-  productName="Analytics"
-  userData={{
-    user: {
-      loginName: 'user@example.com',
-      proxyOrgList: [
-        {
-          orgID: 1,
-          orgName: 'Organization 1',
-        },
-        {
-          orgID: 2,
-          orgName: 'Organization 2',
-        },
-      ],
-    },
-    orgDetails: {
-      name: 'Organization 1',
-      org_id: 1,
-    },
-  }}
-  loadStorageItem={(key) => {
-    const value = localStorage.getItem(key);
-    return value ? parseInt(value, 10) : null;
-  }}
-  changeOrgEntity={(orgId, ouId) => {
-    localStorage.setItem('orgID', String(orgId));
-    if (ouId) {
-      localStorage.setItem('ouId', String(ouId));
-    }
-  }}
-  selectOrganization="Select Organization"
-  screenHeight={window.innerHeight}
-  screenWidth={window.innerWidth}
-/>
-```
-
-## Dependencies
-
-The component uses the following external packages (already included in `blaze-ui` dependencies):
-
-- `react-virtualized`: For virtualized list rendering
-- `semantic-ui-react`: For List component
-- `lodash`: For utility functions (peer dependency)
-
-## Notes
-
-- The component is designed for mobile views
-- Organization selection uses virtualized lists for performance
-- Product switching navigates to different module URLs
-- Sidebar menu supports nested items with expand/collapse functionality
-- Component uses CSS Modules for styling with design tokens where possible

package/CapHamburgerMenu/USE_CASES.md

@@ -1,48 +0,0 @@
-# Test Cases: CapHamburgerMenu (Antd v3→v6)
-
-## Use Cases
-
-| ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
-|----|----------|--------------|-------------------------|----------|-----------------|-------|
-| UC-001 | Drawer open/close interactions | Click hamburger icon | Drawer opens from left side, clicking icon again closes drawer, clicking outside closes drawer | P0 | DrawerInteractions | Core functionality - drawer toggle |
-| UC-002 | Sidebar content rendering - empty state | sidebarContent: [] or undefined | No menu items displayed, only header with logo and user info | P1 | EmptySidebar | Empty state handling |
-| UC-003 | Sidebar content rendering - flat menu items | sidebarContent: [{label: "Item1", value: "1"}, {label: "Item2", value: "2"}] | Menu items render as flat list without expand/collapse icons | P0 | FlatMenuItems | Basic menu rendering |
-| UC-004 | Sidebar content rendering - nested menu items | sidebarContent: [{label: "Parent", children: [{label: "Child1", value: "c1"}]}] | Parent item shows chevron icon, first parent expanded by default, children render when expanded | P0 | NestedMenuItems | Expandable menu structure |
-| UC-005 | Menu item expansion/collapse | Click parent menu item with children | Parent item toggles expanded state, chevron icon changes (up/down), children show/hide | P0 | MenuExpansion | Interactive menu behavior |
-| UC-006 | Sidebar item selection | selectedSidebarItem: "item1", onSidebarClick handler | Selected item shows selected styling (blue background, left border), clicking different item calls onSidebarClick, clicking same item does nothing | P0 | SidebarSelection | Selection state and callbacks |
-| UC-007 | Organization selection display - no selection | loadStorageItem returns null/undefined | Shows "Select Organization" placeholder text with logo icon | P1 | OrgDisplayNoSelection | Default state |
-| UC-008 | Organization selection display - org only | loadStorageItem('orgID') returns valid org, no OU | Shows organization name with logo icon, chevron-right icon | P0 | OrgDisplayOrgOnly | Basic org display |
-| UC-009 | Organization selection display - org with OU | loadStorageItem returns org and OU | Shows OU name as primary label, org name as secondary label below, both with ellipsis for overflow | P0 | OrgDisplayWithOU | Nested org structure |
-| UC-010 | Organization selection box open/close | Click organization selection area | Opens CapSlideBox with search input and org list, back button closes slidebox | P0 | OrgSelectionBox | Slidebox interaction |
-| UC-011 | Organization search functionality | Type in search input, orgSearchText state updates | Filters org list by label (case-insensitive), filters OU list within orgs, shows filtered results | P0 | OrgSearch | Search filtering |
-| UC-012 | Organization search - no results | Search query matches no orgs/OUs | Shows no results state with alert icon and noResultsText message | P1 | OrgSearchNoResults | Empty search state |
-| UC-013 | Organization selection - org without OUs | Click org item without accessibleOus | Calls changeOrgEntity with orgID, closes slidebox, updates selected org display | P0 | OrgSelectionSimple | Basic org selection |
-| UC-014 | Organization selection - org with OUs | Click org item with accessibleOus, then click OU | Shows OU list under org, clicking OU calls changeOrgEntity with orgID and ouId, updates display to show OU | P0 | OrgSelectionWithOU | Nested selection flow |
-| UC-015 | Product list display | Click more applications icon | Opens CapSlideBox with product list from module_details, excludes "masters" product, shows insights+ product | P0 | ProductListDisplay | Product list rendering |
-| UC-016 | Product change | Click product item in list | If product.url differs from current pathname, navigates to product.url, closes product list | P0 | ProductChange | Navigation behavior |
-| UC-017 | Product list - selected product | defaultSelectedProduct matches product value | Selected product shows selected styling (blue background, left border) | P1 | ProductSelection | Visual selection state |
-| UC-018 | Header content display | productName, userData.user.loginName provided | Shows more applications icon, logo with productName, user loginName below logo, organization selection | P0 | HeaderContent | Header rendering |
-| UC-019 | Footer display | footer prop provided as React element | Footer renders at bottom of drawer when drawer is open, shows ant-drawer-footer styling | P1 | FooterDisplay | Footer rendering |
-| UC-020 | Placement and styling props | placement: "left" | "right", screenHeight, screenWidth, className | Drawer opens from specified side, org list height calculated from screenHeight, search width from screenWidth, custom className applied | P1 | PlacementAndStyling | Layout and positioning |
-
-## Grouping Rationale
-
-- **UC-001**: Grouped all drawer open/close interactions (icon click, outside click, toggle)
-- **UC-002-004**: Grouped all sidebar content rendering scenarios (empty, flat, nested)
-- **UC-005**: Single test for expansion/collapse toggle behavior
-- **UC-006**: Single test for selection state and callback handling
-- **UC-007-009**: Grouped all organization display variants (no selection, org only, org+OU)
-- **UC-010**: Single test for slidebox open/close
-- **UC-011-012**: Grouped search functionality and empty state
-- **UC-013-014**: Grouped organization selection scenarios (simple and with OUs)
-- **UC-015-017**: Grouped product list display, change, and selection
-- **UC-018**: Single test for all header content
-- **UC-019**: Single test for footer
-- **UC-020**: Grouped all layout/styling props
-
-## Migration Notes (v3→v6)
-
-- CapDrawer uses `visible` prop (v3) vs `open` prop (v6) - verify prop name migration
-- Virtualized.List from react-virtualized used for org list - verify if needs migration to react-window or similar
-- Semantic UI List component used - verify if needs migration to Ant Design List
-- componentWillReceiveProps deprecated - verify migration to componentDidUpdate or getDerivedStateFromProps

package/CapHeader/Status.md

@@ -1,41 +0,0 @@
-# Migration Status: CapHeader
-
-**Last Updated**: 2026-01-29 10:15:36
-
-## 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-01-29 10:15:36
-**Maximum Mismatch**: 4.69%
-
-### Mismatched Variants:
-- ✅ All variants match perfectly!
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-29 10:15:36
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapHeader/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._
-

package/CapHeading/README.md

@@ -1,220 +0,0 @@
-# CapHeading Migration Guide
-
-## Summary
-
-CapHeading has been migrated from `cap-ui-library` to `blaze-ui` with the following changes:
-
-- Converted from styled-components to SCSS modules
-- Converted from JavaScript to TypeScript
-- Added TypeScript interfaces for props
-- Added ref forwarding support
-- Maintained backward compatibility with the existing API
-
-## Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-The API remains identical to the original implementation.
-
-## Prop Changes
-
-| Prop | Type | Default | Status | Notes |
-|------|------|---------|--------|-------|
-| `type` | `CapHeadingType` | `'h5'` | Unchanged | Now TypeScript union type |
-| `children` | `React.ReactNode` | - | Unchanged | - |
-| `className` | `string` | `''` | Added | For custom styling |
-| `style` | `React.CSSProperties` | `{}` | Added | For inline styles |
-
-### New TypeScript Types
-
-```typescript
-type CapHeadingType = 
-  | 'h0' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'h8' | 'h9' | 'h10'
-  | 'label1' | 'label2' | 'label3' | 'label4' | 'label5' | 'label6';
-
-interface CapHeadingProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-  type?: CapHeadingType;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-interface CapHeadingSpanProps extends React.HTMLAttributes<HTMLSpanElement> {
-  children?: React.ReactNode;
-  type?: CapHeadingType;
-  className?: string;
-  style?: React.CSSProperties;
-}
-```
-
-## API Changes
-
-### Ref Forwarding (New)
-
-The component now supports ref forwarding:
-
-```tsx
-const headingRef = React.createRef<HTMLDivElement>();
-<CapHeading ref={headingRef}>Content</CapHeading>
-
-const spanRef = React.createRef<HTMLSpanElement>();
-<CapHeading.CapHeadingSpan ref={spanRef}>Content</CapHeading.CapHeadingSpan>
-```
-
-### HTML Attributes (New)
-
-All standard HTML div/span attributes are now supported:
-
-```tsx
-<CapHeading
-  data-testid="my-heading"
-  aria-label="Section heading"
-  onClick={handleClick}
->
-  Content
-</CapHeading>
-```
-
-## Behavioral Changes
-
-None. The component behaves identically to the original implementation.
-
-## Migration Steps
-
-### 1. Update Import
-
-```tsx
-// Before (cap-ui-library)
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-
-// After (blaze-ui)
-import { CapHeading } from '@capillarytech/blaze-ui';
-// or
-import CapHeading from '@capillarytech/blaze-ui/CapHeading';
-```
-
-### 2. Usage (No Changes Required)
-
-```tsx
-// Both work exactly the same
-<CapHeading type="h1">Main Heading</CapHeading>
-<CapHeading type="label1">Label Text</CapHeading>
-
-// Span variant
-<CapHeading.CapHeadingSpan type="h4">Inline Heading</CapHeading.CapHeadingSpan>
-```
-
-### 3. TypeScript (New Benefit)
-
-If using TypeScript, you now get full type checking:
-
-```tsx
-import { CapHeading, CapHeadingProps, CapHeadingType } from '@capillarytech/blaze-ui';
-
-// Type-safe props
-const props: CapHeadingProps = {
-  type: 'h1', // TypeScript will autocomplete and validate
-  children: 'Heading'
-};
-
-// Type-safe heading type
-const headingType: CapHeadingType = 'h2';
-```
-
-## Heading Type Reference
-
-| Type | Font Size | Font Weight | Color | Line Height | Use Case |
-|------|-----------|-------------|-------|-------------|----------|
-| h0 | 28px (2rem) | 500 | #091e42 | 36px | Extra large heading |
-| h1 | 24px (1.714rem) | 500 | #091e42 | 32px | Main heading |
-| h2 | 20px (1.429rem) | 500 | #091e42 | 28px | Section heading |
-| h3 | 16px (1.143rem) | 500 | #091e42 | 24px | Sub-section heading |
-| h4 | 14px (1rem) | 500 | #091e42 | 20px | Minor heading (medium) |
-| h5 | 14px (1rem) | 400 | #091e42 | 20px | Minor heading (normal) - DEFAULT |
-| h6 | 14px (1rem) | 400 | #5e6c84 | 20px | Secondary text |
-| h7 | 20px (1.429rem) | 500 | #5e6c84 | 28px | Section heading (secondary) |
-| h8 | 14px (1rem) | 400 | #091e42 | 20px | Body text style |
-| h9 | 14px (1rem) | 500 | #ffffff | 20px | White text (dark bg) |
-| h10 | 12px (0.857rem) | 500 | #091e42 | 16px | Small heading |
-| label1 | 12px (0.857rem) | 400 | #5e6c84 | 20px | Standard label |
-| label2 | 12px (0.857rem) | 400 | #091e42 | 20px | Primary color label |
-| label3 | 12px (0.857rem) | 400 | #97a0af | 20px | Muted label |
-| label4 | 12px (0.857rem) | 400 | #5e6c84 | 16px | Compact label |
-| label5 | 16px (1.143rem) | 400 | #5e6c84 | 24px | Large label |
-| label6 | 16px (1.143rem) | 400 | #091e42 | 24px | Large primary label |
-
-## Examples
-
-### Basic Usage
-
-```tsx
-import { CapHeading } from '@capillarytech/blaze-ui';
-
-function App() {
-  return (
-    <div>
-      <CapHeading type="h1">Page Title</CapHeading>
-      <CapHeading type="h2">Section Title</CapHeading>
-      <CapHeading type="label1">Form Label</CapHeading>
-    </div>
-  );
-}
-```
-
-### Inline Heading with CapHeadingSpan
-
-```tsx
-import { CapHeading } from '@capillarytech/blaze-ui';
-
-function App() {
-  return (
-    <p>
-      This paragraph contains an{' '}
-      <CapHeading.CapHeadingSpan type="h4">
-        inline heading
-      </CapHeading.CapHeadingSpan>{' '}
-      inside it.
-    </p>
-  );
-}
-```
-
-### With Accessibility Attributes
-
-```tsx
-import { CapHeading } from '@capillarytech/blaze-ui';
-
-function App() {
-  return (
-    <CapHeading 
-      type="h1" 
-      role="heading" 
-      aria-level={1}
-    >
-      Accessible Main Heading
-    </CapHeading>
-  );
-}
-```
-
-### With Ref
-
-```tsx
-import { CapHeading } from '@capillarytech/blaze-ui';
-import { useRef, useEffect } from 'react';
-
-function App() {
-  const headingRef = useRef<HTMLDivElement>(null);
-  
-  useEffect(() => {
-    headingRef.current?.focus();
-  }, []);
-  
-  return (
-    <CapHeading ref={headingRef} tabIndex={-1}>
-      Focusable Heading
-    </CapHeading>
-  );
-}
-```
-

package/CapHeading/Status.md

@@ -1,41 +0,0 @@
-# Migration Status: CapHeading
-
-**Last Updated**: 2026-01-25 04:03: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
-- [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-25 04:03:57
-**Maximum Mismatch**: 2.95%
-
-### Mismatched Variants:
-- ✅ All variants match perfectly!
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-25 04:03:57
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapHeading/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._
-