@antscorp/antsomi-ui 1.3.5-beta.64 → 1.3.5-beta.66

package/es/components/common/ConfigProvider/ConfigProvider.js

@@ -28,8 +28,6 @@ import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 // import '@antscorp/antsomi-ui/es/locales/i18n';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
 import 'animate.css';
-// Providers
-import { QueryClientProviderAntsomiUI, QueryDevtoolsAntsomiUI, queryClientAntsomiUI, } from '@antscorp/antsomi-ui/es/queries';
 // NOTE: HOT fix DatePicker Advanced
 dayjs.extend(weekday);
 dayjs.extend(localeData);
@@ -46,10 +44,8 @@ const ConfigProvider = props => {
     }, [locale]);
     return (React.createElement(AntdConfigProvider, Object.assign({}, restOfProps),
         React.createElement(App, null,
-            React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
-                React.createElement(GlobalStyle, null),
-                React.createElement(StyleProvider, { hashPriority: "high" }, children),
-                React.createElement(QueryDevtoolsAntsomiUI, null)))));
+            React.createElement(GlobalStyle, null),
+            React.createElement(StyleProvider, { hashPriority: "high" }, children))));
 };
 ConfigProvider.defaultProps = {
     theme: THEME,

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.js

@@ -11,9 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React, { memo } from 'react';
+import { isEmpty } from 'lodash';
 // Components
 import { ThumbnailCard } from '../../../../molecules';
-import { Empty, Flex } from '../../../../atoms';
+import { Empty } from '../../../../template/TemplateListing/components/Empty';
+import { Flex } from '../../../../atoms';
 // Styled
 import { SimilarTemplateWrapper } from './styled';
 // Constants
@@ -25,5 +27,6 @@ export const SimilarTemplate = memo(props => {
     const _b = similarCardProps || {}, { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT } = _b, restOfSimilarCardProps = __rest(_b, ["width", "height"]);
     return show ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
         React.createElement("div", { className: "title" }, "Similar templates"),
-        React.createElement(Flex, { gap: 30 }, ((_a = similarTemplates === null || similarTemplates === void 0 ? void 0 : similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false }, restOfSimilarCardProps))))) || React.createElement(Empty, null)))) : null;
+        React.createElement(Flex, { gap: 30, justify: "center" }, isEmpty(similarTemplates) ? (React.createElement(Empty, null)) : ((_a = similarTemplates
+            .slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false }, restOfSimilarCardProps)))))))) : null;
 });

package/es/components/organism/PreviewTemplateModal/constants/defaultProps.js

