@steroidsjs/core 3.1.8 → 3.1.9

package/tests/ui/form/DropDownField/DropDownItemMockView.js

@@ -0,0 +1,83 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var useBem_1 = __importDefault(require("../../../../src/hooks/useBem"));
+var DropDownField_1 = require("../../../../src/ui/form/DropDownField/DropDownField");
+var renderIconMock_1 = __importDefault(require("../../../mocks/renderIconMock"));
+var AccordionItemMockView_1 = __importDefault(require("../../content/Accordion/AccordionItemMockView"));
+var CheckboxFieldMockView_1 = __importDefault(require("../CheckboxField/CheckboxFieldMockView"));
+var RadioFieldMockView_1 = __importDefault(require("../RadioField/RadioFieldMockView"));
+function DropDownItemView(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('DropDownItemView');
+    var commonProps = {
+        className: bem.element('option', {
+            hover: props.hoveredId === props.item[props.primaryKey],
+            select: props.selectedIds.includes(props.item[props.primaryKey]),
+            size: props.size
+        }),
+        onFocus: function () { return props.onItemHover(props.item[props.primaryKey]); },
+        onMouseOver: function () { return props.onItemHover(props.item[props.primaryKey]); },
+        onClick: function (e) {
+            e.preventDefault();
+            props.onItemSelect(props.item[props.primaryKey]);
+        }
+    };
+    switch (props.type) {
+        case DropDownField_1.GROUP_CONTENT_TYPE:
+            return ((0, jsx_runtime_1.jsx)(AccordionItemMockView_1["default"], __assign({ isShowMore: props.isShowMore, childIndex: props.childIndex, toggleCollapse: props.toggleCollapse, toggleAccordion: function () { }, showIcon: true, title: props.item.label, position: 'middle', className: bem.element('group', {
+                    size: props.size
+                }) }, { children: (_a = props.item[props.groupAttribute]) === null || _a === void 0 ? void 0 : _a.map(function (subItem, itemIndex) {
+                    var _a;
+                    return ((0, react_1.createElement)(DropDownItemView, __assign({}, props, { type: subItem.type ? subItem.type : (_a = props.itemsContent) === null || _a === void 0 ? void 0 : _a.type, key: itemIndex, item: subItem })));
+                }) }), props.item[props.primaryKey]));
+        case DropDownField_1.ICON_CONTENT_TYPE:
+            return ((0, react_1.createElement)("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
+                (0, renderIconMock_1["default"])(props.item.contentSrc, {
+                    className: bem.element('icon')
+                }),
+                (0, jsx_runtime_1.jsx)("span", { children: props.item.label })));
+        case DropDownField_1.CHECKBOX_CONTENT_TYPE:
+            return ((0, react_1.createElement)("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
+                (0, jsx_runtime_1.jsx)(CheckboxFieldMockView_1["default"], { label: props.item.label, className: bem.element('checkbox'), size: props.size, inputProps: {
+                        disabled: false,
+                        name: props.item.label,
+                        checked: false,
+                        onChange: function () { },
+                        type: 'checkbox'
+                    }, checked: props.selectedIds.includes(props.item[props.primaryKey]) })));
+        case DropDownField_1.RADIO_CONTENT_TYPE:
+            return ((0, react_1.createElement)("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
+                (0, jsx_runtime_1.jsx)(RadioFieldMockView_1["default"], { label: props.item.label, className: bem.element('radio', {
+                        size: props.size
+                    }), size: props.size, inputProps: {
+                        disabled: false,
+                        name: props.item.label,
+                        checked: false,
+                        onChange: function () { },
+                        type: 'radio'
+                    }, checked: props.selectedIds.includes(props.item[props.primaryKey]) })));
+        case DropDownField_1.IMG_CONTENT_TYPE:
+            return ((0, react_1.createElement)("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
+                (0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('img') }, { children: (0, jsx_runtime_1.jsx)("img", { src: props.item.contentSrc, alt: 'custom source for item' }) })),
+                (0, jsx_runtime_1.jsx)("span", { children: props.item.label })));
+        default:
+            return ((0, react_1.createElement)("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }), props.item.label));
+    }
+}
+exports["default"] = DropDownItemView;

