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

package/es/components/template/TemplateListing/hooks/useTemplateListing.js

@@ -0,0 +1,290 @@
+// Libraries
+import { useCallback, useMemo, useState } from 'react';
+import { App } from 'antd';
+import { isEmpty } from 'lodash';
+import { useGetTemplateCategoryList, useGetObjectTemplateList, useBulkUpdateTemplate, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+// Locales
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Hooks
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+// Constants
+import { CATEGORY_SPLIT_KEY, TEMPLATE_STATUS } from '@antscorp/antsomi-ui/es/constants';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import { getShuffleArray, random } from '@antscorp/antsomi-ui/es/utils';
+/**
+ * Custom React Hook for managing state and data fetching logic related to a template listing.
+ *
+ * @param {Object} options - The options object for configuring the hook.
+ * @param {PayloadInfo} options.service - Payload information for making API requests.
+ * @param {TTemplateListingConfig} options.config - Configuration options for the template listing.
+ *
+ * @returns {Object} - An object containing various properties and functions for template listing management.
+ *
+ * @property {TCategoryItem[]} categoryItems - An array of category items for rendering the template listing's category structure.
+ * @property {TTemplateItem[]} templateItems - An array of template items representing the templates available for the specified configuration.
+ * @property {string[]} openCategoryKeys - An array of keys representing the currently open category items in the template listing.
+ * @property {TCheckedCategories} checkedCategories - An object containing information about the checked categories in the template listing.
+ * @property {boolean} isLoading - A boolean indicating whether data is currently being loaded.
+ *
+ * @property {Function} onChangeCheckedCategories - A function to update the checked categories in the template listing.
+ * @param {TCheckedCategories} checkedCategories - An object containing information about the checked categories.
+ *
+ * @property {Function} onChangeOpenCategoryKeys - A function to update the open category keys in the template listing.
+ * @param {string[]} openKeys - An array of keys representing the currently open category items.
+ *
+ * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
+ */
+export const useTemplateListing = (options) => {
+    const { serviceAuth, config, checkedCategoriesDefault, templateListingSelector = '.template-listing', } = options;
+    const { objectType, categoryCodes, publicLevel, getListType, channel, limitListPerPage = 10, } = config;
+    const { message } = App.useApp();
+    // Locales
+    const { t } = i18nInstance;
+    // State
+    const [state, setState] = useState({
+        checkedCategories: {},
+        openCategoryKeys: [],
+        mockTemplateItems: Array.from({ length: limitListPerPage }).map(() => undefined),
+    });
+    const { checkedCategories, openCategoryKeys, mockTemplateItems, selectedTemplateId, selectTemplateAction, } = state;
+    const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
+        args: {
+            auth: serviceAuth,
+            params: {
+                objectTypes: [objectType],
+                categoryCodes,
+                channel,
+                publicLevel,
+                getListType,
+            },
+        },
+    });
+    const filter = useDeepCompareMemo(() => {
+        const draftFilter = Object.entries(checkedCategories)
+            .map(([key, value]) => {
+            const category = categoryList === null || categoryList === void 0 ? void 0 : categoryList.find(category => category.categoryCode === key);
+            if (category && !isEmpty(value)) {
+                return {
+                    [key.toUpperCase()]: {
+                        [category.filterOperator || 'matches_any']: value.map(item => +(item.toString().split(CATEGORY_SPLIT_KEY) || [])[1]),
+                    },
+                };
+            }
+            return {};
+        })
+            .filter(filter => !isEmpty(filter));
+        if (channel) {
+            draftFilter.push({
+                CHANNEL: {
+                    matches_any: [channel],
+                },
+            });
+        }
+        return draftFilter;
+    }, [checkedCategories, channel]);
+    // Variables
+    const getTemplateListParams = {
+        object_type: objectType,
+        public_level: publicLevel,
+        get_list_type: getListType,
+        limit: limitListPerPage,
+        filter: JSON.stringify(filter),
+    };
+    // Queries
+    const { data: infiniteObjectTemplate, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage, refetch: refetchTemplateList, } = useGetObjectTemplateList({
+        args: {
+            auth: serviceAuth,
+            params: getTemplateListParams,
+        },
+    });
+    const { mutateAsync: bulkUpdateTemplate } = useBulkUpdateTemplate({
+        options: {
+            onSuccess: () => {
+                message.success(t(translations.templateListing.removeSuccess));
+            },
+            onError: () => {
+                message.error(t(translations.templateListing.removeFailed));
+            },
+        },
+    });
+    // const {
+    //   data: templateDetail,
+    //   isLoading: isLoadingTemplateDetail = false,
+    //   refetch: refetchTemplateDetail,
+    // } = useGetObjectTemplateDetail({
+    //   args: {
+    //     params: {
+    //       template_id: selectedTemplateId || '',
+    //       object_type: objectType,
+    //       public_level: publicLevel,
+    //     },
+    //     auth: serviceAuth,
+    //   },
+    //   options: {
+    //     enabled: !!selectedTemplateId,
+    //   },
+    // });
+    // Variables
+    const isLoadingTemplateList = isFetching || isFetchingNextPage;
+    // Memo
+    const flatTemplateItems = useDeepCompareMemo(() => {
+        const { pages } = infiniteObjectTemplate || {};
+        return pages === null || pages === void 0 ? void 0 : pages.flatMap(({ entities }) => entities.flatMap(entity => entity.toJson()));
+    }, [infiniteObjectTemplate]);
+    const templateDetail = useDeepCompareMemo(() => {
+        if (infiniteObjectTemplate && selectedTemplateId) {
+            return infiniteObjectTemplate.pages
+                .flatMap(({ entities }) => entities.flat())
+                .find(objectTemplate => +objectTemplate.id === +selectedTemplateId);
+        }
+        return undefined;
+    }, [infiniteObjectTemplate, selectedTemplateId]);
+    const categoryItems = useDeepCompareMemo(() => {
+        const recursiveCategory = (categories = [], parentCategoryCode = '') => categories
+            .map(category => {
+            const { categoryCode, categoryId, categoryName, children, total } = category;
+            const key = Array.isArray(children) && children.length
+                ? categoryCode
+                : [parentCategoryCode, categoryId].join(CATEGORY_SPLIT_KEY);
+            return {
+                key,
+                label: categoryName,
+                total,
+                children: recursiveCategory(children || [], categoryCode),
+            };
+        })
+            .filter(category => {
+            // Filter category has no children and total template is 0
+            if (isEmpty(category.children) && !category.total) {
+                return false;
+            }
+            return true;
+        });
+        return recursiveCategory(categoryList || []);
+    }, [categoryList]);
+    const templateItems = useMemo(() => mockTemplateItems.map((_, index) => (flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems[index]) || { id: random(10) }) || [], [flatTemplateItems, mockTemplateItems]);
+    console.log({ templateItems });
+    const similarTemplates = useMemo(() => {
+        const maxSimilarTemplateLength = 4;
+        return (getShuffleArray(templateItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== selectedTemplateId)).slice(0, maxSimilarTemplateLength) || []);
+    }, [templateItems, selectedTemplateId]);
+    const previewTemplateCategories = useDeepCompareMemo(() => {
+        if ((categoryItems === null || categoryItems === void 0 ? void 0 : categoryItems.length) && !!templateDetail) {
+            /**
+             * Filter category items has value of object template
+             * and filter child items has value of object template
+             */
+            return categoryItems
+                .filter(item => {
+                const values = templateDetail.model[item.key];
+                return typeof values === 'object' ? !isEmpty(values) : !!values;
+            })
+                .map(item => {
+                var _a;
+                return (Object.assign(Object.assign({}, item), { children: (_a = item.children) === null || _a === void 0 ? void 0 : _a.filter(childItem => {
+                        let values = templateDetail.model[item.key];
+                        values = Array.isArray(values) ? values : [values];
+                        return values.includes(+`${childItem.key}`.split(CATEGORY_SPLIT_KEY)[1]);
+                    }) }));
+            });
+        }
+        return [];
+    }, [categoryItems, templateDetail]);
+    // Effects
+    /**
+     * This effect will check flatTemplateItems length from api is not equal mockTemplateItems length
+     * Then set MockTemplateItems length equal flatTemplateItems
+     */
+    useDeepCompareEffect(() => {
+        if (flatTemplateItems && (flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems.length) !== (mockTemplateItems === null || mockTemplateItems === void 0 ? void 0 : mockTemplateItems.length)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { mockTemplateItems: Array.from({ length: flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems.length }) })));
+        }
+    }, [flatTemplateItems]);
+    useDeepCompareEffect(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: (categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(({ categoryCode }) => categoryCode)) || [] })));
+    }, [categoryList]);
+    useDeepCompareEffect(() => {
+        if (!isEmpty(checkedCategoriesDefault)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { checkedCategories: Object.entries(checkedCategoriesDefault).reduce((acc, curr) => {
+                    const [key, value] = curr;
+                    acc[key] = value.map(item => [key, item].join(CATEGORY_SPLIT_KEY));
+                    return acc;
+                }, {}) || {} })));
+        }
+    }, [checkedCategoriesDefault]);
+    /**
+     * When publicLevel or getListType change
+     * Scroll template listing to top
+     */
+    useDeepCompareEffect(() => {
+        const templateListingEl = document.querySelector(templateListingSelector);
+        if (templateListingEl) {
+            templateListingEl.scrollTop = 0;
+        }
+    }, [getListType, publicLevel, objectType]);
+    // Handles
+    const onChangeCheckedCategories = (checkedCategories) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { checkedCategories })));
+    };
+    const onChangeOpenCategoryKeys = useCallback((openKeys) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: openKeys })));
+    }, []);
+    const onRemoveObjectTemplate = useCallback((id) => {
+        bulkUpdateTemplate({
+            auth: serviceAuth,
+            params: {
+                template_ids: [+id],
+                data: {
+                    status: TEMPLATE_STATUS.REMOVED,
+                },
+            },
+        });
+    }, [bulkUpdateTemplate, serviceAuth]);
+    const onLoadMore = useCallback(() => {
+        var _a;
+        const { pages } = infiniteObjectTemplate || {};
+        const totalTemplateItems = ((_a = pages === null || pages === void 0 ? void 0 : pages[0].meta) === null || _a === void 0 ? void 0 : _a.totalItems) || 0;
+        const newMockItemLength = Math.min(totalTemplateItems, mockTemplateItems.length + limitListPerPage);
+        // If there is no more data, return
+        if (newMockItemLength > totalTemplateItems)
+            return;
+        if (!isFetchingNextPage && hasNextPage) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { mockTemplateItems: Array.from({ length: newMockItemLength }) })));
+            fetchNextPage();
+        }
+    }, [
+        infiniteObjectTemplate,
+        mockTemplateItems.length,
+        limitListPerPage,
+        isFetchingNextPage,
+        hasNextPage,
+        fetchNextPage,
+    ]);
+    const onSelectTemplate = useCallback((id, action) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedTemplateId: id, selectTemplateAction: action })));
+    }, []);
+    return {
+        // MapKeys
+        categoryItems,
+        templateItems,
+        openCategoryKeys,
+        similarTemplates,
+        // Values
+        templateDetail,
+        checkedCategories,
+        selectTemplateAction,
+        previewTemplateCategories,
+        isLoadingCategoryList,
+        isLoadingTemplateList,
+        isLoadingTemplateDetail: false,
+        // Functions
+        refetchCategoryList,
+        refetchTemplateList,
+        onChangeCheckedCategories,
+        onChangeOpenCategoryKeys,
+        onRemoveObjectTemplate,
+        onLoadMore,
+        onSelectTemplate,
+        setState,
+    };
+};

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