@@ -5,6 +5,7 @@ export const SIMILAR_CARD_HEIGHT_DEFAULT = 230;
 export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
 export const SIMILAR_TEMPLATE_DEFAULT = {
     show: false,
+    similarTemplates: [],
 };
 export const THUMBNAIL_DEFAULT = {
     thumbnails: [],

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/BannerPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BannerPropsTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/BannerPropsTable/index.js

@@ -0,0 +1,34 @@
+// Libraries
+import React from 'react';
+import { Image } from 'antd';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Images
+import skeletonBackgroundImage from '../../../../../../../assets/images/components/PreviewModal/Banner/skeletonBackground.png';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const BannerPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'showBackgroundSkeleton',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handler show or hide skeleton background"),
+                React.createElement(Image, { src: skeletonBackgroundImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
+        },
+        {
+            key: '2',
+            property: 'children',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Children of Banner Component"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "ReactNode"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/DataTypeTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DataTypeTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/DataTypeTable/index.js

@@ -0,0 +1,62 @@
+// Libraries
+import React from 'react';
+import { Table } from '@antscorp/antsomi-ui/es/index';
+import LinkTo from '@storybook/addon-links/react';
+import { Image } from 'antd';
+// Images
+import bannerImage from '../../../../../../../assets/images/components/PreviewModal/banner.png';
+import informationImage from '../../../../../../../assets/images/components/PreviewModal/information.png';
+import thumbnailsImage from '../../../../../../../assets/images/components/PreviewModal/thumbnails.png';
+import similarTemplateImage from '../../../../../../../assets/images/components/PreviewModal/similarTemplate.png';
+// Constants
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const DataTypeTable = () => {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: 'Type',
+            dataIndex: 'type',
+            key: 'type',
+        },
+        {
+            title: 'Description',
+            dataIndex: 'description',
+            key: 'description',
+        },
+    ];
+    const dataSource = [
+        {
+            key: 'bannerProps',
+            name: 'bannerProps',
+            type: (React.createElement(LinkTo, { story: "banner-props" },
+                React.createElement(CustomTag, { type: "link" }, "BannerProps"))),
+            description: React.createElement(Image, { src: bannerImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'informationProps',
+            name: 'informationProps',
+            type: (React.createElement(LinkTo, { story: "information-props" },
+                React.createElement(CustomTag, { type: "link" }, "InformationProps"))),
+            description: React.createElement(Image, { src: informationImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'ThumbnailProps',
+            name: 'ThumbnailProps',
+            type: (React.createElement(LinkTo, { story: "thumbnail-props" },
+                React.createElement(CustomTag, { type: "link" }, "ThumbnailProps"))),
+            description: React.createElement(Image, { src: thumbnailsImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'SimilarTemplateProps',
+            name: 'SimilarTemplateProps',
+            type: (React.createElement(LinkTo, { story: "similar-template-props" },
+                React.createElement(CustomTag, { type: "link" }, "SimilarTemplateProps"))),
+            description: React.createElement(Image, { src: similarTemplateImage, width: 200, height: "auto" }),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: columns, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/InformationPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const InformationPropsTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/InformationPropsTable/index.js

@@ -0,0 +1,76 @@
+// Libraries
+import React from 'react';
+import { Image } from 'antd';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Images
+import buttonTextImage from '../../../../../../../assets/images/components/PreviewModal/Information/buttonText.png';
+import descriptionImage from '../../../../../../../assets/images/components/PreviewModal/Information/description.png';
+import itemNameImage from '../../../../../../../assets/images/components/PreviewModal/Information/itemName.png';
+import deviceRadioImage from '../../../../../../../assets/images/components/PreviewModal/Information/deviceRadio.png';
+import clickButtonImage from '../../../../../../../assets/images/components/PreviewModal/Information/clickButton.png';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const InformationPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'itemName',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Name of template item"),
+                React.createElement(Image, { src: itemNameImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, "Template name"),
+        },
+        {
+            key: '2',
+            property: 'categoryListing',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Children of Banner Component"))),
+            type: (React.createElement("a", { href: "../?path=/docs/templates-templatelisting-datatype--t-category-item", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "TCategoryItem [ ]"))),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '3',
+            property: 'buttonText',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Text of Information Button"),
+                React.createElement(Image, { src: buttonTextImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " Use template "),
+        },
+        {
+            key: '4',
+            property: 'description',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "description of Preview Modal Information "),
+                React.createElement(Image, { src: descriptionImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '5',
+            property: 'showDeviceRadios',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handle show or hide device radios "),
+                React.createElement(Image, { src: deviceRadioImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, " true "),
+        },
+        {
+            key: '6',
+            property: 'onButtonClick',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handle show or hide device radios "),
+                React.createElement(Image, { src: clickButtonImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, 'React.MouseEventHandler<HTMLElement>'),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    //
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/SimilarTemplatePropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SimilarTemplatePropsTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/SimilarTemplatePropsTable/index.js

@@ -0,0 +1,40 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const SimilarTemplatePropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'show',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handler show or hide similar template"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "true"),
+        },
+        {
+            key: '2',
+            property: 'similarTemplates',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "List of similar templates"))),
+            type: (React.createElement("a", { href: "../?path=/docs/templates-templatelisting-datatype--t-template-item", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "TTemplateItem [ ]"))),
+            default: React.createElement(CustomTag, { type: "default" }, " [ ] "),
+        },
+        {
+            key: '3',
+            property: 'similarCardProps',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Custom similar card"))),
+            type: (React.createElement("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "similarCardProps"))),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/TThumbnailTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TThumbnailTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/TThumbnailTable/index.js

@@ -0,0 +1,30 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const TThumbnailTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'id',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Identification of thumbnail"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string | number"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '2',
+            property: 'url',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Thumbnail url"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/ThumbnailPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThumbnailPropsTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/ThumbnailPropsTable/index.js

@@ -0,0 +1,46 @@
+// Libraries
+import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const ThumbnailPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'thumbnails',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Show list thumbnails as a slider"))),
+            type: (React.createElement(LinkTo, { story: "t-thumbnail" },
+                React.createElement(CustomTag, { type: "link" }, "TThumbnail [ ]"))),
+            default: React.createElement(CustomTag, { type: "default" }, "[ ]"),
+        },
+        {
+            key: '2',
+            property: 'onClickThumbnail',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handle click on thumbnail"))),
+            type: (React.createElement(CustomTag, { type: "normal" },
+                `(value: `,
+                React.createElement(LinkTo, { story: "t-thumbnail" },
+                    React.createElement(CustomTag, { type: "link" }, "TThumbnail")),
+                ') => void')),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '3',
+            property: 'ThumbnailCardProps',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Custom thumbnail card"),
+                React.createElement(Typography.Text, null, "Omit id, name, thumbnail, onClickWrapper properties of thumbnail Card Props"))),
+            type: (React.createElement("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "ThumbnailCardProps"))),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/index.d.ts

@@ -0,0 +1,6 @@
+export { DataTypeTable } from './DataTypeTable';
+export { BannerPropsTable } from './BannerPropsTable';
+export { InformationPropsTable } from './InformationPropsTable';
+export { SimilarTemplatePropsTable } from './SimilarTemplatePropsTable';
+export { ThumbnailPropsTable } from './ThumbnailPropsTable';
+export { TThumbnailTable } from './TThumbnailTable';

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/index.js

@@ -0,0 +1,6 @@
+export { DataTypeTable } from './DataTypeTable';
+export { BannerPropsTable } from './BannerPropsTable';
+export { InformationPropsTable } from './InformationPropsTable';
+export { SimilarTemplatePropsTable } from './SimilarTemplatePropsTable';
+export { ThumbnailPropsTable } from './ThumbnailPropsTable';
+export { TThumbnailTable } from './TThumbnailTable';

package/es/components/organism/PreviewTemplateModal/types.d.ts

@@ -33,7 +33,6 @@ export interface InformationProps {
     buttonText?: string;
     description?: string;
     showDeviceRadios?: boolean;
-    loading?: boolean;
     onDeviceTypeChange: (value: string) => void;
     onButtonClick?: React.MouseEventHandler<HTMLElement>;
 }

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

@@ -27,7 +27,7 @@ import { CATEGORY_LISTING_WITH } from '../../constants';
 const PATH = 'src/components/template/TemplateListing/components/CategoryListing/index.tsx';
 export const CategoryListing = memo(props => {
     var _a;
-    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "onMenuChange"]);
+    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, emptyProps, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "emptyProps", "onMenuChange"]);
     // Handlers
     const handleClickMenu = e => {
         var _a;
@@ -107,6 +107,6 @@ export const CategoryListing = memo(props => {
     }, [getItem, items]);
     return show ? (React.createElement(MenuWrapper, { "$width": width },
         React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" }, isEmpty(menuItems) && !loading ? (React.createElement("div", { className: "empty-wrapper" },
-            React.createElement(Empty, null))) : (React.createElement(Menu, Object.assign({ items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), onClick: handleClickMenu }, restOfProps)))))) : null;
+            React.createElement(Empty, Object.assign({}, emptyProps)))) : (React.createElement(Menu, Object.assign({ items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), onClick: handleClickMenu }, restOfProps)))))) : null;
 });
 CategoryListing.displayName = 'CategoryListing';

package/es/components/template/TemplateListing/stories/dataTypes/components/BlankTemplatePropsTable/index.js

@@ -2,9 +2,11 @@
 import React from 'react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Tag, Typography, Flex } from '../../../../../../atoms';
+import { Typography, Flex } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
 export const BlankTemplatePropsTable = () => {
     const dataSource = [
         {
@@ -12,32 +14,32 @@ export const BlankTemplatePropsTable = () => {
             property: 'show',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "Handler show or hide Blank Template"))),
-            type: React.createElement(Tag, { color: "processing" }, "boolean"),
-            default: React.createElement(Tag, { bordered: false }, "false"),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
         },
         {
             key: '2',
             property: 'description',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "The text that is displayed below the Add Button"))),