package/tests/ui/form/Field/Field.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/form/Field/Field.test.js

@@ -0,0 +1,35 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var Field_1 = __importDefault(require("../../../../src/ui/form/Field/Field"));
+var helpers_1 = require("../../../helpers");
+describe('Field tests', function () {
+    var props = {
+        attribute: 'field'
+    };
+    it('should be in the document with default', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Field_1["default"], props)).container;
+        var field = (0, helpers_1.getElementByClassName)(container, 'InputFieldView');
+        expect(field).toBeInTheDocument();
+    });
+    it('should be in the document with component', function () {
+        var component = 'PasswordField';
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(Field_1["default"], __assign(__assign({}, props), { component: component }))).container;
+        var fieldComponent = (0, helpers_1.getElementByClassName)(container, 'PasswordFieldView');
+        expect(fieldComponent).toBeInTheDocument();
+    });
+});

package/tests/ui/form/FieldLayout/FieldLayout.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/form/FieldLayout/FieldLayout.test.js

@@ -0,0 +1,69 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var FieldLayoutMockView_1 = __importDefault(require("./FieldLayoutMockView"));
+var FieldLayout_1 = __importDefault(require("../../../../src/ui/form/FieldLayout/FieldLayout"));
+var helpers_1 = require("../../../helpers");
+describe('FieldLayout tests', function () {
+    var props = {
+        view: FieldLayoutMockView_1["default"],
+        required: true,
+        size: 'small',
+        children: 'test-children',
+        label: 'test-label',
+        hint: 'test-hint'
+    };
+    var expectedFieldLayoutClass = 'FieldLayoutView';
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(FieldLayout_1["default"], props)).container;
+        var fieldLayout = (0, helpers_1.getElementByClassName)(container, expectedFieldLayoutClass);
+        expect(fieldLayout).toBeInTheDocument();
+    });
+    it('should have correct hint: content, class, size', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(FieldLayout_1["default"], props)).container;
+        var hint = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldLayoutClass, "__hint"));
+        expect(hint).toHaveClass("".concat(expectedFieldLayoutClass, "__hint_size_").concat(props.size));
+    });
+    it('should have correct children: content, class', function () {
+        var _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(FieldLayout_1["default"], props)), container = _a.container, getByText = _a.getByText;
+        var childrenClass = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldLayoutClass, "__field"));
+        var childrenText = getByText(props.children);
+        expect(childrenClass).toBeInTheDocument();
+        expect(childrenText).toBeInTheDocument();
+    });
+    it('should have correct label : content, class, size, required', function () {
+        var _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(FieldLayout_1["default"], props)), container = _a.container, getByText = _a.getByText;
+        var label = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldLayoutClass, "__label"));
+        var labelText = getByText("".concat(props.label, ":"));
+        expect(label).toBeInTheDocument();
+        expect(labelText).toBeInTheDocument();
+        expect(label).toHaveClass("".concat(expectedFieldLayoutClass, "__label_required"));
+        expect(label).toHaveClass("".concat(expectedFieldLayoutClass, "__label_size_").concat(props.size));
+    });
+    it('should have correct error: content, class, icon', function () {
+        var errors = ['test-error1', 'test-error2', 'test-error3'];
+        var _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(FieldLayout_1["default"], __assign(__assign({}, props), { errors: errors }))), container = _a.container, getByText = _a.getByText;
+        var invalidFeedback = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldLayoutClass, "__invalid-feedback"));
+        var errorTextSize = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldLayoutClass, "__error-text_size_").concat(props.size));
+        var errorMessage = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldLayoutClass, "__error-message"));
+        var errorText = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldLayoutClass, "__error-text"));
+        var icon = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldLayoutClass, "__icon_error"));
+        var errorClasses = [invalidFeedback, errorTextSize, errorMessage, errorText, icon];
+        errors.forEach(function (error) { return expect(getByText(error)).toBeInTheDocument(); });
+        errorClasses.forEach(function (errorClass) { return expect(errorClass).toBeInTheDocument(); });
+    });
+});

