intelicoreact 1.5.32 → 1.5.34

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

@@ -0,0 +1,108 @@
+"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, {
+    CalendarTemplate: function() {
+        return CalendarTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _Calendar = /*#__PURE__*/ _interop_require_default(require("./Calendar"));
+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/Calendar',
+    component: _Calendar.default,
+    argTypes: {
+        date: {
+            description: 'string. optional'
+        },
+        setDate: {
+            description: 'function. optional'
+        },
+        className: {
+            description: 'string. optional'
+        },
+        testId: {
+            description: 'string. optional'
+        }
+    }
+};
+const Template = (args)=>{
+    const [date, setDate] = (0, _react.useState)('12/03/2021');
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        style: {
+            width: '320px'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Calendar.default, {
+            ...args,
+            date: date,
+            setDate: setDate
+        })
+    });
+};
+const CalendarTemplate = Template.bind({});
+CalendarTemplate.args = {
+    params: {},
+    setDate: ()=>null,
+    setIsOpened: ()=>null,
+    className: '',
+    testId: 'test-id'
+};

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

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

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

@@ -0,0 +1,65 @@
+"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 _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+require("./CheckboxInput.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RC = 'checkbox-input';
+const attrsOfNativeInputDefault = {};
+const CheckboxInput = ({ label, id, value, onChange, disabled, className, isStark, testId = RC, attributesOfNativeInput = attrsOfNativeInputDefault, ...props })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
+        "data-testid": testId,
+        className: (0, _classnames.default)(RC, className, {
+            [`checkbox-input_disabled`]: disabled
+        }),
+        htmlFor: id === null || id === void 0 ? void 0 : id.toString(),
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`checkbox-input__input`, {
+                    [`checkbox-input__input_checked`]: value,
+                    [`checkbox-input__input_indeterminate`]: isStark
+                }),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                        ...id ? {
+                            'id': id.toString(),
+                            'data-id': id
+                        } : {},
+                        type: "checkbox",
+                        className: "checkbox-input__checkbox",
+                        onChange: (e)=>onChange(!value, e),
+                        checked: value !== null && value !== void 0 ? value : false,
+                        disabled: disabled,
+                        ref: (elem)=>{
+                            if (elem) elem.indeterminate = !!isStark;
+                        },
+                        "data-testid": `${testId}-input`,
+                        ...attributesOfNativeInput,
+                        ...props
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: "checkbox-input__mark"
+                    })
+                ]
+            }),
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "checkbox-input__label",
+                children: label
+            })
+        ]
+    });
+};
+const _default = CheckboxInput;

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

