@antscorp/antsomi-ui 1.3.5-beta.13 → 1.3.5-beta.15

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -30,7 +30,7 @@ import { Button, Flex, Typography } from '../../atoms';
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
 export const ThumbnailCard = memo(props => {
     const [modal, contextHolder] = Modal.useModal();
-    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, editText = 'Edit thumbnail', previewText = 'Preview', removeModalProps, onClickEdit, onClickPreview, onClickWrapper, } = props;
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, editText = 'Edit thumbnail', previewText = 'Preview', removeModalProps, onClickEdit, onClickPreview, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "editText", "previewText", "removeModalProps", "onClickEdit", "onClickPreview", "onClickWrapper"]);
     const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
     // Handlers
     const handleClickEdit = e => {
@@ -54,7 +54,7 @@ export const ThumbnailCard = memo(props => {
         e.stopPropagation();
         onClickWrapper === null || onClickWrapper === void 0 ? void 0 : onClickWrapper(id);
     };
-    return (React.createElement(Flex, { gap: 10, vertical: true, style: { width } },
+    return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
         React.createElement(ThumbnailCardWrapper, { style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
             React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: thumbnail, alt: "" })),
             actionAvailable && (React.createElement(React.Fragment, null,

package/es/components/molecules/ThumbnailCard/types.d.ts

@@ -1,9 +1,10 @@
 import { ModalFuncProps } from 'antd';
+import { HTMLAttributes } from 'react';
 export type TThumbnailCardId = string | number;
 export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
     onOk?: (id: TThumbnailCardId) => void;
 };
-export interface ThumbnailCardProps {
+export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
     id: TThumbnailCardId;
     name?: string;
     width?: number;

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

@@ -35,6 +35,7 @@ export { Form } from './Form';
 export { ResizeGrid } from './ResizeGrid';
 export * from './RichMenu';
 export { ModalV2 } from './ModalV2';
+export { TemplateSaveAs, TemplateSaveAsModal } from './TemplateSaveAs';
 export * from './PreviewModal';
 export * from './Drawer';
 export { EditorScript } from './EditorScript';
@@ -46,3 +47,4 @@ export type { TFontSettingProps, TFontSettingEditProps } from './FontSetting';
 export type { IResizeGridProps, TCell, TGrid } from './ResizeGrid';
 export type { ModalProps } from './ModalV2';
 export type { ThumbnailCardProps } from './ThumbnailCard';
+export type { TemplateValueOptions } from './TemplateSaveAs';

package/es/components/molecules/index.js

@@ -35,6 +35,7 @@ export { Form } from './Form';
 export { ResizeGrid } from './ResizeGrid';
 export * from './RichMenu';
 export { ModalV2 } from './ModalV2';
+export { TemplateSaveAs, TemplateSaveAsModal } from './TemplateSaveAs';
 export * from './PreviewModal';
 export * from './Drawer';
 export { EditorScript } from './EditorScript';

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

@@ -1 +1,2 @@
-export { Menu } from 'antd';
+import AntdMenu from 'antd/es/menu';
+export default AntdMenu;

package/es/components/organism/Menu/Menu.js

@@ -1 +1,3 @@
-export { Menu } from 'antd';
+// export { Menu as AntdMenu } from 'antd';
+import AntdMenu from 'antd/es/menu';
+export default AntdMenu;

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

@@ -1 +1 @@
-export declare const Menu: any;
+export { default as Menu } from './Menu';

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

@@ -1,3 +1,3 @@
-import { Menu as AntdMenu } from './Menu';
-// TODO: Fix generic component
-export const Menu = AntdMenu;
+// import { Menu as AntdMenu } from './Menu';
+// export const Menu = AntdMenu;
+export { default as Menu } from './Menu';

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface BannerProps {
+    deviceType: string;
+    image?: string;
+}
+export declare const Banner: React.FC<BannerProps>;

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

@@ -0,0 +1,12 @@
+// Libraries
+import React, { memo } from 'react';
+// Styled
+import { BannerWrapper } from './styled';
+export const Banner = memo(props => {
+    const { deviceType, image } = props;
+    return (React.createElement(BannerWrapper, { deviceType: deviceType },
+        React.createElement("div", { className: "device-type" },
+            React.createElement("div", { className: "device-type__wrapper" },
+                React.createElement("div", { className: "image-wrapper" }, image && React.createElement("img", { src: image, alt: "" })),
+                React.createElement("div", { className: "backdrop" })))));
+});

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

@@ -0,0 +1,3 @@
+export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {
+    deviceType: string;
+}, never>;

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

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+// Images
+import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
+import MobileFrame from '../../../../../assets/svg/mobile-frame.svg';
+// Constants
+import { DEVICE_TYPE } from '../../constants';
+const THUMBNAIL_CARD_RADIUS = 5;
+const { MOBILE } = DEVICE_TYPE;
+export const BannerWrapper = styled.div `
+  width: 100%;
+  height: 762px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .device-type {
+    position: relative;
+    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+
+    ${p => {
+    switch (p.deviceType) {
+        case MOBILE.value:
+            return `
+          width: 416.004px;
+          height: 713px;      
+          z-index: 20;
+          background: url(${MobileFrame}) no-repeat center center;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          .device-type__wrapper {
+            width: 391px;
+            left: 11px;    
+            height: 661px;
+            top: 11px;    
+            position: absolute;
+            z-index: 1;
+            border-radius: 19px 19px 19px 21px / 21px 21px 21px 21px;
+
+            .image-wrapper {
+              border-radius: 19px 19px 19px 21px / 21px 21px 21px 21px;
+
+              img {
+                border-radius: 19px 19px 19px 21px / 21px 21px 21px 21px;
+              }
+            }
+          }
+          `;
+        default:
+            return `
+          width: 100%;
+          height: 100%;
+          .device-type__wrapper {
+            width: 100%;
+            height: 100%;
+            background: center / cover no-repeat url(${skeletonBackground});
+          }
+
+          .backdrop {
+            border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: black;
+            opacity: 0.5;
+            z-index: 10;
+            top: 0;
+            left: 0;
+          }
+          `;
+    }
+}}
+
+    .image-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 12;
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+`;

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

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

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

@@ -0,0 +1,29 @@
+// Libraries
+import React, { memo } from 'react';
+import Icon from '@antscorp/icons';
+// Styled
+import { InformationWrapper } from './styled';
+// Components
+import { Button, Radio, Typography, Flex } from '../../../../atoms';
+// Constants
+import { DEVICE_TYPE } from '../../constants';
+export const Information = memo(props => {
+    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description = 'Description show here', categoryListing, showDeviceRadios = true, buttonClick, onDeviceTypeChange, } = props;
+    return (React.createElement(InformationWrapper, { gap: 20, vertical: true },
+        React.createElement("div", null,
+            React.createElement(Typography.Text, { ellipsis: { tooltip: itemName }, className: "title" }, itemName)),
+        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 },
+                    React.createElement(Icon, { type: icon, style: { fontSize: 24, marginTop: 3 } }),
+                    label)),
+                value,
+            })), onChange: e => onDeviceTypeChange(e.target.value), value: deviceType, optionType: "button" })),
+        React.createElement(Button, { type: "primary", style: { width: '100%' }, onClick: buttonClick },
+            React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText))));
+});

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