package/tests/ui/form/FieldLayout/FieldLayoutMockView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IFieldLayoutViewProps } from '../../../../src/ui/form/FieldLayout/FieldLayout';
+export default function FieldLayoutView(props: IFieldLayoutViewProps): JSX.Element;

package/tests/ui/form/FieldLayout/FieldLayoutMockView.js

@@ -0,0 +1,33 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var hooks_1 = require("../../../../src/hooks");
+var Icon_1 = __importDefault(require("../../../../src/ui/content/Icon"));
+var IconMockView_1 = __importDefault(require("../../content/Icon/IconMockView"));
+function FieldLayoutView(props) {
+    var bem = (0, hooks_1.useBem)('FieldLayoutView');
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.block() }, { children: [props.label && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.id, className: bem.element('label', {
+                    required: props.required,
+                    size: props.size
+                }) }, { children: props.label + ':' }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('field') }, { children: [props.children, !(0, isEmpty_1["default"])(props.errors) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('invalid-feedback') }, { children: props.errors.filter(function (error) { return typeof error === 'string'; }).map(function (error, index) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('error-message') }, { children: [(0, jsx_runtime_1.jsx)(Icon_1["default"], { view: IconMockView_1["default"], name: 'mockIcon', className: bem.element('icon_error'), tabIndex: -1 }), (0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('error-text', {
+                                        size: props.size || 'md'
+                                    }) }, { children: error }))] }), index)); }) }))), (0, isEmpty_1["default"])(props.errors) && props.hint && ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('hint', {
+                            size: props.size
+                        }) }, { children: props.hint })))] }))] })));
+}
+exports["default"] = FieldLayoutView;

package/tests/ui/form/FieldList/FieldList.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/form/FieldList/FieldList.test.js

@@ -0,0 +1,98 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var dom_1 = require("@testing-library/dom");
+var FieldListItemMockView_1 = __importDefault(require("./FieldListItemMockView"));
+var FieldListMockView_1 = __importDefault(require("./FieldListMockView"));
+var form_1 = require("../../../../src/ui/form");
+var FieldList_1 = __importDefault(require("../../../../src/ui/form/FieldList/FieldList"));
+var helpers_1 = require("../../../helpers");
+describe('FieldList tests', function () {
+    var titleColum = 'Test title';
+    var props = {
+        view: FieldListMockView_1["default"],
+        itemView: FieldListItemMockView_1["default"],
+        attribute: 'items',
+        className: 'class-test',
+        tableClassName: 'table-class-test',
+        items: [
+            {
+                title: titleColum,
+                attribute: 'name',
+                component: form_1.InputField,
+                placeholder: 'Test placeholder'
+            },
+        ]
+    };
+    var expectedFieldListClass = 'FieldListView';
+    var expectedFieldListItemClass = 'FieldListItemView';
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldList_1["default"], props)).container;
+        var fieldList = (0, helpers_1.getElementByClassName)(container, expectedFieldListClass);
+        expect(fieldList).toBeInTheDocument();
+    });
+    it('should have className and tableClassName', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldList_1["default"], props)).container;
+        var className = (0, helpers_1.getElementByClassName)(container, props.className);
+        var tableClassName = (0, helpers_1.getElementByClassName)(container, props.tableClassName);
+        expect(className).toBeInTheDocument();
+        expect(tableClassName).toBeInTheDocument();
+    });
+    it('should have correct item', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldList_1["default"], props)).container;
+        var item = (0, helpers_1.getElementByClassName)(container, expectedFieldListItemClass);
+        expect(item).toBeInTheDocument();
+    });
+    it('should have correct title in column', function () {
+        var getByText = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldList_1["default"], props)).getByText;
+        var title = getByText(titleColum);
+        expect(title).toBeInTheDocument();
+    });
+    it('should have button add/remove', function () {
+        var showRemove = true;
+        var showAdd = true;
+        var container = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldList_1["default"], __assign(__assign({}, props), { showRemove: showRemove, showAdd: showAdd }))).container;
+        var buttonRemove = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldListItemClass, "__remove"));
+        var buttonAdd = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldListClass, "__button-add"));
+        expect(buttonAdd).toBeInTheDocument();
+        expect(buttonRemove).toBeInTheDocument();
+    });
+    it('should delete item', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldList_1["default"], props)).container;
+        var buttonRemove = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldListItemClass, "__remove"));
+        var item = (0, helpers_1.getElementByClassName)(container, expectedFieldListItemClass);
+        expect(item).toBeInTheDocument();
+        dom_1.fireEvent.click(buttonRemove);
+        var countItems = container.querySelectorAll(".".concat(expectedFieldListItemClass)).length;
+        expect(countItems).toBe(props.items.length - 1);
+    });
+    it('should add item', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldList_1["default"], props)).container;
+        var buttonAdd = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldListClass, "__button-add"));
+        var item = (0, helpers_1.getElementByClassName)(container, expectedFieldListItemClass);
+        expect(item).toBeInTheDocument();
+        dom_1.fireEvent.click(buttonAdd);
+        var countItems = container.querySelectorAll(".".concat(expectedFieldListItemClass)).length;
+        expect(countItems).toBe(props.items.length + 1);
+    });
+    it('should have class hasAlternatingColors', function () {
+        var hasAlternatingColors = true;
+        var container = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldList_1["default"], __assign(__assign({}, props), { hasAlternatingColors: hasAlternatingColors }))).container;
+        var fieldList = (0, helpers_1.getElementByClassName)(container, expectedFieldListClass);
+        expect(fieldList).toHaveClass("".concat(expectedFieldListClass, "_hasAlternatingColors"));
+    });
+});

