intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.js

@@ -0,0 +1,84 @@
+"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 _utils = require("../../../../Functions/utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const VariantsListRadioItem = ({ RC, parentId, item, value: actualValue, onChange = ()=>{}, attributesOfNativeInput = {}, isMixWithPersonalAttributes, isUseAsOptionsList, testId = "variants-list-radio-item" })=>{
+    // ? Для корректной работы нужны parentId и item(объект)
+    if (!parentId || !(0, _utils.getIsOnlyAnObject)(item)) return null;
+    const { value, label, description, isDisabled, attributesOfNativeInput: personalAttributesOfNativeInput } = item;
+    const id = `${parentId.toString()}--item-${value}`;
+    const name = parentId.toString();
+    const isActive = actualValue === value;
+    const addAtributesObj = isMixWithPersonalAttributes ? {
+        ...attributesOfNativeInput,
+        ...personalAttributesOfNativeInput
+    } : personalAttributesOfNativeInput || attributesOfNativeInput || {};
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
+        "data-testid": testId,
+        className: (0, _classnames.default)(`${RC}__item`, {
+            [`${RC}__item_disabled`]: isDisabled,
+            [`${RC}__item_active`]: isActive,
+            [`${RC}__item_as-option`]: isUseAsOptionsList
+        }),
+        htmlFor: id,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(`${RC}__item-radio-container`),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: (0, _classnames.default)(`${RC}__item-radio`),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                            id: id,
+                            "data-testid": `${testId}-input`,
+                            type: "radio",
+                            checked: isActive,
+                            className: `${RC}__item-radio-input`,
+                            onChange: ()=>onChange(value),
+                            name: name,
+                            disabled: isDisabled,
+                            ...addAtributesObj
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: `${RC}__item-radio-mark`
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__item-content`),
+                children: [
+                    label && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__item-content-wrapper`),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: (0, _classnames.default)(`${RC}__item-content-label`),
+                            children: label
+                        })
+                    }),
+                    description && !isUseAsOptionsList && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__item-content-wrapper`),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: (0, _classnames.default)(`${RC}__item-content-description`),
+                            children: description
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const _default = VariantsListRadioItem;

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

@@ -0,0 +1,85 @@
+"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"));
+require("./WidgetPseudoTable.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RC = "widget-pseudo-table";
+const WidgetPseudoTable = (props)=>{
+    const { className, title, rightHeaderContent, nullContentData, isNotRenderThead = false, isNoHeader = false, columns = [], rows, CellComponent, CellComponentProps, onChange } = props || {};
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(RC, className),
+        children: [
+            !isNoHeader && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__header`),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__title-block`),
+                        children: title
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__right-header-content-block`),
+                        children: rightHeaderContent
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__body`, {
+                    [`${RC}__body_no-content`]: !(rows === null || rows === void 0 ? void 0 : rows.length)
+                }),
+                children: [
+                    Boolean(rows === null || rows === void 0 ? void 0 : rows.length) && !isNotRenderThead && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__thead`),
+                        children: columns.map((field)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: (0, _classnames.default)(`${RC}__thead-cell`, field.theadCellClassName, field.columnClassName, {
+                                    [`${RC}__thead-cell_reqiured`]: field.isRequired
+                                }),
+                                "data-key": field.key,
+                                children: field.label
+                            }, `thead-${field.key}`))
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__table`),
+                        children: (rows === null || rows === void 0 ? void 0 : rows.length) ? rows.map((row)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: (0, _classnames.default)(`${RC}__row`),
+                                "data-id": row.id,
+                                children: columns.map((cell)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: (0, _classnames.default)(`${RC}__cell`, cell.cellClassName, cell.columnClassName),
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(CellComponent, {
+                                            ...CellComponentProps,
+                                            field: {
+                                                ...cell,
+                                                value: row[cell.key],
+                                                rowData: row
+                                            },
+                                            onChange: (key, val)=>onChange(val, cell.key, row.id)
+                                        })
+                                    }, `row-${row.id}-cell-${cell.key}`))
+                            }, `row-${row.id}`)) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: (0, _classnames.default)(`${RC}__row`),
+                            "data-id": "empty-row",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                className: (0, _classnames.default)(`${RC}__no-data-content`),
+                                children: nullContentData !== null && nullContentData !== void 0 ? nullContentData : "No data"
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const _default = WidgetPseudoTable;

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

@@ -0,0 +1,93 @@
+.widget-pseudo-table {
+  --row-height: 44px;
+  --thead-height: 20px;
+  --grid-template-columns: 1fr 1fr 1fr;
+  border: 1px solid #e2e5ec;
+  border-radius: 3px;
+  background-color: #fff;
+
+  &__header {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+
+    box-sizing: border-box;
+    height: var(--row-height);
+    padding: 12px 16px;
+
+    border-bottom: 1px solid #e2e5ec;
+  }
+
+  &__title-block,
+  &__right-header-content-block {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+
+    width: fit-content;
+    height: 100%;
+  }
+
+  &__body {
+    padding: 8px 16px;
+
+    &_no-content {
+      padding: 0 16px;
+    }
+  }
+
+  &__thead {
+    display: grid;
+    grid-template-columns: var(--grid-template-columns);
+
+    box-sizing: border-box;
+    height: var(--thead-height);
+
+    &-cell {
+      text-align: right;
+      text-transform: uppercase;
+
+      &:first-of-type {
+        text-align: left;
+      }
+
+      &_reqiured {
+        &::after {
+          margin-left: 3px;
+
+          content: '*';
+
+          color: red;
+        }
+      }
+    }
+  }
+
+  &__row {
+    display: grid;
+    grid-template-columns: var(--grid-template-columns);
+
+    box-sizing: border-box;
+    height: var(--row-height);
+    padding: 8px 0;
+
+    border-bottom: 1px solid #ebeff2;
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+  }
+
+  &__cell {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    align-items: center;
+
+    &:first-of-type {
+      justify-content: flex-start;
+    }
+  }
+}

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

@@ -0,0 +1,147 @@
+"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, {
+    WidgetPseudoTableTemplate: function() {
+        return WidgetPseudoTableTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactfeather = require("react-feather");
+const _WidgetPseudoTable = /*#__PURE__*/ _interop_require_default(require("./WidgetPseudoTable"));
+const _Input = /*#__PURE__*/ _interop_require_default(require("../Input/Input"));
+const _constructor = /*#__PURE__*/ _interop_require_default(require("./partial/constructor"));
+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;
+}
+// import '../../../../../scss//main.scss';
+global.lng = 'en';
+const _default = {
+    title: 'Form Elements/WidgetPseudoTable',
+    component: _WidgetPseudoTable.default
+};
+const rows = [
+    {
+        id: 1,
+        label: 'Test Llender 1',
+        key2: 0,
+        key3: 0
+    },
+    {
+        id: 2,
+        label: 'Test Llender 2',
+        key2: 0,
+        key3: 0
+    },
+    {
+        id: 3,
+        label: 'Test Llender 3',
+        key2: 0,
+        key3: 0
+    }
+];
+const RenderField = ({ field, onChange })=>{
+    const { key, value, label, rowData, disabled, itemClassName: className, testId } = field || {};
+    switch(field.type){
+        case 'input':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                ...field,
+                className: className,
+                value: value,
+                onChange: (val)=>onChange(key, val),
+                disabled: disabled,
+                testId: testId
+            });
+        default:
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: field.itemClassName,
+                testId: testId,
+                children: rowData.label
+            });
+    }
+};
+const Template = (args)=>{
+    const { isIncludeOuterStyles, ...restArgs } = args;
+    const [data, setData] = (0, _react.useState)(rows);
+    const handle = {
+        change: (newValue, propKey, rowId)=>setData((state)=>state.map((row)=>row.id === rowId ? {
+                        ...row,
+                        [propKey]: newValue
+                    } : row))
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_WidgetPseudoTable.default, {
+        ...restArgs,
+        className: isIncludeOuterStyles ? 'any-outer-class__widget-pseudo-table' : null,
+        rightHeaderContent: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "delete-icon",
+            size: 16,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Trash2, {})
+        }),
+        CellComponent: RenderField,
+        onChange: handle.change,
+        rows: data
+    });
+};
+const WidgetPseudoTableTemplate = Template.bind({});
+WidgetPseudoTableTemplate.args = {
+    isIncludeOuterStyles: false,
+    isNotRenderThead: false,
+    isNoHeader: false,
+    title: 'Test',
+    columns: _constructor.default
+};

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

@@ -0,0 +1,83 @@
+@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap';
+
+.any-outer-class__widget-pseudo-table {
+  &.widget-pseudo-table {
+    --grid-template-columns: 40% repeat(2, 1fr);
+    width: 565px;
+
+    border: none;
+    border-radius: 6px;
+    box-shadow:
+      0 0.7px 2px rgb(60 77 106 / 10%),
+      0 1.9px 2px rgb(60 77 106 / 7%),
+      0 4.5px 6px rgb(60 77 106 / 5%);
+  }
+
+  .widget-pseudo-table__title-block {
+    font-family: Roboto, sans-serif;
+    font-size: 13px;
+    font-weight: 500;
+    font-style: normal;
+    line-height: 20px;
+
+    color: #1e1e2d;
+  }
+
+  .widget-pseudo-table__thead-cell {
+    font-family: Roboto, sans-serif;
+    font-size: 10px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+
+    color: #9aa0b9;
+  }
+
+  .widget-pseudo-table__cell {
+    .input__wrap {
+      width: 60px;
+
+      border: 1px solid #e2e5ec;
+      border-radius: 0;
+      background: #f7fafc;
+    }
+
+    .input {
+      font-family: Roboto, sans-serif;
+      font-size: 13px;
+      font-weight: 300;
+      font-style: normal;
+      line-height: 20px;
+
+      color: #1e1e2d;
+    }
+
+    .switcher__button-content_active {
+      background-color: #2680c1;
+    }
+
+    .switcher__label {
+      font-family: Roboto, sans-serif;
+      font-size: 13px;
+      font-weight: 400;
+      font-style: normal;
+      line-height: 20px;
+
+      color: #1e1e2d;
+    }
+  }
+}
+
+.delete-icon {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+
+  width: 16px;
+  height: 16px;
+
+  cursor: pointer;
+
+  color: red;
+}

package/dist/src/Atomic/FormElements/WidgetPseudoTable/partial/constructor.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const constructor = [
+    {
+        key: "key1",
+        type: "label",
+        label: "lender",
+        cellClassName: ""
+    },
+    {
+        key: "key2",
+        type: "input",
+        label: "Transaction Fee split, %",
+        isRequired: true,
+        theadCellClassName: "",
+        cellClassName: "",
+        columnClassName: "",
+        onlyNumbers: {
+            type: "float",
+            decimalPlaces: 2
+        }
+    },
+    {
+        key: "key3",
+        type: "input",
+        label: "Revenue Share split, %",
+        isRequired: true,
+        theadCellClassName: "",
+        cellClassName: "",
+        columnClassName: "",
+        onlyNumbers: {
+            type: "float",
+            decimalPlaces: 2
+        }
+    }
+];
+const _default = constructor;

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

@@ -0,0 +1,108 @@
+"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"));
+require("./WidgetWithSwitchableRows.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RC = "widget-with-switchable-rows";
+const WidgetWithSwitchableRows = (props)=>{
+    const { className, title, rightHeaderContent, nullContentData, columns = [], rows, CellComponent, CellComponentProps, onChange, isNoHeader = false } = props || {};
+    const preperedColumns = [
+        {
+            ...columns[0],
+            key: "isActive",
+            type: "switcher"
+        },
+        ...columns.slice(1)
+    ];
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(RC, className),
+        children: [
+            !isNoHeader && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__header`),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__title-block`),
+                        children: title
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__right-header-content-block`),
+                        children: rightHeaderContent
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__body`, {
+                    [`${RC}__body_no-content`]: !(rows === null || rows === void 0 ? void 0 : rows.length)
+                }),
+                children: [
+                    Boolean(rows === null || rows === void 0 ? void 0 : rows.length) && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__thead`),
+                        children: preperedColumns.map((field)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: (0, _classnames.default)(`${RC}__thead-cell`, field.theadCellClassName, field.columnClassName, {
+                                    [`${RC}__thead-cell_reqiured`]: field.isRequired
+                                }),
+                                "data-key": field.key,
+                                children: field.label
+                            }, `thead-${field.key}`))
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__table`),
+                        children: (rows === null || rows === void 0 ? void 0 : rows.length) ? rows.map((row)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: (0, _classnames.default)(`${RC}__row`),
+                                "data-id": row.id,
+                                children: preperedColumns.map((cell)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: (0, _classnames.default)(`${RC}__cell`, cell.cellClassName, cell.columnClassName),
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(CellComponent, {
+                                            ...CellComponentProps,
+                                            field: {
+                                                ...cell,
+                                                value: row[cell.key],
+                                                rowData: row,
+                                                ...cell.key === "isActive" ? {
+                                                    disabled: cell.disabled,
+                                                    label: row.label,
+                                                    isActive: row.isActive
+                                                } : {
+                                                    disabled: !row.isActive,
+                                                    label: cell.label
+                                                }
+                                            },
+                                            onChange: (key, value, propName, innerFieldKey, additional)=>onChange({
+                                                    value,
+                                                    additional,
+                                                    propName,
+                                                    innerFieldKey,
+                                                    key: cell.key || key,
+                                                    rowId: row.id
+                                                })
+                                        })
+                                    }, `row-${row.id}-cell-${cell.key}`))
+                            }, `row-${row.id}`)) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: (0, _classnames.default)(`${RC}__row`),
+                            "data-id": "empty-row",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                className: (0, _classnames.default)(`${RC}__no-data-content`),
+                                children: nullContentData !== null && nullContentData !== void 0 ? nullContentData : "No data"
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const _default = WidgetWithSwitchableRows;