intelicoreact 1.5.32 → 1.5.34

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

@@ -0,0 +1,174 @@
+"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, {
+    TieredCheckboxesTemplate: function() {
+        return TieredCheckboxesTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactfeather = require("react-feather");
+const _TieredCheckboxes = /*#__PURE__*/ _interop_require_default(require("./TieredCheckboxes"));
+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/TieredCheckboxes',
+    component: _TieredCheckboxes.default,
+    argTypes: {
+        isUseAccordionForGroup: {
+            description: 'set items in accordions by group. boolean. optional'
+        },
+        accordionIcons: {
+            description: 'icons for accordions. array. optional'
+        },
+        items: {
+            description: 'array'
+        },
+        className: {
+            description: 'string. optional'
+        }
+    }
+};
+const Template = (args)=>{
+    const [state, setState] = (0, _react.useState)([
+        ...args.items
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TieredCheckboxes.default, {
+        ...args,
+        onChange: (items)=>setState(items)
+    });
+};
+const TieredCheckboxesTemplate = Template.bind({});
+TieredCheckboxesTemplate.args = {
+    isUseParentsClassesAsDataset: true,
+    isUseAccordionForGroup: true,
+    accordionIcons: [
+        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronDown, {}),
+        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronUp, {})
+    ],
+    items: [
+        {
+            key: 1,
+            label: 'BLevel 1',
+            value: false,
+            className: 'parent-custom-class',
+            children: [
+                {
+                    key: 11,
+                    label: 'CLevel 2',
+                    value: true
+                },
+                {
+                    key: 12,
+                    label: 'BLevel 2',
+                    value: false
+                },
+                {
+                    key: 13,
+                    label: 'ALevel 2',
+                    value: false
+                }
+            ]
+        },
+        {
+            key: 2,
+            label: 'CLevel 1',
+            value: false,
+            children: [
+                {
+                    key: 21,
+                    label: 'GLevel 2',
+                    value: false
+                },
+                {
+                    key: 22,
+                    label: 'ELevel 2',
+                    value: true
+                },
+                {
+                    key: 23,
+                    label: 'FLevel 2',
+                    value: true,
+                    disabled: true
+                }
+            ]
+        },
+        {
+            key: 3,
+            label: 'ALevel 1',
+            value: false,
+            children: [
+                {
+                    key: 31,
+                    label: 'Level 2',
+                    value: false,
+                    disabled: true
+                },
+                {
+                    key: 32,
+                    label: 'Level 2',
+                    value: true,
+                    disabled: true
+                }
+            ]
+        }
+    ],
+    className: ''
+};

package/dist/src/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.js

@@ -0,0 +1,53 @@
+"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_default(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _MonoAccordion = /*#__PURE__*/ _interop_require_default(require("../../../UI/MonoAccordion/MonoAccordion"));
+const _CheckboxInput = /*#__PURE__*/ _interop_require_default(require("../../CheckboxInput/CheckboxInput"));
+require("../TieredCheckboxes.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const AccordionWithCheckbox = ({ children, parent, onChange, className, RC, setIsOpen, icon, disabled, datasetProp, isUseParentsClassesAsDataset })=>{
+    var _parent_children_some, _parent_children, _parent_children_every, _parent_children1, _parent_children2, _parent_children3;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_MonoAccordion.default, {
+        datasetProp: datasetProp,
+        className: (0, _classnames.default)(className, {
+            [`${parent.className}`]: !isUseParentsClassesAsDataset
+        }),
+        isOpen: parent.isOpen,
+        onClick: setIsOpen,
+        icon: icon,
+        disabled: disabled,
+        // disabled={parent.children?.every?.((child) => child.disabled)}
+        titleJSX: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                    className: `${RC}__checkbox-input`,
+                    isStark: (parent === null || parent === void 0 ? void 0 : (_parent_children = parent.children) === null || _parent_children === void 0 ? void 0 : (_parent_children_some = _parent_children.some) === null || _parent_children_some === void 0 ? void 0 : _parent_children_some.call(_parent_children, (item)=>item.value)) && !(parent === null || parent === void 0 ? void 0 : (_parent_children1 = parent.children) === null || _parent_children1 === void 0 ? void 0 : (_parent_children_every = _parent_children1.every) === null || _parent_children_every === void 0 ? void 0 : _parent_children_every.call(_parent_children1, (item)=>item.value)),
+                    label: parent.label,
+                    value: parent.value,
+                    onChange: onChange,
+                    disabled: parent.children.every(({ disabled })=>disabled === true) || parent.disabled
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    className: `${RC}__description-checked`,
+                    children: (parent === null || parent === void 0 ? void 0 : (_parent_children2 = parent.children) === null || _parent_children2 === void 0 ? void 0 : _parent_children2.length) ? `Selected ${parent.children.filter((child)=>child.value).length} from ${(_parent_children3 = parent.children) === null || _parent_children3 === void 0 ? void 0 : _parent_children3.length}` : null
+                })
+            ]
+        }),
+        children: children
+    });
+};
+const _default = AccordionWithCheckbox;

