@antscorp/antsomi-ui 1.3.5-beta.261 → 1.3.5-beta.263

package/es/components/molecules/ImageResizeTuiEditor/ImageResizeTuiEditor.js

@@ -0,0 +1,73 @@
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import { fabric } from 'fabric';
+const ImageResizeTuiEditor = React.forwardRef(({ className, imageUrl, width, height, defaultValue, hideAction }, ref) => {
+    const loadRef = useRef(false);
+    const fabricCanvasRef = useRef(null);
+    const canvasRef = useRef(null);
+    const resetScaleImage = img => {
+        const widthRatio = width / img.width;
+        const heightRatio = height / img.height;
+        img.set({ left: 0, top: 0 }).scale(Math.min(widthRatio, heightRatio));
+        img.set({ left: (width - img.oCoords.br.x) / 2, top: (height - img.oCoords.br.y) / 2 });
+        img.set({
+            borderColor: '#00a1ff',
+            cornerColor: '#fff',
+            cornerSize: 10,
+            cornerStrokeColor: '#00a1ff',
+            // transparentCorners: true,
+        });
+    };
+    const loadImage = url => {
+        fabric.Image.fromURL(url, img => {
+            var _a;
+            resetScaleImage(img);
+            (_a = fabricCanvasRef.current) === null || _a === void 0 ? void 0 : _a.add(img);
+        }, {
+            crossOrigin: '',
+        });
+    };
+    const changeImage = url => {
+        var _a;
+        (_a = fabricCanvasRef.current) === null || _a === void 0 ? void 0 : _a.forEachObject(obj => {
+            var _a;
+            (_a = fabricCanvasRef.current) === null || _a === void 0 ? void 0 : _a.remove(obj);
+        });
+        loadImage(url);
+    };
+    useImperativeHandle(ref, () => ({
+        getBase64(options) {
+            var _a;
+            const dataURL = (_a = fabricCanvasRef.current) === null || _a === void 0 ? void 0 : _a.toDataURL(Object.assign({ format: 'png', quality: 1 }, options));
+            return dataURL;
+        },
+        replaceImageWithUrl(imageUrl) {
+            changeImage(imageUrl);
+        },
+        getCurrentState() {
+            return fabricCanvasRef.current;
+        },
+    }), []);
+    useEffect(() => {
+        if (loadRef.current) {
+            changeImage(imageUrl);
+        }
+        loadRef.current = true;
+        fabricCanvasRef.current = new fabric.Canvas('tui-image-editor', {
+            width,
+            height,
+        });
+        fabric.Object.prototype.transparentCorners = false;
+        if (imageUrl) {
+            loadImage(imageUrl);
+        }
+        else if (defaultValue) {
+            defaultValue.forEachObject(obj => {
+                var _a;
+                (_a = fabricCanvasRef.current) === null || _a === void 0 ? void 0 : _a.add(obj);
+            });
+        }
+    }, [imageUrl]);
+    return (React.createElement("div", { className: className },
+        React.createElement("canvas", { ref: canvasRef, id: "tui-image-editor", style: { width, height } })));
+});
+export { ImageResizeTuiEditor };

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

@@ -0,0 +1 @@
+export { ImageResizeTuiEditor } from './ImageResizeTuiEditor';

package/es/components/molecules/ImageResizeTuiEditor/index.js

@@ -0,0 +1 @@
+export { ImageResizeTuiEditor } from './ImageResizeTuiEditor';

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

@@ -0,0 +1,5 @@
+export type ImageResizeHandle = {
+    getBase64: (options?: any) => string | undefined;
+    replaceImageWithUrl: (imageUrl: string) => void;
+    getCurrentState: () => any;
+};

package/es/components/molecules/ImageResizeTuiEditor/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -76,6 +76,10 @@ export interface TemplateSaveAsProps {
     form?: FormInstance<FormValue>;
     value?: TemplateValueOptions;
     onChange?: (value: Partial<TemplateValueOptions>, errors?: any[]) => void;
+    onSaveThumbnail?: (data: {
+        thumbnails: (string | undefined)[];
+        thumbnailChange: number;
+    }) => void;
     onEvent?: (value: Partial<TemplateValueOptions>) => void;
 }
 export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;

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

