@antscorp/antsomi-ui 1.3.4 → 1.3.5-beta.2

package/es/components/atoms/SlideBar/SlideBar.js

@@ -0,0 +1,283 @@
+// Libraries
+import React, { useRef, useEffect, useState, useMemo } from 'react';
+import _ from 'lodash';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+// Components
+import { Icon } from '../Icon';
+import { Popover } from '../Popover';
+// Styled
+import { ContainerSlideBar, MainContent, MenuItem, MenuList, SlideItem, SliderWrapper, SlideText, WrapperDisable, WrapperOverflow, } from './styled';
+import { PlusCircleFilled } from '@ant-design/icons';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { BTN_ADD_SIZE, slideActionType, WIDTH_SLIDE_ITEM } from './constants';
+// Utils
+import { getObjectPropSafely, handleError } from '@antscorp/antsomi-ui/es/utils';
+// Locales
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+const getItemStyle = (isDragging, draggableStyle) => (Object.assign({ 
+    // some basic styles to make the items look a bit nicer
+    userSelect: 'none', borderLeft: isDragging ? '1px solid #e0e0e0' : 'none' }, draggableStyle));
+const PATH = 'src/components/atoms/SlideBar/SlideBar.tsx';
+export const SlideBar = props => {
+    var _a, _b, _c, _d;
+    const { isViewMode, isShowLabelSequentially, isDragDisabled, isShowAdd, disabled, prefix, options, activeId, limit, errors, callback, } = props;
+    // States
+    const [state, setState] = useState({
+        cacheInfoClicked: {
+            label: '',
+            value: '',
+        },
+        openPopover: {},
+        disabledPrev: true,
+        disabledNext: true,
+        notiUpdateScroll: 1,
+    });
+    // Refs
+    const wrapperOverflowRef = useRef(null);
+    const disabledAdd = useMemo(() => disabled || isViewMode || (limit && options.length >= (limit === null || limit === void 0 ? void 0 : limit.max)), [disabled, isViewMode, limit, options.length]);
+    const disabledDuplicate = useMemo(() => (limit && options.length >= (limit === null || limit === void 0 ? void 0 : limit.max)) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
+    const disabledDelete = useMemo(() => (limit && options.length <= (limit === null || limit === void 0 ? void 0 : limit.min)) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
+    // Locales
+    const { t } = i18nInstance;
+    const handleClick = (event, slideInfo) => {
+        event.stopPropagation();
+        setState(prev => (Object.assign(Object.assign({}, prev), { cacheInfoClicked: slideInfo })));
+    };
+    const reorder = (list, startIndex, endIndex) => {
+        const result = Array.from(list);
+        const [removed] = result.splice(startIndex, 1);
+        result.splice(endIndex, 0, removed);
+        return result;
+    };
+    const handleDragEnd = result => {
+        try {
+            // dropped outside the list
+            if (!result.destination) {
+                return;
+            }
+            const items = reorder(options, result.source.index, result.destination.index);
+            if (typeof callback === 'function') {
+                callback(slideActionType.RE_ORDERS, items);
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleDragEnd',
+                args: {
+                    error,
+                },
+            });
+            // eslint-disable-next-line no-console
+            console.log('error :>', error);
+        }
+    };
+    const handleActiveSlide = (e, slideInfo) => {
+        try {
+            e.stopPropagation();
+            if (typeof callback === 'function' && !_.isEmpty(slideInfo) && activeId !== slideInfo.value) {
+                callback(slideActionType.ACTIVE, slideInfo);
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleActiveSlide',
+                args: {
+                    error,
+                    slideInfo,
+                },
+            });
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    const handleClosePopover = () => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openPopover: {} })));
+    };
+    const handleDuplicateSlide = (slideInfo) => {
+        try {
+            if (typeof callback === 'function' && !_.isEmpty(slideInfo)) {
+                callback(slideActionType.DUPLICATE, slideInfo);
+            }
+            handleClosePopover();
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleDuplicateSlide',
+                args: {
+                    error,
+                    slideInfo,
+                },
+            });
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    const handleDeleteSlide = (slideInfo) => {
+        try {
+            if (typeof callback === 'function' && !_.isEmpty(slideInfo)) {
+                callback(slideActionType.DELETE, slideInfo);
+            }
+            handleClosePopover();
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleDeleteSlide',
+                args: {
+                    error,
+                    slideInfo,
+                },
+            });
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    const handleChangeScrollDirection = (type = '') => {
+        try {
+            if (_.isEmpty(wrapperOverflowRef.current))
+                return;
+            if (type === 'PREVIOUS') {
+                if (wrapperOverflowRef.current.scrollLeft < WIDTH_SLIDE_ITEM) {
+                    wrapperOverflowRef.current.scrollLeft = 0;
+                }
+                else {
+                    wrapperOverflowRef.current.scrollLeft -= WIDTH_SLIDE_ITEM;
+                }
+            }
+            else if (type === 'NEXT') {
+                wrapperOverflowRef.current.scrollLeft += WIDTH_SLIDE_ITEM;
+            }
+            setState(prev => (Object.assign(Object.assign({}, prev), { notiUpdateScroll: prev.notiUpdateScroll + 1 })));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleChangePrev',
+                args: {
+                    type,
+                    error,
+                },
+            });
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    const handleAddSlide = () => {
+        try {
+            if (typeof callback === 'function') {
+                callback(slideActionType.ADD);
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleAddSlide',
+                args: {
+                    error,
+                },
+            });
+        }
+    };
+    const handleOpenChange = (newOpen, itemId) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openPopover: {
+                [itemId]: newOpen,
+            } })));
+    };
+    useEffect(() => () => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { cacheInfoClicked: { label: '', value: '' } })));
+    }, []);
+    // Calculator center selected template
+    useEffect(() => {
+        const selectedSlideEle = document.getElementById(`template-slide-${activeId}`);
+        if (selectedSlideEle instanceof HTMLElement &&
+            wrapperOverflowRef &&
+            wrapperOverflowRef.current) {
+            // Calculate the scroll position to center the element
+            const elementLeftOffset = selectedSlideEle.offsetLeft;
+            const containerWidth = wrapperOverflowRef.current.clientWidth;
+            const elementWidth = selectedSlideEle.clientWidth;
+            const scrollPosition = elementLeftOffset - (containerWidth - elementWidth) / 2;
+            // Set the scroll position of the container
+            wrapperOverflowRef.current.scrollLeft = scrollPosition;
+        }
+    }, [activeId]);
+    useEffect(() => {
+        if (!_.isEmpty(wrapperOverflowRef.current)) {
+            const isDisabledPrevTmp = getObjectPropSafely(() => { var _a; return ((_a = wrapperOverflowRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) === 0; });
+            const isDisabledNextTmp = getObjectPropSafely(() => {
+                const { scrollLeft = 0, offsetWidth = 0, scrollWidth = 0, } = wrapperOverflowRef.current || {};
+                return offsetWidth === scrollWidth || scrollWidth <= Math.ceil(scrollLeft) + offsetWidth;
+            });
+            setState(prev => (Object.assign(Object.assign({}, prev), { disabledPrev: isDisabledPrevTmp, disabledNext: isDisabledNextTmp })));
+        }
+    }, [options, state.notiUpdateScroll]);
+    const renderMainContent = () => options.map((item, index) => {
+        let { label } = _.cloneDeep(item);
+        if (isShowLabelSequentially) {
+            label = `${prefix} ${index + 1}`;
+        }
+        return (React.createElement(Draggable, { key: item.value, isDragDisabled: isViewMode || disabled || isDragDisabled, draggableId: item.value, index: index }, (providedDraggable, snapshotDraggable) => {
+            var _a, _b;
+            return (React.createElement(SlideItem, Object.assign({ id: `template-slide-${item.value}`, isActive: activeId === item.value, className: "slide-item", ref: providedDraggable.innerRef }, providedDraggable.draggableProps, providedDraggable.dragHandleProps, { isSlideError: Array.isArray(errors) && errors.includes(item.value), style: getItemStyle(snapshotDraggable.isDragging, providedDraggable.draggableProps.style), onClick: (e) => {
+                    e.stopPropagation();
+                    handleActiveSlide(e, item);
+                } }),
+                React.createElement(SlideText, { isActive: activeId === item.value }, label),
+                !isViewMode && (React.createElement(Popover, { placement: "bottomLeft", trigger: "click", open: state.openPopover[item.value], onOpenChange: newOpen => handleOpenChange(newOpen, item.value), content: React.createElement(MenuList, null,
+                        React.createElement(WrapperDisable, { disabled: disabledDuplicate },
+                            React.createElement(MenuItem, { isDisabled: disabledDuplicate, onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (!disabledDuplicate) {
+                                        handleDuplicateSlide(state.cacheInfoClicked);
+                                    }
+                                } }, t(translations.duplicate.title))),
+                        React.createElement(WrapperDisable, { disabled: disabledDelete },
+                            React.createElement(MenuItem, { isDisabled: disabledDelete, onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (!disabledDelete) {
+                                        handleDeleteSlide(state.cacheInfoClicked);
+                                    }
+                                } }, t(translations.delete.title)))), arrow: false },
+                    React.createElement(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText, size: "20px", onClick: (event) => handleClick(event, item), disabled: false })))));
+        }));
+    });
+    const renderSliderDragDrop = () => (React.createElement(WrapperOverflow, { ref: wrapperOverflowRef, id: "wrapper-overflow" },
+        React.createElement(DragDropContext, { onDragEnd: handleDragEnd },
+            React.createElement(Droppable, { droppableId: "droppable", direction: "horizontal" }, (providedDroppable, _snapshotDroppable) => (React.createElement(MainContent, Object.assign({ ref: providedDroppable.innerRef }, providedDroppable.droppableProps), renderMainContent()))))));
+    return (React.createElement(ContainerSlideBar, null,
+        React.createElement(SliderWrapper, { isViewMode: isViewMode },
+            React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {
+                    e.stopPropagation();
+                    handleChangeScrollDirection('PREVIOUS');
+                } }),
+            renderSliderDragDrop(),
+            React.createElement(Icon, { type: "icon-ants-angle-right", style: { fontSize: '16px', cursor: 'pointer', color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary }, className: "btn-arrow-right btn-action-slide-template", disabled: state.disabledNext, onClick: (e) => {
+                    e.stopPropagation();
+                    handleChangeScrollDirection('NEXT');
+                } })),
+        isShowAdd && (React.createElement(PlusCircleFilled, { style: {
+                fontSize: `${BTN_ADD_SIZE}px`,
+                cursor: disabledAdd ? 'not-allowed' : 'pointer',
+                color: disabledAdd ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled : (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary,
+            }, disabled: disabledAdd, onClick: (e) => {
+                e.stopPropagation();
+                if (!disabledAdd) {
+                    handleAddSlide();
+                }
+            } }))));
+};
+SlideBar.defaultProps = {
+    isViewMode: false,
+    disabled: false,
+    isShowLabelSequentially: true,
+    isShowAdd: true,
+    isDragDisabled: false,
+    activeId: '',
+    prefix: 'Slide',
+    options: [],
+};

