@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

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

@@ -12,6 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 /* eslint-disable react/function-component-definition */
 // Libraries
 import React, { memo, useState } from 'react';
+// Config Providers
+import { AntdConfigProviderV2 } from '../../..';
 // Components
 import { CategoryListing, BlankTemplate, Empty } from './components';
 import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -21,7 +23,7 @@ import { PreviewTemplateModal } from '../../organism/PreviewTemplateModal';
 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 { LoadMoreBlock, TemplateListingWrapper } from './styled';
+import { LoadMoreBlock, TemplateListingWrapper, TemplateWrapper } from './styled';
 // Hooks
 import { useIntersectionObserver, useListingItemResize } from '@antscorp/antsomi-ui/es/hooks';
 export const TemplateListing = memo(props => {
@@ -30,10 +32,10 @@ export const TemplateListing = memo(props => {
     // States
     const [openPreviewModal, setOpenPreviewModal] = useState(false);
     // Variables
-    const { items = [], gap = LISTING_GAP_DEFAULT, loading = false, onLoadMoreTemplates = () => { }, } = templatesProps || {};
-    const _a = previewModalProps || {}, { informationProps, onOk, onCancel } = _a, restOfPreviewModalProps = __rest(_a, ["informationProps", "onOk", "onCancel"]);
-    const _b = informationProps || {}, { onButtonClick } = _b, restOfPreviewModalInfoProps = __rest(_b, ["onButtonClick"]);
-    const _c = templateItemProps || {}, { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, onClickPreview } = _c, restOfTemplateItemProps = __rest(_c, ["width", "height", "onClickPreview"]);
+    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({
@@ -62,25 +64,32 @@ export const TemplateListing = memo(props => {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
         setOpenPreviewModal(false);
     };
-    const handleClickPreviewModalInfoBtn = e => {
-        onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(e);
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
-    };
-    return (React.createElement(TemplateListingWrapper, null,
-        React.createElement(CategoryListing, Object.assign({}, categoryListingProps)),
-        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(({ id, name, thumbnail }, index) => (React.createElement("div", { key: id },
-                        React.createElement(ThumbnailCard, Object.assign({ id: id, name: name, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `animate__animated animate__fadeIn ${templateItemProps.className}`, onClickPreview: handleClickThumbnailPreview }, restOfTemplateItemProps)),
-                        index === items.length - 1 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }))))),
-                !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
-        React.createElement(PreviewTemplateModal, Object.assign({ informationProps: Object.assign({ onButtonClick: handleClickPreviewModalInfoBtn }, restOfPreviewModalInfoProps), open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps))));
+    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 || !itemPerRow, 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)),
+                            !!itemPerRow &&
+                                (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;

package/es/components/template/TemplateListing/stories/dataTypes/components/TCategoryItemTable/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 TCategoryItemTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'TCategoryItemId',
+            description: 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(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(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(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,35 @@
+// 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 TTemplateItemTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'id',
+            description: 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(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(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.d.ts

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

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

@@ -0,0 +1,54 @@
+// Libraries
+import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Tag, Typography } 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 = [
+        {
+            key: '1',
+            property: 'items',
+            description: React.createElement(Typography.Text, null, "List of templates"),
+            type: (React.createElement(LinkTo, { story: "t-template-item" },
+                React.createElement(CustomTag, { type: "link" }, "( TTemplateItem & T) [ ]"))),
+            default: React.createElement(Tag, { bordered: false }, "[ ]"),
+        },
+        {
+            key: '2',
+            property: 'loading',
+            description: React.createElement(Typography.Text, null, "Show loading template listing"),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
+        },
+        {
+            key: '3',
+            property: 'gap',
+            description: (React.createElement(React.Fragment, null,
+                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(CustomTag, { type: "normal" }, "number"),
+            default: React.createElement(CustomTag, { type: "default" }, LISTING_GAP_DEFAULT),
+        },
+        {
+            key: '4',
+            property: 'onLoadMoreTemplates',
+            description: (React.createElement(Typography.Text, null, "Handles loading additional data based on lazy loading mechanism")),
+            type: React.createElement(CustomTag, { type: "normal" }, '( ) => void'),
+            default: React.createElement(CustomTag, { type: "default" }, '( ) => { }'),
+        },
+        {
+            key: '5',
+            property: 'header',
+            description: (React.createElement(Typography.Text, null, "Add custom React Component in to header of template listing")),
+            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/template/TemplateListing/stories/dataTypes/components/index.d.ts

@@ -0,0 +1,7 @@
+export { DataTypeTable } from './DataTypeTables';
+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

@@ -0,0 +1,7 @@
+export { DataTypeTable } from './DataTypeTables';
+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/dataType.stories.d.ts

@@ -0,0 +1,44 @@
+declare namespace _default {
+    let title: string;
+}
+export default _default;
+export namespace DataTypes {
+    function render(): import("react").JSX.Element;
+    let name: string;
+}
+export namespace TemplatesProps {
+    export function render_1(): import("react").JSX.Element;
+    export { render_1 as render };
+    let name_1: string;
+    export { name_1 as name };
+}
+export namespace CategoryListingProps {
+    export function render_2(): import("react").JSX.Element;
+    export { render_2 as render };
+    let name_2: string;
+    export { name_2 as name };
+}
+export namespace BlankTemplateProps {
+    export function render_3(): import("react").JSX.Element;
+    export { render_3 as render };
+    let name_3: string;
+    export { name_3 as name };
+}
+export namespace EmptyProps {
+    export function render_4(): import("react").JSX.Element;
+    export { render_4 as render };
+    let name_4: string;
+    export { name_4 as name };
+}
+export namespace TTemplateItem {
+    export function render_5(): import("react").JSX.Element;
+    export { render_5 as render };
+    let name_5: string;
+    export { name_5 as name };
+}
+export namespace TCategoryItem {
+    export function render_6(): import("react").JSX.Element;
+    export { render_6 as render };
+    let name_6: string;
+    export { name_6 as name };
+}

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

@@ -0,0 +1,34 @@
+import LinkTo from '@storybook/addon-links/react';
+import { Button, Tag, Table } from '@antscorp/antsomi-ui/es/index';
+import { DataTypeTable, TemplatesPropsTable, CategoryListingPropsTable, BlankTemplatePropsTable, EmptyPropsTable, TTemplateItemTable, TCategoryItemTable, } from './components';
+export default {
+    title: 'Templates/TemplateListing/DataType',
+};
+export const DataTypes = {
+    render: () => React.createElement(DataTypeTable, null),
+    name: 'DataTypes',
+};
+export const TemplatesProps = {
+    render: () => React.createElement(TemplatesPropsTable, null),
+    name: 'TemplatesProps',
+};
+export const CategoryListingProps = {
+    render: () => React.createElement(CategoryListingPropsTable, null),
+    name: 'CategoryListingProps',
+};
+export const BlankTemplateProps = {
+    render: () => React.createElement(BlankTemplatePropsTable, null),
+    name: 'BlankTemplateProps',
+};
+export const EmptyProps = {
+    render: () => React.createElement(EmptyPropsTable, null),
+    name: 'EmptyProps',
+};
+export const TTemplateItem = {
+    render: () => React.createElement(TTemplateItemTable, null),
+    name: 'TTemplateItem',
+};
+export const TCategoryItem = {
+    render: () => React.createElement(TCategoryItemTable, null),
+    name: 'TCategoryItem',
+};

package/es/components/template/TemplateListing/stories/demo/styled.d.ts

@@ -0,0 +1 @@
+export declare const ImageWrapper: import("styled-components").StyledComponent<"img", any, {}, never>;

package/es/components/template/TemplateListing/stories/demo/styled.js

@@ -0,0 +1,7 @@
+// Libraries
+import styled from 'styled-components';
+export const ImageWrapper = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;

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

@@ -1,4 +1,4 @@
 /// <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>;
+export declare const TemplateWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LoadMoreBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageWrapper: import("styled-components").StyledComponent<"img", any, {}, never>;

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

@@ -7,6 +7,7 @@ export const TemplateListingWrapper = styled(Flex) `
   height: 100%;
 
   .template-listing {
+    width: 100%;
     flex: 1 1 0%;
     height: 100%;
     max-height: 100%;
@@ -32,9 +33,10 @@ export const TemplateListingWrapper = styled(Flex) `
     }
   }
 `;
-export const LoadMoreBlock = styled.div ``;
-export const ImageWrapper = styled.img `
+export const TemplateWrapper = styled.div `
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  display: flex;
+  flex-direction: column;
 `;
+export const LoadMoreBlock = styled.div ``;

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 export interface BlankTemplateProps {
+    show?: boolean;
     width?: number;
     height?: number;
-    show?: boolean;
     description?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
     blankTemplateRender?: (node: ReactNode) => ReactNode;