@antscorp/antsomi-ui 1.3.3 → 1.3.5

package/es/components/molecules/Select/Select.js

@@ -1,11 +1,26 @@
+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 { Select as AntdSelect } from 'antd';
 import React from 'react';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Text } from '../../atoms/Text';
 // Icons
 import Icon from '@antscorp/icons';
 // Constants
-import { THEME } from '../../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Styled
 import { StyledTag, TagCloseBtn } from './styled';
 const tagRender = (props) => {
     const { label, closable, onClose } = props;
@@ -18,11 +33,17 @@ const tagRender = (props) => {
                     fontSize: 10,
                 } })) }, label));
 };
-const CustomSelect = props => React.createElement(AntdSelect, Object.assign({}, props));
+const CustomSelect = props => {
+    const { label, labelProps } = props, rest = __rest(props, ["label", "labelProps"]);
+    return (React.createElement(Flex, { vertical: true, gap: 4 },
+        typeof label === 'string' ? React.createElement(Text, Object.assign({}, labelProps), label) : label,
+        React.createElement(AntdSelect, Object.assign({}, rest))));
+};
 const Select = CustomSelect;
 Select.OptGroup = AntdSelect.OptGroup;
 Select.Option = AntdSelect.Option;
 Select.defaultProps = {
+    labelProps: { color: '#66666' },
     suffixIcon: (React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 16, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw10 } })),
     tagRender,
 };

package/es/components/molecules/Select/Test.d.ts

@@ -1,2 +1,3 @@
-declare const SelectTest: () => JSX.Element;
+import React from 'react';
+declare const SelectTest: () => React.JSX.Element;
 export default SelectTest;

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

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-interface SettingWrapperProps {
+export interface SettingWrapperProps {
     label: string;
     className?: string;
     labelColor?: string;
@@ -10,4 +10,3 @@ interface SettingWrapperProps {
     children?: React.ReactNode;
 }
 export declare const SettingWrapper: React.FC<SettingWrapperProps>;
-export {};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SettingWrapperProps } from '../SettingWrapper';
+import { PopoverProps } from 'antd';
+export type SettingWrapperPopoverProps = {
+    label: string;
+    wrapperProps?: Omit<SettingWrapperProps, 'label'>;
+    popoverProps?: Omit<PopoverProps, 'content'>;
+    iconPopover?: React.ReactNode;
+};
+/**
+ * Renders a popover wrapper for a setting.
+ *
+ * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
+ * @returns {React.ReactElement} The rendered popover wrapper.
+ */
+export declare const SettingWrapperPopover: React.FC<React.PropsWithChildren<SettingWrapperPopoverProps>>;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SettingWrapper } from '../SettingWrapper';
+import { Button, Icon, Popover } from '../../atoms';
+/**
+ * Renders a popover wrapper for a setting.
+ *
+ * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
+ * @returns {React.ReactElement} The rendered popover wrapper.
+ */
+export const SettingWrapperPopover = ({ label, children, wrapperProps, popoverProps, iconPopover, }) => {
+    var _a, _b;
+    return (React.createElement(SettingWrapper, Object.assign({ label: label, labelStyle: Object.assign({ fontWeight: 'bold' }, ((_a = wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.labelStyle) !== null && _a !== void 0 ? _a : {})) }, (wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {})),
+        React.createElement(Popover, Object.assign({ content: children, trigger: ['click'], overlayInnerStyle: Object.assign({ padding: '12px 16px', minWidth: 288, maxHeight: '90vh', overflow: 'auto' }, ((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.overlayInnerStyle) !== null && _b !== void 0 ? _b : {})) }, (popoverProps !== null && popoverProps !== void 0 ? popoverProps : {})), iconPopover)));
+};
+SettingWrapperPopover.defaultProps = {
+    iconPopover: React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-edit-2" }), type: "text" }),
+};

package/es/components/molecules/TextDecorationSelect/constants.d.ts

@@ -0,0 +1,19 @@
+export declare const OPTION_TEXT_DECORATION: readonly [{
+    readonly label: "None";
+    readonly value: "none";
+}, {
+    readonly label: "Underline";
+    readonly value: "underline";
+}, {
+    readonly label: "Overline";
+    readonly value: "overline";
+}, {
+    readonly label: "Line Through";
+    readonly value: "line-through";
+}, {
+    readonly label: "Underline - Overline";
+    readonly value: "underline overline";
+}, {
+    readonly label: "Underline - Line Through";
+    readonly value: "underline line-through";
+}];

package/es/components/molecules/TextDecorationSelect/constants.js

