intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/FormElements/RangeInputs/RangeInputs.stories.js

@@ -0,0 +1,92 @@
+"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, {
+    RangeInputsTemplate: function() {
+        return RangeInputsTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _RangeInputs = /*#__PURE__*/ _interop_require_default(require("./RangeInputs"));
+require("./RangeInputs.scss");
+require("../../../../../scss/main.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;
+}
+global.lng = 'en';
+const _default = {
+    title: 'Form Elements/RangeInputs',
+    component: _RangeInputs.default
+};
+const Template = (args)=>{
+    const [state, setState] = (0, _react.useState)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeInputs.default, {
+        ...args,
+        onChange: setState,
+        value: state,
+        setError: ()=>{}
+    });
+};
+const RangeInputsTemplate = Template.bind({});
+RangeInputsTemplate.args = {
+    isColumnPosition: true,
+    className: '',
+    type: 'int',
+    label: 'Range Inputs',
+    isPrice: true,
+    withZero: true
+};

package/dist/src/Atomic/FormElements/RangeList/RangeList.js

@@ -0,0 +1,207 @@
+"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 _operations = require("../../../Functions/operations");
+const _Button = /*#__PURE__*/ _interop_require_default(require("../../UI/Button/Button"));
+const _Input = /*#__PURE__*/ _interop_require_default(require("../Input/Input"));
+const _RangeListRow = /*#__PURE__*/ _interop_require_wildcard(require("./partial/RangeListRow"));
+require("./RangeList.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;
+}
+const RC = "range-list";
+const DEFAULT_STATE = {
+    from: "",
+    to: ""
+};
+const RangeList = (props)=>{
+    const { className, value = [], disabled, validateErrors, onChange, isFloatValues, decimalPlaces, error, defaultErrorText, nullValueText, isOnlyOneRow = false, testId = "range-list" } = props;
+    const NULL_VALUE_TEXT = nullValueText !== null && nullValueText !== void 0 ? nullValueText : "No data";
+    const [state, setState] = (0, _react.useState)(DEFAULT_STATE);
+    const [innerError, setInnerError] = (0, _react.useState)("");
+    const [outerError, setOuterError] = (0, _react.useState)("");
+    const inputFromRef = (0, _react.useRef)(null);
+    const inputToRef = (0, _react.useRef)(null);
+    const isValidRange = Boolean((state === null || state === void 0 ? void 0 : state.from) && (state === null || state === void 0 ? void 0 : state.to) && Number(state === null || state === void 0 ? void 0 : state.from) <= Number(state === null || state === void 0 ? void 0 : state.to));
+    const isShowRow = isOnlyOneRow && (value === null || value === void 0 ? void 0 : value.length) === 0 || !isOnlyOneRow;
+    const handle = {
+        inputsChange: (val, prop)=>setState({
+                ...state,
+                [prop]: val
+            }),
+        addRange: ()=>{
+            var _ref;
+            if (isValidRange && ((_ref = !(validateErrors === null || validateErrors === void 0 ? void 0 : validateErrors(Number(state.from), Number(state.to)))) !== null && _ref !== void 0 ? _ref : true)) {
+                onChange((0, _operations.addRangeDefault)(Number(state.from), Number(state.to), value, isFloatValues ? decimalPlaces : null));
+                setState(DEFAULT_STATE);
+                setInnerError("");
+                setOuterError("");
+            } else if (!isValidRange) setInnerError(defaultErrorText);
+            else if (validateErrors) setOuterError(validateErrors(Number(state.from), Number(state.to)));
+        },
+        removeRange: (index)=>onChange(value.filter((item, idx)=>idx !== index)),
+        rangeValidation: (e, key)=>{
+            const oppositeKey = key === "from" ? "to" : "from";
+            if (!(state === null || state === void 0 ? void 0 : state.from) && !(state === null || state === void 0 ? void 0 : state.to)) {
+                setInnerError("");
+                setOuterError("");
+                return e;
+            }
+            if (!state[oppositeKey]) {
+                const mustToFocus = key === "from" ? inputToRef.current : inputFromRef.current;
+                mustToFocus.focus();
+            } else if (!isValidRange) {
+                setInnerError(defaultErrorText);
+                if (validateErrors) setOuterError(validateErrors(Number(state.from), Number(state.to)));
+            } else {
+                setInnerError("");
+                if (validateErrors) setOuterError(validateErrors(Number(state.from), Number(state.to)));
+            }
+            return null;
+        },
+        onKeyUpFromInput: (code)=>{
+            if (code === 13) {
+                if (isValidRange) inputFromRef.current.blur();
+                else if (!state.to) inputToRef.current.focus();
+                else if (state.from) inputFromRef.current.select();
+            }
+        },
+        onKeyUpToInput: (code)=>{
+            if (code === 13) inputToRef.current.blur();
+        }
+    };
+    const renderInputsAndAddButtonRow = ()=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)(`${RC}__row`, `${RC}__inputs`),
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeListRow.RangeListCell, {
+                    className: `${RC}__cell-input`,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                        ref: inputFromRef,
+                        onlyNumbers: isFloatValues ? {
+                            type: "float",
+                            decimalPlaces: decimalPlaces || 0
+                        } : {
+                            type: "int"
+                        },
+                        value: state.from,
+                        onBlur: (e)=>handle.rangeValidation(e, "from"),
+                        onChange: (val)=>handle.inputsChange(val, "from"),
+                        onKeyUp: (code)=>handle.onKeyUpFromInput(code)
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeListRow.RangeListCell, {
+                    className: `${RC}__cell-input`,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                        ref: inputToRef,
+                        onlyNumbers: isFloatValues ? {
+                            type: "float",
+                            decimalPlaces: decimalPlaces || 0
+                        } : {
+                            type: "int"
+                        },
+                        value: state.to,
+                        onBlur: (e)=>handle.rangeValidation(e, "to"),
+                        onChange: (val)=>handle.inputsChange(val, "to"),
+                        onKeyUp: (code)=>handle.onKeyUpToInput(code)
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeListRow.RangeListCell, {
+                    className: `${RC}__cell-button`,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        onClick: handle.addRange,
+                        children: "Add"
+                    })
+                })
+            ]
+        });
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)(RC, className, {
+            [`${RC}_disabled`]: disabled
+        }),
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__row`, `${RC}__labels`),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeListRow.RangeListCell, {
+                        className: `${RC}__cell-label`,
+                        children: "From"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeListRow.RangeListCell, {
+                        className: `${RC}__cell-label`,
+                        children: "To"
+                    })
+                ]
+            }),
+            isShowRow && renderInputsAndAddButtonRow(),
+            (innerError || outerError || error) && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: `${RC}__error`,
+                children: innerError || error || outerError
+            }),
+            !(value === null || value === void 0 ? void 0 : value.length) && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(`${RC}__row`, `${RC}__values`, `${RC}__null-value`),
+                children: NULL_VALUE_TEXT
+            }),
+            value.map((row, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeListRow.default, {
+                    "data-testid": `${testId}-row-${idx}`,
+                    ...row,
+                    idx: idx,
+                    actionClick: ()=>handle.removeRange(idx)
+                }, `idx-${idx}-from-${row.from}-to${row.to}`))
+        ]
+    });
+};
+const _default = RangeList;

package/dist/src/Atomic/FormElements/RangeList/RangeList.scss

@@ -0,0 +1,163 @@
+@use './../../../scss/vars';
+
+.range-list {
+  --border-color: black;
+  --button-size: 56px;
+  --labels-font-size: 16px;
+  --inputs-font-size: 14px;
+  --values-font-size: 16px;
+  --button-text-font-size: 14px;
+  --labels-color: black;
+  --inputs-color: black;
+  --values-color: black;
+  --background-color: transparent;
+  --labels-background-color: transparent;
+  --inputs-background-color: transparent;
+  --tag-input-background-color: #fff;
+  --values-background-color: #fff;
+
+  width: 500px;
+  height: fit-content;
+
+  background-color: transparent;
+
+  &__row {
+    display: grid;
+    grid-template-columns: 1fr 1fr var(--button-size);
+
+    width: 100%;
+    height: 30px;
+  }
+
+  &__labels,
+  &__inputs {
+    grid-column-gap: 2px;
+  }
+
+  &__labels {
+    margin-bottom: 10px;
+
+    font-family: inherit;
+    font-size: var(--labels-font-size);
+    font-weight: 400;
+    font-style: inherit;
+    line-height: 24px;
+
+    color: var(--labels-color);
+    background-color: var(--labels-background-color);
+  }
+
+  &__inputs {
+    margin-bottom: 6px;
+
+    font-family: inherit;
+    font-size: var(--inputs-font-size);
+    font-weight: 400;
+    font-style: inherit;
+    line-height: 24px;
+
+    color: var(--inputs-color);
+    background-color: var(--inputs-background-color);
+
+    & input {
+      background-color: var(--tag-input-background-color);
+    }
+  }
+
+  &__values {
+    font-family: inherit;
+    font-size: var(--values-font-size);
+    font-weight: 400;
+    font-style: inherit;
+    line-height: 24px;
+
+    color: var(--values-color);
+    border-right: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+    border-left: 1px solid var(--border-color);
+    background-color: var(--values-background-color);
+
+    &_first-value {
+      border-top: 1px solid var(--border-color);
+    }
+  }
+
+  &__cell {
+    & > button {
+      width: 100%;
+
+      font-size: var(--button-text-font-size);
+    }
+
+    &-label,
+    &-input input,
+    &-value {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      font-style: inherit;
+      line-height: inherit;
+
+      color: inherit;
+    }
+
+    &-label {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    &-value {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      align-items: center;
+
+      padding: 0 7.5px;
+
+      border-right: 1px solid var(--border-color);
+    }
+
+    &-action {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+      align-items: center;
+
+      cursor: pointer;
+
+      color: vars.$color--froly;
+    }
+  }
+
+  &__error {
+    display: block;
+
+    margin-bottom: 5px;
+    margin-left: 5px;
+
+    font-family: inherit;
+    font-size: 10px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: normal;
+
+    color: #f06d8d;
+  }
+
+  &_disabled {
+    pointer-events: none;
+
+    opacity: 0.5;
+  }
+
+  &__null-value {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+
+    border: none;
+  }
+}

package/dist/src/Atomic/FormElements/RangeList/RangeList.stories.js

@@ -0,0 +1,169 @@
+"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, {
+    RangeListTemplate: function() {
+        return RangeListTemplate;
+    },
+    TestRangeList: function() {
+        return TestRangeList;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _RangeList = /*#__PURE__*/ _interop_require_default(require("./RangeList"));
+require("../../../../../scss/main.scss");
+require("./partial/AnyOuterClass.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;
+}
+global.lng = 'en';
+const _default = {
+    title: 'Form Elements/RangeList',
+    component: _RangeList.default
+};
+const rootStyles = {
+    with: '100%',
+    padding: '20px',
+    backgroundColor: '#f7fafc'
+};
+const Template = (args)=>{
+    const { isIncludeOuterStyles, isAddValidateErrorsForExample, isUseErrorsState, isUseInitialValues, initialValues, ...restArgs } = args;
+    const [value, setValue] = (0, _react.useState)();
+    const [error, setError] = (0, _react.useState)('');
+    const getValidate = (isUseState)=>(from, to)=>{
+            const errorText = '18 is the minimum allowed value';
+            if (+from < 18) {
+                if (isUseState) setError(errorText);
+                return errorText;
+            } else {
+                if (isUseState) setError('');
+                return '';
+            }
+        };
+    (0, _react.useEffect)(()=>{
+        if (isUseInitialValues) setValue(initialValues);
+        else setValue([]);
+        setError('');
+    }, [
+        isUseInitialValues,
+        restArgs.isFloatValues
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        style: rootStyles,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeList.default, {
+            ...restArgs,
+            className: isIncludeOuterStyles ? 'any-outer-class__range-list' : null,
+            value: value,
+            onChange: (val)=>setValue(val),
+            error: error,
+            validateErrors: isAddValidateErrorsForExample ? getValidate(isUseErrorsState) : null
+        })
+    });
+};
+const RangeListTemplate = Template.bind({});
+RangeListTemplate.args = {
+    isIncludeOuterStyles: false,
+    isAddValidateErrorsForExample: false,
+    isUseErrorsState: false,
+    disabled: false,
+    isFloatValues: false,
+    decimalPlaces: 2,
+    defaultErrorText: 'Set a valid range',
+    nullValueText: 'Not set',
+    isUseInitialValues: true,
+    isOnlyOneRow: false,
+    initialValues: [
+        {
+            from: 15,
+            to: 17
+        },
+        {
+            from: 19,
+            to: 23
+        },
+        {
+            from: 25,
+            to: 30
+        }
+    ]
+};
+const TestRangeList = Template.bind({});
+TestRangeList.args = {
+    isIncludeOuterStyles: false,
+    isAddValidateErrorsForExample: false,
+    isUseErrorsState: false,
+    disabled: false,
+    isFloatValues: false,
+    decimalPlaces: 2,
+    defaultErrorText: 'Set a valid range',
+    nullValueText: 'Not set',
+    isUseInitialValues: true,
+    initialValues: [
+        {
+            from: 15,
+            to: 17
+        },
+        {
+            from: 19,
+            to: 23
+        },
+        {
+            from: 25,
+            to: 30
+        }
+    ]
+};

package/dist/src/Atomic/FormElements/RangeList/partial/AnyOuterClass.scss

@@ -0,0 +1,26 @@
+@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap';
+
+.any-outer-class__range-list {
+  --border-color: #f4f7f9;
+  --labels-font-size: 12px;
+  --inputs-font-size: 13px;
+  --values-font-size: 13px;
+  --button-text-font-size: 13px;
+  --labels-color: #1e1e2d;
+  --inputs-color: #1e1e2d;
+  --values-color: #1e1e2d;
+
+  font-family: Roboto, sans-serif;
+
+  .range-list__labels {
+    line-height: 20px;
+  }
+
+  .range-list__inputs {
+    font-weight: 300;
+  }
+
+  .range-list__values {
+    font-weight: 300;
+  }
+}