@capillarytech/blaze-ui 5.20.0 → 5.22.0

package/CapMultiSelect/README.md

@@ -1,170 +0,0 @@
-# CapMultiSelect
-
-Multi-select with tree or flat options. Implemented as a thin wrapper over **CapUnifiedSelect** for backward compatibility with the legacy cap-ui-library API.
-
----
-
-## Relationship to CapUnifiedSelect
-
-- **CapMultiSelect** accepts the legacy prop set (`treeData`, `appliedKeys`, `onSelect`, `searchKey`, etc.) and maps them to **CapUnifiedSelect**.
-- For new code or when you need more control (e.g. `showSearch`, `allowClear`, `headerLabel`, `onConfirm`), use **CapUnifiedSelect** directly with `type={SELECT_TYPES.MULTI_SELECT}` or `SELECT_TYPES.MULTI_TREE_SELECT`. See [Using CapUnifiedSelect directly](#using-capunifiedselect-directly) below.
-
----
-
-## Props: CapMultiSelect vs original (cap-ui-library)
-
-The original **cap-ui-library** `CapMultiSelect` used Ant Design v3 (Popover + Tree + Checkbox) and had many props. The **blaze-ui** version keeps the same public prop names where possible but only **maps** a subset to CapUnifiedSelect; the rest are typed for compatibility but have no effect in the current implementation.
-
-### Props that are mapped and supported
-
-| CapMultiSelect (blaze-ui) | Type | Default | Maps to CapUnifiedSelect | Notes |
-|---------------------------|------|--------|---------------------------|-------|
-| `treeData` | `TreeDataItem[]` | — | `options` | Converted via `treeDataToOptions()` (see [Data mapping](#data-mapping-treedataitem--optiondata)). |
-| `appliedKeys` | `(string \| number)[]` | — | `value` | Selected values. |
-| `onSelect` | `(keys: (string \| number)[]) => void` | — | `onChange` and `onConfirm` | Fired when selection is applied. |
-| `placeholder` | `string` | — | `placeholder` | |
-| `searchKey` | `'title' \| 'key' \| 'value'` | `'title'` | `searchBasedOn` | `'title'` → `'label'`, `'key'` → `'key'`, `'value'` → `'value'`. |
-| `getPopupContainer` | `(node: HTMLElement) => HTMLElement` | `() => document.body` | `getPopupContainer` | |
-| `triggerClassName` | `string` | — | `containerClassName` | |
-| `popoverClassName` | `string` | — | `popoverClassName` | Merged with default `cap-multi-select-v2-popover`. |
-| `disabled` | `boolean` | — | `disabled` | |
-| `width` | `string` | `'100%'` | `style.width` + wrapper `style` | |
-| `closeText` | `string` | — | `clearText` | |
-| `noResultsFoundText` | `string` | — | `noResultCustomText` | |
-
-### Props present in types but not mapped (no-op in current implementation)
-
-These exist on **CapMultiSelectProps** for backward compatibility or future use but are **not** passed through to CapUnifiedSelect in the current implementation:
-
-- `searchPlaceholder`, `selectedText`, `selectAllText`, `selectAllSearchResultsText`, `moreText`
-- `selectText`, `disableSelectAll`, `maxValuesToSelect`
-- `selectTooltipText`, `showSelectButtonToolTip`, `selectTooltipPlacement`
-- `showFooter`, `searchFocusOnMount`, `alwaysShowFocusOnSearch`, `showSelectAllText`
-- `enableVirtualizedRendering`, `isPossibleTitles`, `isPossibleValues`
-- `target`, `collapseOnSelect`, `allSelectedText`
-
-Behavioral differences vs original:
-
-- **No footer**: Original had Apply/Cancel and “X selected”; blaze-ui CapMultiSelect uses CapUnifiedSelect with **immediate apply** (no footer).
-- **No “Select all”**: Original could show a “Select all” row; current wrapper does not expose this.
-- **No custom target**: Original `target` let you render a custom trigger; current wrapper always renders the default trigger.
-- **No virtualization toggle**: Original had `enableVirtualizedRendering`; CapUnifiedSelect uses antd’s built-in virtual list by default (see CapUnifiedSelect README).
-
----
-
-## Data mapping: TreeDataItem → OptionData
-
-CapMultiSelect uses **TreeDataItem** for `treeData`. This is converted to CapUnifiedSelect’s **OptionData** as follows:
-
-| TreeDataItem (input) | OptionData (internal) |
-|----------------------|------------------------|
-| `key` | `value`, `key` |
-| `title` | `label`, `title` |
-| `children` | `children` (recursively converted) |
-| `info` | `optionTooltipInfo` |
-| `className` | `className` |
-
-Nested structure is preserved. If any item has `children` with length > 0, the component uses **multi-tree** mode (`SELECT_TYPES.MULTI_TREE_SELECT`); otherwise **multi-select** (`SELECT_TYPES.MULTI_SELECT`).
-
----
-
-## TreeDataItem
-
-```ts
-interface TreeDataItem {
-  key: string;
-  title: React.ReactNode;
-  children?: TreeDataItem[];
-  info?: React.ReactNode;
-  className?: string;
-}
-```
-
----
-
-## Usage (CapMultiSelect)
-
-```tsx
-import { CapMultiSelect } from '@capillarytech/blaze-ui';
-
-<CapMultiSelect
-  treeData={[
-    { key: '1', title: 'Option 1' },
-    { key: '2', title: 'Option 2', children: [{ key: '2-1', title: 'Child' }] },
-  ]}
-  appliedKeys={selectedKeys}
-  onSelect={setSelectedKeys}
-  placeholder="Select..."
-/>
-```
-
----
-
-## Using CapUnifiedSelect directly
-
-To avoid the legacy API and use CapUnifiedSelect’s full API (e.g. `showSearch`, `allowClear`, `onConfirm`, `headerLabel`), use **CapUnifiedSelect** with the same options shape and multi type.
-
-1. **Import** CapUnifiedSelect from the main package; constants and types from the component path (they are not re-exported from the package root):
-
-```tsx
-import { CapUnifiedSelect } from '@capillarytech/blaze-ui';
-// Constants and types: use the component path (e.g. in a monorepo or from node_modules)
-import { SELECT_TYPES } from '@capillarytech/blaze-ui/components/CapUnifiedSelect/constants';
-import type { OptionData } from '@capillarytech/blaze-ui/components/CapUnifiedSelect/types';
-```
-
-2. **Build options** in **OptionData** shape (instead of TreeDataItem):
-
-```tsx
-const options: OptionData[] = [
-  { value: '1', key: '1', label: 'Option 1', title: 'Option 1' },
-  {
-    value: '2',
-    key: '2',
-    label: 'Option 2',
-    title: 'Option 2',
-    children: [{ value: '2-1', key: '2-1', label: 'Child', title: 'Child' }],
-  },
-];
-```
-
-3. **Render** with `type` set to multi-select or multi-tree-select:
-
-```tsx
-// Flat multi-select
-<CapUnifiedSelect
-  type={SELECT_TYPES.MULTI_SELECT}
-  options={options}
-  value={selectedKeys}
-  onChange={setSelectedKeys}
-  onConfirm={setSelectedKeys}
-  placeholder="Select..."
-  showSearch
-  searchBasedOn="label"
-/>
-
-// Multi-select with tree (nested options)
-<CapUnifiedSelect
-  type={SELECT_TYPES.MULTI_TREE_SELECT}
-  options={optionsWithChildren}
-  value={selectedKeys}
-  onChange={setSelectedKeys}
-  onConfirm={setSelectedKeys}
-  placeholder="Select..."
-  showSearch
-  searchBasedOn="label"
-/>
-```
-
-4. **Optional**: Use `optionTooltipInfo` for per-option tooltip (replaces legacy `info` on TreeDataItem), `clearText`, `noResultCustomText`, `containerClassName`, `popoverClassName`, `getPopupContainer`, etc. as needed.
-
-**Note:** CapUnifiedSelect is wrapped with `injectIntl`; your app should be under React Intl’s `IntlProvider` (e.g. via CapLanguageProvider) so locale messages work.
-
----
-
-## Migration (Antd v3 → v6)
-
-- **PropTypes removed**: All props are typed in `types.ts`.
-- **defaultProps removed**: Defaults applied via destructuring in the component (`searchKey = 'title'`, `getPopupContainer = () => document.body`).
-- **Theme**: No `getCapThemeConfig` changes; ant overrides are layout/structure (hide Popover arrow, Tree switcher, custom padding) with no design tokens. SCSS uses `:global` blocks with `// OVERRIDE:` comments and `$CAP_G20` instead of hardcoded `#c2c2c2`.
-- **API**: Uses `popoverClassName` (no `dropdownClassName`). Default popover class `cap-multi-select-v2-popover` is applied so existing SCSS overrides continue to apply.

package/CapMultiSelect/tests/USE_CASES_ANALYSIS.md

@@ -1,29 +0,0 @@
-# CapMultiSelect – Use cases analysis
-
-## Phase 0: Use cases (derived from component API and README)
-
-- Default rendering with placeholder and wrapper (`cap-multi-select`, width).
-- Flat `treeData` → multi-select; `treeData` with `children` → multi-tree-select.
-- `appliedKeys` displayed as selected labels; `onSelect` called on selection change.
-- Props: `placeholder`, `triggerClassName`, `popoverClassName`, `disabled`, `width`, `closeText`, `noResultsFoundText`, `searchKey`, `getPopupContainer`.
-- Edge cases: empty/undefined `treeData`; items with `info` and `className`.
-
-## Phase 1: Use cases the component is NOT fulfilling
-
-The following props are declared in `CapMultiSelectProps` (types.ts) for backward compatibility but are **not** passed through to `CapUnifiedSelect` and therefore have no effect:
-
-- `searchPlaceholder`
-- `selectedText`, `selectAllText`, `selectAllSearchResultsText`, `moreText`, `selectText`
-- `disableSelectAll`
-- `maxValuesToSelect`
-- `selectTooltipText`, `showSelectButtonToolTip`, `selectTooltipPlacement`
-- `showFooter`
-- `searchFocusOnMount`, `alwaysShowFocusOnSearch`
-- `showSelectAllText`
-- `enableVirtualizedRendering`
-- `isPossibleTitles`, `isPossibleValues`
-- `target`
-- `collapseOnSelect`
-- `allSelectedText`
-
-Consumers relying on these props will not see the corresponding behavior until they are wired in the component implementation.

package/CapMultiSelectDatePicker/README.md

@@ -1,11 +0,0 @@
-# CapMultiSelectDatePicker
-
-A custom date picker component that allows users to select multiple days of the month (1-31) and optionally the last day of the month. This component renders a table-based calendar interface for day selection.
-
-## Migration from Class Component to Functional Component
-
-This component has been migrated from a class component to a functional component with TypeScript support and CSS Modules.
-
-### Breaking Changes
-
-None - The component maintains full backward compatibility with the previous API.

package/CapNavigation/README.md

@@ -1,72 +0,0 @@
-# CapNavigation
-
-A comprehensive navigation component that provides topbar, sidebar, and secondary topbar functionality for Capillary applications.
-
-## Migration Notes
-
-This component has been migrated from `cap-ui-library` to `blaze-ui` with the following changes:
-
-- ✅ Converted to TypeScript with full type definitions
-- ✅ Removed PropTypes in favor of TypeScript interfaces
-- ✅ Removed defaultProps in favor of default parameters
-- ✅ Preserved exact DOM structure and behavior
-- ✅ No Ant Design API changes (component uses other Cap components)
-
-## Breaking Changes
-
-**None** - This component maintains full backward compatibility. All props work exactly as before.
-
-## Deprecated Props
-
-**None** - No props have been deprecated in this migration.
-
-## Usage
-
-```tsx
-import CapNavigation from '@capillarytech/blaze-ui/CapNavigation';
-import type { CapNavigationProps } from '@capillarytech/blaze-ui/CapNavigation/types';
-
-const MyComponent = () => {
-  return (
-    <CapNavigation
-      userData={userData}
-      topbarMenuData={topbarMenuData}
-      sidebarMenuData={sidebarMenuData}
-      showContent
-    >
-      {/* Your content */}
-    </CapNavigation>
-  );
-};
-```
-
-## Props
-
-See `types.ts` for complete TypeScript interface definitions. Key props include:
-
-- `userData` - User information, organization details, and current org details
-- `topbarMenuData` - Array of topbar menu items
-- `sidebarMenuData` - Array of sidebar menu items
-- `dropdownMenuProps` - Array of dropdown menu items
-- `showContent` - Whether to show the content area
-- `showSecondaryTopBar` - Whether to show secondary topbar instead of main topbar
-- `isLatestLeftNavigationEnabled` - Whether to enable latest left navigation (deprecated feature)
-
-## Component Structure
-
-```
-CapNavigation
-├── CapTopBar / CapSecondaryTopBar (conditional)
-├── Content Wrapper (conditional: showContent)
-│   ├── Component Wrapper
-│   │   └── Left Navbar Controller
-│   │       ├── CapSideBar (conditional: showSidebar)
-│   │       └── children
-└── CapUserProfile (conditional: showUserProfile)
-```
-
-## Notes
-
-- The `CapCollapsibleLeftNavigation` component usage has been commented out as it's deprecated, but the component structure is preserved for backward compatibility
-- All styling and behavior matches the original component exactly
-- The component uses other Cap components (CapTopBar, CapSideBar, etc.) which handle their own Ant Design integration

package/CapNotification/README.md

@@ -1,228 +0,0 @@
-# CapNotification
-
-A wrapper component around Ant Design's Notification component that provides consistent styling and a simplified API for showing notification messages 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. API Changes
-
-| v3 API | v6 API | Status | Migration Guide |
-|--------|--------|--------|-----------------|
-| `message` | `title` | Deprecated | Replace `message` with `title`. Backward compatibility maintained. |
-| `btn` | `actions` | Deprecated | Replace `btn` with `actions`. Backward compatibility maintained. |
-
-
-### Backward Compatibility
-
-The component maintains backward compatibility for deprecated props:
-
-- **`message` prop**: Still works but logs a deprecation warning in development. Use `title` instead.
-- **`btn` prop**: Still works but logs a deprecation warning in development. Use `actions` instead.
-
-### Style Changes
-
-**Approach**: The component now calls the appropriate notification method (`notification.success()`, `notification.error()`, etc.) which automatically applies the correct background colors through the theme tokens.
-
-### Code Improvements
-
-1. **Removed styled-components dependency**: Replaced with SCSS class `notification-heading`
-2. **Using legacy 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. **Tokenization over CSS overrides**: Background colors are now controlled through Ant Design theme tokens instead of custom CSS
-
-### What Stayed the Same
-
-- All notification methods (`success`, `error`, `info`, `warning`, `custom`)
-- Custom icon support
-- Word-break behavior for long text
-- API surface area (backward compatible)
-- Custom border color support for `custom` type
-
-### What Changed
-
-- **Removed**: `styled-components` dependency
-- **Removed**: CSS overrides for background colors (now uses tokens)
-- **Removed**: `::before` pseudo-elements for colored borders
-- **Added**: SCSS module with `styles[]` syntax for minimal styling
-- **Added**: `logDeprecationWarning` utility for consistent warnings
-- **Added**: Theme tokens for notification background colors
-- **Improved**: Calls correct notification method (`success`, `error`, etc.) for proper token application
-
-## Usage
-
-### Basic Usage
-
-```typescript
-import CapNotification from '@capillarytech/blaze-ui/components/CapNotification';
-
-// Success notification
-CapNotification.success({
-  title: 'Success',
-  description: 'Your action was completed successfully!',
-});
-
-// Error notification
-CapNotification.error({
-  title: 'Error',
-  description: 'Something went wrong. Please try again.',
-});
-
-// Info notification
-CapNotification.info({
-  title: 'Information',
-  description: 'Here is some important information.',
-});
-
-// Warning notification
-CapNotification.warning({
-  title: 'Warning',
-  description: 'Please be careful with this action.',
-});
-```
-
-### Custom Notification
-
-```typescript
-// Custom notification with custom icon and border color
-CapNotification.custom({
-  title: 'Custom Notification',
-  description: 'This is a custom styled notification.',
-  icon: <YourCustomIcon />,
-  bgColor: '#ff5722',
-});
-```
-
-### With Custom Actions (v6 API)
-
-```typescript
-CapNotification.success({
-  title: 'Action Required',
-  description: 'Please confirm your action.',
-  actions: (
-    <Button type="primary" size="small" onClick={handleAction}>
-      Confirm
-    </Button>
-  ),
-});
-```
-
-### Advanced Configuration
-
-```typescript
-CapNotification.open(
-  {
-    title: 'Custom Notification',
-    description: 'This notification has custom settings.',
-    duration: 10, // Auto-close after 10 seconds
-    placement: 'topRight',
-    showProgress: true, // Show progress bar
-    pauseOnHover: true, // Pause auto-close on hover
-    key: 'unique-key', // Unique identifier for updating/closing
-    onClick: () => console.log('Notification clicked'),
-    onClose: () => console.log('Notification closed'),
-  },
-  'info'
-);
-```
-
-### Closing Notifications
-
-```typescript
-// Close specific notification by key
-CapNotification.close('unique-key');
-
-// Destroy all notifications
-CapNotification.destroy();
-```
-
-## API
-
-### CapNotification Methods
-
-- `CapNotification.success(config)` - Show success notification
-- `CapNotification.error(config)` - Show error notification
-- `CapNotification.info(config)` - Show info notification
-- `CapNotification.warning(config)` - Show warning notification
-- `CapNotification.warn(config)` - Show warning notification (alias)
-- `CapNotification.custom(config)` - Show custom notification with custom icon and border
-- `CapNotification.open(config, type)` - Show notification with specified type
-- `CapNotification.close(key)` - Close notification by key
-- `CapNotification.destroy()` - Destroy all notifications
-
-### NotificationConfig
-
-| Property | Description | Type | Default |
-|----------|-------------|------|---------|
-| title | The title of notification box | ReactNode | - |
-| message | **Deprecated.** Use `title` instead | ReactNode | - |
-| description | The content of notification box | ReactNode | - |
-| icon | Customized icon | ReactNode | - |
-| bgColor | Custom background color for left border (custom type only) | string | - |
-| duration | Time in seconds before auto-close. Set to 0 or false to never auto-close | number \| false | 4.5 |
-| key | Unique identifier of the notification | string | - |
-| placement | Position of notification | 'top' \| 'topLeft' \| 'topRight' \| 'bottom' \| 'bottomLeft' \| 'bottomRight' | 'topRight' |
-| style | Customized inline style | React.CSSProperties | - |
-| className | Customized CSS class | string | - |
-| onClick | Callback when notification is clicked | () => void | - |
-| onClose | Callback when notification is closed | () => void | - |
-| actions | Customized action buttons (v6 API) | ReactNode | - |
-| btn | **Deprecated.** Use `actions` instead | ReactNode | - |
-| showProgress | Show progress bar for auto-closing | boolean | false |
-| pauseOnHover | Pause auto-close timer on hover | boolean | true |
-
-## TypeScript
-
-The component exports TypeScript types:
-
-```typescript
-import { NotificationConfig, NotificationType, CapNotificationAPI } from '@capillarytech/blaze-ui/components/CapNotification';
-```
-
-## Migration Checklist
-
-If you're migrating existing code to use the v6 version:
-
-- [ ] Replace `message` prop with `title`
-- [ ] Replace `btn` prop with `actions`
-- [ ] Test all notification types (success, error, info, warning, custom)
-- [ ] Verify custom styling still works
-- [ ] Check that notifications display correctly in all placements
-- [ ] Ensure no console warnings in development mode
-
-## Notes
-
-- The component uses SCSS modules with `styles[]` syntax for minimal styling (word-break only)
-- Background colors for different notification types are controlled via Ant Design theme tokens in `getCapThemeConfig.ts`
-- Custom icons from CapIcon are used for success/error notifications with color styling
-- Custom border color support maintained for `custom` type notifications via inline styles
-- All deprecated props maintain backward compatibility using `logDeprecationWarning` utility
-- The component calls the appropriate notification method (`notification.success()`, `notification.error()`, etc.) to ensure correct token application
-- Deprecated props will be removed in v10.0.0
-
-## Theme Customization
-
-To customize notification colors, update the theme tokens in your ConfigProvider:
-
-```typescript
-import { ConfigProvider } from 'antd-v5';
-import { getCapThemeConfig } from '@capillarytech/blaze-ui/utils';
-
-const customTheme = getCapThemeConfig({
-  components: {
-    Notification: {
-      colorSuccessBg: '#your-success-color',
-      colorErrorBg: '#your-error-color',
-      colorInfoBg: '#your-info-color',
-      colorWarningBg: '#your-warning-color',
-    },
-  },
-});
-
-<ConfigProvider theme={customTheme}>
-  <YourApp />
-</ConfigProvider>
-```

package/CapNotificationDropdown/README.md

@@ -1,5 +0,0 @@
-# CapNotificationDropdown
-
-A dropdown component that displays a list of notifications using Ant Design's Menu component, providing consistent styling and behavior for notification lists in Capillary applications.
-
-**No API breaking changes**: The component uses `CapMenu` which is already v6-compatible, and doesn't use any deprecated Ant Design APIs.