@@ -0,0 +1,26 @@
+export const OPTION_TEXT_DECORATION = [
+    {
+        label: 'None',
+        value: 'none',
+    },
+    {
+        label: 'Underline',
+        value: 'underline',
+    },
+    {
+        label: 'Overline',
+        value: 'overline',
+    },
+    {
+        label: 'Line Through',
+        value: 'line-through',
+    },
+    {
+        label: 'Underline - Overline',
+        value: 'underline overline',
+    },
+    {
+        label: 'Underline - Line Through',
+        value: 'underline line-through',
+    },
+];

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SelectProps } from '../Select';
+import { OPTION_TEXT_DECORATION } from './constants';
+export type TextDecorationSelectProps = Omit<SelectProps, 'onChange'> & {
+    label?: string;
+    showOptions?: (typeof OPTION_TEXT_DECORATION)[number]['label'][];
+    onChange?: (textTransform: (typeof OPTION_TEXT_DECORATION)[number]['value']) => void;
+};
+/**
+ * Generates a function comment for the given function body.
+ *
+ * @param {TextDecorationSelectProps} props - the props for the TextDecorationSelect component
+ * @return {React.FC<TextDecorationSelectProps>} the TextDecorationSelect component
+ */
+export declare const TextDecorationSelect: React.FC<TextDecorationSelectProps>;

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

@@ -0,0 +1,45 @@
+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;
+};
+import React, { useEffect, useMemo, useState } from 'react';
+import { Select } from '../Select';
+import { OPTION_TEXT_DECORATION } from './constants';
+import { SettingWrapper } from '../SettingWrapper';
+/**
+ * Generates a function comment for the given function body.
+ *
+ * @param {TextDecorationSelectProps} props - the props for the TextDecorationSelect component
+ * @return {React.FC<TextDecorationSelectProps>} the TextDecorationSelect component
+ */
+export const TextDecorationSelect = (props) => {
+    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const [selected, setSelected] = useState(defaultValue || value);
+    useEffect(() => {
+        setSelected(value === null || value === void 0 ? void 0 : value.toString());
+    }, [value]);
+    const textDecorationOptions = useMemo(() => {
+        let draftFontFamily = [...OPTION_TEXT_DECORATION];
+        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+            draftFontFamily = OPTION_TEXT_DECORATION.filter(({ label }) => showOptions.some(font => font === label));
+        }
+        return draftFontFamily;
+    }, [showOptions]);
+    const handleChange = (value) => {
+        if (onChange && typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
+        React.createElement(Select, Object.assign({ value: selected, options: [...textDecorationOptions], style: { width: '100%' }, onChange: select => {
+                setSelected(select);
+                handleChange(select);
+            }, showSearch: true }, selectProps))));
+};

package/es/components/molecules/TextTransformSelect/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const OPTION_TEXT_TRANSFORM: readonly [{
+    readonly label: "None";
+    readonly value: "none";
+}, {
+    readonly label: "Capitalize";
+    readonly value: "capitalize";
+}, {
+    readonly label: "Uppercase";
+    readonly value: "uppercase";
+}, {
+    readonly label: "Lowercase";
+    readonly value: "lowercase";
+}];

package/es/components/molecules/TextTransformSelect/constants.js

@@ -0,0 +1,19 @@
+// export const LABEL_TEXT_TRANSFORM = 'None' || 'Capitalize' || 'Uppercase' || 'Lowercase';
+export const OPTION_TEXT_TRANSFORM = [
+    {
+        label: 'None',
+        value: 'none',
+    },
+    {
+        label: 'Capitalize',
+        value: 'capitalize',
+    },
+    {
+        label: 'Uppercase',
+        value: 'uppercase',
+    },
+    {
+        label: 'Lowercase',
+        value: 'lowercase',
+    },
+];

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SelectProps } from '../Select';
+import { OPTION_TEXT_TRANSFORM } from './constants';
+export type TextTransformSelectProps = Omit<SelectProps, 'onChange'> & {
+    label?: string;
+    showOptions?: (typeof OPTION_TEXT_TRANSFORM)[number]['label'][];
+    onChange?: (textTransform: (typeof OPTION_TEXT_TRANSFORM)[number]['value']) => void;
+};
+export declare const TextTransformSelect: React.FC<TextTransformSelectProps>;

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

