@antscorp/antsomi-ui 1.3.2 → 1.3.3

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { UploadProps as AntdUploadProps } from 'antd/lib/upload';
+interface UploadImageProps extends AntdUploadProps {
+    labelHeadingModal?: string;
+    labelButtonSelect?: string;
+    searchPlaceholder?: string;
+    onRemoveImage?: Function;
+    onChangeImage?: Function;
+    selectedImage?: UploadImageObject;
+    isOpen?: boolean;
+    isInputMode?: boolean;
+    width?: any;
+    errors?: Array<any>;
+    extensions?: string[];
+    maxSize?: number;
+    title?: string;
+    showImageURL?: boolean;
+    placeholder?: string;
+    domainMedia: string;
+    slug: string;
+    paramConfigs?: {
+        token?: string;
+        userId?: string;
+        accountId: string;
+    };
+    required?: boolean;
+    focused?: boolean;
+}
+interface UploadImageObject {
+    url: string;
+}
+export declare const UploadImage: React.FC<UploadImageProps>;
+export {};

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

@@ -0,0 +1,366 @@
+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 react-hooks/exhaustive-deps */
+// Libraries
+import React, { useEffect, useState, useRef } from 'react';
+import Upload from 'antd/lib/upload';
+// Hooks
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+// Assets
+import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
+import MediaIcon from './MediaIcon';
+// Service
+import { uploadFile, createSavedImage, deleteSavedImage, getListingSavedImage, } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/UploadFile';
+// Atoms
+import { Button, Icon, Text, message, Spin, Input, Space, } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { Modal, InputSearch, Select } from '@antscorp/antsomi-ui/es/components/molecules';
+// Styled
+import { Boxed, ErrorMessage, Image, Overlay, Paragraph, TextStyled, UploadImageWrapper, WrapperBtn, WrapperIcon, WrapperInputMode, WrapperListImages, } from './styled';
+// Utils
+import { handleError, safeParse } from '@antscorp/antsomi-ui/es/utils';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const flexStyleCenter = {
+    display: 'flex',
+    gap: '15px',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const SORT_OPTIONS = {
+    BY_UPLOAD_DATE: {
+        value: 1,
+        label: 'Sort by Upload Date',
+    },
+    BY_SIZE: {
+        value: 2,
+        label: 'Sort by Size',
+    },
+};
+const PATH = '@antscorp/antsomi-ui/es/components/molecules/UploadImage/index.tsx';
+export const UploadImage = props => {
+    var _a, _b, _c, _d, _e;
+    const { labelHeadingModal, labelButtonSelect, searchPlaceholder, onRemoveImage, onChangeImage, isOpen, isInputMode, width, placeholder, extensions, maxSize, title, showImageURL, required, focused, domainMedia, slug, paramConfigs, errors, } = props;
+    const { Dragger } = Upload;
+    const [storeSavedImages, setStoreSavedImages] = useState([]);
+    const [selectedImage, setSelectedImage] = useState(props.selectedImage || { url: '' });
+    const [isModalVisible, setIsModalVisible] = useState(isOpen);
+    const [listImages, setListImages] = useState(storeSavedImages || []);
+    const [sortOption, setSortOption] = useState(SORT_OPTIONS.BY_UPLOAD_DATE.value);
+    const [loading, setLoading] = useState(false);
+    const [isOpenConfirmDelete, setOpenConfirmDelete] = useState(false);
+    const [triggerRefresh, setTriggerRefresh] = useState(1);
+    const uploadFilesRef = useRef([]);
+    const uploadFilesTimeoutRef = useRef();
+    const deleteImageRef = useRef();
+    const isError = safeParse(errors, []).length > 0;
+    useDeepCompareEffect(() => {
+        setListImages(storeSavedImages || []);
+        setLoading(false);
+    }, [storeSavedImages]);
+    // When selectedImage onChange
+    useEffect(() => {
+        // eslint-disable-next-line react/destructuring-assignment
+        setSelectedImage(props.selectedImage || { url: '' });
+        // eslint-disable-next-line react/destructuring-assignment
+    }, [props.selectedImage]);
+    useEffect(() => {
+        if (sortOption === SORT_OPTIONS.BY_SIZE.value) {
+            setListImages(listImages ? [...listImages].sort((image1, image2) => image1.size - image2.size) : []);
+        }
+        else {
+            setListImages(listImages
+                ? [...listImages].sort((image1, image2) => image1.createdAt && image2.createdAt
+                    ? image1.createdAt.isAfter(image2.createdAt)
+                        ? -1
+                        : 1
+                    : 0)
+                : []);
+        }
+    }, [sortOption]);
+    const handleGetStoreSavedImages = (domain, slug, paramConfigs) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            setLoading(true);
+            const result = yield getListingSavedImage(domain, slug, paramConfigs);
+            if (result) {
+                setStoreSavedImages(result || []);
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleGetStoreSavedImages',
+                args: {
+                    error,
+                },
+            });
+            // eslint-disable-next-line no-console
+            console.log('error :>', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    });
+    useEffect(() => {
+        handleGetStoreSavedImages(domainMedia, slug, paramConfigs);
+    }, [triggerRefresh]);
+    const showModal = (e) => {
+        e.stopPropagation();
+        setIsModalVisible(true);
+    };
+    const handleCancel = () => {
+        setIsModalVisible(false);
+    };
+    const handleSelectImage = image => {
+        if (typeof onChangeImage === 'function') {
+            onChangeImage(image);
+        }
+        setSelectedImage(image);
+        handleCancel();
+    };
+    const onChangeSort = option => {
+        setSortOption(option);
+    };
+    const renderListImages = listImagesRender => listImagesRender.map((image, idx) => {
+        var _a;
+        return (React.createElement(WrapperListImages, { className: "ants-group", key: idx },
+            React.createElement(Boxed, null,
+                React.createElement(Image, { src: image.url, alt: "img" }),
+                React.createElement(WrapperBtn, { className: "group-hover" },
+                    React.createElement(Button, { onClick: () => handleSelectImage(image), style: { backgroundColor: 'rgb(255,255,255)' } }, "USE"),
+                    React.createElement(Button, { onClick: () => handleRemoveUploadedImage(image), style: { backgroundColor: 'rgb(255,255,255)' } },
+                        React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary } }))),
+                React.createElement(Overlay, { className: "group-hover" })),
+            React.createElement(Paragraph, { style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                }, title: image.name }, image.name),
+            React.createElement(Paragraph, null,
+                "Uploaded: ",
+                image.createdAt.format('DD/MM/YYYY'),
+                " at ",
+                image.createdAt.format('hh:mm:ss A')),
+            React.createElement(Paragraph, null,
+                "Size: ",
+                image.sizeString)));
+    });
+    const onChangeSearchImage = e => {
+        const { value } = e.target;
+        if (value && value.trim()) {
+            setListImages(storeSavedImages
+                ? storeSavedImages
+                    .filter(item => item.name.toLocaleLowerCase().includes(value.trim().toLocaleLowerCase()))
+                    .slice(0, 15)
+                : []);
+        }
+        else {
+            setListImages(storeSavedImages);
+        }
+    };
+    const handleRemoveImage = () => {
+        if (onRemoveImage) {
+            onRemoveImage();
+        }
+        setSelectedImage({ url: '' });
+    };
+    const handleRemoveUploadedImage = (image, isConfirm = true) => __awaiter(void 0, void 0, void 0, function* () {
+        if (isConfirm) {
+            deleteImageRef.current = image;
+            setOpenConfirmDelete(true);
+        }
+        else if (image) {
+            const res = yield deleteSavedImage(domainMedia, slug, paramConfigs, +image.id);
+            if (res && res.data && res.data.code === 200 && res.data.data) {
+                const { success_image = [] } = res.data.data;
+                if (Array.isArray(success_image) && success_image.length) {
+                    setTriggerRefresh(triggerRefresh + 1);
+                }
+            }
+            setOpenConfirmDelete(false);
+            deleteImageRef.current = undefined;
+        }
+    });
+    const renderSelectedImage = () => selectedImage && selectedImage.url ? (React.createElement(Image, { src: selectedImage.url, alt: "", style: { position: 'absolute' }, onError: (e) => {
+            e.target.src = PlaceholderImage;
+        } })) : null;
+    const customRequestUpload = (options) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const { 
+            // onSuccess,
+            //  onError,
+            file,
+            //  onProgress
+             } = options;
+            uploadFilesRef.current.push(file);
+            if (uploadFilesTimeoutRef.current) {
+                clearTimeout(uploadFilesTimeoutRef.current);
+            }
+            uploadFilesTimeoutRef.current = setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {
+                if (!uploadFilesRef.current.length) {
+                    uploadFilesRef.current = [];
+                    return;
+                }
+                if (uploadFilesRef.current.length > 10) {
+                    message.error('Maximum number of file to upload is 10!');
+                    uploadFilesRef.current = [];
+                    return false;
+                }
+                for (const file of uploadFilesRef.current) {
+                    if (!(extensions === null || extensions === void 0 ? void 0 : extensions.map(extension => extension.replace('.', 'image/')).includes(file.type))) {
+                        message.error('Invalid file extension');
+                        uploadFilesRef.current = [];
+                        return false;
+                    }
+                    if (maxSize && maxSize > 0 && file.size > maxSize * 1024 * 1024) {
+                        message.error('File size too big');
+                        uploadFilesRef.current = [];
+                        return false;
+                    }
+                }
+                setLoading(true);
+                const result = yield uploadFile(domainMedia, slug, paramConfigs, uploadFilesRef.current).finally(() => {
+                    uploadFilesRef.current = [];
+                });
+                if (result === null || result === void 0 ? void 0 : result.length) {
+                    const arrPromise = [];
+                    result.forEach(data => arrPromise.push(createSavedImage(domainMedia, slug, paramConfigs, {
+                        image_name: data.fileName,
+                        properties: {
+                            url: data.url,
+                            image: data.file,
+                            extension: data.extension,
+                            dimensions_file: data.dimensionsFile,
+                            size: data.size,
+                            file_name: data.fileName,
+                        },
+                    })));
+                    yield Promise.all(arrPromise);
+                    setLoading(false);
+                    setTriggerRefresh(triggerRefresh + 1);
+                }
+                else {
+                    setLoading(false);
+                    message.error('Cannot upload image!');
+                }
+            }), 300);
+        }
+        catch (e) {
+            uploadFilesRef.current = [];
+            setLoading(false);
+            message.error('Cannot upload image!');
+        }
+        finally {
+            setLoading(false);
+        }
+    });
+    return (React.createElement(React.Fragment, null,
+        isInputMode ? (React.createElement(WrapperInputMode, { width: width },
+            React.createElement(Input, { required: required, status: errors && (errors === null || errors === void 0 ? void 0 : errors.length) > 0 ? 'error' : '', placeholder: placeholder, value: selectedImage.url ? selectedImage.url : '', focused: focused, style: { paddingRight: 40 }, onAfterChange: value => handleSelectImage({
+                    url: value,
+                }) }),
+            React.createElement(WrapperIcon, { onClick: showModal },
+                React.createElement(MediaIcon, null)),
+            isError && React.createElement(ErrorMessage, null, errors && (errors === null || errors === void 0 ? void 0 : errors.length) > 0 ? errors[0] : ''))) : (React.createElement(UploadImageWrapper, null,
+            title ? React.createElement(Text, { style: { marginTop: 10 } }, title) : null,
+            React.createElement("div", { className: `image-upload-content ${selectedImage && selectedImage.url ? 'uploaded' : ''}` },
+                renderSelectedImage(),
+                !selectedImage || !selectedImage.url ? (React.createElement(Icon, { type: "icon-ants-image-3", size: 36, style: {
+                        zIndex: 1,
+                        marginLeft: 25,
+                        color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon,
+                    } })) : null,
+                React.createElement("div", { style: flexStyleCenter },
+                    React.createElement(Button, { onClick: showModal, style: { backgroundColor: '#ffffff' } }, "Browse Image"),
+                    selectedImage && selectedImage.url ? (React.createElement(Button, { onClick: handleRemoveImage, style: { backgroundColor: '#ffffff' } },
+                        React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary } }))) : null)),
+            React.createElement("div", { className: "upload-file-info", style: { marginTop: 12 } },
+                React.createElement(Text, null,
+                    "File type: ", extensions === null || extensions === void 0 ? void 0 :
+                    extensions.join(', ')),
+                React.createElement(Text, null,
+                    "File size: under ",
+                    maxSize,
+                    "MB")),
+            showImageURL && (React.createElement(Space, { size: 5, direction: "vertical", style: { marginTop: 12 } },
+                React.createElement(Input, { label: "Image URL", required: required, placeholder: placeholder, value: selectedImage.url ? selectedImage.url : '', focused: focused, onAfterChange: value => handleSelectImage({
+                        url: value,
+                    }) }))))),
+        React.createElement(Modal, { title: "Delete Image", visible: isOpenConfirmDelete, onOk: () => handleRemoveUploadedImage(deleteImageRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel" },
+            React.createElement("p", null,
+                "Are you sure you want to delete the image ", (_c = deleteImageRef.current) === null || _c === void 0 ? void 0 :
+                _c.name,
+                "?")),
+        React.createElement(Modal, { wrapClassName: "icons-selection-modal", title: React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+                React.createElement(Icon, { type: "icon-ants-image-3", size: 20 }),
+                labelHeadingModal), centered: true, headerStyle: {
+                padding: '20px 20px 0',
+                border: 'none',
+            }, bodyStyle: {
+                padding: 20,
+                maxHeight: '90vh',
+                width: '100%',
+                overflow: 'auto',
+            }, width: 1155, footer: null, visible: isModalVisible, destroyOnClose: true, onCancel: handleCancel },
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 20,
+                } },
+                React.createElement(InputSearch, { style: { width: 232 }, onChange: onChangeSearchImage, placeholder: searchPlaceholder }),
+                React.createElement(Select, { defaultValue: SORT_OPTIONS.BY_UPLOAD_DATE.value, value: sortOption, options: Object.values(SORT_OPTIONS), style: { width: 232 }, onChange: onChangeSort })),
+            React.createElement(Spin, { spinning: loading },
+                React.createElement(Dragger, Object.assign({}, props, { accept: extensions === null || extensions === void 0 ? void 0 : extensions.join(','), 
+                    // action={`${APP_CONFIG.API_URL}/file-upload/file?&_token=${userInfo?.token}&_user_id=${userInfo?.user_id}&_account_id=${userInfo?.account_id}`}
+                    // beforeUpload={handleBeforeUploadFile}
+                    // onChange={onChangeFileUpload}
+                    showUploadList: false, multiple: true, customRequest: customRequestUpload }),
+                    React.createElement("div", { style: Object.assign(Object.assign({}, flexStyleCenter), { height: 80 }) },
+                        React.createElement(Icon, { type: "icon-ants-image-3", size: 36, style: { color: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon } }),
+                        React.createElement("div", { style: Object.assign(Object.assign({}, flexStyleCenter), { justifyContent: 'flex-start' }) },
+                            React.createElement(TextStyled, { className: "ant-upload-text" }, "Drag & Drop file here"),
+                            React.createElement("span", null, "or"),
+                            React.createElement(Button, { style: { backgroundColor: '#ffffff' } }, labelButtonSelect),
+                            React.createElement(Button, { onClick: handleRemoveImage, style: {
+                                    display: 'none !important',
+                                    backgroundColor: '#ffffff',
+                                } },
+                                React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorPrimary } })))))),
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '35px',
+                    paddingTop: 20,
+                    width: '100%',
+                } }, renderListImages(listImages)))));
+};
+UploadImage.defaultProps = {
+    isOpen: false,
+    labelHeadingModal: 'Image Selection',
+    labelButtonSelect: 'Select Image from computer',
+    searchPlaceholder: 'Search image...',
+    domainMedia: 'https://sandbox-media-template.antsomi.com/cdp',
+    slug: 'api/v1',
+    isInputMode: true,
+    width: '100%',
+    errors: [],
+    placeholder: 'Enter image URL',
+    paramConfigs: {
+        accountId: '',
+        token: '',
+        userId: '',
+    },
+    extensions: ['.jpg', '.png', '.jfif', '.jpeg', '.gif', '.webp'],
+    maxSize: 10,
+    showImageURL: true,
+};