@@ -0,0 +1,2 @@
+/// <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>;

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

@@ -0,0 +1,30 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '../../../../atoms';
+export const InformationWrapper = styled(Flex) `
+  width: 350px;
+  flex-shrink: 0;
+  font-size: 12px;
+
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    max-width: 100%;
+    color: inherit;
+    padding-right: 20px;
+  }
+
+  .antsomi-radio-group {
+    width: 100%;
+    display: flex;
+
+    .antsomi-radio-button-wrapper {
+      flex: 1 1 0%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 30px;
+    }
+  }
+`;

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

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

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

@@ -0,0 +1,14 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ThumbnailCard } from '../../../../molecules';
+// Styled
+import { CardListWrapper, SimilarTemplateWrapper } from './styled';
+const MAX_QUANTITY_TEMPLATES = 4;
+export const SimilarTemplate = memo(props => {
+    var _a;
+    const { show = true, similarTemplates, similarCardProps } = props;
+    return show ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
+        React.createElement("div", { className: "title" }, "Similar templates"),
+        React.createElement(CardListWrapper, { gap: 30 }, (_a = similarTemplates === null || similarTemplates === void 0 ? void 0 : similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, thumbnail: thumbnail, actionAvailable: false }, similarCardProps))))))) : null;
+});

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

