@antscorp/antsomi-ui 1.3.4 → 1.3.5-beta.2

package/es/components/template/TemplateListing/constants/mockData.js

@@ -0,0 +1,101 @@
+export const MENU_ITEMS_SAMPLE = [
+    {
+        key: 'device_type',
+        label: 'Device type',
+        children: [
+            {
+                key: 'desktop',
+                label: 'Desktop',
+                total: 304,
+            },
+            {
+                key: 'mobile',
+                label: 'Mobile',
+                total: 141,
+            },
+        ],
+    },
+    {
+        key: 'template_type',
+        label: 'Template type',
+        children: [
+            {
+                key: 'popup',
+                label: 'Popup',
+                total: 209,
+            },
+            {
+                key: 'floating_bar',
+                label: 'Floating bar',
+                total: 4,
+            },
+            {
+                key: 'fullscreen',
+                label: 'Fullscreen',
+                total: 34,
+            },
+            {
+                key: 'inline',
+                label: 'Inline',
+                total: 20,
+            },
+            {
+                key: 'slide_in',
+                label: 'Slide-in',
+                total: 20,
+            },
+        ],
+    },
+    {
+        key: 'objective',
+        label: 'Objective',
+        children: [
+            {
+                key: 'personalization_content',
+                label: 'Personalization content',
+                total: 141,
+            },
+            {
+                key: 'recommendation',
+                label: 'Recommendation',
+                total: 308,
+            },
+            {
+                key: 'gamification',
+                label: 'Gamification',
+                total: 103,
+            },
+            {
+                key: 'lead_form',
+                label: 'Lead Form',
+                total: 12,
+            },
+        ],
+    },
+    {
+        key: 'seasonal',
+        label: 'Seasonal',
+        children: [
+            {
+                key: 'new_year',
+                label: 'New Year',
+                total: 16,
+            },
+            {
+                key: 'spring',
+                label: 'Spring',
+                total: 24,
+            },
+            {
+                key: 'christmas',
+                label: 'Christmas',
+                total: 4,
+            },
+            {
+                key: 'black_friday',
+                label: 'Black Friday',
+                total: 41,
+            },
+        ],
+    },
+];

package/es/components/template/TemplateListing/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TemplateListingProps } from './types';
+export declare const TemplateListing: React.FC<TemplateListingProps>;

package/es/components/template/TemplateListing/index.js

@@ -0,0 +1,22 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { CategoryListing, TemplateItem, BlankTemplate } from './components';
+import { Flex, Typography } from '../../atoms';
+// Constants
+import { BLANK_TEMPLATE_DEFAULT, TEMPLATE_ITEM_DEFAULT, TEMPLATE_LISTING_DEFAULT, TEMPLATE_ITEM_HEIGHT, TEMPLATE_ITEM_WIDTH, CATEGORY_LISTING_DEFAULT, } from './constants';
+// Styled
+import { TemplateListingWrapper } from './styled';
+export const TemplateListing = memo(props => {
+    const { templateItems, categoryItems, templateItemProps = TEMPLATE_ITEM_DEFAULT, blankTemplateProps = BLANK_TEMPLATE_DEFAULT, categoryListingProps = CATEGORY_LISTING_DEFAULT, } = props;
+    const { width = TEMPLATE_ITEM_WIDTH, height = TEMPLATE_ITEM_HEIGHT } = templateItemProps;
+    return (React.createElement(TemplateListingWrapper, null,
+        React.createElement(CategoryListing, Object.assign({ items: categoryItems }, categoryListingProps, { className: `category-listing ${(categoryListingProps === null || categoryListingProps === void 0 ? void 0 : categoryListingProps.className) || ''}` })),
+        React.createElement(Flex, { gap: 30, wrap: "wrap", style: { padding: '15px' }, className: "template-listing" },
+            React.createElement(BlankTemplate, Object.assign({ width: width, height: height }, blankTemplateProps)), templateItems === null || templateItems === void 0 ? void 0 :
+            templateItems.map(({ key, name, thumbnail }) => (React.createElement(Flex, { key: key, vertical: true, gap: 10 },
+                React.createElement(TemplateItem, Object.assign({ id: key, thumbnail: thumbnail }, templateItemProps)),
+                React.createElement(Typography.Text, { ellipsis: { tooltip: name }, style: { maxWidth: '100%' } }, name)))))));
+});
+TemplateListing.displayName = 'TemplateListing';
+TemplateListing.defaultProps = TEMPLATE_LISTING_DEFAULT;