package/tests/ui/form/FieldList/FieldListItemMockView.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IFieldListItemViewProps } from '../../../../src/ui/form/FieldList/FieldList';
+declare const _default: import("react").MemoExoticComponent<(props: IFieldListItemViewProps) => JSX.Element>;
+export default _default;

package/tests/ui/form/FieldList/FieldListItemMockView.js

@@ -0,0 +1,29 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hooks_1 = require("../../../../src/hooks");
+var content_1 = require("../../../../src/ui/content");
+var form_1 = require("../../../../src/ui/form");
+var IconMockView_1 = __importDefault(require("../../content/Icon/IconMockView"));
+exports["default"] = (0, react_1.memo)(function (props) {
+    var bem = (0, hooks_1.useBem)('FieldListItemView');
+    return ((0, jsx_runtime_1.jsxs)("tr", __assign({ className: bem.block() }, { children: [props.items.map(function (field, index) { return ((0, jsx_runtime_1.jsx)("td", __assign({ className: field.className }, { children: (0, jsx_runtime_1.jsx)(form_1.Field, __assign({}, field, { prefix: props.prefix })) }), index)); }), props.showRemove && ((0, jsx_runtime_1.jsx)("td", { children: (!props.required || props.rowIndex > 0) && ((0, jsx_runtime_1.jsx)("button", __assign({ type: 'button', className: bem.element('remove'), onClick: function (e) {
+                        e.preventDefault();
+                        props.onRemove(props.rowIndex);
+                    } }, { children: (0, jsx_runtime_1.jsx)(content_1.Icon, { view: IconMockView_1["default"], name: "mockIcon" }) }))) }))] })));
+});

package/tests/ui/form/FieldList/FieldListMockView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IFieldListViewProps } from '../../../../src/ui/form/FieldList/FieldList';
+export default function FieldListView(props: IFieldListViewProps): JSX.Element;

package/tests/ui/form/FieldList/FieldListMockView.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var hooks_1 = require("../../../../src/hooks");
+var form_1 = require("../../../../src/ui/form");
+function FieldListView(props) {
+    var bem = (0, hooks_1.useBem)('FieldListView');
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem(bem.block({
+            hasAlternatingColors: props.hasAlternatingColors
+        }), props.className), style: props.style, ref: props.forwardedRef }, { children: (0, jsx_runtime_1.jsxs)("table", __assign({ className: bem(bem.element('table'), props.tableClassName) }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [props.items.map(function (field, rowIndex) { return ((0, jsx_runtime_1.jsx)("th", __assign({ className: field.headerClassName }, { children: field.title }), rowIndex)); }), props.showRemove && (
+                            // eslint-disable-next-line jsx-a11y/control-has-associated-label
+                            (0, jsx_runtime_1.jsx)("th", {}))] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: props.children }), props.showAdd && !props.disabled && ((0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", __assign({ colSpan: props.items.length + 1 }, { children: (0, jsx_runtime_1.jsx)(form_1.Button, __assign({ formId: false, color: 'primary', size: 'sm', outline: true, icon: 'mockIcon', className: bem.element('button-add'), onClick: function (e) {
+                                    e.preventDefault();
+                                    props.onAdd();
+                                } }, { children: __('Добавить') })) })) }) }))] })) })));
+}
+exports["default"] = FieldListView;