@@ -0,0 +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 CardListWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    $cardWidth?: number | undefined;
+}, never>;

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

@@ -0,0 +1,22 @@
+// Libraries
+import styled from 'styled-components';
+import { isNumber } from 'lodash';
+// Components
+import { Flex } from '../../../../atoms';
+// Constants
+import { THUMBNAIL_CARD_DEFAULT_WIDTH } from '@antscorp/antsomi-ui/es/components/molecules/ThumbnailCard/constants';
+export const SimilarTemplateWrapper = styled(Flex) `
+  margin-top: 15px;
+
+  .title {
+    font-weight: 700;
+    font-size: 16px;
+  }
+`;
+export const CardListWrapper = styled(Flex) `
+  overflow: auto;
+
+  .antsomi-flex {
+    min-width: ${({ $cardWidth }) => isNumber($cardWidth) ? $cardWidth : THUMBNAIL_CARD_DEFAULT_WIDTH}px;
+  }
+`;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import 'swiper/swiper-bundle.css';
+import { ThumbnailProps } from '../../types';
+export interface ThumbnailSliderProps extends ThumbnailProps {
+}
+export declare const ThumbnailSlider: React.FC<ThumbnailSliderProps>;

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

@@ -0,0 +1,77 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { memo, useMemo, useRef, useState } from 'react';
+import Icon from '@antscorp/icons';
+import { Swiper } from 'swiper/react';
+import 'swiper/swiper-bundle.css';
+import { Navigation, A11y, Thumbs } from 'swiper/modules';
+import { isEmpty } from 'lodash';
+// Styled
+import { SwiperSlideWrapper, ThumbnailSliderWrapper } from './styled';
+// Components
+import { Button, Flex } from '../../../../atoms';
+import { ThumbnailCard } from '../../../../molecules';
+// Constants
+import { THUMBNAIL_HEIGHT_DEFAULT, THUMBNAIL_WIDTH_DEFAULT } from '../../constants';
+/** 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;
+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 [isSlideEnd, setSlideEnd] = useState(false);
+    // Refs
+    const navigationPrevRef = useRef(null);
+    const navigationNextRef = useRef(null);
+    // Variables
+    /** The width of per thumbnail wrapper including thumbnail card's size, icon's size and gap */
+    const thumbnailWrapperWidth = useMemo(() => width + GAP_X * 2 + ICON_SIZE, [width]);
+    // Memo
+    const isShowSwiper = useMemo(() => {
+        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]);
+    // Renders
+    const renderThumbnail = (args) => {
+        const { thumbnail, index } = args;
+        const { id, url } = thumbnail;
+        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))));
+    };
+    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: {
+                prevEl: navigationPrevRef.current,
+                nextEl: navigationNextRef.current,
+            }, 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();
+                });
+            }, 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(Icon, { type: "icon-ants-expand-more" })),
+        React.createElement(Button, { ref: navigationNextRef, className: "custom-button-next", disabled: 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

@@ -0,0 +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/react").SwiperSlideProps>, any, {}, never>;

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

@@ -0,0 +1,62 @@
+var _a;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+import { SwiperSlide } from 'swiper/react';
+export const ThumbnailSliderWrapper = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  .swiper {
+    max-width: 1030px;
+    .swiper-slide {
+      width: fit-content !important;
+    }
+  }
+
+  .custom-button-prev,
+  .custom-button-next {
+    z-index: 10;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background-color: #ffffff;
+    box-shadow: 0px 3px 3px 0px #002e591a;
+    border-radius: 999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* Remove default style of Antd button */
+    border-color: white !important;
+
+    &.antsomi-btn-default:not(:disabled):hover {
+      border-color: white !important;
+      background-color: #ffffff !important;
+    }
+  }
+
+  .custom-button-prev {
+    left: 0px;
+    transform: rotate(90deg);
+  }
+
+  .custom-button-next {
+    right: 0px;
+    transform: rotate(-90deg);
+  }
+
+  i {
+    font-size: 20px;
+    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+  }
+`;
+export const SwiperSlideWrapper = styled(SwiperSlide) `
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+`;

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

@@ -0,0 +1,4 @@
+export { Information } from './Information';
+export { Banner } from './Banner';
+export { ThumbnailSlider } from './ThumbnailSlider';
+export { SimilarTemplate } from './SimilarTemplate';

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

@@ -0,0 +1,4 @@
+export { Information } from './Information';
+export { Banner } from './Banner';
+export { ThumbnailSlider } from './ThumbnailSlider';
+export { SimilarTemplate } from './SimilarTemplate';

package/es/components/organism/PreviewTemplateModal/constants/dataSample.d.ts

@@ -0,0 +1,2 @@
+import { TThumbnail } from '../types';
+export declare const THUMBNAIL_SAMPLES: TThumbnail[];

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

@@ -0,0 +1,9 @@
+export const THUMBNAIL_SAMPLES = [
+    { id: 1, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/20110.png' },
+    { id: 2, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19759.png' },
+    { id: 3, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19641.png' },
+    { id: 4, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19641.png' },
+    { id: 5, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19641.png' },
+    { id: 6, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19641.png' },
+    { id: 7, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19641.png' },
+];

package/es/components/organism/PreviewTemplateModal/constants/defaultProps.d.ts

@@ -0,0 +1,3 @@
+export declare const THUMBNAIL_WIDTH_DEFAULT = 180;
+export declare const THUMBNAIL_HEIGHT_DEFAULT = 180;
+export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";

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

@@ -0,0 +1,3 @@
+export const THUMBNAIL_WIDTH_DEFAULT = 180;
+export const THUMBNAIL_HEIGHT_DEFAULT = 180;
+export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';

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

@@ -0,0 +1,3 @@
+export * from './dataSample';
+export * from './defaultProps';
+export * from './variables';

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

@@ -0,0 +1,3 @@
+export * from './dataSample';
+export * from './defaultProps';
+export * from './variables';

package/es/components/organism/PreviewTemplateModal/constants/variables.d.ts

@@ -0,0 +1,12 @@
+export declare const DEVICE_TYPE: {
+    DESKTOP: {
+        value: string;
+        label: string;
+        icon: string;
+    };
+    MOBILE: {
+        value: string;
+        label: string;
+        icon: string;
+    };
+};

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

@@ -0,0 +1,12 @@
+export const DEVICE_TYPE = {
+    DESKTOP: {
+        value: 'desktop',
+        label: 'Desktop',
+        icon: 'icon-ants-laptop',
+    },
+    MOBILE: {
+        value: 'mobile',
+        label: 'Mobile',
+        icon: 'icon-ants-smart-phone',
+    },
+};

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

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

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

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { memo, useState } from 'react';
+// Components
+import { Flex } from '../../atoms';
+import { Banner, Information, SimilarTemplate, ThumbnailSlider } from './components';
+// Styled
+import { ModalContainer, ModalWrapper } from './styled';
+// Constants
+import { DEVICE_TYPE } from './constants';
+export const PreviewTemplateModal = memo(props => {
+    const { image, thumbnailProps, similarTemplateProps, informationProps } = props, restOfProps = __rest(props, ["image", "thumbnailProps", "similarTemplateProps", "informationProps"]);
+    // States
+    const [deviceType, setDeviceType] = useState(DEVICE_TYPE.DESKTOP.value);
+    return (React.createElement(ModalContainer, Object.assign({ footer: null, centered: true, modalRender: node => React.createElement(ModalWrapper, null, node) }, restOfProps),
+        React.createElement(Flex, { gap: 20 },
+            React.createElement("div", { className: "overview" },
+                React.createElement(Flex, { gap: 20, vertical: true },
+                    React.createElement(Banner, { deviceType: deviceType, image: image }),
+                    React.createElement(ThumbnailSlider, Object.assign({}, thumbnailProps)))),
+            React.createElement(Information, Object.assign({ deviceType: deviceType, onDeviceTypeChange: value => setDeviceType(value) }, informationProps))),
+        React.createElement(SimilarTemplate, Object.assign({}, similarTemplateProps))));
+});

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

@@ -0,0 +1,3 @@
+/// <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 ModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { Modal } from '../../molecules';
+export const ModalContainer = styled(Modal) `
+  &.antsomi-modal {
+    width: 100% !important;
+
+    .antsomi-modal-content {
+      width: 1440px;
+      height: auto;
+    }
+  }
+
+  .overview {
+    flex: 1 1 0%;
+
+    .antsomi-flex {
+      width: 100%;
+    }
+  }
+`;
+export const ModalWrapper = styled.div `
+  padding: 20px;
+  width: 100%;
+  box-sizing: border-box;
+`;