package/es/components/atoms/SlideBar/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const OFFSET_SIZE_SLIDE = 32;
+export declare const BTN_ADD_SIZE = 32;
+export declare const WIDTH_SLIDE_ITEM = 105;
+export declare const slideActionType: {
+    readonly ADD: "ADD_SLIDE";
+    readonly RE_ORDERS: "RE_ORDERS_SLIDE_LIST";
+    readonly ACTIVE: "ACTIVE_SLIDE";
+    readonly DUPLICATE: "DUPLICATE_SLIDE";
+    readonly DELETE: "DELETE_SLIDE";
+};

package/es/components/atoms/SlideBar/constants.js

@@ -0,0 +1,10 @@
+export const OFFSET_SIZE_SLIDE = 32;
+export const BTN_ADD_SIZE = 32;
+export const WIDTH_SLIDE_ITEM = 105;
+export const slideActionType = {
+    ADD: 'ADD_SLIDE',
+    RE_ORDERS: 'RE_ORDERS_SLIDE_LIST',
+    ACTIVE: 'ACTIVE_SLIDE',
+    DUPLICATE: 'DUPLICATE_SLIDE',
+    DELETE: 'DELETE_SLIDE',
+};

package/es/components/atoms/SlideBar/index.d.ts

@@ -0,0 +1 @@
+export * from './SlideBar';

