intelicoreact 1.5.41 → 1.6.0

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

@@ -1,68 +1,119 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _moment = _interopRequireDefault(require("moment"));
-var _useToggle = _interopRequireDefault(require("../../../Functions/useToggle"));
-var _Input = _interopRequireDefault(require("../Input/Input"));
-var _Label = _interopRequireDefault(require("../Label/Label"));
+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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const TimeRange = _ref => {
-  let {
-    className,
-    from,
-    to,
-    labelFrom,
-    labelTo
-  } = _ref;
-  const [startTime, setStartTime] = (0, _react.useState)(from);
-  const [endTime, setEndTime] = (0, _react.useState)(to);
-
-  // eslint-disable-next-line no-unused-vars
-  const {
-    isToggled: isStartTimeValidate,
-    toggleOn: setIsStartTimeValidate
-  } = (0, _useToggle.default)();
-  // eslint-disable-next-line no-unused-vars
-  const {
-    isToggled: isEndTimeValidate,
-    toggleOn: setIsEndTimeValidate
-  } = (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__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(className, "time-range")
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "time-range__range"
-  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
-    label: labelFrom || "Between"
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    className: "time-range__input",
-    value: startTime,
-    onChange: value => setStartTime(value),
-    placeholder: "00:00",
-    onBlur: () => blurTimeHandler(startTime, setStartTime),
-    error: isStartTimeValidate || !isStartTimeValid ? "HH:MM format" : ""
-  }), /*#__PURE__*/_react.default.createElement(_Label.default, {
-    label: labelTo || "and"
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    className: "time-range__input",
-    value: endTime,
-    onChange: value => setEndTime(value),
-    placeholder: "00:00",
-    onBlur: () => blurTimeHandler(endTime, setEndTime),
-    error: isEndTimeValidate || !isEndTimeValid ? "HH:MM format" : ""
-  })));
+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"
+                })
+            ]
+        })
+    });
 };
-var _default = exports.default = TimeRange;
+const _default = TimeRange;

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

@@ -1,6 +1,12 @@
+: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: 60px;
+    width: var(--time-range-input-width);
   }
 
   &__range {
@@ -8,10 +14,10 @@
     justify-content: flex-start;
     align-items: center;
 
-    margin: 8px 0 13px;
+    margin: var(--time-range-range-margin);
 
     & > *:not(:last-child) {
-      margin-right: 16px;
+      margin-right: var(--time-range-range-margin-right);
     }
   }
 }

package/dist/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/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/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;