intelicoreact 1.5.32 → 1.5.34

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

@@ -0,0 +1,276 @@
+"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, {
+    InputWithActionTemplate: function() {
+        return InputWithActionTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _InputWithAction = /*#__PURE__*/ _interop_require_default(require("./InputWithAction"));
+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 _default = {
+    title: 'Form Elements/InputWithAction',
+    component: _InputWithAction.default,
+    argTypes: {
+        className: {
+            description: 'string - classes of component'
+        },
+        inputClassName: {
+            description: 'string - classes of inner component "Input"'
+        },
+        isHideAction: {
+            description: 'boolean - if false then render the action trigger'
+        },
+        actionContent: {
+            description: 'string or JSX or undefined - action trigger content (if isHideAction: false, but actionContent: undefinet then will be rendered actionLabel)'
+        },
+        actionLabel: {
+            description: 'string - action trigger text if actionContent: undefined'
+        },
+        doAction: {
+            description: 'function - action method if actionContent: undefined (await doAction?.(value, actionProps))'
+        },
+        actionProps: {
+            description: 'object - additional properties for doAction method'
+        },
+        isNoChangeAfterAction: {
+            description: 'boolean - if true then after the action, the onChange(actionResult) will not be called'
+        },
+        isWithCopy: {
+            description: 'boolean - if true then render the copy button'
+        },
+        copyLabel: {
+            description: 'text - copy button text, default "Coppy"'
+        },
+        copy: {
+            description: 'function - copy button method, copy(inputValue)'
+        },
+        copyIcon: {
+            description: 'JSX'
+        },
+        isNoCopyIcon: {
+            description: 'bolean - if true then copy icon is not render'
+        },
+        isCopyIconRight: {
+            description: 'bolean - enable position to right for copy icon'
+        },
+        copyButtonVariant: {
+            description: 'sting - see variants for "Button" component'
+        },
+        isLodaing: {
+            description: 'boolean - on|off inner spiner'
+        },
+        disabled: {
+            description: 'boolean'
+        },
+        isInputZoneDisabled: {
+            description: 'boolean'
+        },
+        isInputDisabled: {
+            description: 'boolean'
+        },
+        error: {
+            description: 'text - coloring input if is errored'
+        },
+        isPriceInput: {
+            description: 'boolean - if true, the input will be styled as PriceInput'
+        },
+        withDelete: {
+            description: 'boolean - add clear-cross by hover'
+        },
+        onlyNumbers: {
+            description: 'object - only numbers'
+        },
+        softStringMode: {
+            description: 'boolean - only strings'
+        },
+        hardStringMode: {
+            description: 'boolean - soft or hard validation'
+        },
+        isTwoDigitAfterDot: {
+            description: 'boolean - only two digits after dot'
+        },
+        isFocusDefault: {
+            description: 'boolean - if true, input will be focused on mount'
+        },
+        isCropFirstNool: {
+            description: 'boolean - if true and isPriceInput - true,  crop first 0'
+        },
+        placeholder: {
+            description: 'text'
+        },
+        type: {
+            description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
+            control: {
+                type: 'select',
+                options: [
+                    'text',
+                    'number',
+                    'password',
+                    'color',
+                    'date',
+                    'datetime-local',
+                    'month',
+                    'time',
+                    'email',
+                    'range'
+                ]
+            }
+        },
+        icon: {
+            description: 'JSX'
+        },
+        value: {
+            description: '(* - required prop)'
+        },
+        mask: {
+            description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
+        },
+        symbolsLimit: {
+            description: 'Set limit of symbols in input, overhead will be ignored'
+        },
+        onBlur: {
+            description: 'custom callback on blur'
+        },
+        onFocus: {
+            description: 'custom callback on focus'
+        },
+        onKeyUp: {
+            description: 'custom callback on keyup, returns event keyCode'
+        },
+        isNumericMobileKeyboard: {
+            description: 'Enable Mobile Numeric Keyboard',
+            type: 'boolean',
+            default: false
+        }
+    }
+};
+const styles = {
+    with: '200px'
+};
+const doAction = async (value, props)=>{
+    return new Promise((resolve)=>{
+        const { newValue, onChange } = props;
+        setTimeout(()=>{
+            resolve(newValue) //? if isNoChangeAfterAction: false
+            ;
+        //? or
+        // onChange(newValue) //? if actionProps has onChange
+        }, 1000);
+    });
+};
+const copy = (value)=>alert(value);
+const Template = (args)=>{
+    const [value, setValue] = (0, _react.useState)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputWithAction.default, {
+        ...args,
+        value: value,
+        doAction: doAction,
+        copy: copy,
+        actionProps: {
+            newValue: 'test-test-test',
+            setValue
+        },
+        style: styles,
+        onChange: setValue
+    });
+};
+const InputWithActionTemplate = Template.bind({});
+InputWithActionTemplate.args = {
+    testId: 'test',
+    className: 'test-class-name',
+    inputClassName: 'test-class-name__input',
+    isHideAction: false,
+    // actionContent,
+    // actionLabel: 'Generate',
+    isNoChangeAfterAction: false,
+    isWithCopy: true,
+    // copyLabel: 'Coppy this value',
+    // copy,
+    copyIcon: null,
+    isNoCopyIcon: true,
+    isCopyIconRight: false,
+    // copyButtonVariant: 'primary',
+    disabled: false,
+    isInputZoneDisabled: false,
+    isInputDisabled: false,
+    isLodaing: false,
+    type: 'text',
+    isFocusDefault: false,
+    // onlyNumbers: {type: 'float', decimalPlaces: 2, min: 0, max: 1000, isNoEmptyValues: true},
+    isOnlyString: false,
+    isPriceInput: false,
+    isTwoDigitAfterDot: false,
+    isReadOnly: false,
+    error: '',
+    mask: '',
+    softStringMode: false,
+    withDelete: false,
+    symbolsLimit: 255,
+    placeholder: 'Placeholder',
+    // icon: <User className="mr5" />,
+    isNumericMobileKeyboard: false,
+    isNotValidateASCII: false,
+    isCropFirstNool: false,
+    name: 'test-name',
+    fieldKey: 'test-fieldKey',
+    key: 'test-key',
+    id: 'test-id'
+};

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