@@ -27,12 +27,12 @@ export const TemplateSaveAs = props => {
     var _a;
     const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, 
     // form,
-    form: formProps, value, onChange, onEvent, } = props;
+    form: formProps, value, onChange, onEvent, onSaveThumbnail, } = props;
     const [internalForm] = Form.useForm();
     const form = formProps || internalForm;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
     const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
-    console.log('🚀 ~ restImageReviewProps:', restImageReviewProps);
+    // console.log('🚀 ~ restImageReviewProps:', restImageReviewProps);
     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 || {};
@@ -213,7 +213,9 @@ export const TemplateSaveAs = props => {
                         React.createElement(ImageSlider, Object.assign({ defaultThumbnail: defaultThumbnailValue, onSelectDefault: value => {
                                 form.setFieldValue('defaultThumbnail', value);
                                 handleChangeValue({ defaultThumbnail: value });
-                            } }, restImageReviewProps))),
+                            }, 
+                            // onSelectDefault={value => handleChangeValue({ defaultThumbnail: value })}
+                            onSaveThumbnail: data => onSaveThumbnail === null || onSaveThumbnail === void 0 ? void 0 : onSaveThumbnail(data) }, restImageReviewProps))),
                     isLoadingCategories ? (React.createElement(Flex, { className: "field-container" },
                         React.createElement(Text, { className: "field-title" }, "Categories"),
                         React.createElement(Space, { style: {

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.d.ts

@@ -7,6 +7,8 @@ interface BigImageProps {
     imageFit?: React.CSSProperties['objectFit'];
     index: number;
     onClickDefaultButton?: (index: number) => void;
+    onClickEdit?: (index: number) => void;
+    onClickUpload?: (index: number) => void;
 }
 export declare const BigImage: React.FC<BigImageProps>;
 export {};

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

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
-import { Image } from 'antd';
-import { Button } from '@antscorp/antsomi-ui/es/components';
+import { ConfigProvider, Image, Tooltip } from 'antd';
+import { Button, Flex, Checkbox } from '@antscorp/antsomi-ui/es/components';
 import Icon from '@antscorp/icons';
 import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
 export const BigImage = React.memo(props => {
-    const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, imageFit, onClickDefaultButton, } = props;
+    const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, imageFit, onClickDefaultButton, onClickEdit, onClickUpload, } = props;
     const currentTime = useMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
     const urlNoCache = getUrlNoCache(url, timeGenerated);
@@ -13,7 +13,13 @@ export const BigImage = React.memo(props => {
         url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", src: urlNoCache, style: { objectFit: imageFit }, onError: e => {
                 e.currentTarget.style.display = 'none';
             } })) : 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'))));
+        isHideDefaultButton || !isDefaultThumbnail ? null : (React.createElement(ConfigProvider, { theme: {
+                components: { Checkbox: { borderRadiusSM: 1000 }, Tooltip: { borderRadius: 10 } },
+            } },
+            React.createElement(Tooltip, { title: "Default thumbnail", zIndex: 5000 },
+                React.createElement(Checkbox, { checked: true, className: "default-checkbox" })))),
+        React.createElement(Flex, { className: "set-default-button", gap: 8 },
+            isHideDefaultButton || isDefaultThumbnail ? null : (React.createElement(Button, { onClick: () => onClickDefaultButton && onClickDefaultButton(index) }, "Set as default")),
+            React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-pencil" }), size: "middle", style: { fontSize: '14px' }, onClick: () => onClickEdit === null || onClickEdit === void 0 ? void 0 : onClickEdit(index) }),
+            React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-file-upload" }), size: "middle", style: { fontSize: '14px' }, onClick: () => onClickUpload === null || onClickUpload === void 0 ? void 0 : onClickUpload(index) }))));
 });

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.d.ts

@@ -11,11 +11,16 @@ export interface ImageSliderProps {
     imageWidth?: number;
     imageHeight?: number;
     infinity?: boolean;
+    useFabric?: boolean;
     thumbnailFit?: React.CSSProperties['objectFit'];
     /**
      * Default thumbnail - order of default thumbnail in thumbnails array
      */
     defaultThumbnail?: number;
     onSelectDefault?: (imgIndex: number) => void;
+    onSaveThumbnail?: (data: {
+        thumbnails: (string | undefined)[];
+        thumbnailChange: number;
+    }) => void;
 }
 export declare const ImageSlider: React.FC<ImageSliderProps>;

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

@@ -2,22 +2,30 @@
 import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import Icon from '@antscorp/icons';
 // Components
-import { Flex, Spin } from '@antscorp/antsomi-ui/es/components';
+import { Button, Flex, ImageResize, message, Spin, Typography, ImageResizeTuiEditor, } from '@antscorp/antsomi-ui/es/components';
 // Styles
 import { ImageSliderStyled } from './styled';
 import { SmallImage } from './SmallImage';
 import { BigImage } from './BigImage';
+import { useDropFile } from '@antscorp/antsomi-ui/es/hooks';
+import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
+// Image size limit to 10MB
+const SIZE_LIMIT = 10 * 1024 * 1024;
 const ButtonSlider = React.memo(({ direction, type, onClick }) => (React.createElement("div", { className: type === 'slider'
         ? `slider-button slider-button--${direction}`
         : `change-preview-button change-preview-button--${direction}`, onClick: onClick },
     React.createElement(Icon, { type: `icon-ants-angle-${direction}` }))));
 export const ImageSlider = props => {
-    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, thumbnailFit, onSelectDefault, } = props;
+    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, thumbnailFit, onSelectDefault, onSaveThumbnail, useFabric = false, } = props;
     const sliderContainerRef = useRef(null);
     const thumbnailSelectedRef = useRef(null);
+    const imageResizeRef = useRef(null);
     const smallImageWidth = useMemo(() => imageWidth / slidesPerView - (10 * (slidesPerView - 1)) / slidesPerView, [imageWidth, slidesPerView]);
     const [selectedThumbnail, setSelectedThumbnail] = useState(0);
     const [defaultThumbnailInternal, setDefaultThumbnailInternal] = useState(defaultThumbnail || 0);
+    const [editingThumbnail, setEditingThumbnail] = useState();
+    const [uploadThumbnail, setUploadThumbnail] = useState();
+    const [latestCanvas, setLatestCanvas] = useState();
     // Effects
     useEffect(() => {
         setDefaultThumbnailInternal(defaultThumbnail || 0);
@@ -33,16 +41,17 @@ export const ImageSlider = props => {
             behavior: 'smooth',
         });
     }, [imageWidth, smallImageWidth]);