-            type: React.createElement(Tag, { color: "processing" }, "string"),
-            default: React.createElement(Tag, { bordered: false }, "Blank Template"),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, "Blank Template"),
         },
         {
             key: '3',
             property: 'onClick',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "Callback onClick on Blank Template"))),
-            type: React.createElement(Tag, { color: "processing" }, 'React.MouseEventHandler<HTMLElement>'),
-            default: React.createElement(Tag, { bordered: false }, " - "),
+            type: React.createElement(CustomTag, { type: "normal" }, 'React.MouseEventHandler<HTMLElement>'),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
         {
             key: '4',
             property: 'blankTemplateRender',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "Render Blank Template node for customizing"))),
-            type: React.createElement(Tag, { color: "processing" }, '(node: ReactNode) => ReactNode'),
-            default: React.createElement(Tag, { bordered: false }, " - "),
+            type: React.createElement(CustomTag, { type: "normal" }, '(node: ReactNode) => ReactNode'),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
     ];
     return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });

package/es/components/template/TemplateListing/stories/dataTypes/components/CategoryListingPropsTable/index.js

@@ -1,11 +1,14 @@
 // Libraries
 import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Tag, Typography, Flex } from '../../../../../../atoms';
+import { Typography, Flex } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
 import { CATEGORY_LISTING_WITH } from '../../../../constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
 export const CategoryListingPropsTable = () => {
     const dataSource = [
         {
@@ -13,40 +16,41 @@ export const CategoryListingPropsTable = () => {
             property: 'items',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "List of category items"))),
-            type: React.createElement(Tag, { color: "processing" }, "TCategoryItem [ ]"),
-            default: React.createElement(Tag, { bordered: false }, "[ ]"),
+            type: (React.createElement(LinkTo, { story: "t-category-item" },
+                React.createElement(CustomTag, { type: "link" }, "TCategoryItem [ ]"))),
+            default: React.createElement(CustomTag, { type: "default" }, "[ ]"),
         },
         {
             key: '2',
             property: 'width',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "Width of category"))),