@@ -0,0 +1,188 @@
+"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 _reactfeather = require("react-feather");
+const _Button = /*#__PURE__*/ _interop_require_default(require("../../UI/Button/Button"));
+const _Input = /*#__PURE__*/ _interop_require_default(require("../Input/Input"));
+require("./InputsRow.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 getRandomInRange = (min, max)=>{
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+const handleObjectChange = (updateObject, updateFunction)=>(data, prop = "", isNumber)=>{
+        let value;
+        if (data === null || data === void 0 ? void 0 : data.target) {
+            value = data.target.type === "checkbox" ? data.target.checked : data.target.value;
+        } else value = data;
+        value = isNumber ? Number(value) : value;
+        const props = prop.split(".");
+        const currentObject = props.reduce((res, chapter, index)=>{
+            if (props.length !== index + 1) res = res[chapter];
+            return res;
+        }, updateObject);
+        currentObject[props.pop()] = value;
+        updateFunction();
+    };
+const InputsRow = ({ items, title, paramPlaceholder = "", valuePlaceholder = "", descriptionPlaceholder = "" })=>{
+    const initialRows = [
+        {
+            param: "",
+            value: "",
+            description: "",
+            rowId: "1"
+        },
+        {
+            param: "",
+            value: "",
+            description: "",
+            rowId: "2"
+        }
+    ];
+    const [data, setData] = (0, _react.useState)(items || initialRows);
+    const onChange = handleObjectChange(setData, ()=>setData({
+            ...data
+        }));
+    const [rows, setRows] = (0, _react.useState)(data);
+    const handleAddRow = ()=>{
+        const newRow = [
+            ...rows,
+            {
+                param: "",
+                value: "",
+                description: "",
+                rowId: getRandomInRange(1, 1000)
+            }
+        ];
+        setRows(newRow);
+        onChange(newRow);
+    };
+    const handleArrayChange = (e, index, prop)=>{
+        rows[index][prop] = e;
+        onChange(rows);
+    };
+    const onDelete = (index)=>{
+        onChange([
+            ...rows.splice(index, 1)
+        ]);
+        onChange(rows);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        children: [
+            title ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "mb5",
+                children: title
+            }) : null,
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "df",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "inputs-row--param-label",
+                        children: "Parameter name(key)"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "inputs-row--value-label",
+                        children: "Value"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "inputs-row--description-label",
+                        children: "Description"
+                    })
+                ]
+            }),
+            rows.map((item, index)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "j4 mb5",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "inputs-row--input mr10",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                                onChange: (e)=>handleArrayChange(e, index, "param"),
+                                value: item.param,
+                                placeholder: paramPlaceholder
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "inputs-row--input mr10",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                                onChange: (e)=>handleArrayChange(e, index, "value"),
+                                value: item.value,
+                                placeholder: valuePlaceholder
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "inputs-row--input mr10",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                                onChange: (e)=>handleArrayChange(e, index, "description"),
+                                value: item.description,
+                                placeholder: descriptionPlaceholder
+                            })
+                        }),
+                        rows.length > 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            onClick: ()=>onDelete(index),
+                            className: "inputs-row--trash",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Trash2, {})
+                        })
+                    ]
+                }, item.rowId)),
+            rows.length < 10 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                onClick: handleAddRow,
+                label: "Add row",
+                className: "inputs-row--add-btn"
+            })
+        ]
+    });
+};
+const _default = InputsRow;

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