package/tests/ui/form/FieldSet/FieldSet.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/form/FieldSet/FieldSet.test.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var FieldSetMockView_1 = __importDefault(require("./FieldSetMockView"));
+var FieldSet_1 = __importDefault(require("../../../../src/ui/form/FieldSet"));
+var helpers_1 = require("../../../helpers");
+var InputFieldMockView_1 = __importDefault(require("../InputField/InputFieldMockView"));
+describe('FieldSet tests', function () {
+    var props = {
+        view: FieldSetMockView_1["default"],
+        className: 'class-test',
+        fields: [
+            {
+                attribute: 'name',
+                component: InputFieldMockView_1["default"],
+                label: 'Name'
+            },
+        ],
+        label: 'label-test',
+        children: 'children-test'
+    };
+    var expectedFieldSetClass = 'FieldSetView';
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldSet_1["default"], props)).container;
+        var fieldSet = (0, helpers_1.getElementByClassName)(container, expectedFieldSetClass);
+        expect(fieldSet).toBeInTheDocument();
+    });
+    it('should have correct text content', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldSet_1["default"], props)).container;
+        var legend = (0, helpers_1.getElementByClassName)(container, "".concat(expectedFieldSetClass, "__legend"));
+        expect(legend).toHaveTextContent(props.label);
+    });
+    it('should have className in fieldset', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldSet_1["default"], props)).container;
+        var fieldset = (0, helpers_1.getElementByClassName)(container, expectedFieldSetClass);
+        expect(fieldset).toHaveClass(props.className);
+    });
+    it('should have children', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.FormWrapper)(FieldSet_1["default"], props)).container;
+        var fieldset = (0, helpers_1.getElementByClassName)(container, expectedFieldSetClass);
+        expect(fieldset).toHaveTextContent(props.children);
+    });
+});

package/tests/ui/form/FieldSet/FieldSetMockView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IFieldSetViewProps } from '../../../../src/ui/form/FieldSet/FieldSet';
+export default function FieldSetView(props: IFieldSetViewProps): JSX.Element;

package/tests/ui/form/FieldSet/FieldSetMockView.js

@@ -0,0 +1,20 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var hooks_1 = require("../../../../src/hooks");
+function FieldSetView(props) {
+    var bem = (0, hooks_1.useBem)('FieldSetView');
+    return ((0, jsx_runtime_1.jsxs)("fieldset", __assign({ className: bem(bem.block(), props.className) }, { children: [(0, jsx_runtime_1.jsx)("legend", __assign({ className: bem.element('legend') }, { children: props.label })), props.children] })));
+}
+exports["default"] = FieldSetView;

package/tests/ui/form/FileField/FileField.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/form/FileField/FileField.test.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var FileFieldMockView_1 = __importDefault(require("./FileFieldMockView"));
+var FileField_1 = __importDefault(require("../../../../src/ui/form/FileField/FileField"));
+var helpers_1 = require("../../../helpers");
+describe('FileField tests', function () {
+    var props = {
+        view: FileFieldMockView_1["default"],
+        className: 'externalClass',
+        filesLayout: 'wall'
+    };
+    var expectedFileFieldClass = 'FileFieldView';
+    it('should be in the document and have correct classes', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(FileField_1["default"], props)).container;
+        var fileField = (0, helpers_1.getElementByClassName)(container, expectedFileFieldClass);
+        expect(fileField).toBeInTheDocument();
+        expect(fileField).toHaveClass(props.className);
+        expect(fileField).toHaveClass(expectedFileFieldClass);
+        expect(fileField).toHaveClass("".concat(expectedFileFieldClass, "_isWall"));
+    });
+});