package/es/components/molecules/UploadImage/styled.d.ts

@@ -0,0 +1,13 @@
+export declare const WrapperListImages: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Boxed: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const WrapperBtn: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Paragraph: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperInputMode: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;
+export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const UploadImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,134 @@
+var _a, _b, _c, _d;
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const WrapperListImages = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 250px;
+  height: auto;
+  text-align: center;
+
+  &.ants-group:hover .group-hover {
+    opacity: 1;
+  }
+`;
+export const TextStyled = styled.span `
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextDark};
+`;
+export const Boxed = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 250px;
+  height: 250px;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(224 224 224 / var(--tw-border-opacity));
+
+  &:hover {
+    border-width: 2px;
+  }
+`;
+export const Image = styled.img `
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+`;
+export const WrapperBtn = styled.div `
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+  gap: 15px;
+  opacity: 0;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+`;
+export const Paragraph = styled.p `
+  display: inline-block;
+  margin-top: 5px;
+  width: 100%;
+  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
+`;
+export const Overlay = styled.div `
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 2;
+  background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bgLightTransparent};
+  opacity: 0;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+`;
+export const WrapperInputMode = styled.div `
+  position: relative;
+  width: ${props => (props.width ? props.width : '100%')};
+`;
+export const WrapperIcon = styled.div `
+  position: absolute;
+  top: -10px;
+  left: calc(100% - 44px);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px;
+  border-radius: 50%;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+`;
+export const ErrorMessage = styled.div `
+  width: 100%;
+  margin-top: 3px;
+  color: #f44336;
+  font-size: 0.688rem;
+  line-height: 1.66;
+`;
+export const UploadImageWrapper = styled.div `
+  .antsomi-upload.antsomi-upload-btn {
+    padding: 0px;
+  }
+
+  .image-upload-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: 20px;
+    position: relative;
+    border-radius: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.borderRadius}px;
+    border-width: 2px;
+    border-style: dashed;
+    --tw-border-opacity: 1;
+    border-color: rgb(210 210 210 / var(--tw-border-opacity));
+    aspect-ratio: 3.2;
+
+    &.uploaded {
+      background: url('data:image/svg+xml;base64, PHN2ZyBoZWlnaHQ9IjEwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMCAyNTZoMjU2djI1NkgweiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMjUiIGQ9Ik0yNTYgMjU2aDI1NnYyNTZIMjU2eiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMjU2IDBoMjU2djI1NkgyNTZ6Ij48L3BhdGg+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTAgMGgyNTZ2MjU2SDB6Ij48L3BhdGg+PC9zdmc+')
+        repeat rgb(249, 251, 255);
+    }
+    .antsomi-upload-drag-container {
+    }
+    .upload-file-info {
+      p {
+        font-size: 12px;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,30 @@
+export { Cascader } from './Cascader';
+export { Dropdown } from './Dropdown';
+export { Modal } from './Modal';
+export { Select } from './Select';
+export { DatePicker } from './DatePicker';
+export { ChatBox } from './ChatBox';
+export { PopupDraggable } from './PopupDraggable';
+export { Tabs } from './Tabs';
+export { CaptureScreen } from './CaptureScreen';
+export { SettingWrapper } from './SettingWrapper';
+export { ColorPicker } from './ColorPicker';
+export { ColorSetting } from './ColorSetting';
+export { SliderWithInputNumber } from './SliderWithInputNumber';
+export { RadioGroup } from './RadioGroup';
+export { InputSearch } from './InputSearch';
+export { UploadImage } from './UploadImage';
+export { IconSelection } from './IconSelection';
+export { IconSelectionRenderer } from './IconSelection/components/Icon';
+export { AlignSetting } from './AlignSetting';
+export { EdgeSetting } from './EdgeSetting';
+export { TreeSelect } from './TreeSelect';
+export { Result } from './Result';
+export { Card } from './Card';
+export { InputNumberWithUnit } from './InputNumberWithUnit';
+export { GradientSetting } from './GradientSetting';
+export { Collapse } from './Collapse';
+export { Drawer } from './Drawer';
+export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
+export type { ColorPickerProps } from './ColorPicker';
+export type { AlignEditProps, AlignSettingProps } from './AlignSetting';

package/es/components/molecules/index.js

@@ -0,0 +1,27 @@
+export { Cascader } from './Cascader';
+export { Dropdown } from './Dropdown';
+export { Modal } from './Modal';
+export { Select } from './Select';
+export { DatePicker } from './DatePicker';
+export { ChatBox } from './ChatBox';
+export { PopupDraggable } from './PopupDraggable';
+export { Tabs } from './Tabs';
+export { CaptureScreen } from './CaptureScreen';
+export { SettingWrapper } from './SettingWrapper';
+export { ColorPicker } from './ColorPicker';
+export { ColorSetting } from './ColorSetting';
+export { SliderWithInputNumber } from './SliderWithInputNumber';
+export { RadioGroup } from './RadioGroup';
+export { InputSearch } from './InputSearch';
+export { UploadImage } from './UploadImage';
+export { IconSelection } from './IconSelection';
+export { IconSelectionRenderer } from './IconSelection/components/Icon';
+export { AlignSetting } from './AlignSetting';
+export { EdgeSetting } from './EdgeSetting';
+export { TreeSelect } from './TreeSelect';
+export { Result } from './Result';
+export { Card } from './Card';
+export { InputNumberWithUnit } from './InputNumberWithUnit';
+export { GradientSetting } from './GradientSetting';
+export { Collapse } from './Collapse';
+export { Drawer } from './Drawer';