@antscorp/antsomi-ui 1.3.5-beta.98 → 1.3.5-common.2

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

@@ -2,28 +2,29 @@
 import React, { memo } from 'react';
 import Icon from '@antscorp/icons';
 // Styled
-import { InformationWrapper } from './styled';
+import { CheckboxButton, InformationWrapper } from './styled';
 // Components
-import { Button, Radio, Typography, Flex } from '../../../../atoms';
+import { Button, Typography, Flex } from '../../../../atoms';
 // Constants
 import { DEVICE_TYPE } from '../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const Information = memo(props => {
-    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description = '', categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
+    var _a;
+    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description, categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
     return (React.createElement(InformationWrapper, { gap: 20, vertical: true },
         React.createElement("div", { style: { flexShrink: 0 }, className: "title" }, itemName),
-        React.createElement(Flex, { gap: 20, vertical: true, className: "content-information" },
-            React.createElement("div", null, description), categoryListing === null || categoryListing === void 0 ? void 0 :
-            categoryListing.map(({ key, label, children }) => (React.createElement("div", { key: key },
-                React.createElement("div", null,
-                    label,
-                    ":"),
-                React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', ')))))),
-        showDeviceRadios && (React.createElement(Radio.Group, { options: Object.values(DEVICE_TYPE).map(({ value, label, icon }) => ({
-                label: (React.createElement(Flex, { gap: 5, align: "center" },
-                    React.createElement(Icon, { type: icon }),
-                    label)),
-                value,
-            })), onChange: e => onDeviceTypeChange(e.target.value), value: deviceType, optionType: "button", style: { flexShrink: 0 } })),
-        React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
-            React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText))));
+        React.createElement(Flex, { gap: 15, vertical: true, className: "content-information" },
+            description && React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }, description), categoryListing === null || categoryListing === void 0 ? void 0 :
+            categoryListing.map(({ key, label, children }) => {
+                var _a;
+                return (React.createElement("div", { key: key },
+                    React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } },
+                        label,
+                        ":"),
+                    React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', '))));
+            })),
+        React.createElement(Flex, { gap: 20, style: { flexShrink: 0 }, vertical: true },
+            showDeviceRadios && (React.createElement(Flex, { align: "center", gap: 1 }, Object.values(DEVICE_TYPE).map(({ value, label, icon }) => (React.createElement(CheckboxButton, { key: value, icon: React.createElement(Icon, { type: icon }), block: true, "$active": deviceType === value, onClick: () => onDeviceTypeChange(value), type: "text" }, label))))),
+            React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
+                React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText)))));
 });

package/es/components/organism/PreviewTemplateModal/components/Information/styled.d.ts

@@ -1,2 +1,7 @@
 /// <reference types="react" />
 export declare const InformationWrapper: 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 CheckboxButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {
+    $active?: boolean | undefined;
+}, never>;

package/es/components/organism/PreviewTemplateModal/components/Information/styled.js

@@ -1,12 +1,15 @@
 // Libraries
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Components
-import { Flex } from '../../../../atoms';
+import { Button, Flex } from '../../../../atoms';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const InformationWrapper = styled(Flex) `
-  width: 350px;
+  width: 300px;
   flex-shrink: 0;
   font-size: 12px;
-  max-height: 762px;
+  height: 100%;
+  max-height: 100%;
 
   .title {
     font-size: 16px;
@@ -14,7 +17,12 @@ export const InformationWrapper = styled(Flex) `
     max-width: 100%;
     color: inherit;
     padding-right: 25px;
-    word-break: break-all;
+    word-break: break-word;
+
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
   }
 
   .antsomi-radio-group {
@@ -33,10 +41,21 @@ export const InformationWrapper = styled(Flex) `
         font-size: 24px;
       }
     }
+  }
 
-    .content-information {
-      flex: 1 1 0%;
-      overflow-y: auto;
-    }
+  .content-information {
+    flex: 1 1 0%;
+    height: fit-content;
+    overflow-y: auto;
+    max-height: 682px;
   }
 `;
+export const CheckboxButton = styled(Button) `
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText} !important;
+
+  ${p => p.$active &&
+    css `
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
+      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1} !important;
+    `}
+`;

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