@@ -0,0 +1,151 @@
+.checkbox-input {
+  --checkbox-input-width: 16px;
+  --checkbox-input-height: 16px;
+  --checkbox-input-margin-right: 5px;
+  --checkbox-input-border-color: #9aa0b9;
+  --checkbox-input-bg-color: #ffff;
+  --checkbox-input-hover-bg-color: rgba(107, 129, 221, 0.2);
+  --checkbox-input-mark-bg-color: #6b81dd;
+  --checkbox-input-label-font-size: 13px;
+  --checkbox-input-disabled-opacity: 0.5;
+
+  display: flex;
+  align-items: center;
+
+  cursor: pointer;
+
+  input {
+    display: none;
+  }
+
+  &_disabled {
+    cursor: auto;
+    pointer-events: none;
+
+    opacity: var(--checkbox-input-disabled-opacity);
+  }
+
+  &:hover {
+    .checkbox-input__input {
+      background-color: var(--checkbox-input-hover-bg-color);
+    }
+  }
+
+  &__input {
+    position: relative;
+
+    overflow: hidden;
+
+    box-sizing: border-box;
+    width: var(--checkbox-input-width);
+    min-width: var(--checkbox-input-width);
+    height: var(--checkbox-input-height);
+    margin-right: var(--checkbox-input-margin-right);
+
+    cursor: pointer;
+
+    border: 1px solid var(--checkbox-input-border-color);
+    border-radius: 2px;
+    background-color: var(--checkbox-input-bg-color);
+
+    transition: background-color 0.2s ease;
+
+    &_checked,
+    &_indeterminate {
+      border: none;
+    }
+
+    .checkbox-input__checkbox:checked ~ .checkbox-input__mark {
+      display: block;
+
+      width: 100%;
+      height: 100%;
+
+      border-radius: 2px;
+    }
+  }
+
+  &__checkbox {
+    position: absolute;
+
+    width: 0;
+    height: 0;
+
+    opacity: 0;
+  }
+
+  &__mark {
+    position: absolute;
+
+    display: none;
+
+    width: 100%;
+    height: 100%;
+
+    background-color: var(--checkbox-input-mark-bg-color);
+
+    &::after {
+      position: absolute;
+      inset: -2px 0 0;
+
+      width: 4px;
+      height: 8px;
+      margin: auto;
+
+      content: '';
+
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      border-radius: 2px;
+
+      transform: rotate(45deg);
+    }
+  }
+
+  &__label {
+    font-size: var(--checkbox-input-label-font-size);
+    user-select: none;
+  }
+
+  input[type='checkbox' i] {
+    &:indeterminate + span {
+      display: block;
+
+      width: 100%;
+      height: 100%;
+
+      &::after {
+        position: absolute;
+        inset: 0;
+
+        width: 100%;
+        height: 100%;
+        margin: auto;
+
+        content: '';
+
+        border: none;
+        background-color: var(--checkbox-input-mark-bg-color);
+
+        transform: rotate(0deg);
+      }
+
+      &::before {
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        left: 50%;
+
+        width: 45%;
+
+        content: '';
+
+        border: solid white;
+        border-width: 0 1px 2px 0;
+        border-radius: 2px;
+
+        transform: scale(1, 0.9) translateX(-50%) translateY(-50%);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+"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, {
+    Checkbox: function() {
+        return Checkbox;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _CheckboxInput = /*#__PURE__*/ _interop_require_default(require("./CheckboxInput"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'Form Elements/CheckboxInput',
+    component: _CheckboxInput.default,
+    argTypes: {
+        className: {
+            description: 'string. optional'
+        },
+        value: {
+            description: 'boolean'
+        },
+        disabled: {
+            description: 'boolean'
+        },
+        isStark: {
+            description: 'checkbox third state. boolean. optional'
+        },
+        forced: {
+            description: 'checkbox third state. boolean. optional'
+        },
+        testid: {
+            description: 'string. optional'
+        },
+        onChange: {
+            description: 'function. optional'
+        },
+        label: {
+            description: 'string. optional'
+        },
+        attributesOfNativeInput: {
+            description: 'Object. Optional. This is list of attributes to add in native input'
+        }
+    }
+};
+function Template(args) {
+    const { value: argsValue } = args;
+    const [value, setValue] = (0, _react.useState)(argsValue);
+    const [value1, setValue1] = (0, _react.useState)(argsValue);
+    const [value2, setValue2] = (0, _react.useState)(argsValue);
+    const [value3, setValue3] = (0, _react.useState)(argsValue);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                ...args,
+                value: value,
+                onChange: setValue
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                ...args,
+                value: value1,
+                onChange: setValue1
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                ...args,
+                value: value2,
+                onChange: setValue2
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                ...args,
+                value: value3,
+                onChange: setValue3
+            })
+        ]
+    });
+}
+const Checkbox = Template.bind({});
+Checkbox.args = {
+    label: 'Test label',
+    value: true,
+    disabled: false,
+    isStark: false,
+    testId: 'testid',
+    className: 'test-class'
+};

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

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const _CheckboxInput = /*#__PURE__*/ _interop_require_default(require("./CheckboxInput"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('checkboxInput Component', ()=>{
+    const defaultProps = {
+        onChange: jest.fn(),
+        label: 'Test Label',
+        id: 'test-id'
+    };
+    beforeEach(()=>{
+        jest.clearAllMocks();
+    });
+    it('renders correctly with minimal props', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps
+        }));
+        expect(_react.screen.getByTestId('checkbox-input')).toBeInTheDocument();
+    });
+    it('renders with label', ()=>{
+        const label = 'Test Label';
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            label: label
+        }));
+        expect(_react.screen.getByText(label)).toBeInTheDocument();
+    });
+    it('handles onChange event', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            value: false
+        }));
+        const checkbox = _react.screen.getByTestId('checkbox-input-input');
+        _react.fireEvent.click(checkbox);
+        expect(defaultProps.onChange).toHaveBeenCalledWith(true, expect.any(Object));
+    });
+    it('applies disabled state correctly', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            disabled: true
+        }));
+        expect(_react.screen.getByTestId('checkbox-input')).toHaveClass('checkbox-input_disabled');
+        expect(_react.screen.getByTestId('checkbox-input-input')).toBeDisabled();
+    });
+    it('applies checked state correctly', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            value: true
+        }));
+        expect(_react.screen.getByTestId('checkbox-input-input')).toBeChecked();
+        expect(_react.screen.getByTestId('checkbox-input').querySelector('.checkbox-input__input')).toHaveClass('checkbox-input__input_checked');
+    });
+    it('applies indeterminate state correctly', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            isStark: true
+        }));
+        const input = _react.screen.getByTestId('checkbox-input-input');
+        expect(input.indeterminate).toBe(true);
+        expect(_react.screen.getByTestId('checkbox-input').querySelector('.checkbox-input__input')).toHaveClass('checkbox-input__input_indeterminate');
+    });
+    it('applies custom className', ()=>{
+        const customClass = 'custom-class';
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            className: customClass
+        }));
+        expect(_react.screen.getByTestId('checkbox-input')).toHaveClass(customClass);
+    });
+    it('applies custom testId', ()=>{
+        const testId = 'custom-test-id';
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            testId: testId
+        }));
+        expect(_react.screen.getByTestId(testId)).toBeInTheDocument();
+        expect(_react.screen.getByTestId(`${testId}-input`)).toBeInTheDocument();
+    });
+    it('applies id correctly', ()=>{
+        const id = 'test-id';
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            id: id
+        }));
+        const input = _react.screen.getByTestId('checkbox-input-input');
+        expect(input).toHaveAttribute('id', id);
+        expect(input).toHaveAttribute('data-id', id);
+    });
+    it('applies additional input attributes', ()=>{
+        const attributesOfNativeInput = {
+            'name': 'test-name',
+            'aria-label': 'test-aria-label'
+        };
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            attributesOfNativeInput: attributesOfNativeInput
+        }));
+        const input = _react.screen.getByTestId('checkbox-input-input');
+        expect(input).toHaveAttribute('name', attributesOfNativeInput.name);
+        expect(input).toHaveAttribute('aria-label', attributesOfNativeInput['aria-label']);
+    });
+    it('handles undefined value correctly', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            value: undefined
+        }));
+        expect(_react.screen.getByTestId('checkbox-input-input')).not.toBeChecked();
+    });
+    it('handles toggle from checked to unchecked', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            value: true
+        }));
+        const checkbox = _react.screen.getByTestId('checkbox-input-input');
+        _react.fireEvent.click(checkbox);
+        expect(defaultProps.onChange).toHaveBeenCalledWith(false, expect.any(Object));
+    });
+    it('prevents change event when disabled', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+            ...defaultProps,
+            disabled: true,
+            id: "test-id",
+            value: false
+        }));
+        const checkbox = _react.screen.getByTestId('checkbox-input-input');
+        _react.fireEvent.change(checkbox, {
+            target: {
+                checked: true
+            }
+        });
+        expect(defaultProps.onChange).not.toHaveBeenCalled();
+        expect(checkbox).toBeDisabled();
+    });
+});