@@ -0,0 +1,56 @@
+"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, {
+    InputsRowTemplate: function() {
+        return InputsRowTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _InputsRow = /*#__PURE__*/ _interop_require_default(require("./InputsRow"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+global.lng = 'en';
+const _default = {
+    title: 'Form Elements/InputsRow',
+    component: _InputsRow.default
+};
+const Template = (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_InputsRow.default, {
+        ...args
+    });
+const InputsRowTemplate = Template.bind({});
+InputsRowTemplate.args = {
+    title: 'InputsRow title',
+    paramPlaceholder: 'Params placeholder',
+    valuePlaceholder: 'Value placeholder',
+    descriptionPlaceholder: 'Description placeholder',
+    items: [
+        {
+            param: 'x-leadgen-id',
+            value: 'QUIDDI_220',
+            description: '',
+            rowId: '1'
+        },
+        {
+            param: '',
+            value: '',
+            description: '',
+            rowId: '2'
+        }
+    ]
+};

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

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

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

@@ -0,0 +1,87 @@
+"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 _Hint = /*#__PURE__*/ _interop_require_default(require("../../UI/Hint/Hint"));
+require("./Label.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const CN = 'label';
+const Label = ({ className = '', label = '', note, hint, isRequired, isLabelBolt, onClickHintCallback, error = null, isAccessability = false, isAccessabilityHint = false, testId = CN })=>{
+    const correctLabel = isRequired ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            label,
+            ' ',
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "label_asterisk",
+                children: "*"
+            }),
+            ' ',
+            note && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "label_note",
+                children: note
+            }),
+            hint && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                id: `hint-${label}`,
+                children: null,
+                isLoading: false,
+                isAccessability: isAccessabilityHint,
+                hint: hint.text,
+                icon: hint.icon,
+                variant: hint.variant,
+                side: hint.hintSide,
+                className: "label-hint",
+                onClickCallback: onClickHintCallback
+            }, `hint-${label}`)
+        ]
+    }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            label,
+            ' ',
+            note && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "label_note",
+                children: note
+            }),
+            hint && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                isAccessability: isAccessabilityHint,
+                hint: hint.text,
+                icon: hint.icon,
+                variant: hint.variant,
+                side: hint.hintSide,
+                className: "label-hint",
+                onClickCallback: onClickHintCallback,
+                id: undefined,
+                children: undefined,
+                isLoading: undefined
+            }, undefined)
+        ]
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+        tabIndex: isAccessability ? 0 : -1,
+        "aria-label": label,
+        className: (0, _classnames.default)(CN, {
+            label_bold: isLabelBolt,
+            error,
+            isRequired
+        }, className),
+        "data-testid": testId,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+            className: "label_text",
+            "data-testid": "label-text",
+            children: correctLabel
+        })
+    });
+};
+const _default = Label;

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

@@ -0,0 +1,41 @@
+.label {
+  --label-margin-bottom: 5px;
+  --label-font-size: 13px;
+  --label-color: #1e1e2d;
+  --label-asterisk-color: red;
+  --label-bold-font-weight: 500;
+  --label-note-hint-margin-left: 4px;
+
+  position: relative;
+
+  display: inline-flex;
+  align-items: center;
+
+  width: 100%;
+  margin-bottom: var(--label-margin-bottom);
+
+  font-size: var(--label-font-size);
+
+  color: var(--label-color);
+
+  .label_text {
+    width: 100%;
+
+    vertical-align: middle;
+    white-space: normal;
+    word-wrap: break-word;
+  }
+
+  &.isRequired .label_asterisk {
+    color: var(--label-asterisk-color);
+  }
+
+  &_bold {
+    font-weight: var(--label-bold-font-weight);
+  }
+
+  &_note,
+  &-hint {
+    margin-left: var(--label-note-hint-margin-left);
+  }
+}

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

@@ -0,0 +1,47 @@
+"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, {
+    LabelTemplate: function() {
+        return LabelTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _Label = /*#__PURE__*/ _interop_require_default(require("./Label"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'Form Elements/Label',
+    component: _Label.default,
+    args: {
+        label: 'Loooooooooooooooooooooooooooooooooooooooooooooooong label',
+        note: '(Note text)',
+        isRequired: true,
+        className: 'test-label',
+        hint: {
+            text: 'Hint text',
+            hintSide: 'bottom'
+        },
+        onClickHintCallback: ()=>console.log('onclick callback')
+    }
+};
+function Template(args) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+        ...args
+    });
+}
+const LabelTemplate = Template.bind({});