@@ -1,22 +1,94 @@
+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;
+};
+/* eslint-disable react/function-component-definition */
 // Libraries
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
+// Config Providers
+import { AntdConfigProviderV2 } from '../../..';
 // Components
-import { CategoryListing, TemplateItem, BlankTemplate } from './components';
-import { Flex, Typography } from '../../atoms';
+import { CategoryListing, BlankTemplate, Empty } from './components';
+import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
+import { ThumbnailCard } from '@antscorp/antsomi-ui/es/components/molecules';
+import { PreviewTemplateModal } from '../../organism/PreviewTemplateModal';
 // Constants
-import { BLANK_TEMPLATE_DEFAULT, TEMPLATE_ITEM_DEFAULT, TEMPLATE_LISTING_DEFAULT, TEMPLATE_ITEM_HEIGHT, TEMPLATE_ITEM_WIDTH, CATEGORY_LISTING_DEFAULT, } from './constants';
+import { BLANK_TEMPLATE_DEFAULT, TEMPLATE_ITEM_DEFAULT, TEMPLATE_LISTING_DEFAULT, CATEGORY_LISTING_DEFAULT, EMPTY_DEFAULT, TEMPLATES_DEFAULT, LISTING_GAP_DEFAULT, } from './constants';
+import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH, } from '../../molecules/ThumbnailCard/constants';
 // Styled
