@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapAskAira/README.md

@@ -1,328 +0,0 @@
-# CapAskAira
-
-CapAskAira is a collection of AI-powered “Ask AiRA” bot components and shared logic built on Redux, Redux-Saga, and React. It lives in **blaze-ui** (published as `@capillarytech/cap-ui-library`) and is consumed by apps such as **cap-loyalty-ui**, **garuda-ui**, **cap-campaigns-v2**, **cap-creatives-ui**, and **reon-bi-webapp**.
-
-This document describes the **technical architecture** of CapAskAira and how to **integrate and test** it in consuming repositories.
-
----
-
-## Table of contents
-
-1. [Overview](#overview)
-2. [Technical architecture](#technical-architecture)
-3. [Bot catalog](#bot-catalog)
-4. [Integration guide](#integration-guide)
-5. [Testing in consuming repos](#testing-in-consuming-repos)
-
----
-
-## Overview
-
-- **Purpose**: Reusable AI assistant UIs (rule writing, summarization, content generation, documentation chat, media generation, configuration, audience filters) that plug into existing Capillary apps.
-- **Stack**: React, Redux (Immutable.js state), Redux-Saga, SCSS, react-intl.
-- **Data sources**: REST APIs and/or WebSockets depending on the bot. APIs are called via a **request + getAPICallObject** contract supplied by the consuming app.
-- **Publishing**: Built and exported from **blaze-ui**; consuming apps depend on `@capillarytech/cap-ui-library` and import from `@capillarytech/cap-ui-library/CapAskAira` (or deeper paths for sagas/selectors).
-
----
-
-## Technical architecture
-
-### Module layout
-
-```
-CapAskAira/
-├── index.ts                    # Public API: default export (bot map) + reducer + domain + sagas
-├── constants.ts                # DOMAIN, WS_DOMAIN, AIRA_REDUCER_DOMAIN, rootClsPrefix
-├── reducer.ts                  # askAiraReducer (combines all bot sub-reducers)
-├── selector.ts                 # selectAskAiraDomain(state)
-├── util.ts                     # getWebsocketConnection, popup positioning, name helpers
-├── rootStyles.ts               # Root SCSS entry
-├── styles.scss                 # Shared styles ($clsPrefix: cap-ask-aira)
-├── hooks/
-│   └── useWebsocket.tsx        # WebSocket hook used by ContentGenerationBot, DocumentationChatBot
-├── UtilComponents/             # Shared UI: AiraContainer, Popup, InputBox, ErrorBar, Icons, etc.
-├── RuleGenerationBot/          # Rule writing (single rule)
-├── RuleSummarizationBot/       # Rule + summarization (write & explain)
-├── ContentGenerationBot/       # Content suggestions over WebSocket
-├── DocumentationBot/          # Documentation UI
-├── DocumentationChatBot/      # Doc Q&A (WebSocket + optional REST feedback)
-├── ConfigurationBot/           # Configuration copilot
-├── CapAiMediaGeneration/       # Image/video generation
-├── AudienceFilterBot/          # Audience filter suggestions
-├── tests/                      # Module-level tests and mock data
-└── README.md                   # This file
-```
-
-### Redux state shape
-
-- The **root** Redux key used by CapAskAira is **`ASK_AIRA`** (`AIRA_REDUCER_DOMAIN`).
-- `askAiraReducer` is a **combined reducer** over four sub-domains:
-
-| Sub-domain constant              | Bot(s)                    | Role                          |
-|----------------------------------|---------------------------|-------------------------------|
-| `RULE_REDUCER_DOMAIN`            | RuleGenerationBot         | Rule generation state         |
-| `DOC_BOT_REDUCER_DOMAIN`         | DocumentationChatBot     | Doc chat messages state       |
-| `AI_MEDIA_GENERATION`            | CapAiMediaGeneration      | Media generation state        |
-| `RULE_SUMMARIZATION_REDUCER_DOMAIN` | RuleSummarizationBot   | Rule + summarization state    |
-
-- State under `ASK_AIRA` is **Immutable.js** (e.g. `fromJS`). Selectors typically use `selectAskAiraDomain(state)` then bot-specific selectors (e.g. `makeSelectRuleGenData`) that read from the corresponding sub-domain and return plain JS where needed.
-
-### Sagas
-
-- **Saga per bot**: Each bot that uses Redux has its own saga module (e.g. `RuleSummarizationBot/saga.ts`, `CapAiMediaGeneration/saga.ts`). They export **watcher** generators (e.g. `watchGetRule`, `watchGetRuleSummarize`) and a **default export** array of watchers.
-- **Exposed from CapAskAira**:
-  - `ruleGenSaga` — RuleGenerationBot
-  - `docChatBotSaga` — DocumentationChatBot
-  - `mediaGenSaga` — CapAiMediaGeneration
-  - `ruleSummarizationBotSaga` — RuleSummarizationBot
-- **Consuming apps** do **not** use a single “root” CapAskAira saga. Instead they:
-  - **Inject** the relevant watchers into the component (or route) that mounts the bot, e.g. by importing watchers from `@capillarytech/cap-ui-library/CapAskAira/RuleSummarizationBot/saga` and composing them in the app’s own saga with `all([...localWatchers, watchGetRule(), watchGetRuleSummarize(), ...])`.
-  - Or add a saga that runs the default export array (e.g. `ruleSummarizationBotSaga`) if the app’s injector supports array-of-sagas.
-- **Bots that don’t need a saga in the app**: ContentGenerationBot and DocumentationChatBot (for the chat stream) use **WebSockets** only; no Redux saga is required for the stream. DocumentationChatBot may still use Redux for feedback; if so, its saga must be run.
-
-### Data flow (high level)
-
-1. **REST-only bots** (e.g. RuleSummarizationBot, RuleGenerationBot):  
-   Component is connected to Redux (state + actions). User action → dispatch → saga → API via `request` + `getAPICallObject` → dispatch success/failure → component reads from selector.
-
-2. **WebSocket bots** (e.g. ContentGenerationBot):  
-   Component uses `useWebsocket(WEBSOCKET_URL, onMessage, onError)`. Messages are processed in the component (or helper); no saga for the stream. Optional two-way binding with parent via `text` / `setText` props.
-
-3. **Hybrid** (e.g. DocumentationChatBot):  
-   WebSocket for streaming answers; optional REST for feedback, with state in Redux and saga for API calls.
-
-### Shared utilities
-
-- **`constants.ts`**
-  - `DOMAIN`: API base URL (dev: e.g. `http://localhost:2100`, prod: often `''` so app host is used).
-  - `WS_DOMAIN`: WebSocket base (prod: `wss://${window.location.host}`; dev can be `ws://localhost:2100`).
-  - `AIRA_REDUCER_DOMAIN = 'ASK_AIRA'`.
-  - `rootClsPrefix = 'cap-ask-aira'`.
-- **`util.ts`**
-  - `getWebsocketConnection(websocketUrl)` — returns a `Promise<WebSocket>`; in dev can pass auth via subprotocol.
-  - `getAnchoredPopupPosition`, `getBottomRightPopupPosition` — for floating popup placement.
-  - `handleEmptyValue`, `getFullNameByFirstNameLastName` — display helpers.
-- **`hooks/useWebsocket.tsx`**
-  - `(websocketUrl, onMessage?, onError?)` → `{ sendMessage, resetConnection }`. Used by ContentGenerationBot and DocumentationChatBot.
-- **`UtilComponents/AiraContainer.tsx`**
-  - Wraps bot content with a floating/fixed Aira icon, popup, title, and optional tooltip. Handles `iconPlacement` (`float-br`, `fixed-br-beamer`), `popupPlacement`, and `rootStyle`. Used by most bots.
-
-### API contract (consuming app)
-
-Bots that call REST APIs expect the **page/container** to provide:
-
-- **`request`**: function `(url: string, options?: unknown) => Promise<unknown>` (e.g. fetch wrapper).
-- **`getAPICallObject`**: function `(method: string, payload: unknown) => unknown` that returns the body/options for the request (e.g. auth headers, JSON body).
-
-URLs are built inside CapAskAira (e.g. RuleSummarizationBot uses `ASK_AIRA_ENDPOINT` from `constants.ts` plus paths like `/rule_expr/write_rule`, `/rule_expr/summarize_rule`). The app only needs to pass a generic `request` + `getAPICallObject` that work with the app’s auth and API layer.
-
----
-
-## Bot catalog
-
-| Bot                     | Description                          | Redux state      | Saga required in app | Typical use case                          |
-|-------------------------|--------------------------------------|------------------|----------------------|-------------------------------------------|
-| RuleGenerationBot      | Generate a single rule from query     | Yes (ruleGen)    | Yes (ruleGenSaga)    | One-off rule writing                      |
-| RuleSummarizationBot    | Write rule + summarize/explain rule  | Yes (rule summarization) | Yes (ruleSummarizationBotSaga) | Workflow/rule editors (e.g. cap-loyalty-ui, garuda-ui) |
-| ContentGenerationBot    | AI content suggestions (streaming)   | No               | No                   | Message/template authoring (e.g. cap-creatives-ui) |
-| DocumentationBot        | Documentation UI                     | No               | No                   | In-app docs                               |
-| DocumentationChatBot    | Doc Q&A (streaming + feedback)      | Yes (doc chat)   | Yes (docChatBotSaga) if using feedback | Help / doc search                         |
-| ConfigurationBot        | Configuration copilot                | No               | No                   | Guided setup                              |
-| CapAiMediaGeneration    | Image/video generation               | Yes (media)      | Yes (mediaGenSaga)   | Creatives (e.g. cap-creatives-ui)         |
-| AudienceFilterBot       | Audience filter suggestions          | No (props)       | No                   | Audience builder UIs                      |
-
-- **ContentGenerationBot** uses `WS_DOMAIN` and a path such as `/arya/api/v1/ask-aira-service/content_gen/get_ai_suggestions` (see `ContentGenerationBot/constants.ts`).
-- **RuleSummarizationBot** uses REST endpoints under `ASK_AIRA_ENDPOINT` (e.g. `/rule_expr/write_rule`, `/rule_expr/summarize_rule`, like/dislike).
-
----
-
-## Integration guide
-
-### 1. Add the reducer
-
-In the app’s root reducer (e.g. `initialReducer.js`):
-
-```javascript
-import { AIRA_REDUCER_DOMAIN, askAiraReducer } from '@capillarytech/cap-ui-library/CapAskAira';
-
-export const initialReducer = {
-  // ...other reducers
-  [AIRA_REDUCER_DOMAIN]: askAiraReducer,
-};
-```
-
-- Use the **exact** key `AIRA_REDUCER_DOMAIN` (`'ASK_AIRA'`) so CapAskAira selectors work.
-
-### 2. Add sagas for the bots you use
-
-Only add sagas for bots that use Redux and expose a saga (see table above).
-
-**Option A – Inject into the same container that renders the bot**
-
-Example: **RuleSummarizationBot** in a workflow config page. In that page’s saga (e.g. `ConfigureWorkflows/saga.js`):
-
-```javascript
-import {
-  watchGetRule,
-  watchGetRuleSummarize,
-  watchUpdateLikeResultRule,
-  watchUpdateLikeResultSummarize,
-  watchUpdateDislikeResultRule,
-  watchUpdateDislikeResultSummarize,
-} from '@capillarytech/cap-ui-library/CapAskAira/RuleSummarizationBot/saga';
-
-export default function* configureWorkflowSaga() {
-  yield all([
-    // ...your existing watchers
-    watchGetRule(),
-    watchGetRuleSummarize(),
-    watchUpdateLikeResultRule(),
-    watchUpdateLikeResultSummarize(),
-    watchUpdateDislikeResultRule(),
-    watchUpdateDislikeResultSummarize(),
-  ]);
-}
-```
-
-Then inject this saga with your existing `injectSaga` (e.g. key `'configureWorkflow'`). The component that renders `CapAskAira.RuleSummarizationBot` must be **connected** to Redux and pass `askAiraData` and `actions` from the store (see step 3).
-
-**Option B – CapAiMediaGeneration**
-
-Example: **cap-creatives-ui** BeeEditor. In `BeeEditor/sagas.js`:
-
-```javascript
-import { watchForMediaGeneration } from '@capillarytech/cap-ui-library/CapAskAira/CapAiMediaGeneration/saga';
-
-export default [
-  watchCreateCustomRow,
-  watchForMediaGeneration,
-];
-```
-
-Ensure this saga is injected where the media generation UI is used (e.g. same route or parent).
-
-### 3. Render the bot and connect to Redux (when required)
-
-**RuleSummarizationBot** (e.g. next to a rule editor):
-
-- The container must be **connected** to Redux and map:
-  - `askAiraData`: from selector `makeSelectRuleGenData()` (or equivalent for rule summarization domain).
-  - `actions`: bound action creators for `getRule`, `getRuleSummarize`, `resetRule`, `updateLikeResultRule`, `updateDislikeResultRule`, `updateLikeResultSummarize`, `updateDislikeResultSummarize`.
-- Pass **request** and **getAPICallObject** from your API layer (e.g. from `services/api` and a method that builds auth/body).
-- Pass **activity** (e.g. event type) so the backend can scope the rule.
-
-Example (conceptually, as in cap-loyalty-ui):
-
-```jsx
-import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
-import { request, getAPICallObject } from '../../../services/api';
-
-// In connected component:
-<CapAskAira.RuleSummarizationBot
-  activity={eventType}
-  request={request}
-  getAPICallObject={getAPICallObject}
-  iconPlacement="float-br"
-/>
-```
-
-`askAiraData` and `actions` are usually provided by the same `connect`/`createStructuredSelector` that wraps the page.
-
-**ContentGenerationBot** (no Redux/saga):
-
-- No reducer or saga needed. Just pass **text** and **setText** to bind to parent state, plus optional labels and layout:
-
-```jsx
-<CapAskAira.ContentGenerationBot
-  text={templateMessage || ''}
-  setText={(text) => onTemplateValueChange({ target: { value: text } }, MESSAGE_TEXT)}
-  iconPlacement="float-br"
-  iconSize="1.6rem"
-  rootStyle={{ bottom: '0.5rem', right: '1.2rem', left: 'auto' }}
-/>
-```
-
-**CapAiMediaGeneration**:
-
-- Reducer is already under `ASK_AIRA` via `askAiraReducer`. Inject `watchForMediaGeneration` as above. Connect the component so it receives `imageDetails` (and any other state) and bound actions from the CapAiMediaGeneration reducer/actions.
-
-### 4. Environment / backend
-
-- **DOMAIN** and **WS_DOMAIN** in CapAskAira `constants.ts` drive API and WebSocket URLs. In production they often rely on `window.location.host`. For local dev, point them to your backend (e.g. `http://localhost:2100` and `ws://localhost:2100`).
-- Ensure the consuming app’s auth (e.g. token, org id) is passed through `request` and `getAPICallObject` so that CapAskAira’s API calls are authenticated. WebSocket auth in dev may use subprotocols (see `getWebsocketConnection` in `util.ts`).
-
-### 5. Feature flags
-
-Consuming apps often gate bots with a feature flag or permission (e.g. `!isAiRuleWritingDisabled`, `!isAiContentBotDisabled`). Render the bot only when the feature is enabled.
-
----
-
-## Testing in consuming repos
-
-### Unit tests
-
-- **Reducer**: Ensure the root reducer includes `[AIRA_REDUCER_DOMAIN]: askAiraReducer`. You can snapshot the initial state or dispatch unknown actions and assert the Ask Aira slice still exists.
-- **Selectors**: If you have selectors that depend on `ASK_AIRA`, build a minimal Immutable state with `fromJS({ ASK_AIRA: { ... } })` and test your selectors.
-- **Containers that render a bot**: Mock the CapAskAira module and assert that the correct bot component is rendered with expected props (e.g. `request`, `getAPICallObject`, `activity` for RuleSummarizationBot).
-
-Example pattern (mock default export and named exports):
-
-```javascript
-jest.mock('@capillarytech/cap-ui-library/CapAskAira', () => ({
-  __esModule: true,
-  default: {
-    RuleSummarizationBot: () => null,
-    ContentGenerationBot: () => null,
-    // ...other bots as needed
-  },
-  AIRA_REDUCER_DOMAIN: 'ASK_AIRA',
-  askAiraReducer: jest.fn((state = {}) => state),
-}));
-```
-
-- **Saga tests**: For pages that compose CapAskAira watchers (e.g. RuleSummarizationBot watchers), either:
-  - Test your own saga and mock the CapAskAira saga imports, or
-  - Import the real watchers and run them in `expectSaga` (or similar) and assert on dispatched actions and API calls.
-
-### Integration / E2E
-
-- **Backend**: Point DOMAIN/WS_DOMAIN to a test or stub backend so that opening the bot and submitting a query doesn’t depend on production.
-- **Auth**: Use test tokens/org so that `request` and `getAPICallObject` send valid auth headers; or stub `request`/`getAPICallObject` in tests to return fixed responses.
-- **Feature flags**: Enable the relevant AiRA feature flag (or override) in the test environment so the bot is visible and clickable.
-
-### Snapshot and visual
-
-- **Snapshots**: If you snapshot a container that includes a bot, the snapshot will include the bot’s subtree. Keep snapshots updated when you change bot props or upgrade the library. Mocking the bot (as above) keeps snapshots stable if you only care about the parent layout.
-- **Visual/regression**: Run visual tests against a build that includes the real CapAskAira; ensure the floating icon and popup don’t break layout (z-index, overflow, or positioning).
-
-### Testing CapAskAira in Storybook
-
-- **Storybook on nightly:** When Storybook is run or deployed on the nightly host, it uses the host origin and gets cookies/token automatically; no code change is needed.
-- **Local Storybook against nightly (temporary change):** To test CapAskAira stories locally against a real backend (e.g. nightly), make a **temporary** change in `components/CapAskAira/constants.ts`:
-  - Set `DOMAIN` to your nightly API base (e.g. `'https://crm-nightly-new.cc.capillarytech.com'`).
-  - Set `WS_DOMAIN` to the matching WebSocket base (e.g. `'wss://crm-nightly-new.cc.capillarytech.com'`).
-  - Revert these before committing. Document locally if your team needs to repeat this.
-
-### Running CapAskAira tests in blaze-ui
-
-From the **blaze-ui** repo:
-
-```bash
-npm test -- components/CapAskAira
-```
-
-This runs the tests under `components/CapAskAira/tests` and per-bot test folders (e.g. `RuleSummarizationBot/tests`, `ContentGenerationBot/tests`). Use this to validate changes before publishing and consuming in other repos.
-
----
-
-## Summary
-
-| Step | Action |
-|------|--------|
-| Reducer | Add `[AIRA_REDUCER_DOMAIN]: askAiraReducer` to root reducer. |
-| Saga | For RuleSummarizationBot, RuleGenerationBot, DocumentationChatBot, CapAiMediaGeneration: import their watchers and run them in the saga for the route/container that mounts the bot. |
-| Connect | For bots that use Redux, connect the container and pass `askAiraData`, `actions`, `request`, `getAPICallObject` (and any bot-specific props like `activity`). |
-| REST/WS | Provide `request` + `getAPICallObject`; ensure DOMAIN/WS_DOMAIN and auth work for your environment. |
-| Tests | Mock CapAskAira in unit tests; use real or stubbed backend and auth in integration; run `npm test -- --testPathPattern=CapAskAira` in blaze-ui for library changes. |
-
-For more detail on a specific bot, see its folder under `components/CapAskAira` (e.g. `RuleSummarizationBot/`, `ContentGenerationBot/`) for types, constants, API helpers, and selectors.

package/CapBanner/README.md

@@ -1,4 +0,0 @@
-# CapBanner Migration (v3→v6)
-
-## Breaking Changes from cap-ui-library v8.x
-**No breaking changes from cap-ui-library v8.x**

package/CapBlock/README.md

@@ -1,175 +0,0 @@
-# CapBlock
-
-A collapsible container component with optional delete functionality. Features a colored left border and can display content that can be expanded or collapsed.
-
-## Migration from cap-ui-library
-
-This component has been migrated from `@capillarytech/cap-ui-library` to `@capillarytech/blaze-ui` with the following changes:
-
-### Breaking Changes
-
-**No breaking changes** - The API remains fully compatible with cap-ui-library v8.x.
-
-### Improvements
-
-1. **TypeScript Support**: Full TypeScript type definitions for all props
-2. **SCSS Modules**: Styles converted from styled-components to SCSS modules
-3. **Better Testing**: Tests updated to use @testing-library/react
-4. **Storybook**: Comprehensive Storybook stories added
-
-## Installation
-
-```tsx
-import CapBlock from '@capillarytech/blaze-ui/CapBlock';
-// Or
-import { CapBlock } from '@capillarytech/blaze-ui';
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `width` | `string` | `'800px'` | Width of the block container |
-| `borderLeftColor` | `string` | `CAP_SECONDARY.base` | Color of the left border |
-| `isDeleteEnabled` | `boolean` | `false` | Whether the delete icon is enabled |
-| `deleteCallback` | `() => void` | - | Callback function when delete icon is clicked |
-| `isCollapseEnabled` | `boolean` | `false` | Whether the collapse/expand icon is enabled |
-| `componentName` | `string` | `'path'` | Name used in tooltip messages |
-| `children` | `ReactNode` | - | Content to render inside the block |
-| `className` | `string` | - | Additional CSS class name |
-| `deleteBlockMsg` | `string` | `''` | Message for delete tooltip (from translations) |
-| `collapseBlockMsg` | `string` | `''` | Message for collapse tooltip (from translations) |
-| `expandBlockMsg` | `string` | `''` | Message for expand tooltip (from translations) |
-| `pathBlockText` | `ReactNode` | - | Additional content at the bottom (always visible) |
-
-## Usage Examples
-
-### Basic Usage
-
-```tsx
-import CapBlock from '@capillarytech/blaze-ui/CapBlock';
-
-<CapBlock>
-  <p>This is the content inside the block.</p>
-</CapBlock>
-```
-
-### With Delete Feature
-
-```tsx
-<CapBlock
-  isDeleteEnabled
-  deleteCallback={() => console.log('Delete clicked')}
-  deleteBlockMsg="Delete"
-  componentName="section"
->
-  <p>Click the delete icon to remove this block.</p>
-</CapBlock>
-```
-
-### With Collapse Feature
-
-```tsx
-<CapBlock
-  isCollapseEnabled
-  collapseBlockMsg="Collapse"
-  expandBlockMsg="Expand"
-  componentName="section"
->
-  <p>This content can be collapsed and expanded.</p>
-</CapBlock>
-```
-
-### Custom Styling
-
-```tsx
-<CapBlock
-  width="600px"
-  borderLeftColor="#47af46"
-  className="custom-block"
->
-  <p>Custom width and border color.</p>
-</CapBlock>
-```
-
-### With All Features
-
-```tsx
-<CapBlock
-  width="700px"
-  borderLeftColor="#2466ea"
-  isDeleteEnabled
-  isCollapseEnabled
-  deleteCallback={() => handleDelete()}
-  deleteBlockMsg="Delete"
-  collapseBlockMsg="Collapse"
-  expandBlockMsg="Expand"
-  componentName="user settings"
-  pathBlockText={<span>Updated: Today</span>}
->
-  <h4>User Settings</h4>
-  <p>Configure your preferences here.</p>
-</CapBlock>
-```
-
-### Nested Blocks
-
-```tsx
-<CapBlock width="700px" borderLeftColor="#2466ea">
-  <h4>Outer Block</h4>
-  <CapBlock width="600px" borderLeftColor="#47af46">
-    <p>Inner Block Content</p>
-  </CapBlock>
-</CapBlock>
-```
-
-## Internationalization
-
-The component uses `LocaleHoc` for internationalization. The following props support translated strings:
-
-- `deleteBlockMsg` - Message shown in delete tooltip
-- `collapseBlockMsg` - Message shown in collapse tooltip
-- `expandBlockMsg` - Message shown in expand tooltip
-
-Example with react-intl:
-
-```tsx
-import { useIntl } from 'react-intl';
-
-const MyComponent = () => {
-  const intl = useIntl();
-
-  return (
-    <CapBlock
-      isCollapseEnabled
-      deleteBlockMsg={intl.formatMessage({ id: 'delete.block' })}
-      collapseBlockMsg={intl.formatMessage({ id: 'collapse.block' })}
-      expandBlockMsg={intl.formatMessage({ id: 'expand.block' })}
-    >
-      Content
-    </CapBlock>
-  );
-};
-```
-
-## TypeScript Types
-
-```tsx
-import type { CapBlockProps } from '@capillarytech/blaze-ui/CapBlock';
-```
-
-## Styling
-
-The component uses SCSS modules with the following CSS class prefix: `cap-block`.
-
-Custom styling can be applied via:
-- `className` prop
-- CSS overrides targeting `.cap-block` class
-- Inline `width` and `borderLeftColor` are applied via style attribute
-
-### CSS Variables Used
-
-The component uses these CSS variables from the design system:
-- Border color: `$CAP_G07` (grey border)
-- Delete background: `$CAP_COLOR_05` (light red)
-- Collapse background: `$CAP_G06` (light grey)

package/CapBorderedBox/Status.md

@@ -1,40 +0,0 @@
-# Migration Status: CapBorderedBox
-
-**Last Updated**: 2026-01-31 19:26: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-31 19:26:57
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-01-25 04:02:29
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapBorderedBox/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapCSVFileUploader/README.md

@@ -1,124 +0,0 @@
-# CapCSVFileUploader
-
-CapCSVFileUploader component migrated from Ant Design v3 to v6.
-
-## Migration Summary
-
-This component has been migrated from `cap-ui-library` to `blaze-ui` with the following changes:
-
-- Converted from JavaScript class component to TypeScript functional component
-- Uses SCSS modules for styling (imported as `import * as styles from './styles.scss'`)
-- Removed PropTypes and defaultProps (replaced with TypeScript types and default parameters)
-- Replaced `UNSAFE_componentWillReceiveProps` with `useEffect` hooks
-- Maintained backward compatibility with the existing API
-
-## Breaking Changes
-
-**No breaking changes** - The component maintains **100% backward compatibility** with existing code. All props work exactly as before.
-
-## Deprecated Props
-
-**No deprecated props** - This component does not use Ant Design components directly. It uses:
-- Native HTML `<input type="file">` element
-- `CapTag` component (which wraps Ant Design Tag, but that's handled in CapTag migration)
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `fileName` | `string` | `''` | The name of the uploaded file |
-| `errorMessage` | `string` | - | Error message to display |
-| `numberOfEntriesMessage` | `string` | `'entries'` | Message text for number of entries |
-| `sampleCsvFilePath` | `string` | - | Path to sample CSV file for download |
-| `onUpload` | `(event: React.ChangeEvent<HTMLInputElement>) => void` | - | Callback when file is uploaded |
-| `showNumberOfEntries` | `boolean` | `true` | Whether to show the number of entries |
-| `onChipClose` | `() => void` | - | Callback when file chip is closed |
-| `checkFileSize` | `boolean` | `true` | Whether to check file size (5MB limit) |
-| `getNumberOfEntries` | `(count: number) => void` | - | Callback with the number of entries found |
-| `lineCount` | `number` | `0` | Initial line count |
-| `sampleCsvName` | `string` | `'Sample.csv'` | Name of the sample CSV file link |
-| `chooseFileBtnTxt` | `string` | `'Choose file'` | Text for the choose file button |
-| `fileSizeExceededTxt` | `string` | `'File size is greater than 5 MB'` | Error message when file size exceeds limit |
-| `csvFileErrorTxt` | `string` | `'Please upload a CSV file'` | Error message for non-CSV files |
-| `csvFileNoEntryTxt` | `string` | `'Please upload a file with atleast one entry'` | Error message for empty CSV files |
-| `isStoreFilter` | `boolean` | `false` | Whether this is used for store filtering |
-| `reuploadFileMsg` | `string` | `'Reupload file'` | Message for reupload button |
-| `storeUploadInfo` | `StoreUploadInfo[]` | - | Store upload information array |
-| `referenceId` | `string` | - | Reference ID for store upload tracking |
-| `failedStorePathIdentifier` | `string` | - | Identifier for failed store path |
-| `disabled` | `boolean` | - | Whether the uploader is disabled |
-| `storeSource` | `string` | - | Source of the store data |
-
-## Usage Examples
-
-### Basic Usage
-
-```tsx
-import { CapCSVFileUploader } from '@capillarytech/blaze-ui';
-
-function FileUpload() {
-  const handleUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    console.log('File uploaded:', event.target.files?.[0]);
-  };
-
-  return (
-    <CapCSVFileUploader
-      onUpload={handleUpload}
-      sampleCsvFilePath="/path/to/sample.csv"
-    />
-  );
-}
-```
-
-### With Custom Messages
-
-```tsx
-<CapCSVFileUploader
-  onUpload={handleUpload}
-  chooseFileBtnTxt="Select CSV File"
-  csvFileErrorTxt="Only CSV files are allowed"
-  fileSizeExceededTxt="File must be less than 5MB"
-/>
-```
-
-### Store Filter Usage
-
-```tsx
-<CapCSVFileUploader
-  onUpload={handleUpload}
-  isStoreFilter={true}
-  storeUploadInfo={storeUploadInfo}
-  referenceId={referenceId}
-  failedStorePathIdentifier={failedStorePathIdentifier}
-  storeSource={storeSource}
-  disabled={disabled}
-/>
-```
-
-## Code Improvements
-
-1. **TypeScript support**: Full TypeScript definitions with proper prop types
-2. **Functional component**: Converted from class component to functional component with hooks
-3. **Modern React patterns**: Uses `useState` and `useEffect` instead of class state and lifecycle methods
-4. **Removed deprecated APIs**: Replaced `UNSAFE_componentWillReceiveProps` with `useEffect` hooks
-5. **SCSS modules**: Uses SCSS modules for styling with proper class name handling
-
-## What Stayed the Same
-
-- All component props and behavior
-- DOM structure and component hierarchy
-- Conditional rendering logic
-- File validation logic (CSV check, file size check)
-- Entry counting logic
-- Error message display logic
-- API surface area (backward compatible)
-
-## What Changed
-
-- **Removed**: `PropTypes` (replaced with TypeScript types)
-- **Removed**: `defaultProps` (replaced with default parameters)
-- **Removed**: Class component (replaced with functional component)
-- **Removed**: `UNSAFE_componentWillReceiveProps` (replaced with `useEffect`)
-- **Added**: TypeScript type definitions in `types.ts`
-- **Added**: SCSS module imports (`import * as styles`)
-- **Updated**: State management to use `useState` hooks