package/dist/src/Atomic/FormElements/TimeRange/TimeRange.interface.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -0,0 +1,119 @@
+"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 _Label = /*#__PURE__*/ _interop_require_default(require("@/Atomic/FormElements/Label"));
+const _useToggle = /*#__PURE__*/ _interop_require_default(require("@/Functions/useToggle"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _moment = /*#__PURE__*/ _interop_require_default(require("moment"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _Input = /*#__PURE__*/ _interop_require_default(require("../Input/Input"));
+require("./TimeRange.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 CN = 'time-range';
+const TimeRange = ({ className, from = '', to = '', labelFrom, labelTo, testId = CN })=>{
+    const [startTime, setStartTime] = (0, _react.useState)(from);
+    const [endTime, setEndTime] = (0, _react.useState)(to);
+    const { isToggled: isStartTimeValidate } = (0, _useToggle.default)();
+    const { isToggled: isEndTimeValidate } = (0, _useToggle.default)();
+    const isStartTimeValid = (0, _react.useMemo)(()=>(0, _moment.default)(startTime, 'HH:mm', true).isValid(), [
+        startTime
+    ]);
+    const isEndTimeValid = (0, _react.useMemo)(()=>(0, _moment.default)(endTime, 'HH:mm', true).isValid(), [
+        endTime
+    ]);
+    const blurTimeHandler = (time, setFunc)=>{
+        const formattedTime = time ? (0, _moment.default)(time, 'HH:mm').format('HH:mm') : '';
+        setFunc(formattedTime);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)(CN, className),
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "time-range__range",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    label: labelFrom || 'Between'
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                    // @ts-ignore - инпут пока .js
+                    // ANCHOR - пока .js
+                    className: "time-range__input",
+                    value: startTime,
+                    onChange: (value)=>setStartTime(value),
+                    placeholder: "00:00",
+                    onBlur: ()=>blurTimeHandler(startTime, setStartTime),
+                    error: isStartTimeValidate || !isStartTimeValid ? 'HH:MM format' : '',
+                    testId: "start-time-input"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                    label: labelTo || 'and'
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                    // @ts-ignore - инпут пока .js
+                    // ANCHOR - пока .js
+                    className: "time-range__input",
+                    value: endTime,
+                    onChange: (value)=>setEndTime(value),
+                    placeholder: "00:00",
+                    onBlur: ()=>blurTimeHandler(endTime, setEndTime),
+                    error: isEndTimeValidate || !isEndTimeValid ? 'HH:MM format' : '',
+                    testId: "end-time-input"
+                })
+            ]
+        })
+    });
+};
+const _default = TimeRange;

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