-import { TemplateListingWrapper } from './styled';
+import { LoadMoreBlock, TemplateListingWrapper, TemplateWrapper } from './styled';
+// Hooks
+import { useIntersectionObserver, useListingItemResize } from '@antscorp/antsomi-ui/es/hooks';
 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)))))));
+    // Props
+    const { templatesProps = TEMPLATES_DEFAULT, templateItemProps = TEMPLATE_ITEM_DEFAULT, blankTemplateProps = BLANK_TEMPLATE_DEFAULT, categoryListingProps = CATEGORY_LISTING_DEFAULT, emptyProps = EMPTY_DEFAULT, previewModalProps, } = props;
+    // States
+    const [openPreviewModal, setOpenPreviewModal] = useState(false);
+    // Variables
+    const { header, footer, items = [], gap = LISTING_GAP_DEFAULT, loading = false, wrapperClassName, wrapperStyle, onLoadMoreTemplates = () => { }, } = templatesProps || {};
+    const _a = previewModalProps || {}, { onOk, onCancel } = _a, restOfPreviewModalProps = __rest(_a, ["onOk", "onCancel"]);
+    const _b = templateItemProps || {}, { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, previewBtnProps } = _b, restOfTemplateItemProps = __rest(_b, ["width", "height", "previewBtnProps"]);
+    const { onClick: onClickPreview } = previewBtnProps || {};
+    const isHasData = items.length > 0;
+    // Hooks
+    const { ref: containerRef, itemPerRow, ratio, gap: listingGap, } = useListingItemResize({
+        gap,
+        initialWidth: width || THUMBNAIL_CARD_DEFAULT_WIDTH,
+    });
+    const { ref: loadMoreRef } = useIntersectionObserver({
+        threshold: 0,
+        initialIsIntersecting: false,
+        onChange(isIntersecting) {
+            if (isIntersecting) {
+                onLoadMoreTemplates();
+            }
+        },
+    });
+    // Handlers
+    const handleClickThumbnailPreview = (id) => {
+        onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
+        setOpenPreviewModal(true);
+    };
+    const handleOkPreviewModal = (e) => {
+        onOk === null || onOk === void 0 ? void 0 : onOk(e);
+        setOpenPreviewModal(false);
+    };
+    const handleCancelPreviewModal = (e) => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
+        setOpenPreviewModal(false);
+    };
+    return (React.createElement(AntdConfigProviderV2, null,
+        React.createElement(TemplateListingWrapper, null,
+            React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
+            React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
+                header,
+                React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading template-listing__loading--full" },
+                    React.createElement("div", { className: "template-listing" },
+                        React.createElement("div", { ref: containerRef, style: {
+                                display: 'grid',
+                                gap: listingGap,
+                                gridTemplateColumns: `repeat(${itemPerRow}, minmax(0, 1fr))`,
+                            } },
+                            React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)), items === null || items === void 0 ? void 0 :
+                            items.map((item, index) => {
+                                const { id, name, thumbnail } = item || {};
+                                const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
+                                return (React.createElement("div", { key: id },
+                                    index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
+                                    React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, previewBtnProps: {
+                                            onClick: handleClickThumbnailPreview,
+                                        } }, restOfTemplateItemProps))));
+                            })),
+                        !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
+                footer),
+            React.createElement(PreviewTemplateModal, Object.assign({ open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps)))));
 });
 TemplateListing.displayName = 'TemplateListing';
 TemplateListing.defaultProps = TEMPLATE_LISTING_DEFAULT;

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

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

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