+    const thumbnailsQuantity = thumbnails.length;
     const handleNextThumbnail = useCallback(() => {
         setSelectedThumbnail(prev => {
-            const newValue = prev === thumbnails.length - 1 ? 0 : prev + 1;
+            const newValue = prev === thumbnailsQuantity - 1 ? 0 : prev + 1;
             handleScroll(newValue);
             return newValue;
         });
     }, [thumbnails, handleScroll]);
     const handlePrevThumbnail = useCallback(() => {
         setSelectedThumbnail(prev => {
-            const newValue = prev === 0 ? thumbnails.length - 1 : prev - 1;
+            const newValue = prev === 0 ? thumbnailsQuantity - 1 : prev - 1;
             handleScroll(newValue);
             return newValue;
         });
@@ -58,13 +67,88 @@ export const ImageSlider = props => {
             onSelectDefault(index);
         }
     }, [onSelectDefault]);
+    const handleSaveThumbnail = () => {
+        var _a;
+        const newThumbnail = [...thumbnails];
+        // NOTE: https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html
+        newThumbnail[selectedThumbnail] = (_a = imageResizeRef.current) === null || _a === void 0 ? void 0 : _a.getBase64({ pixelRatio: 2.5 });
+        onSaveThumbnail === null || onSaveThumbnail === void 0 ? void 0 : onSaveThumbnail({ thumbnails: newThumbnail, thumbnailChange: selectedThumbnail });
+        setLatestCanvas(prev => {
+            var _a;
+            return (Object.assign(Object.assign({}, prev), { [selectedThumbnail]: (_a = imageResizeRef.current) === null || _a === void 0 ? void 0 : _a.getCurrentState() }));
+        });
+        setEditingThumbnail(undefined);
+    };
+    const fileRef = useRef(null);
+    const onImportImageClick = useCallback(() => {
+        var _a;
+        (_a = fileRef === null || fileRef === void 0 ? void 0 : fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, []);
+    const onImportImageSelect = (e) => {
+        var _a, _b, _c;
+        if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) {
+            if (((_b = e.target.files) === null || _b === void 0 ? void 0 : _b[0].size) > SIZE_LIMIT) {
+                return message.error('File size too big');
+            }
+            (_c = imageResizeRef.current) === null || _c === void 0 ? void 0 : _c.replaceImageWithUrl(URL.createObjectURL(e.target.files[0]));
+            setUploadThumbnail(undefined);
+        }
+        e.target.files = null;
+    };
+    useDropFile('.image-upload-zone', e => {
+        var _a, _b, _c, _d;
+        if (!((_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files[0]))
+            return;
+        if (((_b = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _b === void 0 ? void 0 : _b.files[0].size) > SIZE_LIMIT) {
+            return message.error('File size too big');
+        }
+        (_c = imageResizeRef.current) === null || _c === void 0 ? void 0 : _c.replaceImageWithUrl(URL.createObjectURL((_d = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _d === void 0 ? void 0 : _d.files[0]));
+        setUploadThumbnail(undefined);
+    });
+    const currentTime = useMemo(() => new Date(), []);
+    const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
+    const currentEditing = useMemo(() => editingThumbnail !== null && editingThumbnail !== void 0 ? editingThumbnail : uploadThumbnail, [editingThumbnail, uploadThumbnail]);
+    const imageResizeProps = {
+        className: 'image-resize-wrapper',
+        width: imageWidth,
+        height: imageHeight,
+        ref: imageResizeRef,
+        hideAction: true,
+        imageUrl: 
+        // latestCanvas && isEditPrevious
+        (latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing])
+            ? undefined
+            : getUrlNoCache(thumbnails[currentEditing], timeGenerated),
+        defaultValue: latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing],
+    };
+    const ImageResizeComponent = useFabric ? ImageResizeTuiEditor : ImageResize;
+    const showSkeletonMemo = skeleton !== undefined
+        ? skeleton
+        : checkShowSkeletonBaseUrl(getUrlNoCache(thumbnails[currentEditing], timeGenerated));
     return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
-        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: skeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault }))))),
-        hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnails.length < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { imageFit: thumbnailFit, key: `${url}_${index * 2}`, showSkeleton: skeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
+        typeof editingThumbnail === 'number' || typeof uploadThumbnail === 'number' ? (React.createElement(Flex, { vertical: true, style: { zIndex: 25 }, className: "edit-thumbnail-container" },
+            React.createElement(ImageResizeComponent, Object.assign({}, imageResizeProps)),
+            typeof uploadThumbnail !== 'number' ? null : (React.createElement(Flex, { className: `image-upload-zone ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
+                React.createElement(Icon, { type: "icon-ants-upload-fill", style: { fontSize: '40px' } }),
+                React.createElement(Flex, { vertical: true, align: "flex-start" },
+                    React.createElement(Typography.Text, { style: { fontSize: 16, marginBottom: '10px' } }, "Drag & Drop file here"),
+                    React.createElement("input", { type: "file", ref: fileRef, onChange: onImportImageSelect, style: { display: 'none' }, accept: "image/*" }),
+                    React.createElement(Button, { onClick: onImportImageClick }, "Browse Image"),
+                    React.createElement(Typography.Text, { style: { marginTop: '5px' } }, "File type: .jpg, .png. File size: under 10MB")))),
+            React.createElement(Flex, { justify: "center", align: "center", gap: 8, className: "image-resize-action" },
+                React.createElement(Button, { onClick: handleSaveThumbnail, type: "primary", disabled: uploadThumbnail !== undefined }, "Save"),
+                React.createElement(Button, { onClick: () => {
+                        setEditingThumbnail(undefined);
+                        setUploadThumbnail(undefined);
+                    } }, "Cancel")))) : (React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: skeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnailsQuantity <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault, onClickEdit: index => setEditingThumbnail(index), onClickUpload: index => {
+                setEditingThumbnail(index);
+                setUploadThumbnail(index);
+            } })))))),
+        hideThumbnailsList || thumbnailsQuantity <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnailsQuantity < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { imageFit: thumbnailFit, key: `${url}_${index * 2}`, showSkeleton: skeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
         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 <= 2 ? null : (React.createElement(React.Fragment, null,
+        hideThumbnailsList || isLoading || thumbnailsQuantity <= 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))));
+            (!infinity && selectedThumbnail !== thumbnailsQuantity - 1) || infinity ? (React.createElement(ButtonSlider, { direction: "right", type: "slider", onClick: handleNextThumbnail })) : null))));
 };

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

@@ -1,4 +1,4 @@
-var _a, _b;
+var _a, _b, _c, _d, _e, _f;
 // Libraries
 import styled, { css } from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components';
@@ -32,6 +32,60 @@ export const ImageSliderStyled = styled(Flex) `
   position: relative;
   margin-top: 6px;
 
+  .edit-thumbnail-container {
+    position: relative;
+  }
+
+  .image-resize-action {
+    margin-top: 20px;
+    margin-bottom: 40px;
+  }
+
+  .image-resize-wrapper {
+    background: ${props => props.$skeleton ? `url(${SkeletonBg}) no-repeat center center` : 'unset'};
+
+    background-size: 90% 90%;
+  }
+
+  .image-resize-wrapper,
+  .image-upload-zone {
+    border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_1};
+    border-radius: 5px;
+    margin-top: 0;
+    overflow: hidden;
+  }
+
+  &:has(.image-upload-zone) #image-editor {
+    display: none;
+  }
+
+  .image-upload-zone {
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: ${props => `${props.$imageWidth}px`};
+    height: ${props => `${props.$imageHeight}px`};
+    background: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorBgSkeleton};
+
+    & > i {
+      color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw8};
+    }
+
+    & > div > span:last-child {
+      color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw7};
+    }
+
+    &:not(.hide-skeleton) {
+      background: ${props => props.$skeleton ? `url(${SkeletonBg}) no-repeat center center` : 'unset'};
+
+      background-size: 90% 90%;
+    }
+  }
+
   .change-preview-button {
     ${centerBlock}
     position: absolute;
@@ -125,7 +179,7 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
-  &:has(> .thumbnail-preview-container + .thumbnail-slider-container) {
+  &:has(> .thumbnail-preview-container) {
     .image-container--big::before {
       content: '';
       position: absolute;
@@ -148,8 +202,8 @@ export const ImageSliderStyled = styled(Flex) `
     &--small {
       position: relative;
       box-sizing: border-box;
-      background: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorBgSkeleton};
-      border: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1_1};
+      background: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorBgSkeleton};
+      border: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue1_1};
       border-radius: 5px;
 
       ${centerBlock}
@@ -196,6 +250,15 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
+  .default-checkbox {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    opacity: 0;
+    z-index: 3;
+    transition: opacity 150ms ease-in-out;
+  }
+
   .set-default-button {
     position: absolute;
     top: 50%;
@@ -205,8 +268,10 @@ export const ImageSliderStyled = styled(Flex) `
     opacity: 0;
     transition: opacity 150ms ease-in-out;
   }
+
   .image-container--big:hover {
-    .set-default-button {
+    .set-default-button,
+    .default-checkbox {
       opacity: 1;
     }
   }

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

@@ -8,6 +8,20 @@ export const TemplateSaveAsStyled = styled(Flex) `
   /* max-width: 1177px; */
   height: 100%;
 
+  position: relative;
+
+  &:has(canvas),
+  &:has(.image-upload-zone) {
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: #fff;
+      opacity: 0.5;
+      z-index: 20;
+    }
+  }
+
   .save-options-container {
     padding: 15px 0;
     margin-bottom: 20px;
@@ -124,3 +138,11 @@ export const TemplateSaveAsStyled = styled(Flex) `
     }
   }
 `;
+// export const FormStyled = styled(Form)`
+//   position: relative;
+//   &::after {
+//     position: absolute;
+//     inset: 0;
+//     background-color: rgba(255, 255, 255, 0.5);
+//   }
+// `;

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

@@ -18,6 +18,7 @@ export { InputSearch } from './InputSearch';
 export { UploadImage } from './UploadImage';
 export { IconSelection } from './IconSelection';
 export { ImageEditor as ImageResize } from './ImageEditor';
+export { ImageResizeTuiEditor } from './ImageResizeTuiEditor';
 export { IconSelectionRenderer } from './IconSelection/components/Icon';
 export { AlignSetting } from './AlignSetting';
 export { EdgeSetting } from './EdgeSetting';
@@ -62,3 +63,4 @@ export type { TemplateValueOptions } from './TemplateSaveAs';
 export type { SelectProps as SelectV2Props } from './SelectV2';
 export type { InputNumberProps as InputNumberWithLabelProps } from './InputNumber';
 export type { ModalSelectProps } from './ModalSelect';
+export type { ImageResizeHandle } from './ImageEditor';

package/es/components/molecules/index.js

@@ -18,6 +18,7 @@ export { InputSearch } from './InputSearch';
 export { UploadImage } from './UploadImage';
 export { IconSelection } from './IconSelection';
 export { ImageEditor as ImageResize } from './ImageEditor';
+export { ImageResizeTuiEditor } from './ImageResizeTuiEditor';
 export { IconSelectionRenderer } from './IconSelection/components/Icon';
 export { AlignSetting } from './AlignSetting';
 export { EdgeSetting } from './EdgeSetting';

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -114,6 +114,11 @@ export const GlobalStyle = () => {
           height: 36px !important;
         }
 
+        &.antsomi-btn-icon-only.antsomi-btn-default {
+          width: 30px !important;
+          height: 30px !important;
+        }
+
         &.antsomi-btn-icon-only.antsomi-btn-sm {
           /* Important to override the above code before */
           width: 24px !important;

package/es/test.js

@@ -19,7 +19,6 @@ import { GET_LIST_TYPE, OBJECT_TYPES, PUBLIC_LEVEL } from './constants';
 import axios from 'axios';
 import { get } from 'lodash';
 import { MENU_PERMISSION } from './components/molecules/ShareAccess/constants';
-import { QueryClientProviderAntsomiUI, queryClientAntsomiUI } from './queries';
 import { ConfigProvider } from './providers';
 const SHARE_ACCESS_DEFAULT_VALUE = {
     ownerId: 1600085510,
@@ -206,6 +205,7 @@ export const App = () => {
 };
 const container = document.getElementById('root');
 const root = createRoot(container);
-root.render(React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
-    React.createElement(ConfigProvider, { locale: "en" },
-        React.createElement(App, null))));
+root.render(
+// <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.261",
+  "version": "1.3.5-beta.263",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -85,6 +85,7 @@
     "currency-formatter": "1.5.9",
     "d3-interpolate": "^3.0.1",
     "dayjs": "^1.11.10",
+    "fabric": "^5.3.0",
     "font-awesome": "4.7.0",
     "highlight.js": "^11.8.0",
     "html-entities": "^2.0.2",