@@ -0,0 +1,23 @@
+:root {
+  --time-range-input-width: 60px;
+  --time-range-range-margin: 8px 0 13px;
+  --time-range-range-margin-right: 16px;
+}
+
+.time-range {
+  &__input .form-input {
+    width: var(--time-range-input-width);
+  }
+
+  &__range {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    margin: var(--time-range-range-margin);
+
+    & > *:not(:last-child) {
+      margin-right: var(--time-range-range-margin-right);
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+"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, {
+    TimeRangeTemplate: function() {
+        return TimeRangeTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _TimeRange = /*#__PURE__*/ _interop_require_default(require("./TimeRange"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'Form Elements/TimeRange',
+    component: _TimeRange.default
+};
+const Template = (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {
+        ...args
+    });
+const TimeRangeTemplate = Template.bind({});
+TimeRangeTemplate.args = {
+    from: '12:00',
+    to: '13:00',
+    labelFrom: '',
+    labelTo: ''
+};

package/dist/src/Atomic/FormElements/TimeRange/TimeRange.test.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userevent = /*#__PURE__*/ _interop_require_default(require("@testing-library/user-event"));
+const _TimeRange = /*#__PURE__*/ _interop_require_default(require("./TimeRange"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('timeRange', ()=>{
+    const defaultProps = {
+        from: '09:00',
+        to: '17:00',
+        labelFrom: 'Start',
+        labelTo: 'End'
+    };
+    it('renders without crashing', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {}));
+        expect(_react.screen.getByTestId('time-range')).toBeInTheDocument();
+    });
+    it('renders with default labels when no labels provided', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {}));
+        expect(_react.screen.getByText('Between')).toBeInTheDocument();
+        expect(_react.screen.getByText('and')).toBeInTheDocument();
+    });
+    it('renders with custom labels', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {
+            ...defaultProps
+        }));
+        expect(_react.screen.getByText('Start')).toBeInTheDocument();
+        expect(_react.screen.getByText('End')).toBeInTheDocument();
+    });
+    it('displays initial time values', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {
+            ...defaultProps
+        }));
+        const startInputWrapper = _react.screen.getByTestId('start-time-input');
+        const startInput = startInputWrapper.querySelector('input');
+        const endInputWrapper = _react.screen.getByTestId('end-time-input');
+        const endInput = endInputWrapper.querySelector('input');
+        expect(startInput.value).toBe('09:00');
+        expect(endInput.value).toBe('17:00');
+    });
+    it('handles time input changes', async ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {}));
+        const startInputWrapper = _react.screen.getByTestId('start-time-input');
+        const startInput = startInputWrapper.querySelector('input');
+        const endInputWrapper = _react.screen.getByTestId('end-time-input');
+        const endInput = endInputWrapper.querySelector('input');
+        await _userevent.default.type(startInput, '10:30');
+        await _userevent.default.type(endInput, '18:30');
+        expect(startInput).toHaveValue('10:30');
+        expect(endInput).toHaveValue('18:30');
+    });
+    it('validates time format on blur', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {}));
+        const startInputWrapper = _react.screen.getByTestId('start-time-input');
+        const startInput = startInputWrapper.querySelector('input');
+        _react.fireEvent.change(startInput, {
+            target: {
+                value: 'invalid'
+            }
+        });
+        _react.fireEvent.blur(startInput);
+        expect(_react.screen.getByText('Between')).toBeInTheDocument();
+    });
+    it('formats valid time on blur', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {}));
+        const startInputWrapper = _react.screen.getByTestId('start-time-input');
+        const startInput = startInputWrapper.querySelector('input');
+        _react.fireEvent.change(startInput, {
+            target: {
+                value: '9:00'
+            }
+        });
+        _react.fireEvent.blur(startInput);
+        expect(startInput).toHaveValue('9:00');
+    });
+    it('applies custom className', ()=>{
+        const customClass = 'custom-time-range';
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {
+            className: customClass
+        }));
+        expect(_react.screen.getByTestId('time-range')).toHaveClass(customClass);
+    });
+    it('handles empty time values', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {}));
+        const startInputWrapper = _react.screen.getByTestId('start-time-input');
+        const startInput = startInputWrapper.querySelector('input');
+        const endInputWrapper = _react.screen.getByTestId('end-time-input');
+        const endInput = endInputWrapper.querySelector('input');
+        _react.fireEvent.change(startInput, {
+            target: {
+                value: ''
+            }
+        });
+        _react.fireEvent.change(endInput, {
+            target: {
+                value: ''
+            }
+        });
+        _react.fireEvent.blur(startInput);
+        _react.fireEvent.blur(endInput);
+        expect(startInput).toHaveValue('');
+        expect(endInput).toHaveValue('');
+    });
+    describe('time validation', ()=>{
+        it('validates correct time format', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {}));
+            const startInputWrapper = _react.screen.getByTestId('start-time-input');
+            const startInput = startInputWrapper.querySelector('input');
+            // Valid time
+            _react.fireEvent.change(startInput, {
+                target: {
+                    value: '13:45'
+                }
+            });
+            _react.fireEvent.blur(startInput);
+            expect(_react.screen.queryByText('HH:MM format')).not.toBeInTheDocument();
+            // Invalid time
+            _react.fireEvent.change(startInput, {
+                target: {
+                    value: '25:70'
+                }
+            });
+            _react.fireEvent.blur(startInput);
+            expect(_react.screen.getByText('Between')).toBeInTheDocument();
+        });
+        it('handles various time input formats', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRange.default, {}));
+            const startInputWrapper = _react.screen.getByTestId('start-time-input');
+            const startInput = startInputWrapper.querySelector('input');
+            // Test different valid formats
+            const testCases = [
+                {
+                    input: '9:30',
+                    expected: '9:30'
+                },
+                {
+                    input: '14:00',
+                    expected: '14:00'
+                },
+                {
+                    input: '23:59',
+                    expected: '23:59'
+                }
+            ];
+            testCases.forEach(({ input, expected })=>{
+                _react.fireEvent.change(startInput, {
+                    target: {
+                        value: input
+                    }
+                });
+                _react.fireEvent.blur(startInput);
+                expect(startInput).toHaveValue(expected);
+            });
+        });
+    });
+});

package/dist/src/Atomic/FormElements/TimeRange/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _TimeRange = /*#__PURE__*/ _interop_require_default(require("./TimeRange"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _TimeRange.default;