package/es/components/template/TemplateListing/styled/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TemplateListingWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/template/TemplateListing/styled/index.js

@@ -0,0 +1,16 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '../../../atoms';
+export const TemplateListingWrapper = styled(Flex) `
+  height: 100%;
+
+  .category-listing {
+    flex-shrink: 0;
+  }
+
+  .template-listing {
+    flex: 1 1 0%;
+    height: fit-content;
+  }
+`;

package/es/components/template/TemplateListing/types/BlankTemplate.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface BlankTemplateProps {
+    width?: number;
+    height?: number;
+    show?: boolean;
+    description?: string;
+    onButtonClick?: React.MouseEventHandler<HTMLElement>;
+}

package/es/components/template/TemplateListing/types/BlankTemplate.js

@@ -0,0 +1 @@
+export {};

package/es/components/template/TemplateListing/types/CategoryListing.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { MenuProps } from 'antd';
+export type TCheckedCategories = Record<string | number, (string | number)[]>;
+export interface CategoryListingProps extends MenuProps {
+    items: TCategoryItem[];
+    width?: number;
+    checkedCategories?: TCheckedCategories;
+    onMenuChange?: (value: TCheckedCategories) => void;
+}
+export type TMenuItem = Required<MenuProps>['items'][number];
+export type TCategoryItem = {
+    key: string;
+    label: React.ReactNode | string;
+    total?: number;
+    children?: TCategoryItem[];
+};

package/es/components/template/TemplateListing/types/CategoryListing.js

@@ -0,0 +1 @@
+export {};

package/es/components/template/TemplateListing/types/TemplateItem.d.ts

@@ -0,0 +1,14 @@
+import { ModalFuncProps } from 'antd';
+export type TTemplateItemId = string | number;
+export interface TemplateItemProps {
+    id: TTemplateItemId;
+    width?: number;
+    height?: number;
+    thumbnail?: string;
+    removable?: boolean;
+    onClickEdit?: (id: TTemplateItemId) => void;
+    onClickPreview?: (id: TTemplateItemId) => void;
+    removeTemplateModalProps?: Omit<ModalFuncProps, 'onOk'> & {
+        onOk?: (id: TTemplateItemId) => void;
+    };
+}

package/es/components/template/TemplateListing/types/TemplateItem.js

@@ -0,0 +1 @@
+export {};

package/es/components/template/TemplateListing/types/TemplateListing.d.ts

@@ -0,0 +1,15 @@
+import { BlankTemplateProps } from './BlankTemplate';
+import { CategoryListingProps } from './CategoryListing';
+import { TemplateItemProps } from './TemplateItem';
+export interface TemplateListingProps {
+    templateItems: TTemplateItem[];
+    categoryItems: CategoryListingProps['items'];
+    templateItemProps?: Omit<TemplateItemProps, 'id' | 'thumbnail'>;
+    categoryListingProps?: Omit<CategoryListingProps, 'items'>;
+    blankTemplateProps?: Omit<BlankTemplateProps, 'width' | 'height'>;
+}
+export interface TTemplateItem {
+    name: string;
+    key: string;
+    thumbnail?: TemplateItemProps['thumbnail'];
+}

package/es/components/template/TemplateListing/types/TemplateListing.js

@@ -0,0 +1 @@
+export {};

package/es/components/template/TemplateListing/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './CategoryListing';
+export * from './TemplateItem';
+export * from './BlankTemplate';
+export * from './TemplateListing';