-            type: React.createElement(Tag, { color: "processing" }, "number"),
-            default: React.createElement(Tag, { bordered: false }, CATEGORY_LISTING_WITH),
+            type: React.createElement(CustomTag, { type: "normal" }, "number"),
+            default: React.createElement(CustomTag, { type: "default" }, CATEGORY_LISTING_WITH),
         },
         {
             key: '3',
             property: 'loading',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "Show loading category listing"))),
-            type: React.createElement(Tag, { color: "processing" }, "boolean"),
-            default: React.createElement(Tag, { bordered: false }, "false"),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
         },
         {
             key: '4',
             property: 'show',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "Handler show or hide category"))),
-            type: React.createElement(Tag, { color: "processing" }, "boolean"),
-            default: React.createElement(Tag, { bordered: false }, "true"),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "true"),
         },
         {
             key: '5',
             property: 'checkedCategories',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "Record of checked categories"))),
-            type: React.createElement(Tag, { color: "processing" }, "TCheckedCategories"),
-            default: React.createElement(Tag, { bordered: false }, '{ }'),
+            type: React.createElement(CustomTag, { type: "link" }, "TCheckedCategories"),
+            default: React.createElement(CustomTag, { type: "default" }, '{ }'),
         },
     ];
     return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });

package/es/components/template/TemplateListing/stories/dataTypes/components/DataTypeTables/index.js

@@ -1,7 +1,17 @@
 // Libraries
 import React from 'react';
-import { Tag, Table } from '@antscorp/antsomi-ui/es/index';
+import { Table } from '@antscorp/antsomi-ui/es/index';
 import LinkTo from '@storybook/addon-links/react';