@@ -10,14 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { isEmpty } from 'lodash';
 // Components
 import { ThumbnailCard } from '../../../../molecules';
-import { Empty } from '../../../../template/TemplateListing/components/Empty';
-import { Flex } from '../../../../atoms';
 // Styled
-import { SimilarTemplateWrapper } from './styled';
+import { SimilarTemplateWrapper, TemplateListWrapper } from './styled';
 // Constants
 import { SIMILAR_CARD_HEIGHT_DEFAULT, SIMILAR_CARD_WIDTH_DEFAULT } from '../../constants';
 const MAX_QUANTITY_TEMPLATES = 4;
@@ -25,8 +23,12 @@ export const SimilarTemplate = memo(props => {
     var _a;
     const { show = true, similarTemplates = [], similarCardProps } = 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 },
+    // Memo
+    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
+    return show && !isEmpty(similarTemplates) ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
         React.createElement("div", { className: "title" }, "Similar templates"),
-        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;
+        React.createElement(TemplateListWrapper, { templateQuantity: MAX_QUANTITY_TEMPLATES }, (_a = similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map((item, idx) => {
+            const { id, name, thumbnail } = item || {};
+            return (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card", thumbnailCacheValue: thumbnailCacheValue }, restOfSimilarCardProps)));
+        })))) : null;
 });

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
 export declare const SimilarTemplateWrapper: 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 TemplateListWrapper: import("styled-components").StyledComponent<"div", any, {
+    templateQuantity: number;
+}, never>;

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

@@ -2,11 +2,25 @@
 import styled from 'styled-components';
 // Components
 import { Flex } from '../../../../atoms';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const SimilarTemplateWrapper = styled(Flex) `
   margin-top: 15px;
 
   .title {
-    font-weight: 700;
+    font-weight: 400;
     font-size: 16px;
   }
 `;
+export const TemplateListWrapper = styled.div `
+  display: flex;
+  gap: 30px;
+
+  .thumbnail-card {
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    }
+  }
+`;

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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { memo, useMemo, useRef, useState } from 'react';
 import Icon from '@antscorp/icons';
-import { Swiper } from 'swiper/swiper-react';
+import { Swiper } from 'swiper/react';
 import 'swiper/swiper-bundle.css';
 import { Navigation, A11y, Thumbs } from 'swiper/modules';
 import { isEmpty } from 'lodash';
@@ -23,6 +23,7 @@ import { Button, Flex } from '../../../../atoms';
 import { ThumbnailCard } from '../../../../molecules';
 // Constants
 import { THUMBNAIL_HEIGHT_DEFAULT, THUMBNAIL_WIDTH_DEFAULT } from '../../constants';
+import classNames from 'classnames';
 /** Max width of list thumbnail's wrapper, it is used to show swiper if the width is greater than 990 */
 const WRAPPER_WIDTH = 990;
 const GAP_X = 10;
