@antscorp/antsomi-ui 1.3.5-beta.142 → 1.3.5-beta.144

package/es/components/molecules/DrawerDetail/styled.js

@@ -69,7 +69,7 @@ export const CloseBtn = styled.div `
 export const MenuItem = styled.div `
   height: 36px;
   width: 36px;
-  border-radius: 3px;
+  border-radius: 10px;
   background-color: transparent;
   display: flex;
   align-items: center;

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js

@@ -25,9 +25,9 @@ export const TemplateSaveAs = props => {
     const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent, } = props;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
     const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
-    const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder = 'Please select an item', placeholder = 'Enter your media template name', onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
+    const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder = 'Please select an item', placeholder = 'Enter your media template name', validateName, onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
     const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
-    const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
+    const { saveNewText = 'Save as a new media template', saveExistText = 'Save as an existing media template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
     const { saveOption = saveNewValue, templateName = saveOption === saveNewValue || !saveOption
         ? { id: undefined, label: defaultNewTemplateName }
         : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0], description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
@@ -90,7 +90,21 @@ export const TemplateSaveAs = props => {
                         React.createElement(Text, { className: "field-title field-title--start" },
                             templateLabel || 'Template name',
                             React.createElement("span", null, "\u2009*")),
-                        saveOption === saveNewValue ? (React.createElement(Form.Item, { label: "Template name", name: "template-name", validateTrigger: "onChange", noStyle: true, rules: [{ required: true, message: "This field can't be empty" }] },
+                        saveOption === saveNewValue ? (React.createElement(Form.Item
+                        // label="Template name"
+                        , { 
+                            // label="Template name"
+                            name: "template-name", validateTrigger: "onChange", 
+                            // noStyle
+                            rules: [
+                                {
+                                    required: true,
+                                    message: "This field can't be empty",
+                                },
+                                {
+                                    validator: validateName,
+                                },
+                            ] },
                             React.createElement(Input, { className: "field-input", value: templateNameNew, placeholder: placeholder, debounce: 100, maxLength: 255, onAfterChange: value => {
                                     handleChangeValue({ templateName: { id: undefined, label: value } });
                                     setTemplateNameNew(value);

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.js

@@ -5,7 +5,7 @@ import Icon from '@antscorp/icons';
 export const BigImage = React.memo(props => {
     const { url, isDefaultThumbnail, isHideDefaultButton, index, onClickDefaultButton } = props;
     return (React.createElement("div", { className: "image-container--big" },
-        url ? React.createElement(Image, { preview: false, width: "80%", height: "96%", src: url }) : null,
+        url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: url.includes('nocache') ? url : `${url}?nocache=${new Date().getTime()}` })) : null,
         isHideDefaultButton ? null : (React.createElement(Button, { className: "set-default-button", onClick: () => onClickDefaultButton && onClickDefaultButton(index) },
             isDefaultThumbnail ? React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } }) : null,
             isDefaultThumbnail ? 'Default thumbnail' : 'Set as default'))));

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js

@@ -60,7 +60,7 @@ export const ImageSlider = props => {
         previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
             React.createElement(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
             React.createElement(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail }))) : null,
-        hideThumbnailsList || isLoading || thumbnails.length <= 1 ? null : (React.createElement(React.Fragment, null,
+        hideThumbnailsList || isLoading || thumbnails.length <= 2 ? null : (React.createElement(React.Fragment, null,
             (!infinity && selectedThumbnail !== 0) || infinity ? (React.createElement(ButtonSlider, { direction: "left", type: "slider", onClick: handlePrevThumbnail })) : null,
             (!infinity && selectedThumbnail !== thumbnails.length - 1) || infinity ? (React.createElement(ButtonSlider, { direction: "right", type: "slider", onClick: handleNextThumbnail })) : null))));
 };

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.js

@@ -2,5 +2,5 @@ import React from 'react';
 import { Image } from 'antd';
 export const SmallImage = React.memo(props => {
     const { url, isSelected, index, onClick } = props;
-    return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''}`, onClick: () => onClick && onClick(index) }, url ? React.createElement(Image, { preview: false, width: "80%", height: "96%", src: url }) : null));
+    return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: url.includes('nocache') ? url : `${url}?nocache=${new Date().getTime()}` })) : null));
 });

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js

@@ -68,6 +68,10 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
+  .slider-button {
+    display: none;
+  }
+
   .thumbnail-preview-container:has(.antsomi-spin),
   .thumbnail-slider-container:has(.antsomi-spin) {
     box-shadow: rgba(159, 180, 180, 0.2) 0px 2px 8px;
@@ -80,6 +84,13 @@ export const ImageSliderStyled = styled(Flex) `
     background-color: #fcfcfc;
   }
 
+  &:has(.thumbnail-slider-container:hover),
+  &:has(.slider-button:hover) {
+    .slider-button {
+      display: flex;
+    }
+  }
+
   .thumbnail-preview-container {
     width: ${({ $imageWidth }) => `${$imageWidth}px`};
     overflow-x: scroll;

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js

@@ -97,9 +97,8 @@ export const useTemplateSave = (options) => {
     };
     /* Validate Template Name */
     const validateName = (rule, value) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!value) {
-            return Promise.reject(new Error('This field is required'));
-        }
+        if (!value)
+            return;
         const response = yield validateTemplateName({
             auth: service,
             params: {

package/es/components/molecules/TemplateSaveAs/styled.js

@@ -26,7 +26,8 @@ export const TemplateSaveAsStyled = styled(Flex) `
 
   .share-access-container {
     flex: 1 1 40%;
-    padding-left: 28px;
+    padding-left: 20px;
+    margin-left: 5px;
     max-height: 60vh;
     overflow-y: auto;
     border-left: 1px solid #e5e5e5;
@@ -60,6 +61,10 @@ export const TemplateSaveAsStyled = styled(Flex) `
     width: 330px;
   }
 
+  .field-input.antsomi-select {
+    margin-bottom: 24px;
+  }
+
   .category-container {
     flex: 1;
     display: grid;

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

@@ -11,7 +11,6 @@ export const SimilarTemplateWrapper = styled(Flex) `
   }
 `;
 export const TemplateListWrapper = styled.div `
-  display: grid;
-  grid-template-columns: ${({ templateQuantity }) => `repeat(${templateQuantity}, minmax(0, 1fr))`};
-  gap: 30px;
+  display: flex;
+  justify-content: space-between;
 `;

package/es/test.d.ts

@@ -1,14 +1,3 @@
 import React from 'react';
 import '@antscorp/icons/main.css';
-export declare const BACKGROUND_COLOR_STYLE: {
-    SOLID: {
-        value: string;
-        label: string;
-    };
-    GRADIENT: {
-        value: string;
-        label: string;
-    };
-};
-export declare const customColors: string[];
 export declare const App: () => React.JSX.Element;

package/es/test.js

@@ -1,461 +1,111 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useState } from 'react';
+import React from 'react';
 import { createRoot } from 'react-dom/client';
 import '@antscorp/icons/main.css';
-import { ConfigProvider, InputDynamic, SettingWrapper, UploadImage, } from './components';
+import { ConfigProvider, TemplateSaveAs, useTemplateSave } from './components';
+// Constants
+import { GET_LIST_TYPE, OBJECT_TYPES, PUBLIC_LEVEL } from './constants';
+// import { Slider } from 'antd';
 // Queries configs
-import ContentSource from './components/organism/ContentSources';
+import axios from 'axios';
+import { get } from 'lodash';
+import { MENU_PERMISSION } from './components/molecules/ShareAccess/constants';
 import { QueryClientProviderAntsomiUI, queryClientAntsomiUI } from './queries';
-export const BACKGROUND_COLOR_STYLE = {
-    SOLID: {
-        value: 'color',
-        label: 'Solid',
-    },
-    GRADIENT: {
-        value: 'gradient',
-        label: 'Gradient',
-    },
+const SHARE_ACCESS_DEFAULT_VALUE = {
+    ownerId: 1600085510,
+    isPublic: 1,
+    listAccess: [
+        {
+            userId: 1600085510,
+            role: 1,
+            email: 'vinlt@antsomi.com',
+            avatar: '//c0-platform.ants.tech/avatar/2023/05/04/b3rg0ye8oa.png',
+            fullName: 'Truong Vi',
+            allowEdit: 1,
+            allowView: 1,
+            allowComment: 1,
+        },
+        {
+            userId: 1600085513,
+            role: 2,
+            email: 'vinlt@antsomi.com',
+            avatar: '//c0-platform.ants.tech/avatar/2023/05/04/b3rg0ye8oa.png',
+            fullName: 'Truong Vi 2',
+            allowEdit: 0,
+            allowView: 0,
+            allowComment: 1,
+        },
+    ],
+    publicRole: null,
 };
-const DOMAIN_MEDIA_SANDBOX = 'https://sandbox-media-template.antsomi.com/cdp';
-export const customColors = [
-    '#f7da64',
-    '#8912dd',
-    '#ed1515',
-    '#230439',
-    '#d11a66',
-    '#ffbd64',
-    '#f1ab96',
-    '#824ccd',
-    '#5858e9',
-    '#57b8c2',
+const thumbnailPortrait = [
+    'https://images.unsplash.com/photo-1515734674582-29010bb37906?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1571423483570-eb27018d1ec0?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.creativefabrica.com/products/previews/2023/11/03/jG9YjMvHg/2XfoTnjLlEvPMgjGeu0VIDk96mr-desktop.jpg',
+];
+// const thumbnailPortrait = [];
+const thumbnailLandscape = [
+    'https://images.creativefabrica.com/products/previews/2023/10/27/mWT9IwQN7/2XL1J9SW0srS03MukpeIzEyg2Hb-desktop.jpg',
+    'https://thedaily.case.edu/wp-content/uploads/2023/06/underwater-view-1024x439.jpg',
+    'https://images.unsplash.com/photo-1502134249126-9f3755a50d78?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 ];
+const thumbnails = [...thumbnailPortrait, ...thumbnailLandscape];
+const userId = 1600084823;
+const network_id = 33167;
+const token = '5474r2x214z294d4v284y4b4q4l5g406y2r2y2n4f5';
+const getUserInfos = (email) => __awaiter(void 0, void 0, void 0, function* () {
+    const type = 'search-user-info';
+    const res = yield axios.get(`https://permission.antsomi.com/api/account/info?userId=${userId}&network_id=${network_id}&_token=${token}&_user_id=${userId}&_account_id=${userId}&_lang=en&type=${type}&email=${email}`, {
+        method: 'GET',
+    });
+    const data = get(res, 'data.data');
+    return data;
+});
 export const App = () => {
-    // const [valueShortlink, setValueShortlink] = useState('#{shortlink(https://test.com.vn)}');
-    const [valueShortlink, setValueShortlink] = useState('');
-    const [state, setState] = useState({
-        option: {
-            dateType: 'today',
-            calculationDate: 'years',
-            calculationType: 'minus',
-            value: 1,
+    const { categoryItems, templateItems, value: templateValue, onChange: onChangeValue, searchNameProps, form, } = useTemplateSave({
+        service: {
+            url: 'https://sandbox-media-template.antsomi.com/cdp/api/v1',
+            token: '5474r2x214z254a4u2a4y444m4j5p27444c4h4h4n5t5',
+            userId: '1600080515',
+            accountId: '1600080515',
         },
-        date: '',
-        format: 'YYYYMMDD',
-    });
-    const [colorSettingState, setColorSettingState] = useState({
-        color: 'green',
-        customColors,
-    });
-    const [stateSlideBar, setStateSlideBar] = useState({
-        errors: [],
-        disabled: true,
-        prefix: 'Item',
-        isViewMode: false,
-        isShowAdd: true,
-        limit: {
-            min: 1,
-            max: 2,
+        config: {
+            getListType: GET_LIST_TYPE.OWNER,
+            objectType: OBJECT_TYPES.MEDIA_TEMPLATE,
+            publicLevel: PUBLIC_LEVEL.RESTRICTED,
+            limitListPerPage: 20,
+        },
+        defaultValue: {
+            accessInfo: SHARE_ACCESS_DEFAULT_VALUE,
+            saveOption: 'save-new',
         },
-        activeId: '1',
-        options: Array.from({ length: 5 }, (_, index) => ({
-            label: `Item ${index + 1}`,
-            value: `${index + 1}`,
-        })),
-        isShowLabelSequentially: false,
     });
-    const [radioValue, setRadioValue] = useState('color');
-    const [sliderValue, setSliderValue] = useState(10);
-    const [edge, setEdge] = useState(['auto', 'auto', 700, 700]);
-    const [icon, setIcon] = useState('');
-    // const {
-    //   categoryItems,
-    //   templateItems,
-    //   checkedCategories,
-    //   openCategoryKeys,
-    //   isLoadingCategoryList,
-    //   isLoadingTemplateList,
-    //   onLoadMore: onLoadMoreTemplates,
-    //   onChangeOpenCategoryKeys,
-    //   onChangeCheckedCategories,
-    //   onRemoveObjectTemplate,
-    // } = useTemplateListing({
-    //   serviceAuth: {
-    //     url: 'https://sandbox-media-template.antsomi.com/cdp/api/v1',
-    //     token: '5474r2x214z254a4u2a4y444m4j5p27444c4h4h4n5t5',
-    //     userId: '1600080515',
-    //     accountId: '1600080515',
-    //   },
-    //   config: {
-    //     getListType: GET_LIST_TYPE.OWNER,
-    //     objectType: 1,
-    //     publicLevel: 0,
-    //     limitListPerPage: 10,
-    //   },
-    //   checkedCategoriesDefault: {
-    //     device_type: [1, 2],
-    //     template_type: [1, 2, 3, 4, 5],
-    //   },
-    // });
-    //
-    const callbackColorSetting = (key, dataIn) => {
-        switch (key) {
-            case 'ON_ADD_NEW_PRESET':
-                // eslint-disable-next-line no-case-declarations
-                const { customColors = [] } = dataIn;
-                setColorSettingState(prev => (Object.assign(Object.assign({}, prev), { customColors })));
-                break;
-            case 'ON_EDIT_CLICKED': {
-                // eslint-disable-next-line no-console
-                console.log('insideee.dev - clicked edit preset :>');
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    const handleChangeColorSetting = (colorOut) => {
-        setColorSettingState(prev => (Object.assign(Object.assign({}, prev), { color: colorOut })));
-    };
-    const handleChangeRadio = e => {
-        const { value = '' } = e.target;
-        setRadioValue(value);
-    };
-    const handleChangeSlider = value => {
-        setSliderValue(value);
-    };
-    const handleSetIcon = value => {
-        setIcon(value);
-    };
-    const callbackSlideBar = (type, data) => {
-        console.log({ type, data });
-    };
-    // --------------------------- Test SlideBar start -------------------------------------------
-    // return (
-    //   <div
-    //     style={{
-    //       width: 500,
-    //       height: 500,
-    //       border: '1px solid black',
-    //       margin: '0 auto',
-    //       padding: 12,
-    //       borderRadius: '10px',
-    //     }}
-    //   >
-    //     <SlideBar {...stateSlideBar} callback={callbackSlideBar} />
-    //   </div>
-    // );
-    // --------------------------- Test SlideBar end -------------------------------------------
-    // ----------------------------  Test Input Dynamic start ------------------------------
-    // return (
-    //   <div
-    //     style={{
-    //       width: 500,
-    //       height: 500,
-    //       border: '1px solid black',
-    //       margin: '0 auto',
-    //       padding: 12,
-    //       borderRadius: '10px',
-    //     }}
-    //   >
-    //     <InputDynamic
-    //       errors={[]}
-    //       onChange={dataOut => setValueShortlink(dataOut)}
-    //       onError={() => {}}
-    //       isViewMode={false}
-    //       canMultipleLine={false}
-    //       value={valueShortlink}
-    //     />
-    //   </div>
-    // );
-    return (React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
-        React.createElement("div", { style: {
-                width: 500,
-                height: 500,
-                border: '1px solid black',
-                margin: '0 auto',
-                padding: 12,
-                borderRadius: '10px',
-            } },
-            React.createElement(InputDynamic, { errors: [], onChange: dataOut => setValueShortlink(dataOut), onError: () => { }, isViewMode: false, canMultipleLine: false, allowDynamicOptions: ['addPersonalization', 'shortlink'], value: valueShortlink }),
-            React.createElement(SettingWrapper, { vertical: true, label: "Background Image", containerStyle: { gap: '20px' } },
-                React.createElement(UploadImage, { domainMedia: "https://sandbox-media-template.antsomi.com", slug: "cdp/api/v1", labelButtonSelect: "Select Toggle from Computor", labelHeadingModal: "Toggle Selection", searchPlaceholder: "Search toggle", paramConfigs: {
-                        token: '5474r2x214z294b423a4y474d4j5q274p4g494f4k5p5',
-                        userId: '1600084695',
-                        accountId: '1600084695',
-                    }, 
-                    // title="Background Image"
-                    selectedImage: {
-                        url: 'https://th.bing.com/th?id=OSK.8664d1b5838c79a3d74a3e97739978b5&w=148&h=148&c=7&o=6&dpr=2&pid=SANGAM',
-                    }, onChangeImage: image => { }, onRemoveImage: () => {
-                        // onChangeSettings('backgroundImageObj', {
-                        //   name: '',
-                        //   previewUrl: '',
-                        // });
-                    } })))));
-    // --------------------------- Test SlideBar end -------------------------------------------
-    // ----------------------------  Test Input Dynamic start ------------------------------
-    // return (
-    //   <div
-    //     style={{
-    //       width: 500,
-    //       height: 500,
-    //       border: '1px solid black',
-    //       margin: '0 auto',
-    //       padding: 12,
-    //       borderRadius: '10px',
-    //     }}
-    //   >
-    //     <SlideBar {...stateSlideBar} callback={callbackSlideBar} />
-    //   </div>
-    // );
-    // --------------------------- Test SlideBar end -------------------------------------------
-    // --------------------------- Test Content Source start ----------------------------------
-    return (React.createElement("div", { style: {
-            width: 500,
-            height: 500,
-            border: '1px solid black',
-            margin: '0 auto',
-            padding: 12,
-            borderRadius: '10px',
-        } },
-        React.createElement(ContentSource, { serviceAuth: {
-                url: 'https://sandbox-media-template.antsomi.com/cdp/api/v1',
-                token: '5474r2x214z2a4b403e4y4x5r4w524z5f4j464n4f5w5',
-                userId: '1600085679',
-                accountId: '1600085679',
-            } })));
-    // --------------------------- Test Content Source end ----------------------------------
-    // ----------------------------  Test Input Dynamic start ------------------------------
-    return (React.createElement("div", { style: {
-            width: 500,
-            height: 500,
-            border: '1px solid black',
-            margin: '0 auto',
-            padding: 12,
-            borderRadius: '10px',
-        } },
-        React.createElement(InputDynamic, { errors: [], onChange: dataOut => setValueShortlink(dataOut), onError: () => { }, isRealTime: true, isViewMode: false, canMultipleLine: false, value: valueShortlink })));
-    // ----------------------------  Test Input Dynamic End ------------------------------
-    // ----------------------------  Test Helps Start ------------------------------
-    // return (
-    //   <div style={{ display: 'flex', justifyContent: 'center', width: '100vw', height: '100vh' }}>
-    //     <Help />
-    //   </div>
-    // );
-    // ----------------------------  Test Helps End ------------------------------
-    // ------------------------ Media template components test start -------------------------
-    // return (
-    //   <ConfigProvider>
-    //     <div
-    //       style={{
-    //         width: 500,
-    //         height: 1000,
-    //         border: '1px solid black',
-    //         margin: '0 auto',
-    //         padding: 12,
-    //         borderRadius: '10px',
-    //         marginTop: 12,
-    //       }}
-    //     >
-    //       <h2 style={{ textAlign: 'center' }}>Test component of media template</h2>
-    //       <Space size={20} direction="vertical">
-    //         {/* <SettingWrapper vertical label="Color Setting">
-    //           <ColorSetting
-    //             label="Background Color"
-    //             labelStyling={{ color: THEME.token?.colorIcon }}
-    //             color={colorSettingState.color}
-    //             customColors={colorSettingState.customColors}
-    //             callback={callbackColorSetting}
-    //             onChange={handleChangeColorSetting}
-    //           />
-    //         </SettingWrapper>
-    //         <SettingWrapper vertical label="Input number with unit">
-    //           <InputNumberWithUnit
-    //             unit="px"
-    //             min={0}
-    //             max={2000}
-    //             value={700}
-    //             onChange={value => {
-    //               console.log('onChange:: ', value);
-    //             }}
-    //             onChangeUnit={unit => {
-    //               console.log('onChangeUnit:: ', unit);
-    //             }}
-    //           />
-    //         </SettingWrapper>
-    //         <SettingWrapper label="Radio Group">
-    //           <RadioGroup
-    //             options={Object.values(BACKGROUND_COLOR_STYLE)}
-    //             value={radioValue}
-    //             onChange={e => handleChangeRadio(e)}
-    //           />
-    //         </SettingWrapper> */}
-    //         <SettingWrapper vertical label="Color Setting">
-    //           <GradientSetting />
-    //         </SettingWrapper>
-    //         <SliderWithInputNumber
-    //           label="Size (px)"
-    //           labelStyling={{ marginTop: 10 }}
-    //           min={0}
-    //           max={100}
-    //           value={sliderValue}
-    //           onAfterChange={handleChangeSlider}
-    //         />
-    //         <EdgeSetting
-    //           label="Notification Spacing"
-    //           unit="px"
-    //           linked={false}
-    //           values={edge}
-    //           // edgeLabels={[t(translations.column.title), t(translations.row.title)]}
-    //           onChange={({ values, linked, unit }) => {
-    //             setEdge(values);
-    //             // onUpdateSettings({
-    //             //   gapX: values[0] + unit,
-    //             //   gapY: values[1] + unit,
-    //             //   gapSuffix: unit,
-    //             //   linkedGapInput: linked,
-    //             // });
-    //           }}
-    //         />
-    //         <PositionSetting
-    //           settings={{ linkedPositionInput: false, positionSuffix: 'px' }}
-    //           styles={{ top: '10px', right: '20px', bottom: '30', left: '40' }}
-    //           onChange={() => {}}
-    //         />
-    //       </Space>
-    //       <Space size={10} direction="vertical">
-    //         <SettingWrapper vertical label="Background Image" containerStyle={{ gap: '20px' }}>
-    //           <UploadImage
-    //             domainMedia="https://sandbox-media-template.antsomi.com"
-    //             slug="cdp/api/v1"
-    //             labelButtonSelect="Select Toggle from Computor"
-    //             labelHeadingModal="Toggle Selection"
-    //             searchPlaceholder="Search toggle"
-    //             paramConfigs={{
-    //               token: '5474r2x214z294b423a4y474d4j5q274p4g494f4k5p5',
-    //               userId: '1600084695',
-    //               accountId: '1600084695',
-    //             }}
-    //             // title="Background Image"
-    //             selectedImage={{
-    //               url: 'https://th.bing.com/th?id=OSK.8664d1b5838c79a3d74a3e97739978b5&w=148&h=148&c=7&o=6&dpr=2&pid=SANGAM',
-    //             }}
-    //             onChangeImage={image =>
-    //               // onChangeSettings('backgroundImageObj', {
-    //               //   name: image.name,
-    //               //   previewUrl: image.url,
-    //               // })
-    //               {}
-    //             }
-    //             onRemoveImage={() => {
-    //               // onChangeSettings('backgroundImageObj', {
-    //               //   name: '',
-    //               //   previewUrl: '',
-    //               // });
-    //             }}
-    //           />
-    //         </SettingWrapper>
-    //         <SettingWrapper vertical label="Icon">
-    //           <IconSelection
-    //             isOpen={false}
-    //             labelHeadingModal="Toggle Selection"
-    //             searchPlaceholder="Search for toggle..."
-    //             icon={icon}
-    //             onChange={handleSetIcon}
-    //             iconTypes={['cus', 'font-awesome']}
-    //             onChangeSvg={value => {
-    //               console.log('onChangeSvg', value);
-    //             }}
-    //           />
-    //         </SettingWrapper>
-    //       </Space>
-    //     </div>
-    //   </ConfigProvider>
-    // );
-    // const [time, setTime] = useState<string[]>([]);
-    // const [times, setTimes] = useState<Value>({
-    //   rangeInfo: { type: 'last_14_days' },
-    //   rangeValue: [{ start: null, end: null }],
-    // });
-    // return (
-    //   <ConfigProvider>
-    //     <div
-    //       style={{
-    //         width: 500,
-    //         height: 1000,
-    //         border: '1px solid black',
-    //         margin: '0 auto',
-    //         padding: 12,
-    //         borderRadius: '10px',
-    //         marginTop: 12,
-    //       }}
-    //     >
-    //       <h2 style={{ textAlign: 'center' }}>Test component of media template</h2>
-    //       <CalendarSelection
-    //         value={times}
-    //         onChange={(value, info) => {
-    //           console.log({ info, value });
-    //           // setTime([value.rangeValue[0].start, value.rangeValue[0].end]);
-    //           setTimes(value);
-    //         }}
-    //       />
-    //     </div>
-    //   </ConfigProvider>
-    // );
-    // ------------------------ Media template components test end -------------------------
-    // return (
-    //   <div style={{ width: '500px', margin: '32px' }}>
-    //     <GradientSetting onChange={e => console.log('gradient change')} />
-    //     <br />
-    //     <br />
-    //     <br />
-    //     <br />
-    //     <Slider
-    //       className="test-classname"
-    //       min={-10}
-    //       max={10}
-    //       onChange={e => console.log('slider change', e)}
-    //     />
-    //     <br />
-    //     <br />
-    //     <Rate />
-    //     <br />
-    //     <br />
-    //     <Slider className="test-classname" />
-    //   </div>
-    // );
-    // ------------------------ Template Listing test -------------------------
-    // return (
-    //   <div
-    //     style={{
-    //       height: '50vh',
-    //     }}
-    //   >
-    //     <TemplateListing
-    //       templatesProps={{
-    //         items: templateItems,
-    //         loading: isLoadingTemplateList,
-    //         onLoadMoreTemplates,
-    //       }}
-    //       categoryListingProps={{
-    //         loading: isLoadingCategoryList,
-    //         items: categoryItems,
-    //         checkedCategories,
-    //         openKeys: openCategoryKeys,
-    //         onOpenChange: onChangeOpenCategoryKeys,
-    //         onMenuChange: onChangeCheckedCategories,
-    //       }}
-    //       templateItemProps={{
-    //         removeModalProps: {
-    //           // onOk
-    //           onOk: onRemoveObjectTemplate,
-    //         },
-    //       }}
-    //     />
-    //   </div>
-    // );
+    return (React.createElement(TemplateSaveAs, { form: form, imageReview: {
+            thumbnails,
+            skeleton: true,
+        }, categories: categoryItems, templateNames: templateItems, shareAccess: {
+            show: true,
+            userId: 1600085510,
+            userPermission: {
+                edit: MENU_PERMISSION.CREATED_BY_USER,
+                view: MENU_PERMISSION.NONE,
+            },
+            getUserInfo: getUserInfos,
+        }, templateNamesOptions: Object.assign({}, searchNameProps), value: templateValue, onChange: value => {
+            onChangeValue(value);
+        } }));
 };
 const container = document.getElementById('root');
 const root = createRoot(container);
-root.render(React.createElement(ConfigProvider, { locale: "en" },
-    React.createElement(App, null)));
+root.render(React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
+    React.createElement(ConfigProvider, { locale: "en" },
+        React.createElement(App, null))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.142",
+  "version": "1.3.5-beta.144",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",