package/tests/ui/form/FileField/FileFieldItemMockView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IFileFieldItemViewProps } from '../../../../src/ui/form/FileField/FileField';
+export default function FileFieldItemView(props: IFileFieldItemViewProps): JSX.Element;

package/tests/ui/form/FileField/FileFieldItemMockView.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hooks_1 = require("../../../../src/hooks");
+var Icon_1 = __importDefault(require("../../../../src/ui/content/Icon"));
+var FileField_1 = require("../../../../src/ui/form/FileField/FileField");
+function FileFieldItemView(props) {
+    var bem = (0, hooks_1.useBem)('FileFieldItemView');
+    var isLoading = props.progress && props.progress.percent !== 100;
+    var isWall = props.filesLayout === FileField_1.FilesLayout.wall;
+    var renderLink = (0, react_1.useCallback)(function () { return ((0, jsx_runtime_1.jsx)("a", __assign({ className: bem.element('link'), title: props.title, href: props.error ? '#' : props.item.url, target: 'blank' }, { children: isWall
+            ? (0, jsx_runtime_1.jsx)(Icon_1["default"], { name: 'view' })
+            : props.title }))); }, [bem, props.title, props.error, props.item.url, isWall]);
+    var renderProgressBar = (0, react_1.useCallback)(function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('progress-track') }, { children: (0, jsx_runtime_1.jsx)("div", { className: bem.element('progress-bar'), style: {
+                width: "".concat(props.progress.percent, "%")
+            } }) }))); }, [bem, props.progress]);
+    var renderLoadingState = (0, react_1.useCallback)(function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('left') }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('icon-wrapper', 'loading') }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('icon-loading'), name: 'loading_default' }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('content') }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('title', 'loading') }, { children: props.title })), renderProgressBar(), (0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('loading-text') }, { children: __('Uploading...') }))] }))] }))); }, [bem, props.title, renderProgressBar]);
+    var renderFileItem = (0, react_1.useCallback)(function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('left') }, { children: [props.image
+                ? ((0, jsx_runtime_1.jsx)("div", { className: bem.element('image'), style: {
+                        backgroundImage: "url(".concat(props.image.url, ")")
+                    } }))
+                : ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('icon-wrapper') }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('icon'), name: props.imagesOnly ? 'img_box' : 'clip' }) }))), renderLink(), (0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('title') }, { children: props.title }))] }))); }, [bem, props.image, props.imagesOnly, props.title, renderLink]);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.block({
+            error: !!props.error,
+            images: props.imagesOnly,
+            isWall: isWall
+        }) }, { children: [isLoading
+                ? renderLoadingState()
+                : renderFileItem(), props.showRemove && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { name: props.customRemoveIcon || 'trash', className: bem.element('remove', {
+                    isLoading: isLoading
+                }), onClick: props.onRemove })), (0, jsx_runtime_1.jsx)("div", { className: bem.element('overlay') })] })));
+}
+exports["default"] = FileFieldItemView;

package/tests/ui/form/FileField/FileFieldMockView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IFileFieldViewProps } from '../../../../src/ui/form/FileField/FileField';
+export default function FileFieldView(props: IFileFieldViewProps): JSX.Element;

package/tests/ui/form/FileField/FileFieldMockView.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var hooks_1 = require("../../../../src/hooks");
+var FileField_1 = require("../../../../src/ui/form/FileField/FileField");
+var ButtonMockView_1 = __importDefault(require("../Button/ButtonMockView"));
+function FileFieldView(props) {
+    var bem = (0, hooks_1.useBem)('FileFieldView');
+    var ButtonView = props.buttonView || ButtonMockView_1["default"];
+    var isWall = props.filesLayout === FileField_1.FilesLayout.wall;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem(bem.block({
+            isWall: isWall
+        }), props.className) }, { children: [(0, jsx_runtime_1.jsx)(ButtonView, __assign({ className: bem.element('button', {
+                    isWall: isWall
+                }), icon: 'mockIcon' }, props.buttonProps)), (0, jsx_runtime_1.jsx)("div", { className: bem(bem.element('files')) })] })));
+}
+exports["default"] = FileFieldView;

package/tests/ui/form/Form/Form.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';