@@ -30,7 +31,7 @@ const ICON_SIZE = 24;
 export const ThumbnailSlider = memo(props => {
     const { thumbnails, width = THUMBNAIL_WIDTH_DEFAULT, height = THUMBNAIL_HEIGHT_DEFAULT, onClickThumbnail } = props, restOfThumbnailProps = __rest(props, ["thumbnails", "width", "height", "onClickThumbnail"]);
     //  States
-    const [isSlideBeginning, setSlideBeginning] = useState(false);
+    const [isSlideBeginning, setSlideBeginning] = useState(true);
     const [isSlideEnd, setSlideEnd] = useState(false);
     // Refs
     const navigationPrevRef = useRef(null);
@@ -43,6 +44,7 @@ export const ThumbnailSlider = memo(props => {
         const calculate = ((thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) || 0) * thumbnailWrapperWidth;
         return calculate > WRAPPER_WIDTH;
     }, [thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length, thumbnailWrapperWidth]);
+    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
     // Renders
     const renderThumbnail = (args) => {
         const { thumbnail, index } = args;
@@ -50,7 +52,7 @@ export const ThumbnailSlider = memo(props => {
         return (React.createElement(Flex, { gap: GAP_X },
             !!index && (React.createElement(Flex, { align: "center" },
                 React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: ICON_SIZE, transform: 'rotate(270deg)' } }))),
-            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, style: { flexShrink: 0 }, actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
+            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, thumbnailCacheValue: thumbnailCacheValue, style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
     };
     return thumbnails && !isEmpty(thumbnails) ? (React.createElement(ThumbnailSliderWrapper, null, isShowSwiper ? (React.createElement(React.Fragment, null,
         React.createElement(Swiper, { slidesPerView: Math.floor(WRAPPER_WIDTH / thumbnailWrapperWidth), spaceBetween: GAP_X, modules: [Navigation, A11y, Thumbs], navigation: {
@@ -59,19 +61,21 @@ export const ThumbnailSlider = memo(props => {
             }, onBeforeInit: swiper => {
                 setTimeout(() => {
                     // Override prevEl & nextEl now that refs are defined
-                    swiper.params.navigation.prevEl = navigationPrevRef.current;
-                    swiper.params.navigation.nextEl = navigationNextRef.current;
-                    // Re-init navigation
-                    swiper.navigation.destroy();
-                    swiper.navigation.init();
-                    swiper.navigation.update();
+                    if (swiper.params.navigation && typeof swiper.params.navigation !== 'boolean') {
+                        swiper.params.navigation.prevEl = navigationPrevRef.current;
+                        swiper.params.navigation.nextEl = navigationNextRef.current;
+                        // Re-init navigation
+                        swiper.navigation.destroy();
+                        swiper.navigation.init();
+                        swiper.navigation.update();
+                    }
                 });
             }, onSlideChange: ({ isBeginning, isEnd }) => {
                 setSlideBeginning(isBeginning);
                 setSlideEnd(isEnd);
             } }, thumbnails.map((thumbnail, index) => (React.createElement(SwiperSlideWrapper, { key: `slide-${thumbnail.id}` }, renderThumbnail({ thumbnail, index }))))),
-        React.createElement(Button, { ref: navigationPrevRef, className: "custom-button-prev", disabled: isSlideBeginning },
+        React.createElement(Button, { ref: navigationPrevRef, className: classNames({ 'custom-button-prev': true, hidden: isSlideBeginning }) },
             React.createElement(Icon, { type: "icon-ants-expand-more" })),
-        React.createElement(Button, { ref: navigationNextRef, className: "custom-button-next", disabled: isSlideEnd },
+        React.createElement(Button, { ref: navigationNextRef, className: classNames({ 'custom-button-next': true, hidden: isSlideEnd }) },
             React.createElement(Icon, { type: "icon-ants-expand-more" })))) : (React.createElement(Flex, { gap: GAP_X, style: { width: 'fit-content' } }, thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.map((thumbnail, index) => (React.createElement(React.Fragment, { key: thumbnail.id }, renderThumbnail({ thumbnail, index })))))))) : null;
 });

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/styled.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 export declare const ThumbnailSliderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SwiperSlideWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("swiper/swiper-react").SwiperSlideProps>, any, {}, never>;
+export declare const SwiperSlideWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("swiper/react").SwiperSlideProps>, any, {}, never>;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/styled.js

@@ -1,7 +1,8 @@
 var _a;
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-import { SwiperSlide } from 'swiper/swiper-react';
+import { SwiperSlide } from 'swiper/react';
+// Constants
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ThumbnailSliderWrapper = styled.div `
   width: 100%;
   display: flex;
@@ -11,11 +12,26 @@ export const ThumbnailSliderWrapper = styled.div `
 
   .swiper {
     max-width: 1030px;
+
     .swiper-slide {
       width: fit-content !important;
     }
   }
 
+  .thumbnail-animation {
+    box-shadow: none;
+    transition: box-shadow 0.1s ease-in-out;
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    }
+
+    &:hover {
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
   .custom-button-prev,
   .custom-button-next {
     z-index: 10;
@@ -48,6 +64,10 @@ export const ThumbnailSliderWrapper = styled.div `
     transform: rotate(-90deg);
   }
 
+  .hidden {
+    display: none !important;
+  }
+
   i {
     font-size: 20px;
     color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};

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

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
+import { isNil } from 'lodash';
 // Components
 import { Flex, Spin } from '../../atoms';
 import { Banner, Information, SimilarTemplate, ThumbnailSlider } from './components';
@@ -22,6 +23,11 @@ export const PreviewTemplateModal = memo(props => {
     const { bannerProps, thumbnailProps = THUMBNAIL_DEFAULT, similarTemplateProps = SIMILAR_TEMPLATE_DEFAULT, informationProps, loading = false } = props, restOfProps = __rest(props, ["bannerProps", "thumbnailProps", "similarTemplateProps", "informationProps", "loading"]);
     // States
     const [deviceType, setDeviceType] = useState(DEVICE_TYPE.DESKTOP.value);
+    useEffect(() => {
+        if (!isNil(bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.deviceType)) {
+            setDeviceType(bannerProps.deviceType);
+        }
+    }, [bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.deviceType]);
     return (React.createElement(ModalContainer, Object.assign({ footer: null, centered: true, modalRender: node => React.createElement(ModalWrapper, null, node) }, restOfProps),
         React.createElement(Spin, { spinning: loading },
             React.createElement(Flex, { gap: 20 },

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

@@ -0,0 +1,38 @@
+declare namespace _default {
+    let title: string;
+}
+export default _default;
+export namespace DataTypes {
+    function render(): import("react").JSX.Element;
+    let name: string;
+}
+export namespace BannerProps {
+    export function render_1(): import("react").JSX.Element;
+    export { render_1 as render };
+    let name_1: string;
+    export { name_1 as name };
+}
+export namespace InformationProps {
+    export function render_2(): import("react").JSX.Element;
+    export { render_2 as render };
+    let name_2: string;
+    export { name_2 as name };
+}
+export namespace SimilarTemplateProps {
+    export function render_3(): import("react").JSX.Element;
+    export { render_3 as render };
+    let name_3: string;
+    export { name_3 as name };
+}
+export namespace ThumbnailProps {
+    export function render_4(): import("react").JSX.Element;
+    export { render_4 as render };
+    let name_4: string;
+    export { name_4 as name };
+}
+export namespace TThumbnail {
+    export function render_5(): import("react").JSX.Element;
+    export { render_5 as render };
+    let name_5: string;
+    export { name_5 as name };
+}

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

@@ -0,0 +1,30 @@
+import LinkTo from '@storybook/addon-links/react';
+import { Button, Tag, Table } from '@antscorp/antsomi-ui/es/index';
+import { DataTypeTable, BannerPropsTable, InformationPropsTable, SimilarTemplatePropsTable, ThumbnailPropsTable, TThumbnailTable, } from './components';
+export default {
+    title: 'Organisms/PreviewTemplateModal/DataType',
+};
+export const DataTypes = {
+    render: () => React.createElement(DataTypeTable, null),
+    name: 'DataTypes',
+};
+export const BannerProps = {
+    render: () => React.createElement(BannerPropsTable, null),
+    name: 'BannerProps',
+};
+export const InformationProps = {
+    render: () => React.createElement(InformationPropsTable, null),
+    name: 'InformationProps',
+};
+export const SimilarTemplateProps = {
+    render: () => React.createElement(SimilarTemplatePropsTable, null),
+    name: 'SimilarTemplateProps',
+};
+export const ThumbnailProps = {
+    render: () => React.createElement(ThumbnailPropsTable, null),
+    name: 'ThumbnailProps',
+};
+export const TThumbnail = {
+    render: () => React.createElement(TThumbnailTable, null),
+    name: 'TThumbnail',
+};

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const ModalContainer: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../../molecules/Modal/styled").CustomModalProps, any>;
+export declare const ModalContainer: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const ModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ImageWrapper: import("styled-components").StyledComponent<"img", any, {}, never>;

package/es/components/organism/PreviewTemplateModal/styled.js

@@ -5,7 +5,7 @@ export const ModalContainer = styled(Modal) `
     width: fit-content !important;
 
     .antsomi-modal-content {
-      width: 1440px;
+      width: 1400px;
       height: auto;
     }
   }

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

@@ -7,24 +7,25 @@ export type TThumbnail = {
     url: string;
 };
 export interface PreviewTemplateModalProps extends ModalProps {
-    bannerProps?: Omit<BannerProps, 'deviceType'>;
+    bannerProps?: BannerProps;
     thumbnailProps?: ThumbnailProps;
     similarTemplateProps?: SimilarTemplateProps;
     informationProps?: Omit<InformationProps, 'deviceType' | 'onDeviceTypeChange'>;
 }
-export interface BannerProps {
-    deviceType: InformationProps['deviceType'];
+export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    deviceType?: InformationProps['deviceType'];
     showSkeleton?: boolean;
+    height?: number;
     children?: React.ReactNode;
 }
-export type ThumbnailProps = Omit<ThumbnailCardProps, keyof TTemplateItem | 'onClickWrapper'> & {
+export type ThumbnailProps = Omit<ThumbnailCardProps, 'id' | 'name' | 'thumbnail' | 'onClickWrapper'> & {
     thumbnails?: TThumbnail[];
     onClickThumbnail?: (value: TThumbnail) => void;
 };
 export interface SimilarTemplateProps {
     show?: boolean;
-    similarTemplates?: TTemplateItem[];
-    similarCardProps?: Omit<ThumbnailCardProps, keyof TTemplateItem>;
+    similarTemplates?: (TTemplateItem | undefined)[];
+    similarCardProps?: Omit<ThumbnailCardProps, 'id' | 'name' | 'thumbnail'>;
 }
 export interface InformationProps {
     deviceType: string;

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

@@ -1,5 +1,11 @@
 export { Help } from './Help';
 export { Menu } from './Menu';
+export { Notification, type NotificationProps } from './Notification';
+export { AccountSharing, type AccountSharingProps } from './AccountSharing';
 export { PositionSetting, PositionSettingPopover } from './PositionSetting';
 export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table';
 export { GenerativeInsights } from './GenerativeInsights';
+export { default as ContentSources } from './ContentSources';
+export { LeftMenu, type LeftMenuProps } from './LeftMenu';
+export * from './ContentSources/provider';
+export * from './DataTable';

package/es/components/organism/index.js

@@ -1,5 +1,11 @@
 export { Help } from './Help';
 export { Menu } from './Menu';
+export { Notification } from './Notification';
+export { AccountSharing } from './AccountSharing';
 export { PositionSetting, PositionSettingPopover } from './PositionSetting';
 export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table';
 export { GenerativeInsights } from './GenerativeInsights';
+export { default as ContentSources } from './ContentSources';
+export { LeftMenu } from './LeftMenu';
+export * from './ContentSources/provider';
+export * from './DataTable';

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

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from 'react';
+import { LeftMenuProps } from '../../organism';
+import { HeaderV2Props } from '../../molecules';
+import '@antscorp/processing-notification/dist/index.css';
+import { ProcessingNotificationProps } from '@antscorp/antsomi-ui/es/types';
+interface LayoutProps {
+    headerProps?: Partial<Omit<HeaderV2Props, 'helpConfig'> & {
+        helpConfig: Partial<HeaderV2Props['helpConfig']>;
+    }>;
+    leftMenuProps?: LeftMenuProps;
+    processingNotificationProps?: Partial<ProcessingNotificationProps>;
+    workspaceProps?: React.HTMLAttributes<HTMLDivElement> & {
+        workspaceContentProps?: React.HTMLAttributes<HTMLDivElement>;
+    };
+    onActiveMenuChange?: (menuActive?: string) => void;
+}
+export declare const Layout: React.FC<PropsWithChildren<LayoutProps>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ants-processing-notification': any;
+        }
+    }
+}
+export {};