@@ -0,0 +1,42 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Typography } 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 = [
+        {
+            key: '1',
+            property: 'show',
+            description: React.createElement(Typography.Text, null, "Handler show or hide Blank Template"),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
+        },
+        {
+            key: '2',
+            property: 'description',
+            description: (React.createElement(Typography.Text, null, "The text that is displayed below the Add Button")),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, "Blank Template"),
+        },
+        {
+            key: '3',
+            property: 'onClick',
+            description: React.createElement(Typography.Text, null, "Callback onClick on Blank Template"),
+            type: React.createElement(CustomTag, { type: "normal" }, 'React.MouseEventHandler<HTMLElement>'),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '4',
+            property: 'blankTemplateRender',
+            description: React.createElement(Typography.Text, null, "Render Blank Template node for customizing"),
+            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.d.ts

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

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

@@ -0,0 +1,73 @@
+// Libraries
+import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Typography } 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 = [
+        {
+            key: '1',
+            property: 'items',
+            description: React.createElement(Typography.Text, null, "List of category items"),
+            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(Typography.Text, null, "Width of category"),
+            type: React.createElement(CustomTag, { type: "normal" }, "number"),
+            default: React.createElement(CustomTag, { type: "default" }, CATEGORY_LISTING_WITH),
+        },
+        {
+            key: '3',
+            property: 'loading',
+            description: React.createElement(Typography.Text, null, "Show loading category listing"),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
+        },
+        {
+            key: '4',
+            property: 'show',
+            description: React.createElement(Typography.Text, null, "Handler show or hide category"),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "true"),
+        },
+        {
+            key: '5',
+            property: 'checkedCategories',
+            description: React.createElement(Typography.Text, null, "Record of checked categories"),
+            type: React.createElement(CustomTag, { type: "link" }, "TCheckedCategories"),
+            default: React.createElement(CustomTag, { type: "default" }, '{ }'),
+        },
+        {
+            key: '6',
+            property: 'debounceChangeMenu',
+            description: React.createElement(Typography.Text, null, "Handle debounce onchange menu function"),
+            type: React.createElement(CustomTag, { type: "normal" }, "number"),
+            default: React.createElement(CustomTag, { type: "default" }, "500"),
+        },
+        {
+            key: '7',
+            property: 'header',
+            description: (React.createElement(Typography.Text, null, "Add custom React Component in to header of category listing")),
+            type: React.createElement(CustomTag, { type: "normal" }, "ReactNode"),
+            default: React.createElement(CustomTag, { type: "default" }, "-"),
+        },
+        {
+            key: '8',
+            property: 'onMenuChange',
+            description: React.createElement(Typography.Text, null, "Onchange menu function"),
+            type: React.createElement(CustomTag, { type: "normal" }, `(value: TCheckedCategories) => 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/DataTypeTables/index.d.ts

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

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

@@ -0,0 +1,78 @@
+// 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 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 = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: 'Type',
+            dataIndex: 'type',
+            key: 'type',
+        },
+        {
+            title: 'Description',
+            dataIndex: 'description',
+            key: 'description',
+        },
+    ];
+    const dataSource = [
+        {
+            key: 'templatesProps',
+            name: 'templatesProps',
+            type: (React.createElement(LinkTo, { story: "templates-props" },
+                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(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(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(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(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(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.d.ts

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

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

@@ -0,0 +1,28 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Typography } 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 = [
+        {
+            key: '1',
+            property: 'icon',
+            description: React.createElement(Typography.Text, null, "Customize Empty icon"),
+            type: React.createElement(CustomTag, { type: "normal" }, "ReactNode"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '2',
+            property: 'description',
+            description: React.createElement(Typography.Text, null, "The text that is displayed below the Icon"),
+            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;