intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.stories.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ExampleChartIntegrationTemplate: function() {
+        return ExampleChartIntegrationTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ExampleChartIntegration = /*#__PURE__*/ _interop_require_default(require("./ExampleChartIntegration"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+global.lng = 'en';
+const _default = {
+    title: 'UI/Chart',
+    component: _ExampleChartIntegration.default
+};
+const Template = (args)=>{
+    const { inputDateRangeProps, chartProps } = args;
+    const [outerDateRange, setOuterDateRange] = (0, _react.useState)({
+        intervalKey: 'last7Days'
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ExampleChartIntegration.default, {
+        inputDateRangeProps: {
+            ...inputDateRangeProps,
+            value: outerDateRange,
+            onChange: setOuterDateRange
+        },
+        chartProps: chartProps
+    });
+};
+const ExampleChartIntegrationTemplate = Template.bind({});
+ExampleChartIntegrationTemplate.args = {
+    inputDateRangeProps: {
+        buttonsTypes: {
+            cancel: 'bark-outline'
+        },
+        isCompareHidden: true
+    },
+    chartProps: {
+        initialChartType: 'Line'
+    }
+};

package/dist/src/Atomic/UI/ExampleChartIntegration/partial/AnyOuterClass.scss

@@ -0,0 +1,68 @@
+@import 'https://fonts.googleapis.com/css2?family=Sarabun&display=swap';
+
+.example-wrapper {
+  max-width: 850px;
+
+  .buttons-block {
+    display: flex;
+    flex-flow: row nowrap;
+
+    width: 100%;
+    margin-top: 50px;
+  }
+
+  .tab-button {
+    width: 100px;
+    height: 40px;
+    margin-right: 20px;
+
+    border: 1px solid black;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &_active {
+      text-decoration: underline;
+    }
+  }
+
+  .chart:not(.chart_icon-mode) {
+    max-width: 806px;
+
+    border-radius: 16px;
+    background: #fff;
+    box-shadow: 0 16px 24px rgb(0 0 0 / 5%);
+  }
+
+  .chart__description-title {
+    font-family: Sarabun, sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    font-style: normal;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+
+    color: #3b414b;
+  }
+
+  .chart__description-value {
+    span {
+      font-size: 20px;
+      font-weight: 600;
+      font-style: normal;
+      line-height: 30px;
+      letter-spacing: 0.359794px;
+
+      color: #3b414b;
+
+      &:last-child {
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.2px;
+
+        color: #757f8c;
+      }
+    }
+  }
+}

package/dist/src/Atomic/UI/ExampleChartIntegration/partial/utils.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getLabels: function() {
+        return getLabels;
+    },
+    getMockValue: function() {
+        return getMockValue;
+    },
+    getSafelyDateRange: function() {
+        return getSafelyDateRange;
+    },
+    getTab: function() {
+        return getTab;
+    }
+});
+const _momenttimezone = /*#__PURE__*/ _interop_require_default(require("moment-timezone"));
+const _dependencies = require("../../../FormElements/InputDateRange/dependencies");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const getSafelyDateRange = (dateRange)=>(!(dateRange === null || dateRange === void 0 ? void 0 : dateRange.start) || !(dateRange === null || dateRange === void 0 ? void 0 : dateRange.end)) && (!(dateRange === null || dateRange === void 0 ? void 0 : dateRange.intervalKey) || (dateRange === null || dateRange === void 0 ? void 0 : dateRange.intervalKey) === "allTime") ? (0, _dependencies.getActualDateRange)({
+        start: "2022-01-01T00:00:00",
+        end: (0, _momenttimezone.default)().endOf("day").format("YYYY-MM-DDTHH:mm:ss")
+    }) : (0, _dependencies.getActualDateRange)(dateRange);
+const getLabels = (range)=>{
+    const MINIMUM_INTERVAL = "hour";
+    const NO_MORE_THAN_THREE_HOURS = 3; // this is hours
+    const NO_MORE_THAN_TWO_DAYS = 48; // this is hours
+    const NO_MORE_THAN_TWO_MONTHS = 2; // this is months
+    const NO_MORE_THAN_THREE_YEARS = 24; // this is months
+    // safely Range must have 'start' and 'end' properties
+    const safelyRange = (0, _dependencies.getActualDateRange)(range);
+    const start = (0, _momenttimezone.default)(safelyRange === null || safelyRange === void 0 ? void 0 : safelyRange.start).startOf(MINIMUM_INTERVAL);
+    const end = (0, _momenttimezone.default)(safelyRange === null || safelyRange === void 0 ? void 0 : safelyRange.end).startOf(MINIMUM_INTERVAL);
+    const getValues = (intervalStepKey)=>{
+        let format;
+        switch(intervalStepKey){
+            case "minutes":
+                format = "MM.DD hh:mm";
+                break;
+            case "hours":
+                format = "MM.DD.YYYY h A";
+                break;
+            case "days":
+                format = "MM.DD.YYYY";
+                break;
+            case "months":
+                format = "MM.YYYY";
+                break;
+            default:
+                format = "YYYY";
+                break;
+        }
+        const structure = [
+            ...Array(end.diff(start, intervalStepKey)).keys()
+        ];
+        const process = structure.reduce((acc, iteration)=>{
+            acc.values.push(acc.point.format(format));
+            acc.point = (0, _momenttimezone.default)(acc.point).add(1, intervalStepKey);
+            return acc;
+        }, {
+            point: start,
+            values: []
+        });
+        return process.values;
+    };
+    if (end.diff(start, "hours") <= NO_MORE_THAN_THREE_HOURS) return getValues("minutes");
+    else if (end.diff(start, "hours") <= NO_MORE_THAN_TWO_DAYS) return getValues("hours");
+    else if (end.diff(start, "months") <= NO_MORE_THAN_TWO_MONTHS) return getValues("days");
+    else if (end.diff(start, "months") <= NO_MORE_THAN_THREE_YEARS) return getValues("months");
+    else return getValues("years");
+};
+const getMockValue = ()=>Math.trunc(Math.random() * 1000000);
+const getTab = async (tabId, range, callback)=>{
+    let requestDelay;
+    switch(tabId){
+        case "tab1":
+            requestDelay = 2000;
+            break;
+        case "tab2":
+            requestDelay = 1500;
+            break;
+        case "tab3":
+            requestDelay = 3000;
+            break;
+        case "tab4":
+            requestDelay = 500;
+            break;
+        default:
+            requestDelay = 1000;
+            break;
+    }
+    return new Promise((res)=>setTimeout(()=>{
+            const labels = getLabels(range);
+            res({
+                labels,
+                datasets: [
+                    {
+                        data: labels.map(()=>getMockValue())
+                    }
+                ]
+            });
+        }, requestDelay)).then((res)=>callback ? callback(res, tabId) : res);
+};

package/dist/src/Atomic/UI/Hint/Hint.js

@@ -0,0 +1,254 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactdom = require("react-dom");
+const _reactfeather = require("react-feather");
+const _utils = require("../../../Functions/utils");
+const _CustomIcons = require("./../../../Molecular/CustomIcons");
+const _utils1 = require("./partials/_utils");
+const _Spinner = /*#__PURE__*/ _interop_require_default(require("./../../Layout/Spinner/Spinner"));
+require("./Hint.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+let isContentHoveredOuter = false;
+const Hint = ({ hint, side = "right", className, hintContainer = {}, label = "", variant = "filled", handleOpenType = "click", onClickCallback, onOpenChange = ()=>{}, key, id, children, icon, isAccessability = false, testId = "hint", isHoverableContent = false, isLoading })=>{
+    var _label_replace;
+    const hintRef = (0, _react.useRef)(null);
+    const timeoutRef = (0, _react.useRef)(null);
+    var _ref;
+    const [hintId] = (0, _react.useState)((_ref = key !== null && key !== void 0 ? key : id) !== null && _ref !== void 0 ? _ref : Math.random().toString(16).slice(2));
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const [isContentHovered, setIsContentHovered] = (0, _react.useState)(false);
+    //? Определяем handleScroll-стейт, чтобы никогда не менять ссылку тем самым гарантировать корректную работу removeEventListener.
+    //? Инициализируем стейт вызовом конструктора HandleScrollObj, передаем setIsOpen для записи в объект.
+    const [handleScroll] = (0, _react.useState)(new _utils1.HandleScrollObj(setIsOpen));
+    //? По аналогии определяем handleClickOutside
+    const [handleClickOutside] = (0, _react.useState)(new _utils1.HandleClickOutsideObj(hintId, setIsOpen));
+    const isCallbackExist = typeof onClickCallback === "function";
+    const handle = {
+        onMouseEnter: ()=>{
+            if (handleOpenType === "hover") {
+                timeoutRef.current = setTimeout(()=>{
+                    setIsOpen(true);
+                    !isOpen && onClickCallback();
+                }, 350);
+            }
+        },
+        onMouseLeave: ()=>{
+            if (!isHoverableContent && handleOpenType === "hover") {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = setTimeout(()=>{
+                    setIsOpen(false);
+                }, 1000);
+            } else if (isHoverableContent && handleOpenType === "hover") {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = setTimeout(()=>{
+                    if (!isContentHoveredOuter) {
+                        setIsOpen(false);
+                    }
+                }, 100);
+            }
+        },
+        onMouseLeaveHoverableContent: ()=>{
+            if (isHoverableContent && handleOpenType === "hover") {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = setTimeout(()=>{
+                    setIsOpen(false);
+                    setIsContentHovered(false);
+                    isContentHoveredOuter = false;
+                }, 100);
+            }
+        }
+    };
+    const getHintMarkUp = (className)=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            "data-testid": "test-hint-text",
+            className: (0, _classnames.default)("hint__text", `hint__text_${side}`, `hint--${className}__text`),
+            onMouseEnter: ()=>{
+                isContentHoveredOuter = true;
+            },
+            onMouseLeave: handle.onMouseLeaveHoverableContent,
+            children: [
+                isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                    size: "small"
+                }),
+                hint,
+                children
+            ]
+        });
+    };
+    const setHintContainerStyles = ()=>{
+        var _this, _this1, _this2;
+        const hc = (0, _utils1.getHintContainer)(hintId);
+        if (!hc || !isOpen) return false;
+        const { width, top, left } = (hintRef === null || hintRef === void 0 ? void 0 : hintRef.current.getBoundingClientRect()) || {};
+        const { addWidth, addLeft, addTop } = hintContainer;
+        const windowInnerWidth = document.documentElement.clientWidth;
+        const windowInnerHeight = document.documentElement.clientHeight;
+        const sw = hc.getElementsByClassName("hint__text")[0];
+        const { width: swWidth, height: swHeight } = (sw === null || sw === void 0 ? void 0 : sw.getBoundingClientRect()) || {};
+        hc.style.width = isOpen ? (_this = (!Number.isNaN(+addWidth) ? +addWidth : 0) + width) === null || _this === void 0 ? void 0 : _this.toString().concat("px") : 0;
+        hc.style.left = isOpen ? (_this1 = (!Number.isNaN(+addLeft) ? +addLeft : 0) + left) === null || _this1 === void 0 ? void 0 : _this1.toString().concat("px") : 0;
+        hc.style.top = isOpen ? (_this2 = (!Number.isNaN(+addTop) ? +addTop : 0) + top) === null || _this2 === void 0 ? void 0 : _this2.toString().concat("px") : 0;
+        hc.style.maxHeight = isOpen ? swHeight === null || swHeight === void 0 ? void 0 : swHeight.toString().concat("px") : 0;
+        //? Базовое значение погрешности
+        //? В разных свитч-кейсах может использоваться по разному (вся или частично). Определял "на глазок"
+        const INACCURACY = 20;
+        switch(side){
+            case 'top':
+            case 'centeredTop':
+                if (top - swHeight - INACCURACY / 2 < 0) {
+                    sw.classList.remove(`hint__text_${side}`);
+                    sw.classList.add(`hint__text_${side === 'top' ? 'bottom' : 'centeredBottom'}`);
+                }
+                break;
+            case 'bottom':
+            case 'centeredBottom':
+                if (top + swHeight + INACCURACY > windowInnerHeight) {
+                    sw.classList.remove(`hint__text_${side}`);
+                    sw.classList.add(`hint__text_${side === 'bottom' ? 'top' : 'centeredTop'}`);
+                }
+                break;
+            case 'left':
+                if (left - swWidth - INACCURACY / 2 < 0) {
+                    sw.classList.remove(`hint__text_${side}`);
+                    sw.classList.add('hint__text_right');
+                }
+                break;
+            case 'right':
+            default:
+                if (left + width + swWidth + INACCURACY / 2 > windowInnerWidth) {
+                    sw.classList.remove(`hint__text_${side}`);
+                    sw.classList.add('hint__text_left');
+                }
+                break;
+        }
+    };
+    const renderHintContainer = (className)=>{
+        const hc = (0, _utils1.getHintContainer)(hintId);
+        if (!hc) return null;
+        return /*#__PURE__*/ (0, _reactdom.createPortal)(getHintMarkUp(className), hc);
+    };
+    (0, _react.useEffect)(()=>{
+        (0, _utils1.initHintContainer)(hintId, hintContainer);
+        return ()=>{
+            clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    (0, _react.useEffect)(()=>{
+        setHintContainerStyles();
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+        if (isOpen) {
+            document.addEventListener("scroll", handleScroll, true);
+            document.addEventListener("click", handleClickOutside, true);
+        } else {
+            document.removeEventListener("scroll", handleScroll, true);
+            document.removeEventListener("click", handleClickOutside, true);
+        }
+        return ()=>{
+            clearTimeout(timeoutRef.current);
+        };
+    }, [
+        isOpen
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)("hint", className),
+        ref: hintRef,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+                tabIndex: isAccessability ? 0 : -1,
+                "data-testid": typeof label === "string" && label.length ? (_label_replace = label.replace) === null || _label_replace === void 0 ? void 0 : _label_replace.call(label, /\s/g, "-") : testId,
+                "aria-label": isAccessability && label || "",
+                onClick: ()=>handleOpenType === "click" && (isCallbackExist ? onClickCallback() : setIsOpen(!isOpen)),
+                onMouseEnter: handle.onMouseEnter,
+                onMouseLeave: handle.onMouseLeave,
+                className: (0, _classnames.default)("hint__button", {
+                    hint__button_active: isOpen
+                }),
+                children: [
+                    icon || icon === null || /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            variant === "outlined" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.HelpCircle, {
+                                width: 16,
+                                height: 16,
+                                className: "hint__icon outlined"
+                            }),
+                            variant === "filled" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomIcons.HelpCircleFilled, {
+                                className: "hint__icon filled"
+                            }),
+                            variant === "warning" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.AlertTriangle, {
+                                className: "hint__icon",
+                                color: "#F06D8D",
+                                width: 16,
+                                height: 16
+                            })
+                        ]
+                    }),
+                    label && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: (0, _classnames.default)("hint__label", {
+                            "color--primary": isOpen
+                        }),
+                        children: (0, _utils.capitalized)(label)
+                    })
+                ]
+            }),
+            isOpen && renderHintContainer(className)
+        ]
+    });
+};
+const _default = Hint;

