intelicoreact 1.5.32 → 1.5.34

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

@@ -0,0 +1,314 @@
+"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, {
+    RangeSliderTemplate: function() {
+        return RangeSliderTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _RangeSlider2 = /*#__PURE__*/ _interop_require_default(require("./RangeSlider2"));
+require("./RangeSlider.stories.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/RangeSlider2',
+    component: _RangeSlider2.default,
+    argTypes: {
+        min: {
+            name: 'min',
+            type: {
+                name: 'number',
+                required: true
+            },
+            description: 'Minimal value of Range',
+            table: {
+                type: {
+                    summary: 'number'
+                },
+                defaultValue: {
+                    summary: 0
+                }
+            },
+            control: {
+                type: 'number'
+            }
+        },
+        max: {
+            name: 'max',
+            type: {
+                name: 'number',
+                required: true
+            },
+            description: 'Maximal value of Range',
+            table: {
+                type: {
+                    summary: 'number'
+                },
+                defaultValue: {
+                    summary: 100
+                }
+            },
+            control: {
+                type: 'number'
+            }
+        },
+        minRange: {
+            name: 'minRange',
+            type: {
+                name: 'number',
+                required: false
+            },
+            description: 'Minimal Range',
+            table: {
+                type: {
+                    summary: 'number'
+                },
+                defaultValue: {
+                    summary: 0
+                }
+            },
+            control: {
+                type: 'number'
+            }
+        },
+        precision: {
+            name: 'precision',
+            type: {
+                name: 'number',
+                required: false
+            },
+            description: 'Number of Symbols After Comma',
+            table: {
+                type: {
+                    summary: 'number'
+                },
+                defaultValue: {
+                    summary: 0
+                }
+            },
+            control: {
+                type: 'number'
+            }
+        },
+        value: {
+            name: 'value',
+            type: {
+                name: 'object',
+                required: false
+            },
+            description: 'Incoming Value',
+            defaultValue: {
+                from: 0,
+                to: 100
+            },
+            table: {
+                type: {
+                    summary: 'object'
+                },
+                defaultValue: {
+                    summary: JSON.stringify({
+                        from: 0,
+                        to: 100
+                    }, null, 2)
+                }
+            },
+            control: {
+                type: 'object',
+                value: {
+                    from: 0,
+                    to: 100
+                }
+            }
+        },
+        unit: {
+            name: 'unit',
+            type: {
+                name: 'string',
+                required: false
+            },
+            description: 'Unit for RangeSlider Values',
+            table: {
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: ''
+                }
+            },
+            control: {
+                type: 'text'
+            }
+        },
+        label: {
+            name: 'label',
+            type: {
+                name: 'string',
+                required: true
+            },
+            description: 'Label Text for RangeSlider',
+            table: {
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: 'Label'
+                }
+            },
+            control: {
+                type: 'text'
+            }
+        },
+        onChange: {
+            name: 'onChange',
+            type: {
+                name: 'function',
+                required: false
+            },
+            description: 'Callback function for onChange Event',
+            table: {
+                type: {
+                    summary: 'function'
+                },
+                defaultValue: {
+                    summary: `({from, to}) => {}`
+                }
+            },
+            control: {
+                type: 'function'
+            }
+        }
+    }
+};
+const Template = (args)=>{
+    args = {
+        0: {
+            ...args
+        },
+        1: {
+            min: 5,
+            max: 18.9,
+            label: 'APR range',
+            unit: '%',
+            minRange: 1,
+            precision: 1
+        },
+        2: {
+            min: 0,
+            max: 10,
+            label: 'Merchant Fee range',
+            unit: '%',
+            minRange: 1,
+            precision: 2
+        }
+    };
+    const [ranges, setRanges] = (0, _react.useState)([]);
+    const [triggers, setTriggers] = (0, _react.useState)([]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        style: {
+            marginTop: '64px'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeSlider2.default, {
+                minRange: 5,
+                onChange: (ranges, triggers)=>{
+                    setRanges(ranges);
+                    setTriggers(triggers);
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "desc",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("code", {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("h4", {
+                                children: "Triggers:"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
+                                children: JSON.stringify(triggers, null, 2)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("code", {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("h4", {
+                                children: "Ranges:"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
+                                children: JSON.stringify(ranges, null, 2)
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const RangeSliderTemplate = Template.bind({});
+RangeSliderTemplate.args = {
+    min: 0,
+    max: 15000,
+    rangeSymbol: '$',
+    label: 'Period range (months)',
+    minRange: 6,
+    precision: 0,
+    noLabel: false,
+    required: true,
+    noTrack: false
+};

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

@@ -0,0 +1,42 @@
+"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 _Switcher = /*#__PURE__*/ _interop_require_default(require("../Switcher/Switcher"));
+require("./SwitchableRow.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RC_default = "switchable-row";
+const SwitchableRow = (props)=>{
+    const { RC = RC_default, className, children, isActive, setIsActive, switcherLabel, isSwitcherLabelBold, testId = RC_default } = props || {};
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(RC, className),
+        "data-testid": testId,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(`${RC}__cell`),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Switcher.default, {
+                    isActive: isActive,
+                    onChange: setIsActive,
+                    isLabelBold: isSwitcherLabelBold,
+                    label: switcherLabel,
+                    "data-testid": `${testId}-switcher`
+                })
+            }),
+            children
+        ]
+    });
+};
+const _default = SwitchableRow;

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

@@ -0,0 +1,16 @@
+.switchable-row {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+
+  &__cell {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+
+    box-sizing: border-box;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,137 @@
+"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, {
+    SwitchableRowTemplate: function() {
+        return SwitchableRowTemplate;
+    },
+    default: 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 _SwitchableRow = /*#__PURE__*/ _interop_require_default(require("./SwitchableRow"));
+const _Input = /*#__PURE__*/ _interop_require_default(require("../Input/Input"));
+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/SwitchableRow',
+    component: _SwitchableRow.default
+};
+const RC = 'switchable-row';
+const Template = (args)=>{
+    const { isIncludeOuterStyles, ...restArgs } = args;
+    const [values, setValues] = (0, _react.useState)({
+        key1: 0,
+        key2: 0,
+        key3: 0
+    });
+    const [isActive, setIsActive] = (0, _react.useState)({});
+    const handle = {
+        change: (newValue, propKey)=>{
+            setValues((state)=>({
+                    ...state,
+                    [propKey]: newValue
+                }));
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_SwitchableRow.default, {
+        ...restArgs,
+        RC: RC,
+        className: isIncludeOuterStyles ? 'any-outer-class__switchable-row' : null,
+        isActive: isActive,
+        setIsActive: setIsActive,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(`${RC}__cell`, {
+                    [`${RC}__cell_disabled`]: !isActive
+                }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                    value: values.key1,
+                    onChange: (value)=>handle.change(value, 'key1'),
+                    disabled: !isActive
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(`${RC}__cell`, {
+                    [`${RC}__cell_disabled`]: !isActive
+                }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                    value: values.key2,
+                    onChange: (value)=>handle.change(value, 'key2'),
+                    disabled: !isActive
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(`${RC}__cell`, {
+                    [`${RC}__cell_disabled`]: !isActive
+                }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                    value: values.key3,
+                    onChange: (value)=>handle.change(value, 'key3'),
+                    disabled: !isActive
+                })
+            })
+        ]
+    });
+};
+const SwitchableRowTemplate = Template.bind({});
+SwitchableRowTemplate.args = {
+    isIncludeOuterStyles: false,
+    switcherLabel: 'TestLabel'
+};

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

@@ -0,0 +1,18 @@
+@import 'https://fonts.googleapis.com/css2?family=Sarabun&display=swap';
+
+.any-outer-class__switchable-row {
+  height: 40px;
+
+  .switchable-row__cell {
+    width: calc((100% - 200px) / 3);
+    padding: 8px 0;
+  }
+
+  .switchable-row__cell:first-of-type {
+    width: 200px;
+  }
+
+  .switchable-row__cell > div {
+    width: 90%;
+  }
+}

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

@@ -0,0 +1,58 @@
+"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 _Hint = /*#__PURE__*/ _interop_require_default(require("../../UI/Hint/Hint"));
+require("./Switcher.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RC = "switcher";
+const Switcher = ({ label, className, isActive, disabled, onChange, isLabelBold, hint, hintSide, testId = "switcher" })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)(RC, className, {
+            [`${RC}_disabled`]: disabled
+        }),
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+                "data-testid": `${testId}-button`,
+                className: (0, _classnames.default)(`${RC}__button`),
+                onClick: (e)=>onChange(!isActive, e),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__button-content`, {
+                            [`${RC}__button-content_active`]: isActive
+                        }),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: `${RC}__ball`
+                        })
+                    }),
+                    label && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: (0, _classnames.default)(`${RC}__label`, {
+                            [`${RC}__label_bold`]: isLabelBold
+                        }),
+                        children: label
+                    })
+                ]
+            }),
+            hint && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                className: `${RC}__hint`,
+                hint: hint,
+                side: hintSide
+            })
+        ]
+    });
+};
+const _default = Switcher;

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

@@ -0,0 +1,86 @@
+@use '../../../scss/vars';
+
+.switcher {
+  &__button {
+    display: inline-flex;
+    align-items: center;
+
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    font-style: inherit;
+    cursor: pointer;
+
+    color: inherit;
+  }
+
+  &_disabled {
+    pointer-events: none;
+
+    opacity: 0.5;
+  }
+
+  &__button-content {
+    box-sizing: border-box;
+    width: 26px;
+    min-width: 26px;
+    height: 16px;
+    padding: 1px;
+
+    border-radius: 8px;
+    background-color: rgba(vars.$color--gray, 0.5);
+
+    &_active {
+      background-color: vars.$color--primary;
+
+      .switcher__ball {
+        transform: translateX(calc(100% - 4px));
+      }
+    }
+  }
+
+  &__ball {
+    width: 14px;
+    height: 14px;
+
+    border-radius: 50%;
+    background-color: #fff;
+    box-shadow: 0 0 2px rgb(0 0 0 / 50%);
+
+    transition: transform 0.2s ease;
+  }
+
+  &__label {
+    margin-left: 4px;
+
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    font-style: inherit;
+    line-height: 24px;
+    user-select: none;
+    text-align: left;
+
+    color: inherit;
+
+    &_bold {
+      font-weight: 500;
+    }
+  }
+
+  &__wrap {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__hint {
+    margin-left: 5px;
+
+    .hint__button {
+      svg {
+        width: 16px;
+        min-width: 16px;
+      }
+    }
+  }
+}