@@ -0,0 +1,39 @@
+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;
+};
+import React, { useEffect, useMemo, useState } from 'react';
+import { Select } from '../Select';
+import { SettingWrapper } from '../SettingWrapper';
+import { OPTION_TEXT_TRANSFORM } from './constants';
+export const TextTransformSelect = (props) => {
+    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const [selected, setSelected] = useState(defaultValue || value);
+    useEffect(() => {
+        setSelected(value === null || value === void 0 ? void 0 : value.toString());
+    }, [value]);
+    const textTransformOptions = useMemo(() => {
+        let draftFontFamily = [...OPTION_TEXT_TRANSFORM];
+        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+            draftFontFamily = OPTION_TEXT_TRANSFORM.filter(({ label }) => showOptions.some(font => font === label));
+        }
+        return draftFontFamily;
+    }, [showOptions]);
+    const handleChange = (value) => {
+        if (onChange && typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
+        React.createElement(Select, Object.assign({ value: selected, options: [...textTransformOptions], style: { width: '100%' }, onChange: select => {
+                setSelected(select);
+                handleChange(select);
+            }, showSearch: true }, selectProps))));
+};

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

@@ -1,12 +1,11 @@
 /// <reference types="react" />
 export declare const TreeSelect: (<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").BaseOptionType | import("rc-tree-select/lib/TreeSelect").DefaultOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
     children?: import("react").ReactNode;
-} & {
-    ref?: import("react").Ref<import("antd").RefSelectProps> | undefined;
-}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+} & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
     TreeNode: import("react").FC<import("rc-tree-select/lib/TreeNode").TreeNodeProps>;
     SHOW_ALL: "SHOW_ALL";
     SHOW_PARENT: "SHOW_PARENT";
     SHOW_CHILD: "SHOW_CHILD";
-    _InternalPanelDoNotUseOrYouWillBeFired: any;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 };

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

@@ -1,2 +1,3 @@
-declare const MediaIcon: (_props: any) => JSX.Element;
+import React from 'react';
+declare const MediaIcon: (_props: any) => React.JSX.Element;
 export default MediaIcon;

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

@@ -25,6 +25,14 @@ export { InputNumberWithUnit } from './InputNumberWithUnit';
 export { GradientSetting } from './GradientSetting';
 export { Collapse } from './Collapse';
 export { Drawer } from './Drawer';
+export { SettingWrapperPopover } from './SettingWrapperPopover';
+export { FontWeightSelect } from './FontWeightSelect';
+export { FontFamilySelect } from './FontFamilySelect';
+export { TextDecorationSelect } from './TextDecorationSelect';
+export { TextTransformSelect } from './TextTransformSelect';
+export { FontSetting, FontSettingEdit } from './FontSetting';
+export { Form } from './Form';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
 export type { ColorPickerProps } from './ColorPicker';
 export type { AlignEditProps, AlignSettingProps } from './AlignSetting';
+export type { TFontSettingProps, TFontSettingEditProps } from './FontSetting';

package/es/components/molecules/index.js

@@ -25,3 +25,10 @@ export { InputNumberWithUnit } from './InputNumberWithUnit';
 export { GradientSetting } from './GradientSetting';
 export { Collapse } from './Collapse';
 export { Drawer } from './Drawer';
+export { SettingWrapperPopover } from './SettingWrapperPopover';
+export { FontWeightSelect } from './FontWeightSelect';
+export { FontFamilySelect } from './FontFamilySelect';
+export { TextDecorationSelect } from './TextDecorationSelect';
+export { TextTransformSelect } from './TextTransformSelect';
+export { FontSetting, FontSettingEdit } from './FontSetting';
+export { Form } from './Form';

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

@@ -1,16 +1,10 @@
 /// <reference types="react" />
 export declare const DropDown: import("styled-components").StyledComponent<import("react").FC<import("antd").DropDownProps> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd").DropDownProps>;
+} & {
     Button: import("react").FC<import("antd/es/dropdown").DropdownButtonProps>;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd").DropDownProps) => JSX.Element;
 }, any, {}, never>;
-export declare const ButtonFeedback: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Partial<{
-    href: string;
-    target?: string | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
-} & import("antd/es/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "type" | "onClick"> & {
-    htmlType?: "button" | "reset" | "submit" | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">> & import("react").RefAttributes<HTMLElement>> & {
+export declare const ButtonFeedback: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {
     height?: number | undefined;
@@ -21,7 +15,7 @@ export declare const Overlay: import("styled-components").StyledComponent<"div",
 export declare const Text: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SendFeedback: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ControlGroup: import("styled-components").StyledComponent<import("react").FC<import("antd").SpaceProps> & {
+export declare const ControlGroup: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").SpaceProps & import("react").RefAttributes<HTMLDivElement>> & {
     Compact: import("react").FC<import("antd/es/space/Compact").SpaceCompactProps>;
 }, any, {}, never>;
 export declare const ControlLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
@@ -64,15 +58,11 @@ export declare const TitleSearch: import("styled-components").StyledComponent<"s
 export declare const WrapperSearch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>, any, {}, never>;
 export declare const TreeContent: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd").TreeProps<T> & {
     children?: import("react").ReactNode;
-} & {
-    ref?: import("react").Ref<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>> | undefined;
-}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+} & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("antd").TreeDataNode>>;
     DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
         children?: import("react").ReactNode;