+import { Image } from 'antd';
+// Images
+import templatesImage from '../../../../../../../assets/images/components/TemplateListing/templates.png';
+import templateItemImage from '../../../../../../../assets/images/components/TemplateListing/templateItem.png';
+import categoryListingImage from '../../../../../../../assets/images/components/TemplateListing/categoryListing.png';
+import blankTemplateImage from '../../../../../../../assets/images/components/TemplateListing/blankTemplate.png';
+import previewModalImage from '../../../../../../../assets/images/components/TemplateListing/previewModal.png';
+import emptyImage from '../../../../../../../assets/images/components/TemplateListing/empty.png';
+// Constants
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
 export const DataTypeTable = () => {
     const columns = [
         {
@@ -25,43 +35,43 @@ export const DataTypeTable = () => {
             key: 'templatesProps',
             name: 'templatesProps',
             type: (React.createElement(LinkTo, { story: "templates-props" },
-                React.createElement(Tag, { color: "processing" }, "templatesProps"))),
-            description: '-',
+                React.createElement(CustomTag, { type: "link" }, "templatesProps"))),
+            description: React.createElement(Image, { src: templatesImage, width: 200, height: "auto" }),
         },
         {
             key: 'templateItemProps',
             name: 'templateItemProps',
             type: (React.createElement("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank" },
-                React.createElement(Tag, { color: "processing" }, "templateItemProps"))),
-            description: '-',
+                React.createElement(CustomTag, { type: "link" }, "templateItemProps"))),
+            description: React.createElement(Image, { src: templateItemImage, width: 200, height: "auto" }),
         },
         {
             key: 'categoryListingProps',
             name: 'categoryListingProps',
             type: (React.createElement(LinkTo, { story: "category-listing-props" },
-                React.createElement(Tag, { color: "processing" }, "categoryListingProps"))),
-            description: '-',
+                React.createElement(CustomTag, { type: "link" }, "categoryListingProps"))),
+            description: React.createElement(Image, { src: categoryListingImage, width: 200, height: "auto" }),
         },
         {
             key: 'blankTemplateProps',
             name: 'blankTemplateProps',
             type: (React.createElement(LinkTo, { story: "blank-template-props" },
-                React.createElement(Tag, { color: "processing" }, "blankTemplateProps"))),
-            description: '-',
+                React.createElement(CustomTag, { type: "link" }, "blankTemplateProps"))),
+            description: React.createElement(Image, { src: blankTemplateImage, width: 200, height: "auto" }),
         },
         {
             key: 'previewModalProps',
             name: 'previewModalProps',
             type: (React.createElement("a", { href: "../?path=/docs/organisms-previewtemplatemodal--default", target: "_blank" },
-                React.createElement(Tag, { color: "processing" }, "previewModalProps"))),
-            description: '-',
+                React.createElement(CustomTag, { type: "link" }, "previewModalProps"))),
+            description: React.createElement(Image, { src: previewModalImage, width: 200, height: "auto" }),
         },
         {
             key: 'emptyProps',
             name: 'emptyProps',
             type: (React.createElement(LinkTo, { story: "empty-props" },
-                React.createElement(Tag, { color: "processing" }, "emptyProps"))),
-            description: '-',
+                React.createElement(CustomTag, { type: "link" }, "emptyProps"))),
+            description: React.createElement(Image, { src: emptyImage, width: 200, height: "auto" }),
         },
     ];
     return React.createElement(Table, { dataSource: dataSource, columns: columns, pagination: false });

package/es/components/template/TemplateListing/stories/dataTypes/components/EmptyPropsTable/index.js

@@ -2,9 +2,11 @@
 import React from 'react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Tag, Typography, Flex } from '../../../../../../atoms';
+import { Typography, Flex } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
 export const EmptyPropsTable = () => {
     const dataSource = [
         {
@@ -12,16 +14,16 @@ export const EmptyPropsTable = () => {
             property: 'icon',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "Customize Empty icon"))),
-            type: React.createElement(Tag, { color: "processing" }, "ReactNode"),
-            default: React.createElement(Tag, { bordered: false }, " - "),
+            type: React.createElement(CustomTag, { type: "normal" }, "ReactNode"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
         {
             key: '2',
             property: 'description',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "The text that is displayed below the Icon"))),
-            type: React.createElement(Tag, { color: "processing" }, "string"),
-            default: React.createElement(Tag, { bordered: false }, "No data"),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, "No data"),
         },
     ];
     return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });

package/es/components/template/TemplateListing/stories/dataTypes/components/TCategoryItemTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TCategoryItemTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/TCategoryItemTable/index.js