package/dist/src/Atomic/UI/Hint/Hint.scss

@@ -0,0 +1,150 @@
+.hint {
+  position: relative;
+
+  display: inline-block;
+
+  font-size: 0;
+
+  &__container {
+    position: fixed;
+    z-index: 99999;
+
+    display: block;
+
+    box-sizing: border-box;
+  }
+
+  &__button {
+    display: flex;
+
+    cursor: pointer;
+
+    svg {
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+    }
+
+    &:hover,
+    &_active {
+      color: #6b81dd;
+
+      svg {
+        color: #6b81dd;
+      }
+    }
+  }
+
+  &__text {
+    position: absolute;
+    z-index: 1;
+
+    min-width: 80px;
+    max-width: 250px;
+    padding: 8px;
+
+    font-size: 10px;
+    line-height: 16px;
+
+    color: #fff;
+    border-radius: 4px;
+    background-color: #6b81dd;
+
+    a {
+      text-decoration: underline;
+
+      color: #fff;
+    }
+
+    &::before {
+      position: absolute;
+
+      width: 8.5px;
+      height: 8.5px;
+
+      content: '';
+
+      background-color: #6b81dd;
+
+      transform: rotate(45deg);
+    }
+
+    &_bottom {
+      top: 26px;
+      left: -4px;
+
+      &::before {
+        top: -4.25px;
+        left: 8px;
+      }
+    }
+    &_centeredBottom {
+      top: 26px;
+      left: 50%;
+
+      transform: translateX(-50%);
+
+      &::before {
+        top: -4.25px;
+        left: calc(50% - 8px);
+      }
+    }
+
+    &_right {
+      top: -4px;
+
+      // ToDo - есть вероятность поломки позиционирования хинтов. Если сломается - откатить
+      // left: 24px;
+      left: calc(100% + 8px);
+
+      &::before {
+        top: 8px;
+        left: -4.25px;
+      }
+    }
+
+    &_left {
+      top: -4px;
+      right: calc(100% + 8px);
+
+      // ToDo - есть вероятность поломки позиционирования хинтов. Если сломается - откатить
+      // right: 28px;
+      left: unset;
+
+      &::before {
+        top: 8px;
+        right: -4.25px;
+      }
+    }
+
+    &_top {
+      bottom: 8px;
+      left: -4px;
+
+      &::before {
+        bottom: -4.25px;
+        left: 8px;
+      }
+    }
+
+    &_centeredTop {
+      bottom: 8px;
+      left: 50%;
+
+      transform: translateX(-50%);
+
+      &::before {
+        bottom: -4.25px;
+        left: calc(50% - 8px);
+      }
+    }
+  }
+
+  &__icon.outlined {
+    color: #9aa0b9;
+  }
+
+  &__icon.filled {
+    color: #fff;
+  }
+}