package/es/components/template/TemplateListing/types/index.js

@@ -0,0 +1,4 @@
+export * from './CategoryListing';
+export * from './TemplateItem';
+export * from './BlankTemplate';
+export * from './TemplateListing';

package/es/components/template/index.d.ts

@@ -0,0 +1,2 @@
+export { TemplateListing } from './TemplateListing';
+export * from './TemplateListing/types';

package/es/components/template/index.js

@@ -0,0 +1,2 @@
+export { TemplateListing } from './TemplateListing';
+export * from './TemplateListing/types';

package/es/constants/index.d.ts

@@ -1,3 +1,4 @@
 export { THEME } from './theme';
 export * from './storybook';
 export * from './gradientSetting';
+export * from './richMenu';

package/es/constants/index.js

@@ -1,3 +1,4 @@
 export { THEME } from './theme';
 export * from './storybook';
 export * from './gradientSetting';
+export * from './richMenu';

package/es/constants/queries.d.ts

@@ -0,0 +1,14 @@
+export declare const QUERY_KEYS: {
+    GET_LIST_EVENT_ATTR: string;
+    GET_LIST_EVENT_BY_SOURCE: string;
+    GET_LIST_SOURCE_BY_EVENT: string;
+    GET_LIST_ALL_EVENT: string;
+    GET_LIST_BO: string;
+    GET_EVENT_ATTRIBUTE_BO: string;
+    GET_LIST_PROMOTION_CODE_ATTR: string;
+    GET_EVENT_TRACKING_ATTRIBUTES: string;
+    GET_LIST_DYNAMIC_CONTENT_ATTR: string;
+    GET_LIST_PROMOTION_POOL: string;
+    GET_LIST_CUSTOM: string;
+    GET_SAVE_CUSTOM_FUNCTION: string;
+};

package/es/constants/queries.js

@@ -0,0 +1,21 @@
+export const QUERY_KEYS = {
+    // Event attr
+    GET_LIST_EVENT_ATTR: 'GET_LIST_EVENT_ATTR',
+    GET_LIST_EVENT_BY_SOURCE: 'GET_LIST_EVENT_BY_SOURCE',
+    GET_LIST_SOURCE_BY_EVENT: 'GET_SOURCE_BY_EVENT',
+    GET_LIST_ALL_EVENT: 'GET_LIST_ALL_EVENT',
+    // BUSINESS OBJECT
+    GET_LIST_BO: 'GET_LIST_BO',
+    GET_EVENT_ATTRIBUTE_BO: 'GET_EVENT_ATTRIBUTE_BO',
+    // Promotion Code Attr
+    GET_LIST_PROMOTION_CODE_ATTR: 'GET_LIST_PROMOTION_CODE_ATTR',
+    // Event tracking attributes
+    GET_EVENT_TRACKING_ATTRIBUTES: 'GET_EVENT_TRACKING_ATTRIBUTES',
+    // Dynamic content Attr
+    GET_LIST_DYNAMIC_CONTENT_ATTR: 'GET_LIST_DYNAMIC_CONTENT_ATTR',
+    // Event Pool
+    GET_LIST_PROMOTION_POOL: 'GET_LIST_PROMOTION_POOL',
+    // Custom Function
+    GET_LIST_CUSTOM: 'GET_LIST_CUSTOM',
+    GET_SAVE_CUSTOM_FUNCTION: 'GET_SAVE_CUSTOM_FUNCTION',
+};

package/es/constants/richMenu.d.ts