@@ -0,0 +1,46 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const TCategoryItemTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'TCategoryItemId',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Identification of Category Item"))),
+            type: React.createElement(CustomTag, { type: "link" }, "TCategoryItemId"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '2',
+            property: 'label',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Label of Category Item"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '3',
+            property: 'total',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Total child categories of it"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "number"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '4',
+            property: 'children',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Its children categories"))),
+            type: React.createElement(CustomTag, { type: "link" }, "TCategoryItem [ ]"),
+            default: React.createElement(CustomTag, { type: "default" }, " [ ] "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/TTemplateItemTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TTemplateItemTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/TTemplateItemTable/index.js

@@ -0,0 +1,38 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const TTemplateItemTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'id',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Identification of Template Item"))),
+            type: React.createElement(CustomTag, { type: "link" }, "TThumbnailCardId"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '2',
+            property: 'name',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Name of Template Item"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '3',
+            property: 'thumbnail',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Thumbnail image of Template Item"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/TemplatesPropsTable/index.js

@@ -1,11 +1,14 @@
 // Libraries
 import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
 // Components
 import { Table } from '../../../../../../organism';
 import { Tag, Typography, Flex } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
 import { LISTING_GAP_DEFAULT } from '../../../../constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
 export const TemplatesPropsTable = () => {
     const dataSource = [
         {
@@ -13,7 +16,8 @@ export const TemplatesPropsTable = () => {
             property: 'items',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "List of templates"))),
-            type: React.createElement(Tag, { color: "processing" }, "( TTemplateItem & T) [ ]"),
+            type: (React.createElement(LinkTo, { story: "t-template-item" },
+                React.createElement(CustomTag, { type: "link" }, "( TTemplateItem & T) [ ]"))),
             default: React.createElement(Tag, { bordered: false }, "[ ]"),
         },
         {
@@ -21,8 +25,8 @@ export const TemplatesPropsTable = () => {
             property: 'loading',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "Show loading template listing"))),
-            type: React.createElement(Tag, { color: "processing" }, "boolean"),
-            default: React.createElement(Tag, { bordered: false }, "false"),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
         },
         {
             key: '3',
@@ -30,16 +34,16 @@ export const TemplatesPropsTable = () => {
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "Spacing between template items"),
                 React.createElement(Typography.Text, null, "When the screen size changes, the height and width of each template will change according to the screen, but the gap remains the same."))),
-            type: React.createElement(Tag, { color: "processing" }, "number"),
-            default: React.createElement(Tag, { bordered: false }, LISTING_GAP_DEFAULT),
+            type: React.createElement(CustomTag, { type: "normal" }, "number"),
+            default: React.createElement(CustomTag, { type: "default" }, LISTING_GAP_DEFAULT),
         },
         {
             key: '4',
             property: 'onLoadMoreTemplates',
             description: (React.createElement(Flex, { gap: 10, vertical: true },
                 React.createElement(Typography.Text, null, "Handles loading additional data based on lazy loading mechanism"))),
-            type: React.createElement(Tag, { color: "processing" }, '( ) => void'),
-            default: React.createElement(Tag, { bordered: false }, '( ) => { }'),
+            type: React.createElement(CustomTag, { type: "normal" }, '( ) => void'),
+            default: React.createElement(CustomTag, { type: "default" }, '( ) => { }'),
         },
     ];
     return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });

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

@@ -3,3 +3,5 @@ export { TemplatesPropsTable } from './TemplatesPropsTable';
 export { CategoryListingPropsTable } from './CategoryListingPropsTable';
 export { BlankTemplatePropsTable } from './BlankTemplatePropsTable';
 export { EmptyPropsTable } from './EmptyPropsTable';
+export { TTemplateItemTable } from './TTemplateItemTable';
+export { TCategoryItemTable } from './TCategoryItemTable';

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

@@ -3,3 +3,5 @@ export { TemplatesPropsTable } from './TemplatesPropsTable';
 export { CategoryListingPropsTable } from './CategoryListingPropsTable';
 export { BlankTemplatePropsTable } from './BlankTemplatePropsTable';
 export { EmptyPropsTable } from './EmptyPropsTable';