-    } & {
-        ref?: import("react").Ref<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>> | undefined;
-    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    } & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
         displayName?: string | undefined;
     };
 }, any, {}, never>;

package/es/components/organism/Table/ExplorePivotTable/styled.d.ts

@@ -1,4 +1,5 @@
 export declare const StyledTable: import("styled-components").StyledComponent<import("antd/es/table/interface").RefTable & {
+    displayName?: string | undefined;
     SELECTION_COLUMN: {};
     EXPAND_COLUMN: {};
     SELECTION_ALL: "SELECT_ALL";

package/es/constants/storybook.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const TABLE_API_COLUMNS: ({
     title: string;
     dataIndex: string;
@@ -7,5 +8,5 @@ export declare const TABLE_API_COLUMNS: ({
     title: string;
     dataIndex: string;
     key: string;
-    render: (text: any) => JSX.Element;
+    render: (text: any) => React.JSX.Element;
 })[];

package/es/constants/theme.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -64,6 +64,7 @@ export const THEME = {
         accent2: '#dddddd',
         accent3: '#d2d2d2',
         accent5: '#999999',
+        gray5: '#d9d9d9',
         gold1,
         gold6,
     },
@@ -128,7 +129,9 @@ THEME.components = {
         controlHeight: 31,
     },
     Divider: {
-        marginLG: 10,
+        marginLG: 15,
+        marginXL: 15,
+        colorSplit: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.accent3,
     },
     Checkbox: {
         controlInteractiveSize: 18,
@@ -141,6 +144,25 @@ THEME.components = {
     },
     Tabs: {
         colorPrimary: '#1F5FAC',
-        margin: 20,
+        horizontalItemPadding: '10px 20px',
+        horizontalItemGutter: 0,
+        lineWidthBold: 3,
+        titleFontSize: 14,
+        titleFontSizeLG: 14,
+        titleFontSizeSM: 14,
+        horizontalMargin: '0px',
+    },
+    Collapse: {
+        headerBg: '#FFF',
+        borderRadiusLG: 0,
+        headerPadding: '15px 10px',
+    },
+    Switch: {
+        colorTextQuaternary: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw0,
+        colorTextTertiary: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw0,
+        handleSize: 12,
+        handleSizeSM: 7,
+        trackMinWidth: 30,
+        handleBg: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.colorPrimary,
     },
 };

package/es/test.d.ts

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

package/es/test.js

@@ -1,10 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import '@antscorp/icons/main.css';
-import { ColorSetting, ConfigProvider, EdgeSetting, IconSelection, InputNumberWithUnit, PositionSetting, RadioGroup, SettingWrapper, SliderWithInputNumber, Space, UploadImage, } from './components';
-// Constants
-import { THEME } from './constants';
+import { ConfigProvider, EdgeSetting, GradientSetting, IconSelection, PositionSetting, SettingWrapper, 
+// Slider,
+SliderWithInputNumber, Space, UploadImage, } from './components';
+// import { Slider } from 'antd';
+import { Slider } from '@antscorp/antsomi-ui/es/components/atoms/Slider';
+import { Rate } from './components/atoms/Rate';
 export const BACKGROUND_COLOR_STYLE = {
     SOLID: {
         value: 'color',
@@ -28,7 +31,6 @@ export const customColors = [
     '#57b8c2',
 ];
 export const App = () => {
-    var _a;
     const [state, setState] = useState({
         option: {
             dateType: 'today',
@@ -97,15 +99,7 @@ export const App = () => {
             React.createElement("h2", { style: { textAlign: 'center' } }, "Test component of media template"),
             React.createElement(Space, { size: 20, direction: "vertical" },
                 React.createElement(SettingWrapper, { vertical: true, label: "Color Setting" },
-                    React.createElement(ColorSetting, { label: "Background Color", labelStyling: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon }, color: colorSettingState.color, customColors: colorSettingState.customColors, callback: callbackColorSetting, onChange: handleChangeColorSetting })),
-                React.createElement(SettingWrapper, { vertical: true, label: "Input number with unit" },
-                    React.createElement(InputNumberWithUnit, { unit: "px", min: 0, max: 2000, value: 700, onChange: value => {
-                            console.log('onChange:: ', value);
-                        }, onChangeUnit: unit => {
-                            console.log('onChangeUnit:: ', unit);
-                        } })),
-                React.createElement(SettingWrapper, { label: "Radio Group" },
-                    React.createElement(RadioGroup, { options: Object.values(BACKGROUND_COLOR_STYLE), value: radioValue, onChange: e => handleChangeRadio(e) })),
+                    React.createElement(GradientSetting, null)),
                 React.createElement(SliderWithInputNumber, { label: "Size (px)", labelStyling: { marginTop: 10 }, min: 0, max: 100, value: sliderValue, onAfterChange: handleChangeSlider }),
                 React.createElement(EdgeSetting, { label: "Notification Spacing", unit: "px", linked: false, values: edge, 
                     // edgeLabels={[t(translations.column.title), t(translations.row.title)]}
@@ -140,29 +134,22 @@ export const App = () => {
                             console.log('onChangeSvg', value);
                         } }))))));
     // ------------------------ Media template components test end -------------------------
-    // return (
-    //   <DatePicker.AdvancedRangePicker
-    //     disabled
-    //     showTime={false}
-    //     timeRange={{
-    //       startDate: {
-    //         date: '',
-    //         calculationDate: 'years',
-    //         value: 1,
-    //         calculationType: 'minus',
-    //         dateType: 'today',
-    //       },
-    //       endDate: {
-    //         date: '',
-    //         calculationDate: 'days',
-    //         value: 1,
-    //         calculationType: 'minus',
-    //         dateType: 'today',
-    //       },
-    //     }}
-    //   />
-    // );
+    return (React.createElement("div", { style: { width: '500px', margin: '32px' } },
+        React.createElement(GradientSetting, { onChange: e => console.log('gradient change') }),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(Slider, { className: "test-classname", min: -10, max: 10, onChange: e => console.log('slider change', e) }),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(Rate, null),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(Slider, { className: "test-classname" })));
 };
-ReactDOM.render(React.createElement(React.StrictMode, null,
-    React.createElement(ConfigProvider, { locale: "vi" },
-        React.createElement(App, null))), document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(React.createElement(React.StrictMode, null,
+    React.createElement(ConfigProvider, { locale: "en" },
+        React.createElement(App, null))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -19,6 +19,7 @@
   "unpkg": "dist/index.js",
   "types": "es/index.d.ts",
   "scripts": {
+    "publish": "npm run clean && npm run build:es",
     "build:es": "npm run copy-files && npm run ts-compile",
     "clean": "rimraf dist lib es",
     "dev": "vite",
@@ -65,7 +66,7 @@
     "@fortawesome/free-solid-svg-icons": "6.1.1",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@tinymce/tinymce-react": "^3.7.0",
-    "antd": "^5.3.2",
+    "antd": "5.12.6",
     "axios": "^1.4.0",
     "babel-plugin-file-loader": "^2.0.0",
     "dayjs": "^1.11.7",
@@ -73,6 +74,8 @@
     "highlight.js": "^11.8.0",
     "html-to-image": "^1.11.11",
     "html2canvas": "^1.4.1",
+    "i18next": "21.6.16",
+    "i18next-browser-languagedetector": "6.1.2",
     "lodash": "^4.17.21",
     "moment": "2.29.2",
     "qs": "6.10.3",
@@ -83,9 +86,7 @@
     "rehype-highlight": "^6.0.0",
     "remark-gfm": "^3.0.1",
     "ts-dedent": "^2.2.0",
-    "tui-image-editor": "^3.15.3",
-    "i18next": "21.6.16",
-    "i18next-browser-languagedetector": "6.1.2"
+    "tui-image-editor": "^3.15.3"
   },
   "devDependencies": {
     "@ant-design/cssinjs": "^1.6.2",

package/dist/0dfb9214dfd945cd7290.png

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/d327b24e9c5d8f486f08d253aab58ce6.png";

package/dist/4f54a37971347e3d7122.png

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/725a52bd91a3ce534b10833df510e5fa.png";

package/dist/574b7bee0563a9fe9a29.png

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/2d496b55d85a9545d7311c073af442bb.png";

package/dist/6b586356e837581204dc.svg

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/bb64e23a1ff390a416d765ee556096ab.svg";