@@ -0,0 +1,19 @@
+export declare const AREA_LAYOUT_KEYS: {
+    readonly LAYOUT_1: "LAYOUT_1";
+    readonly LAYOUT_2: "LAYOUT_2";
+    readonly LAYOUT_3: "LAYOUT_3";
+    readonly LAYOUT_4: "LAYOUT_4";
+    readonly LAYOUT_5: "LAYOUT_5";
+    readonly LAYOUT_6: "LAYOUT_6";
+    readonly LAYOUT_7: "LAYOUT_7";
+    readonly LAYOUT_8: "LAYOUT_8";
+    readonly LAYOUT_9: "LAYOUT_9";
+    readonly LAYOUT_10: "LAYOUT_10";
+    readonly LAYOUT_11: "LAYOUT_11";
+    readonly LAYOUT_12: "LAYOUT_12";
+};
+export declare const BLOCK_KEYS: {
+    readonly RICH_MENU: "RICH_MENU";
+    readonly CELL_ACTION: "CELL_ACTION";
+    readonly CELL_IMAGE: "CELL_IMAGE";
+};

package/es/constants/richMenu.js

@@ -0,0 +1,19 @@
+export const AREA_LAYOUT_KEYS = {
+    LAYOUT_1: 'LAYOUT_1',
+    LAYOUT_2: 'LAYOUT_2',
+    LAYOUT_3: 'LAYOUT_3',
+    LAYOUT_4: 'LAYOUT_4',
+    LAYOUT_5: 'LAYOUT_5',
+    LAYOUT_6: 'LAYOUT_6',
+    LAYOUT_7: 'LAYOUT_7',
+    LAYOUT_8: 'LAYOUT_8',
+    LAYOUT_9: 'LAYOUT_9',
+    LAYOUT_10: 'LAYOUT_10',
+    LAYOUT_11: 'LAYOUT_11',
+    LAYOUT_12: 'LAYOUT_12',
+};
+export const BLOCK_KEYS = {
+    RICH_MENU: 'RICH_MENU',
+    CELL_ACTION: 'CELL_ACTION',
+    CELL_IMAGE: 'CELL_IMAGE',
+};

package/es/constants/storybook.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const TABLE_API_COLUMNS: ({
     title: string;
     dataIndex: string;
@@ -7,5 +8,10 @@ export declare const TABLE_API_COLUMNS: ({
     title: string;
     dataIndex: string;
     key: string;
-    render: (text: any) => JSX.Element;
+    render: (text: any) => React.JSX.Element;
 })[];
+export declare const TABLE_TYPE_COLUMNS: {
+    title: string;
+    dataIndex: string;
+    key: string;
+}[];

package/es/constants/storybook.js

@@ -22,3 +22,15 @@ export const TABLE_API_COLUMNS = [
         key: 'default',
     },
 ];
+export const TABLE_TYPE_COLUMNS = [
+    {
+        title: 'Value',
+        dataIndex: 'value',
+        key: 'value',
+    },
+    {
+        title: 'Label',
+        dataIndex: 'label',
+        key: 'label',
+    },
+];

package/es/constants/theme.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -64,8 +64,12 @@ export const THEME = {
         accent2: '#dddddd',
         accent3: '#d2d2d2',
         accent5: '#999999',
+        accent6: '#f2f2f2',
+        accent7: '#cccccc',
+        gray5: '#d9d9d9',
         gold1,
         gold6,
+        scrollBarSize: '8px',
     },
 };
 THEME.components = {
@@ -128,19 +132,42 @@ THEME.components = {
         controlHeight: 31,
     },
     Divider: {
-        marginLG: 10,
+        marginLG: 15,
+        marginXL: 15,
+        colorSplit: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.accent3,
     },
     Checkbox: {
         controlInteractiveSize: 18,
     },
     Modal: {
+        titleFontSize: 16,
         borderRadiusSM: 3,
+        fontSizeLG: 18,
         paddingContentHorizontalLG: 0,
         paddingLG: 0,
         paddingMD: 0,
     },
     Tabs: {
         colorPrimary: '#1F5FAC',
-        margin: 20,
+        horizontalItemPadding: '10px 20px',
+        horizontalItemGutter: 0,
+        lineWidthBold: 3,
+        titleFontSize: 14,
+        titleFontSizeLG: 14,
+        titleFontSizeSM: 14,
+        horizontalMargin: '0px',
+    },
+    Collapse: {
+        headerBg: '#FFF',
+        borderRadiusLG: 0,
+        headerPadding: '15px 10px',
+    },
+    Switch: {
+        colorTextQuaternary: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw0,
+        colorTextTertiary: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw0,
+        handleSize: 12,
+        handleSizeSM: 7,
+        trackMinWidth: 30,
+        handleBg: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.colorPrimary,
     },
 };

