@antscorp/antsomi-ui 1.3.5-beta.244 → 1.3.5-beta.246

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -838,7 +838,7 @@ export const GlobalStyle = () => {
         }
 
         .antsomi-form-item-explain-error {
-          font-size: 11px;
+          font-size: 11px !important;
         }
       }
 

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

@@ -1,12 +1,21 @@
+var _a, _b;
 // Libraries
 import styled, { css } from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components';
 // Assets
-import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/skeleton_bg.png';
+import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/background/skeleton-background.png';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const backgroundImage = css `
   ${() => css `
-    background: url(${SkeletonBg}) no-repeat center center, #e5e5e5;
-    background-size: contain;
+    &::after {
+      content: '';
+      position: absolute;
+      width: 90%;
+      height: 90%;
+      background: url(${SkeletonBg}) no-repeat center center;
+      background-size: contain;
+      z-index: 0;
+    }
   `}
 `;
 const setWidthHeight = ({ w, h }) => `
@@ -125,7 +134,7 @@ export const ImageSliderStyled = styled(Flex) `
       width: 100%;
       height: 100%;
       background-color: transparent;
-      z-index: 1;
+      z-index: 2;
       transition: background-color 150ms ease-in-out;
     }
 
@@ -137,14 +146,21 @@ export const ImageSliderStyled = styled(Flex) `
   .image-container {
     &--big,
     &--small {
-      background: #e5e5e5;
+      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};
+      border-radius: 5px;
+
       ${centerBlock}
       &:not(.hide-skeleton) {
         ${backgroundImage}
       }
 
       img {
+        position: relative;
         object-fit: contain;
+        z-index: 1;
       }
 
       div:has(> img) {
@@ -169,7 +185,8 @@ export const ImageSliderStyled = styled(Flex) `
       height: 72px;
       flex-shrink: 0;
 
-      border: 2px solid #e5e5e5;
+      /* border: 2px solid #e5e5e5; */
+      border-width: 2px;
       border-radius: 2px;
       user-select: none;
       cursor: pointer;

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

@@ -2,17 +2,19 @@
 import styled from 'styled-components';
 // Images
 import skeletonBackground from '../../../assets/images/background/skeleton-background.png';
-import { globalToken } from '../../..';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ThumbnailCardWrapper = styled.div `
-  background-color: #e5e5e5;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorBgSkeleton};
   padding: 10px;
-  border-radius: ${globalToken.borderRadius}px;
+  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
   position: relative;
   box-sizing: border-box;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
 
   :hover {
     .center-action {
@@ -77,7 +79,7 @@ export const ThumbnailCardWrapper = styled.div `
   }
 
   .backdrop {
-    border-radius: ${globalToken.borderRadius}px;
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
     position: absolute;
     width: 100%;
     height: 100%;

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

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components';
 // Images
 import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
-// Providers
-import { globalToken } from '@antscorp/antsomi-ui/es/providers';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const THUMBNAIL_CARD_RADIUS = 5;
 export const BannerWrapper = styled.div `
   width: 100%;
@@ -10,8 +10,9 @@ export const BannerWrapper = styled.div `
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #0000001a;
-  border-radius: ${globalToken.borderRadius}px;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorBgSkeleton};
+  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
 
   ${props => props.$height
     ? css `

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

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 // Components
 import { Button, Flex } from '../../../../atoms';
 // Providers
-import { globalToken } from '@antscorp/antsomi-ui/es/providers';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const InformationWrapper = styled(Flex) `
   width: 300px;
   flex-shrink: 0;
@@ -51,11 +51,11 @@ export const InformationWrapper = styled(Flex) `
   }
 `;
 export const CheckboxButton = styled(Button) `
-  color: ${globalToken.colorText} !important;
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText} !important;
 
   ${p => p.$active &&
     css `
-      color: ${globalToken.colorPrimary} !important;
-      background-color: ${globalToken.blue1_1} !important;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
+      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1} !important;
     `}
 `;

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 // Components
 import { Flex } from '../../../../atoms';
 // Providers
-import { globalToken } from '@antscorp/antsomi-ui/es/providers';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const SimilarTemplateWrapper = styled(Flex) `
   margin-top: 15px;
 
@@ -17,10 +17,10 @@ export const TemplateListWrapper = styled.div `
   gap: 30px;
 
   .thumbnail-card {
-    border-radius: ${globalToken.borderRadius}px;
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
 
     > div {
-      border-radius: ${globalToken.borderRadius}px;
+      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
     }
   }
 `;

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

@@ -1,8 +1,8 @@
 var _a;
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { globalToken } from '@antscorp/antsomi-ui/es/providers';
 import styled from 'styled-components';
 import { SwiperSlide } from 'swiper/react';
+// Constants
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ThumbnailSliderWrapper = styled.div `
   width: 100%;
   display: flex;
@@ -21,10 +21,10 @@ export const ThumbnailSliderWrapper = styled.div `
   .thumbnail-animation {
     box-shadow: none;
     transition: box-shadow 0.1s ease-in-out;
-    border-radius: ${globalToken.borderRadius}px;
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
 
     > div {
-      border-radius: ${globalToken.borderRadius}px;
+      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
     }
 
     &:hover {

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

@@ -18,20 +18,17 @@ import { Banner, Information, SimilarTemplate, ThumbnailSlider } from './compone
 import { ModalContainer, ModalWrapper } from './styled';
 // Constants
 import { DEVICE_TYPE, SIMILAR_TEMPLATE_DEFAULT, THUMBNAIL_DEFAULT } from './constants';
-// Providers
-import { AntdConfigProviderV2 } from '@antscorp/antsomi-ui/es/providers';
 export const PreviewTemplateModal = memo(props => {
     const { bannerProps, thumbnailProps = THUMBNAIL_DEFAULT, similarTemplateProps = SIMILAR_TEMPLATE_DEFAULT, informationProps, loading = false } = props, restOfProps = __rest(props, ["bannerProps", "thumbnailProps", "similarTemplateProps", "informationProps", "loading"]);
     // States
     const [deviceType, setDeviceType] = useState(DEVICE_TYPE.DESKTOP.value);
-    return (React.createElement(AntdConfigProviderV2, null,
-        React.createElement(ModalContainer, Object.assign({ footer: null, centered: true, modalRender: node => React.createElement(ModalWrapper, null, node) }, restOfProps),
-            React.createElement(Spin, { spinning: loading },
-                React.createElement(Flex, { gap: 20 },
-                    React.createElement("div", { className: "overview" },
-                        React.createElement(Flex, { gap: 20, vertical: true, style: { width: '100%' } },
-                            React.createElement(Banner, Object.assign({ deviceType: deviceType }, bannerProps)),
-                            React.createElement(ThumbnailSlider, Object.assign({}, thumbnailProps)))),
-                    React.createElement(Information, Object.assign({ deviceType: deviceType, onDeviceTypeChange: value => setDeviceType(value) }, informationProps))),
-                React.createElement(SimilarTemplate, Object.assign({}, similarTemplateProps))))));
+    return (React.createElement(ModalContainer, Object.assign({ footer: null, centered: true, modalRender: node => React.createElement(ModalWrapper, null, node) }, restOfProps),
+        React.createElement(Spin, { spinning: loading },
+            React.createElement(Flex, { gap: 20 },
+                React.createElement("div", { className: "overview" },
+                    React.createElement(Flex, { gap: 20, vertical: true, style: { width: '100%' } },
+                        React.createElement(Banner, Object.assign({ deviceType: deviceType }, bannerProps)),
+                        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/template/TemplateListing/index.js

@@ -12,8 +12,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 /* eslint-disable react/function-component-definition */
 // Libraries
 import React, { memo, useState } from 'react';
-// Config Providers
-import { AntdConfigProviderV2 } from '../../..';
 // Components
 import { CategoryListing, BlankTemplate, Empty } from './components';
 import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -66,32 +64,31 @@ export const TemplateListing = memo(props => {
     };
     return (
     /** The className "template-listing-wrapper" is used to detect dom in useListingItemResize hook */
-    React.createElement(AntdConfigProviderV2, null,
-        React.createElement(TemplateListingWrapper, { className: "template-listing-wrapper" },
-            React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
-            React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
-                header,
-                React.createElement(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full" },
-                    React.createElement("div", { className: "template-listing" },
-                        React.createElement("div", { ref: containerRef, style: {
-                                display: 'grid',
-                                gap: listingGap,
-                                gridTemplateColumns: `repeat(${itemPerRow}, minmax(0, 1fr))`,
-                            } },
-                            React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)),
-                            !!itemPerRow &&
-                                (items === null || items === void 0 ? void 0 : items.map((item, index) => {
-                                    const { id, name, thumbnail } = item || {};
-                                    const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
-                                    return (React.createElement("div", { key: id },
-                                        index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
-                                        React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, previewBtnProps: {
-                                                onClick: handleClickThumbnailPreview,
-                                            } }, restOfTemplateItemProps))));
-                                }))),
-                        !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
-                footer),
-            React.createElement(PreviewTemplateModal, Object.assign({ open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps)))));
+    React.createElement(TemplateListingWrapper, { className: "template-listing-wrapper" },
+        React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
+        React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
+            header,
+            React.createElement(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full" },
+                React.createElement("div", { className: "template-listing" },
+                    React.createElement("div", { ref: containerRef, style: {
+                            display: 'grid',
+                            gap: listingGap,
+                            gridTemplateColumns: `repeat(${itemPerRow}, minmax(0, 1fr))`,
+                        } },
+                        React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)),
+                        !!itemPerRow &&
+                            (items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                                const { id, name, thumbnail } = item || {};
+                                const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
+                                return (React.createElement("div", { key: id },
+                                    index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
+                                    React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, previewBtnProps: {
+                                            onClick: handleClickThumbnailPreview,
+                                        } }, restOfTemplateItemProps))));
+                            }))),
+                    !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
+            footer),
+        React.createElement(PreviewTemplateModal, Object.assign({ open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps))));
 });
 TemplateListing.displayName = 'TemplateListing';
 TemplateListing.defaultProps = TEMPLATE_LISTING_DEFAULT;

package/es/constants/theme.js

@@ -22,7 +22,8 @@ export const THEME = {
         colorTextActive: '#e0ebf7',
         colorIcon: '#666666',
         /* Border radius */
-        borderRadius: 3,
+        borderRadius: 10,
+        borderRadiusLG: 10,
         borderRadiusXL: 10,
         /* Font */
         fontFamily: 'Roboto',
@@ -76,6 +77,8 @@ export const THEME = {
         gold1,
         gold6,
         scrollBarSize: '4px',
+        /** Skeleton */
+        colorBgSkeleton: '#FCFDFF',
     },
 };
 THEME.components = {
@@ -88,6 +91,7 @@ THEME.components = {
         colorBgTextHover: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue,
         colorBgContainerDisabled: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw6,
         colorTextDisabled: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw0,
+        textHoverBg: '#F2F9FF',
     },
     Input: {
         controlHeight: 32,
@@ -150,6 +154,7 @@ THEME.components = {
         controlInteractiveSize: 18,
         colorBorder: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.colorPrimary,
         lineWidth: 2,
+        borderRadiusSM: 5,
     },
     Modal: {
         titleFontSize: 16,

package/es/providers/index.d.ts

@@ -1,3 +1,2 @@
 export * from './ConfigProvider';
 export * from './AppConfigProvider';
-export * from './AntdConfigProviderV2';

package/es/providers/index.js

@@ -1,3 +1,2 @@
 export * from './ConfigProvider';
 export * from './AppConfigProvider';
-export * from './AntdConfigProviderV2';

package/package.json

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

package/es/providers/AntdConfigProviderV2.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { ConfigProviderProps } from 'antd';
-interface AntdConfigProviderV2Props extends ConfigProviderProps {
-}
-export declare const AntdConfigProviderV2: React.FC<AntdConfigProviderV2Props>;
-export declare const globalToken: import("antd/es/theme/internal").AliasToken;
-export {};

package/es/providers/AntdConfigProviderV2.js

@@ -1,28 +0,0 @@
-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;
-};
-var _a;
-// Libraries
-import React from 'react';
-import { ConfigProvider, theme } from 'antd';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-const { getDesignToken } = theme;
-const themeV2 = {
-    token: Object.assign(Object.assign({}, THEME.token), { colorText: '#000000', borderRadius: 10, borderRadiusLG: 10 }),
-    components: Object.assign(Object.assign({}, THEME.components), { Button: Object.assign(Object.assign({}, (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Button), { borderRadius: 10, textHoverBg: '#F2F9FF' }), Checkbox: {
-            borderRadiusSM: 5,
-        } }),
-};
-export const AntdConfigProviderV2 = props => {
-    const { children } = props, restProps = __rest(props, ["children"]);
-    return (React.createElement(ConfigProvider, Object.assign({ theme: themeV2 }, restProps), children));
-};
-export const globalToken = getDesignToken(themeV2);