package/dist/src/Atomic/FormElements/CheckboxInput/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 _CheckboxInput = /*#__PURE__*/ _interop_require_default(require("./CheckboxInput"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _CheckboxInput.default;

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

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

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

@@ -0,0 +1,52 @@
+"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 _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _CheckboxInput = /*#__PURE__*/ _interop_require_default(require("../CheckboxInput/CheckboxInput"));
+require("./CheckboxesLine.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RC = 'checkboxes-line';
+const CheckboxesLine = (props)=>{
+    const { field, onChange } = props;
+    const { items, value, disabled, isPositionColumn, className, testId = RC } = field !== null && field !== void 0 ? field : props || {};
+    const handleChange = (val, id)=>{
+        onChange(val ? [
+            ...value || [],
+            id
+        ] : [
+            ...(value === null || value === void 0 ? void 0 : value.filter((el)=>el !== id)) || []
+        ]);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        "data-testid": RC,
+        className: (0, _classnames.default)(RC, {
+            [`${RC}_column`]: isPositionColumn
+        }, className),
+        children: (items === null || items === void 0 ? void 0 : items.map((item)=>{
+            var _value_includes;
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                testId: (item === null || item === void 0 ? void 0 : item.testId) || testId,
+                id: item.id,
+                className: `${RC}__checkbox-input`,
+                label: item.label,
+                value: (value === null || value === void 0 ? void 0 : (_value_includes = value.includes) === null || _value_includes === void 0 ? void 0 : _value_includes.call(value, item.id)) || false,
+                onChange: (val)=>handleChange(val, item.id),
+                disabled: disabled || item.disabled
+            }, item.label);
+        })) || null
+    });
+};
+const _default = CheckboxesLine;

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

@@ -0,0 +1,32 @@
+.checkboxes-line {
+  --checkboxes-line-margin-right: 10px;
+  --checkboxes-line-margin-bottom: 10px;
+
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+
+  &__checkbox-input {
+    width: fit-content;
+    margin-right: var(--checkboxes-line-margin-right);
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  &_column {
+    flex-flow: column wrap;
+    align-items: flex-start;
+
+    .checkboxes-line__checkbox-input {
+      margin-right: 0;
+      margin-bottom: var(--checkboxes-line-margin-bottom);
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+}