package/es/hooks/index.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare function useDeepCompareEffect(callback: React.EffectCallback, dependencies: React.DependencyList | undefined): void;
+export { useDeepCompareMemo } from './useDeepCompareMemo';

package/es/hooks/index.js

@@ -19,3 +19,4 @@ export function useDeepCompareEffect(callback, dependencies) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(callback, dependencies === null || dependencies === void 0 ? void 0 : dependencies.map(useDeepCompareMemoize));
 }
+export { useDeepCompareMemo } from './useDeepCompareMemo';

package/es/hooks/useDebounceCallback.d.ts

@@ -0,0 +1 @@
+export declare function useDebounceCallback<T extends (...args: any[]) => any>(callback: T, delay?: number): T;

package/es/hooks/useDebounceCallback.js

@@ -0,0 +1,5 @@
+import { useDebounce } from './useDebounceV2';
+export function useDebounceCallback(callback, delay = 500) {
+    const debouncedCallback = useDebounce(callback, delay);
+    return debouncedCallback;
+}

package/es/hooks/useDebounceV2.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/es/hooks/useDebounceV2.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+export function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

package/es/hooks/useDeepCompareEffect.d.ts

@@ -0,0 +1 @@
+export declare function useDeepCompareEffect(callback: any, dependencies: any): void;

package/es/hooks/useDeepCompareEffect.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+function deepCompareEquals(a, b) {
+    // TODO: implement deep comparison here
+    // something like lodash
+    // return _.isEqual(a, b);
+    return isEqual(a, b);
+}
+function useDeepCompareMemoize(value) {
+    const ref = useRef();
+    // it can be done by using useMemo as well
+    // but useRef is rather cleaner and easier
+    if (!deepCompareEquals(value, ref.current)) {
+        ref.current = value;
+    }
+    return ref.current;
+}
+export function useDeepCompareEffect(callback, dependencies) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(callback, dependencies.map(useDeepCompareMemoize));
+}

package/es/hooks/useDeepCompareMemo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useDeepCompareMemo<T>(callback: () => T, dependencies: React.DependencyList | undefined): T;

package/es/hooks/useDeepCompareMemo.js

@@ -0,0 +1,21 @@
+import { useMemo, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+function deepCompareEquals(a, b) {
+    // TODO: implement deep comparison here
+    // something like lodash
+    // return _.isEqual(a, b);
+    return isEqual(a, b);
+}
+function useDeepCompareMemoize(value) {
+    const ref = useRef();
+    // it can be done by using useMemo as well
+    // but useRef is rather cleaner and easier
+    if (!deepCompareEquals(value, ref.current)) {
+        ref.current = value;
+    }
+    return ref.current;
+}
+export function useDeepCompareMemo(callback, dependencies) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useMemo(callback, dependencies === null || dependencies === void 0 ? void 0 : dependencies.map(useDeepCompareMemoize));
+}

package/es/hooks/useOutsideClick.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const useOutsideClick: (callback: any) => {
+    ref: import("react").MutableRefObject<any>;
+};

package/es/hooks/useOutsideClick.js

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+export const useOutsideClick = callback => {
+    const ref = useRef(null);
+    const handleClickOutside = event => {
+        if (ref.current && !ref.current.contains(event.target)) {
+            if (callback && typeof callback === 'function') {
+                callback();
+            }
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    });
+    return { ref };
+};

package/es/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare function usePrevious<T>(value: T): T | undefined;
+export default usePrevious;

package/es/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+export default usePrevious;