+export { TTemplateItemTable } from './TTemplateItemTable';
+export { TCategoryItemTable } from './TCategoryItemTable';

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { MenuProps } from 'antd';
+import { EmptyProps } from './Empty';
 export type TCheckedCategories = Record<string | number, (string | number)[]>;
 export type TCategoryItemId = string | number;
 export interface CategoryListingProps extends MenuProps {
@@ -8,6 +9,7 @@ export interface CategoryListingProps extends MenuProps {
     loading?: boolean;
     show?: boolean;
     checkedCategories?: TCheckedCategories;
+    emptyProps?: EmptyProps;
     onMenuChange?: (value: TCheckedCategories) => void;
 }
 export type TMenuItem = Required<MenuProps>['items'][number];

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

@@ -7,7 +7,7 @@ import { EmptyProps } from './Empty';
 export interface TemplateListingProps<T = {}> {
     templatesProps?: TemplatesProps<T>;
     templateItemProps?: Omit<ThumbnailCardProps, 'id' | 'thumbnail'>;
-    categoryListingProps?: CategoryListingProps;
+    categoryListingProps?: Omit<CategoryListingProps, 'emptyProps'>;
     blankTemplateProps?: Omit<BlankTemplateProps, 'width' | 'height'>;
     emptyProps?: EmptyProps;
     previewModalProps?: PreviewTemplateModalProps;

package/es/queries/TemplateListing/index.js

@@ -8,13 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 // Libraries
-import { useInfiniteQuery, useMutation, useQuery, } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient, } from '@tanstack/react-query';
 import { omit } from 'lodash';
 // Services
 import { templateListingServices, } from '@antscorp/antsomi-ui/es/services/TemplateListing';
 // Constants
 import { QUERY_KEYS } from '../../constants/queries';
-import { queryClientAntsomiUI } from '../configs';
 const { category, objectTemplate } = templateListingServices;
 export const useGetTemplateCategoryList = (params) => {
     const { options, args } = params;
@@ -45,39 +44,43 @@ export const useValidateTemplateName = (params) => {
 };
 export const useBulkUpdateTemplate = (params) => {
     const { options } = params;
+    const queryClient = useQueryClient();
     return useMutation(Object.assign({ mutationFn: objectTemplate.bulkUpdate, onSettled() {
-            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
+            queryClient.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
                 exact: false,
             });
-            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
+            queryClient.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
                 exact: false,
             });
         } }, options));
 };
 export const useCreateTemplate = (params) => {
     const { options } = params;
+    const queryClient = useQueryClient();
     return useMutation(Object.assign({ mutationFn: objectTemplate.create, onSettled() {
-            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
+            queryClient.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
                 exact: false,
             });
-            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
+            queryClient.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
                 exact: false,
             });
         } }, options));
 };
 export const useUpdateTemplate = (params) => {
     const { options } = params;
+    const queryClient = useQueryClient();
     return useMutation(Object.assign({ mutationFn: objectTemplate.update, onSettled() {
-            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
+            queryClient.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
                 exact: false,
             });
-            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
+            queryClient.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
                 exact: false,
             });
         } }, options));
 };
 export const usePersistTemplate = (params) => {
     const { options } = params;
+    const queryClient = useQueryClient();
     return useMutation(Object.assign({ mutationFn: (args) => {
             const { persistType, params } = args;
             switch (persistType) {
@@ -88,14 +91,14 @@ export const usePersistTemplate = (params) => {
                     return objectTemplate.create(Object.assign(Object.assign({}, params), { data: omit(params.data, ['template_id']) }));
             }
         }, onSettled(data, error, variables) {
-            queryClientAntsomiUI.invalidateQueries([
+            queryClient.invalidateQueries([
                 QUERY_KEYS.GET_OBJECT_TEMPLATE_DETAIL,
                 variables.params.data.template_id,
             ]);
-            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
+            queryClient.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
                 exact: false,
             });
-            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
+            queryClient.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
                 exact: false,
             });
         } }, options));

package/es/utils/commonComponent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TagProps } from 'antd';
+interface CustomTagProps extends TagProps {
+    type: 'link' | 'normal' | 'default';
+}
+export declare const CustomTag: React.FC<CustomTagProps>;
+export {};

package/es/utils/commonComponent.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useMemo } from 'react';
+import { Tag } from '@antscorp/antsomi-ui/es/index';
+export const CustomTag = props => {
+    const { type, children } = props, restOfProps = __rest(props, ["type", "children"]);
+    const settings = useMemo(() => {
+        switch (type) {
+            case 'link':
+                return { color: 'processing', bordered: true };
+            case 'normal':
+                return { bordered: false };
+            default:
+                return { bordered: false };
+        }
+    }, [type]);
+    return (React.createElement(Tag, Object.assign({}, settings, restOfProps), children));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.64",
+  "version": "1.3.5-beta.66",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -59,6 +59,7 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@antscorp/antsomi-ui": "file:.yalc/@antscorp/antsomi-ui",
     "@antscorp/icons": "0.27.6",
     "@antscorp/image-editor": "1.0.2",
     "@emotion/react": "^11.11.1",