package/es/components/atoms/SlideBar/index.js

@@ -0,0 +1 @@
+export * from './SlideBar';

package/es/components/atoms/SlideBar/styled.d.ts

@@ -0,0 +1,20 @@
+export declare const SliderWrapper: import("styled-components").StyledComponent<"div", any, {
+    isViewMode?: boolean | undefined;
+}, never>;
+export declare const WrapperOverflow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SlideItem: import("styled-components").StyledComponent<"div", any, {
+    isActive?: boolean | undefined;
+    isSlideError?: boolean | undefined;
+}, never>;
+export declare const SlideText: import("styled-components").StyledComponent<"div", any, {
+    isActive?: boolean | undefined;
+}, never>;
+export declare const MenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {
+    isDisabled?: boolean | undefined;
+}, never>;
+export declare const ContainerSlideBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperDisable: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;

package/es/components/atoms/SlideBar/styled.js

@@ -0,0 +1,136 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+/* eslint-disable indent */
+// Styled
+import styled, { css } from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { BTN_ADD_SIZE, OFFSET_SIZE_SLIDE, WIDTH_SLIDE_ITEM } from './constants';
+export const SliderWrapper = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.accent1};
+  box-sizing: border-box;
+  // max-width: ${props => (props.isViewMode ? '100%' : 'calc(100% - 40px)')};
+  width: calc(100% - ${BTN_ADD_SIZE}px - ${OFFSET_SIZE_SLIDE * 2}px);
+  flex: 1;
+  height: ${OFFSET_SIZE_SLIDE}px;
+  padding: 0px ${OFFSET_SIZE_SLIDE}px;
+
+  .btn-action-slide-template {
+    width: ${OFFSET_SIZE_SLIDE}px !important;
+    height: ${OFFSET_SIZE_SLIDE - 2}px !important;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.btn-arrow-left {
+      position: absolute;
+      top: 0px;
+      left: 0;
+      border-right: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent1};
+    }
+
+    &.btn-arrow-right {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      border-left: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.accent1};
+    }
+  }
+`;
+export const WrapperOverflow = styled.div `
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    background-color: #eee;
+    width: 0px;
+    height: 0px;
+  }
+`;
+export const MainContent = styled.div `
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .slide-item {
+    border-right: 1px solid ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.accent1};
+  }
+`;
+export const SlideItem = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+
+  border-top: 1px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.accent1};
+  border-bottom: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.accent1};
+  height: ${OFFSET_SIZE_SLIDE}px;
+  width: ${WIDTH_SLIDE_ITEM}px;
+  padding: 0px 10px;
+  cursor: pointer;
+  background-color: ${props => { var _a, _b; return (props.isActive ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextActive : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0); }};
+
+  .icon-more-vertical {
+    font-weight: 600;
+  }
+
+  ${props => {
+    var _a;
+    return props.isSlideError &&
+        css `
+      border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red8} !important;
+    `;
+}}
+`;
+export const SlideText = styled.div `
+  font-size: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.fontSize}px;
+  font-weight: 400;
+  line-height: ${OFFSET_SIZE_SLIDE}px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  color: ${props => { var _a, _b; return (props.isActive ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText); }};
+`;
+export const MenuList = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
+`;
+export const MenuItem = styled.div `
+  font-size: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.fontSize}px;
+  line-height: 14px;
+  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText};
+
+  ${props => props.isDisabled &&
+    css `
+      pointer-events: none;
+    `}
+`;
+export const ContainerSlideBar = styled.div `
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  * > * {
+    box-sizing: border-box;
+  }
+`;
+export const WrapperDisable = styled.div `
+  cursor: pointer;
+
+  ${props => props.disabled &&
+    css `
+      cursor: not-allowed;
+      opacity: 0.6;
+    `}
+`;

package/es/components/atoms/Slider/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
-export interface SliderProps extends SliderSingleProps {
+export interface SliderProps extends Omit<SliderSingleProps, 'tooltipVisible'> {
+    tooltipVisible?: boolean | 'default';
 }
 export declare const Slider: React.FC<SliderProps | SliderRangeProps>;

package/es/components/atoms/Slider/index.js

@@ -1,30 +1,28 @@
-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;
-};
 // Libraries
 import React, { memo, useMemo } from 'react';
 // Antd Components
 import { Slider as AntdSlider } from 'antd';
 // Styled
 import { SliderWrapper } from './styled';
+import { omit } from 'lodash';
 export const Slider = memo(props => {
-    const { range, value, min = 0, max = 0 } = props, restOf = __rest(props, ["range", "value", "min", "max"]);
+    const { range, value, min = 0, max = 0, className, tooltipVisible } = props;
     const isNegative = useMemo(() => !!(!range && min < 0), [range, min]);
     const calculateWidth = useMemo(() => ((value || 0) * 100) / (Math.abs(max) + Math.abs(min) || 1), [min, max, value]);
+    // const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
+    const restProps = omit(props, ['tooltipVisible']);
     if (isNegative) {
-        return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth },
-            React.createElement(AntdSlider, Object.assign({ min: min, max: max, value: value }, restOf, { marks: { 0: ' ' } }))));
+        return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth, className: className },
+            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { tooltip: tooltipVisible !== 'default' && {
+                    open: tooltipVisible,
+                }, marks: {
+                    0: ' ',
+                } }))));
     }
-    return (React.createElement(SliderWrapper, null,
-        React.createElement(AntdSlider, Object.assign({}, props))));
+    return (React.createElement(SliderWrapper, { className: className },
+        React.createElement(AntdSlider, Object.assign({}, restProps, { tooltip: tooltipVisible !== 'default' && {
+                open: tooltipVisible,
+            } }))));
 });
 Slider.defaultProps = {
     tooltipVisible: false,

package/es/components/atoms/SliderV2/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
+export interface SliderProps {
+    defaultSliderTrack?: boolean;
+}
+export declare const SliderV2: React.FC<(SliderSingleProps & SliderProps) | (SliderRangeProps & SliderProps)>;

package/es/components/atoms/SliderV2/index.js

@@ -0,0 +1,21 @@
+// Libraries
+import React, { useState } from 'react';
+// Antd Components
+import { Slider as AntdSlider } from 'antd';
+// React.FC<SliderProps>
+export const SliderV2 = props => {
+    const { min, max, onChange, styles, range, value, defaultValue, marks, defaultSliderTrack } = props;
+    const [valueInternal, setValueInternal] = useState(defaultValue || min || 0);
+    if (min && max && min < 0 && max > 0 && !range && !defaultSliderTrack) {
+        const sliderWidth = max - min;
+        const calcValue = value || valueInternal;
+        const leftTrackPosition = `${(Math.abs(calcValue > 0 ? min : min - calcValue) / sliderWidth) * 100}%`;
+        const sliderTrackWidth = `${(Math.abs(calcValue) / sliderWidth) * 100}%`;
+        return (React.createElement(AntdSlider, Object.assign({ value: value || valueInternal, onChange: value => {
+                setValueInternal(value);
+                if (onChange)
+                    onChange(value);
+            }, styles: Object.assign({ track: Object.assign({ left: leftTrackPosition, width: sliderTrackWidth }, styles === null || styles === void 0 ? void 0 : styles.track) }, styles), marks: marks || { 0: ' ' } }, props)));
+    }
+    return React.createElement(AntdSlider, Object.assign({}, props));
+};

package/es/components/atoms/Spin/Spin.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 import { SpinProps as AntdSpinProps } from 'antd';
 export interface TSpinProps extends AntdSpinProps {
     indicatorSize?: number;
     children?: any;
 }
 export declare const Spin: {
-    (props: TSpinProps): JSX.Element;
+    (props: TSpinProps): React.JSX.Element;
     defaultProps: {};
 };

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

@@ -29,4 +29,14 @@ export { Slider } from './Slider';
 export { Spin } from './Spin';
 export { Alert } from './Alert';
 export { ScrollBox } from './ScrollBox';
+export { Rate } from './Rate';
+export { SliderV2 } from './SliderV2';
+export { InputDynamic } from './InputDynamic';
+export * from './Flex';
+export * from './RateV2';
+export * from './PreviewTabs';
+export * from './MobileFrame';
+export * from './SlideBar';
 export type { SliderProps } from './Slider';
+export type { PaginationProps } from './Pagination';
+export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -29,3 +29,11 @@ export { Slider } from './Slider';
 export { Spin } from './Spin';
 export { Alert } from './Alert';
 export { ScrollBox } from './ScrollBox';
+export { Rate } from './Rate';
+export { SliderV2 } from './SliderV2';
+export { InputDynamic } from './InputDynamic';
+export * from './Flex';
+export * from './RateV2';
+export * from './PreviewTabs';
+export * from './MobileFrame';
+export * from './SlideBar';

package/es/components/common/ConfigProvider/ConfigProvider.d.ts

@@ -1,6 +1,8 @@
 import { ConfigProviderProps as AntdConfigProviderProps } from 'antd/es/config-provider';
 import React, { ReactNode } from 'react';
+import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 import { TLocale } from '@antscorp/antsomi-ui/es/types';
+import 'animate.css';
 interface ConfigProviderProps extends Omit<AntdConfigProviderProps, 'locale'> {
     children?: ReactNode;
     locale?: TLocale;

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

@@ -12,14 +12,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import { StyleProvider } from '@ant-design/cssinjs';
 import { ConfigProvider as AntdConfigProvider } from 'antd';
+import dayjs from 'dayjs';
 import React, { useEffect } from 'react';
+import weekday from 'dayjs/plugin/weekday';
+import localeData from 'dayjs/plugin/localeData';
+/** dayjs plugins for timezone */
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Style
 import { GlobalStyle } from './GlobalStyle';
+import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 // Initialize languages
 // import '@antscorp/antsomi-ui/es/locales/i18n';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
+// Css
+import 'animate.css';
+// NOTE: HOT fix DatePicker Advanced
+dayjs.extend(weekday);
+dayjs.extend(localeData);
+dayjs.extend(utc);
+dayjs.extend(timezone);
 const ConfigProvider = props => {
     // Props
     const { children, locale } = props, restOfProps = __rest(props, ["children", "locale"]);