@capillarytech/blaze-ui 5.18.9 → 5.18.12

package/CapRadioCard/types.d.ts

@@ -20,6 +20,26 @@ export interface CapRadioCardPane {
 }
 export interface CapRadioCardProps extends Omit<React.ComponentProps<typeof Radio.Group>, 'size'> {
     className?: string;
+    /** Root (RadioGroup) */
+    rootClassName?: string;
+    /** RadioButton wrapper */
+    radioButtonWrapperClassName?: string;
+    /** Checked icon */
+    checkedIconClassName?: string;
+    /** Icon wrapper div */
+    iconWrapperClassName?: string;
+    /** Icon container div */
+    iconContainerClassName?: string;
+    /** Div wrapping icon content */
+    divIconClassName?: string;
+    /** Content container */
+    contentContainerClassName?: string;
+    /** Header div */
+    headerClassName?: string;
+    /** Content div */
+    contentClassName?: string;
+    /** Info icon wrapper */
+    infoIconWrapperClassName?: string;
     panes?: CapRadioCardPane[];
     cardHeight?: number | string;
     cardWidth?: number | string;

package/CapRadioCard/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapRadioCard/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE;QACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAGD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapRadioCard/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE;QACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,mBAAmB;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,yBAAyB;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB;IACxB,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iBAAiB;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB;IACxB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAGD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,CAAC"}

package/CapStaticTemplates/README.md

@@ -0,0 +1,212 @@
+# CapStaticTemplates Migration Guide
+
+## Summary
+
+CapStaticTemplates has been migrated from `cap-ui-library` to `blaze-ui` with the following changes:
+
+- Converted from JavaScript to TypeScript
+- Removed PropTypes and defaultProps (using TypeScript types and destructuring defaults)
+- Uses SCSS modules for styling (imported as `import styles from './styles.scss'`)
+- Migrated to Ant Design v6 APIs
+- Converted from styled-components to CSS Modules
+- Added TypeScript interfaces for props
+- Maintained backward compatibility with the existing API
+
+## Breaking Changes
+
+**No breaking changes from cap-ui-library v8.x**
+
+The component maintains backward compatibility with all existing props. However, deprecated Ant Design Modal APIs (`visible` prop) have been migrated to v6 APIs (`open` prop) internally.
+
+## Prop Changes
+
+### All Props Maintained
+
+All props from the original component are maintained with the same API:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `categories` | `Category[]` | `[]` | Array of category objects |
+| `className` | `string` | `undefined` | Additional CSS class name |
+| `cardWidth` | `string` | `'278px'` | Width of template cards |
+| `cardHeight` | `string` | `'104px'` | Height of template cards |
+| `blankCardWidth` | `string` | `'278px'` | Width of blank template card |
+| `blankCardHeight` | `string` | `'80px'` | Height of blank template card |
+| `selectedCategory` | `string` | `undefined` | Currently selected category value |
+| `onSelectCategory` | `(value: string) => void` | `undefined` | Callback when category is selected |
+| `selectedStrategyTemplate` | `string` | `undefined` | Currently selected template key |
+| `onSelectStrategyTemplate` | `(value: string) => void` | `undefined` | Callback when template is selected |
+| `isBlankTemplateRequired` | `boolean` | `false` | Whether to show blank template option |
+| `templatesContainerWidth` | `string` | `'990px'` | Width of templates container |
+| `templatesContainerMaxHeight` | `string` | `'400px'` | Maximum height of templates container |
+| `modalContent` | `ModalContent` | `undefined` | Modal content configuration |
+| `searchPlaceholder` | `string` | `undefined` | Custom search placeholder text |
+| `showComingSoon` | `boolean` | `true` | Whether to show "Coming Soon" tags |
+
+### Locale Messages (Injected by LocaleHoc)
+
+The following props are automatically injected by `LocaleHoc`:
+
+- `strategyTitleMsg` - Strategy title message
+- `strategyDescriptionMsg` - Strategy description message
+- `comingSoonMsg` - Coming soon message
+- `blankCategoryLabel` - Blank category label
+- `blankTemplateLabel` - Blank template label
+- `blankTemplateDescription` - Blank template description
+- `searchPlaceholderMsg` - Search placeholder message
+
+## Type Definitions
+
+### Category
+
+```typescript
+interface Category {
+  key: string;
+  label: string;
+  value: string;
+  color?: string;
+  premium?: boolean;
+  panes?: TemplatePane[];
+}
+```
+
+### TemplatePane
+
+```typescript
+interface TemplatePane {
+  key: string;
+  label: string;
+  value: string;
+  description?: string;
+  icon?: string;
+  isAvailable?: boolean;
+  isBlankTemplate?: boolean;
+  [key: string]: unknown;
+}
+```
+
+### ModalContent
+
+```typescript
+interface ModalContent {
+  title: string;
+  description: string;
+  iconsAndMessages?: IconMessage[];
+}
+```
+
+## Migration from Ant Design v3 to v6
+
+### Internal Changes
+
+The component internally uses Ant Design v6 APIs:
+
+- **Modal**: Uses `open` prop instead of deprecated `visible` prop (handled internally)
+- **Input.Search**: Uses v6 Input component with Search functionality
+- **RadioCard**: Uses CapRadioCard which wraps Ant Design Radio.Group
+
+### Style Changes
+
+**Approach**: The component uses CSS Modules with SCSS for styling. Most Ant Design component styling is handled through:
+
+1. **Design Tokens**: Modal body padding uses `components.Modal.contentPadding` token
+2. **CSS Modules**: Component-specific styles use CSS Modules with `styles[classname]` pattern
+3. **CSS Variables**: Dynamic values (container width, max height, border colors) use CSS custom properties
+4. **:global Overrides**: Complex nested Ant Design component styling uses `:global` blocks with `// OVERRIDE:` comments
+
+### Non-Tokenizable Overrides
+
+The following styles use `:global` blocks with `// OVERRIDE:` comments because they cannot be tokenized:
+
+1. **RadioCard Complex Nesting**: Radio.Group and Card component nested styling for template cards
+2. **Modal Fixed Dimensions**: Fixed modal width (737px) and height (274px) - no tokens available
+3. **Modal Footer Display**: Hiding modal footer requires CSS override
+4. **Custom Card Layout**: Fixed card dimensions (92x86px) for modal icon cards
+
+## Code Improvements
+
+1. **TypeScript Support**: Full TypeScript definitions with proper prop types
+2. **Removed PropTypes**: All PropTypes removed, using TypeScript types only
+3. **Removed defaultProps**: All default values use destructuring assignment in function arguments
+4. **CSS Modules**: Converted from styled-components to CSS Modules with SCSS
+5. **Function Syntax**: Converted from `function Component(props)` to destructured `({ prop1 = defaultValue })`
+6. **Type Safety**: All function parameters and return types properly typed
+
+## Usage Example
+
+```tsx
+import CapStaticTemplates from '@capillarytech/blaze-ui';
+
+const categories = [
+  {
+    key: 'boostSales',
+    label: 'Boost sales',
+    value: 'boostSales',
+    color: '#91e5e5',
+    panes: [
+      {
+        key: 'browseAbandonNew',
+        label: 'Browse abandon new',
+        value: 'browseAbandonNew',
+        description: 'Target contacts who have visited your product pages',
+        icon: 'basket',
+        isAvailable: true,
+      },
+    ],
+  },
+];
+
+const modalContent = {
+  title: 'Journey templates',
+  description: 'Pre-defined strategy driven marketing use-cases',
+  iconsAndMessages: [
+    { iconType: 'communication', message: 'Content personalisation' },
+  ],
+};
+
+function MyComponent() {
+  const [selectedCategory, setSelectedCategory] = useState('boostSales');
+  const [selectedTemplate, setSelectedTemplate] = useState('browseAbandonNew');
+
+  return (
+    <CapStaticTemplates
+      categories={categories}
+      modalContent={modalContent}
+      selectedCategory={selectedCategory}
+      onSelectCategory={setSelectedCategory}
+      selectedStrategyTemplate={selectedTemplate}
+      onSelectStrategyTemplate={setSelectedTemplate}
+      isBlankTemplateRequired={true}
+    />
+  );
+}
+```
+
+## What Stayed the Same
+
+- All component props and API
+- Component behavior and functionality
+- Search functionality with debounce
+- Modal display for unavailable templates
+- Blank template feature
+- Premium category indicators
+- Tooltip for long labels
+- Category selection and scroll behavior
+
+## What Changed
+
+- **Removed**: PropTypes and defaultProps
+- **Removed**: styled-components dependency
+- **Removed**: Old function syntax with props parameter
+- **Added**: TypeScript types and interfaces
+- **Added**: CSS Modules with SCSS
+- **Added**: Design token support for Modal padding
+- **Changed**: Modal uses `open` prop internally (backward compatible)
+
+## Theme Configuration
+
+The following design tokens have been added to `getCapThemeConfig`:
+
+- `components.Modal.contentPadding`: 24px for modal body padding
+
+These tokens are automatically applied when using `getCapThemeConfig()` in your application's ConfigProvider.

package/CapStaticTemplates/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const BLANK_TEMPLATE = "BLANK_TEMPLATE";
+export declare const BLANK_TEMPLATE_ICON = "add";
+//# sourceMappingURL=constants.d.ts.map

package/CapStaticTemplates/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../components/CapStaticTemplates/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,mBAAmB,CAAC;AAC/C,eAAO,MAAM,mBAAmB,QAAQ,CAAC"}

package/CapStaticTemplates/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ *
+ * CapStaticTemplates
+ *
+ */
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl';
+import type { CapStaticTemplatesProps } from './types';
+declare const _default: React.FC<Omit<CapStaticTemplatesProps, keyof WrappedComponentProps>>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/CapStaticTemplates/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapStaticTemplates/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAsB/D,OAAO,KAAK,EAAE,uBAAuB,EAA0B,MAAM,SAAS,CAAC;wBAwYnB,KAAK,CAAC,EAAE,CAClE,IAAI,CAAC,uBAAuB,EAAE,MAAM,qBAAqB,CAAC,CAC3D;AAFD,wBAEE"}