@steroidsjs/core 3.1.8 → 3.1.9

package/tests/ui/content/Chart/Chart.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;
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+var ChartMockView_1 = __importDefault(require("./ChartMockView"));
+var Chart_1 = __importDefault(require("../../../../src/ui/content/Chart"));
+var helpers_1 = require("../../../helpers");
+function ChartComponent(props) {
+    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { children: "ChartComponent" }));
+}
+describe('Chart tests', function () {
+    var expectedChartClassName = 'ChartView';
+    var expectedTitleClassName = 'ChartView__title';
+    var expectedControlsClassName = 'ChartView__controls';
+    var props = {
+        view: ChartMockView_1["default"],
+        chartComponent: ChartComponent,
+        className: 'testClass',
+        style: {
+            marginBottom: '70px'
+        },
+        chartHeight: 400,
+        title: 'Chart Title',
+        buttonGroup: {
+            items: [
+                'button1',
+                'button2',
+                'button3',
+            ]
+        }
+    };
+    var wrapper = (0, helpers_1.JSXWrapper)(Chart_1["default"], props);
+    it('should be in the document and have className', function () {
+        var container = (0, helpers_1.render)(wrapper).container;
+        var chart = (0, helpers_1.getElementByClassName)(container, expectedChartClassName);
+        expect(chart).toBeInTheDocument();
+        expect(chart).toHaveClass(props.className);
+    });
+    it('should have right style', function () {
+        var container = (0, helpers_1.render)(wrapper).container;
+        var chart = (0, helpers_1.getElementByClassName)(container, expectedChartClassName);
+        expect(chart).toHaveStyle(props.style);
+    });
+    it('should render title from props', function () {
+        var _a = (0, helpers_1.render)(wrapper), container = _a.container, getByText = _a.getByText;
+        var title = (0, helpers_1.getElementByClassName)(container, expectedTitleClassName);
+        expect(title).toBeInTheDocument();
+        expect(getByText(props.title)).toBeInTheDocument();
+    });
+    it('should render controls from props', function () {
+        var container = (0, helpers_1.render)(wrapper).container;
+        var controls = (0, helpers_1.getElementByClassName)(container, expectedControlsClassName);
+        expect(controls).toBeInTheDocument();
+    });
+});

package/tests/ui/content/Chart/ChartMockView.d.ts

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

package/tests/ui/content/Chart/ChartMockView.js

@@ -0,0 +1,53 @@
+"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");
+var nav_1 = require("../../../../src/ui/nav");
+var typography_1 = require("../../../../src/ui/typography");
+var DEFAULT_AXIS_PARAMS = {
+    tickSize: 5,
+    tickPadding: 5,
+    tickRotation: 0,
+    legend: '',
+    legendPosition: 'middle'
+};
+var DEFAULT_LINE_CHART_CONFIG = {
+    yScale: {
+        type: 'linear',
+        min: 'auto',
+        max: 'auto',
+        stacked: true,
+        reverse: false
+    },
+    xScale: {
+        type: 'point'
+    },
+    axisBottom: __assign(__assign({}, DEFAULT_AXIS_PARAMS), { legendOffset: 36 }),
+    axisLeft: __assign(__assign({}, DEFAULT_AXIS_PARAMS), { legendOffset: -40 }),
+    pointSize: 8,
+    useMesh: true
+};
+function ChartMockView(props) {
+    var bem = (0, hooks_1.useBem)('ChartView');
+    var ChartComponent = props.chartComponent;
+    var defaultChartConfig = (props.useDefaultLineChartConfig && DEFAULT_LINE_CHART_CONFIG) || {};
+    var customChartHeightVariable = {
+        '--chart-custom-height': "".concat(props.chartHeight, "px")
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem(bem.block(), props.className), style: __assign(__assign(__assign({}, props.style), { height: "".concat(props.wrapperHeight, "px") }), customChartHeightVariable) }, { children: [props.title && ((0, jsx_runtime_1.jsx)(typography_1.Title, { type: 'h3', content: props.title, className: bem.element('title') })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('controls') }, { children: [props.checkboxes && ((0, jsx_runtime_1.jsx)(form_1.CheckboxListField, __assign({}, props.checkboxes))), props.buttonGroup && ((0, jsx_runtime_1.jsx)(nav_1.ButtonGroup, __assign({}, props.buttonGroup)))] })), (0, jsx_runtime_1.jsx)(ChartComponent, __assign({ style: {
+                    height: "".concat(props.chartHeight, "px !important")
+                }, data: props.data }, defaultChartConfig, props.config))] })));
+}
+exports["default"] = ChartMockView;

package/tests/ui/content/Chat/Chat.test.d.ts

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

package/tests/ui/content/Chat/Chat.test.js

@@ -0,0 +1,96 @@
+"use strict";
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var dom_1 = require("@testing-library/dom");
+var react_1 = require("@testing-library/react");
+var content_1 = require("../../../../src/ui/content");
+var utils_1 = require("../../../../src/ui/content/Chat/utils");
+var helpers_1 = require("../../../helpers");
+describe('Chat tests', function () {
+    var expectedChatClass = 'ChatView';
+    var expectedMessageClass = 'BubbleMessageView';
+    var expectedChatInputClass = 'ChatInputView';
+    var messages = [
+        {
+            id: 1,
+            text: 'Всем привет!',
+            user: {
+                id: 1,
+                firstName: 'Sophia',
+                lastName: 'Miller',
+                avatar: {
+                    src: 'https://i.ibb.co/xjkhs5Q/image.png',
+                    status: true
+                }
+            },
+            timestamp: '2023-10-25T12:38:00'
+        },
+        {
+            id: 2,
+            text: 'Привет!',
+            user: {
+                id: 1,
+                firstName: 'Sophia',
+                lastName: 'Miller',
+                avatar: {
+                    src: 'https://i.ibb.co/xjkhs5Q/image.png',
+                    status: true
+                }
+            },
+            timestamp: '2023-10-25T16:38:00'
+        },
+    ];
+    var currentUser = {
+        id: 1,
+        firstName: 'Sophia',
+        lastName: 'Miller',
+        avatar: {
+            src: 'https://i.ibb.co/xjkhs5Q/image.png',
+            status: true
+        }
+    };
+    var props = {
+        chatId: 'Chat',
+        messages: messages,
+        currentUser: currentUser
+    };
+    it('should render Chat', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(content_1.Chat, props)).container;
+        window.scrollTo = jest.fn();
+        var chat = (0, helpers_1.getElementByClassName)(container, expectedChatClass);
+        expect(chat).toBeInTheDocument();
+    });
+    it('should render messages', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(content_1.Chat, props)).container;
+        var messagesElements = container.querySelectorAll(".".concat(expectedMessageClass));
+        expect(messagesElements.length).toEqual(messages.length);
+    });
+    it('should render message data', function () {
+        var expectedMessageText = messages[0].text;
+        var expectedMessageDate = (0, utils_1.calculateMessageTimeAgo)(messages[0].timestamp);
+        var queryByText = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(content_1.Chat, props)).queryByText;
+        expect(queryByText(expectedMessageText)).toBeInTheDocument();
+        expect(queryByText(expectedMessageDate)).toBeInTheDocument();
+    });
+    it('should send a new message', function () {
+        var expectedMessageText = 'Message';
+        var expectedMessageTime = '0 мин. назад';
+        var expectedSendMessageButtonIndex = 1;
+        var _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(content_1.Chat, props)), container = _a.container, queryByText = _a.queryByText, getByRole = _a.getByRole, getByDisplayValue = _a.getByDisplayValue;
+        var chatInputElement = (0, helpers_1.getElementByClassName)(container, expectedChatInputClass);
+        var chatInput = getByRole('textbox');
+        var sendMessageButton = (0, helpers_1.getElementByTag)(chatInputElement, 'button', expectedSendMessageButtonIndex);
+        dom_1.fireEvent.change(chatInput, {
+            target: {
+                value: expectedMessageText
+            }
+        });
+        (0, react_1.waitFor)(function () {
+            expect(getByDisplayValue(expectedMessageText)).toBeInTheDocument();
+        });
+        dom_1.fireEvent.click(sendMessageButton);
+        (0, react_1.waitFor)(function () {
+            expect(queryByText(expectedMessageTime)).toBeInTheDocument();
+        });
+    });
+});

package/tests/ui/content/Chat/mockViews/BubbleMessage/BubbleMessageView.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IChatUser, IMessageFile } from '../../../../../../src/ui/content/Chat/Chat';
+interface IBubbleMessageProps {
+    user: IChatUser;
+    text: string;
+    timeAgo: string;
+    isCurrentUser: boolean;
+    isFirstMessage?: boolean;
+    isLastMessage?: boolean;
+    files?: IMessageFile[];
+}
+declare function BubbleMessageView(props: IBubbleMessageProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof BubbleMessageView>;
+export default _default;

package/tests/ui/content/Chat/mockViews/BubbleMessage/BubbleMessageView.js

@@ -0,0 +1,34 @@
+"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 react_1 = require("react");
+var hooks_1 = require("../../../../../../src/hooks");
+var Avatar_1 = require("../../../../../../src/ui/content/Avatar");
+var Icon_1 = __importDefault(require("../../../../../../src/ui/content/Icon"));
+var typography_1 = require("../../../../../../src/ui/typography");
+var ChatFileItem_1 = __importDefault(require("../ChatFileItem"));
+function BubbleMessageView(props) {
+    var _a, _b;
+    var bem = (0, hooks_1.useBem)('BubbleMessageView');
+    var isMessageByAnotherUser = !props.isCurrentUser;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.block({
+            'another-user': isMessageByAnotherUser,
+            'last-message': !!props.isLastMessage
+        }) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('user-message') }, { children: [!props.isCurrentUser && props.isFirstMessage && ((0, jsx_runtime_1.jsx)(typography_1.Title, { className: bem.element('username'), type: 'h4', tag: 'h4', content: "".concat(props.user.firstName, " ").concat(props.user.lastName) })), (0, jsx_runtime_1.jsx)(typography_1.Text, { className: bem.element('text'), type: 'body', content: props.text }), !(0, isEmpty_1["default"])(props.files) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('files') }, { children: props.files.map(function (file) { return ((0, jsx_runtime_1.jsx)(ChatFileItem_1["default"], __assign({ isFileByAnotherUser: isMessageByAnotherUser, isFileFromMessage: true }, file), file.uid)); }) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('indicators') }, { children: [(0, jsx_runtime_1.jsx)(typography_1.Text, { className: bem.element('time'), type: 'body3', content: props.timeAgo }), props.isCurrentUser && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('check'), name: 'mockIcon' }))] }))] })), props.user && ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('avatar') }, { children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { src: (_a = props.user.avatar) === null || _a === void 0 ? void 0 : _a.src, title: "".concat(props.user.firstName, " ").concat(props.user.lastName), status: (_b = props.user.avatar) === null || _b === void 0 ? void 0 : _b.status, size: 'sm' }) })))] })));
+}
+exports["default"] = (0, react_1.memo)(BubbleMessageView);

package/tests/ui/content/Chat/mockViews/BubbleMessage/index.d.ts

@@ -0,0 +1,2 @@
+import BubbleMessageView from './BubbleMessageView';
+export default BubbleMessageView;

package/tests/ui/content/Chat/mockViews/BubbleMessage/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var BubbleMessageView_1 = __importDefault(require("./BubbleMessageView"));
+exports["default"] = BubbleMessageView_1["default"];

package/tests/ui/content/Chat/mockViews/BubblesDateGroup/BubblesDateGroup.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IChatUser } from '../../../../../../src/ui/content/Chat/Chat';
+import { IGroupedMessage } from '../../../../../../src/ui/content/Chat/hooks/useChat';
+interface IBubblesDateGroupProps {
+    date: string;
+    groupedMessages: IGroupedMessage[][];
+    currentUser: IChatUser;
+}
+declare function BubblesDateGroup(props: IBubblesDateGroupProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof BubblesDateGroup>;
+export default _default;

package/tests/ui/content/Chat/mockViews/BubblesDateGroup/BubblesDateGroup.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 utils_1 = require("../../../../../../src/ui/content/Chat/utils");
+var BubbleMessage_1 = __importDefault(require("../BubbleMessage"));
+function BubblesDateGroup(props) {
+    var _a;
+    var bem = (0, hooks_1.useBem)('BubblesDateGroup');
+    var toBubbles = (0, react_1.useCallback)(function (groupedMessages, index) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('bubbles') }, { children: groupedMessages.map(function (bubbleMessage) { return ((0, jsx_runtime_1.jsx)(BubbleMessage_1["default"], { user: bubbleMessage.user, text: bubbleMessage.text, timeAgo: (0, utils_1.calculateMessageTimeAgo)(bubbleMessage.timestamp), isCurrentUser: bubbleMessage.user.id === props.currentUser.id, isFirstMessage: bubbleMessage.isFirstMessage, isLastMessage: bubbleMessage.isLastMessage }, bubbleMessage.id)); }) }), index)); }, [bem, props.currentUser.id]);
+    var renderDate = (0, react_1.useCallback)(function () { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('date') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('date-wrapper') }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('date-text') }, { children: props.date })) })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('date', 'invisible-date') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('date-wrapper', 'invisible-date') }, { children: props.date })) }))] })); }, [bem, props.date]);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.block() }, { children: [renderDate(), (_a = props.groupedMessages) === null || _a === void 0 ? void 0 : _a.map(toBubbles)] })));
+}
+exports["default"] = (0, react_1.memo)(BubblesDateGroup);

package/tests/ui/content/Chat/mockViews/BubblesDateGroup/index.d.ts

@@ -0,0 +1,2 @@
+import BubblesDateGroup from './BubblesDateGroup';
+export default BubblesDateGroup;

package/tests/ui/content/Chat/mockViews/BubblesDateGroup/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var BubblesDateGroup_1 = __importDefault(require("./BubblesDateGroup"));
+exports["default"] = BubblesDateGroup_1["default"];

package/tests/ui/content/Chat/mockViews/ChatFileItem/ChatFileItemMockView.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { IMessageFile } from '../../../../../../src/ui/content/Chat/Chat';
+import { IFileFieldItemViewProps } from '../../../../../../src/ui/form/FileField/FileField';
+interface IChatFileItemViewProps extends IFileFieldItemViewProps, IMessageFile {
+    isFileFromMessage?: boolean;
+    isFileByAnotherUser?: boolean;
+}
+export default function ChatFileItemView(props: IChatFileItemViewProps): JSX.Element;
+export {};

package/tests/ui/content/Chat/mockViews/ChatFileItem/ChatFileItemMockView.js

@@ -0,0 +1,50 @@
+"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 format_1 = require("../../../../../../src/ui/format");
+var typography_1 = require("../../../../../../src/ui/typography");
+function ChatFileItemView(props) {
+    var _a, _b;
+    var bem = (0, hooks_1.useBem)('ChatFileItemView');
+    var isLoading = props.progress && props.progress.percent !== 100;
+    var renderLink = (0, react_1.useCallback)(function () {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)("a", __assign({ className: bem.element('link'), title: props.title, href: props.error ? '#' : (props.url || ((_a = props.item) === null || _a === void 0 ? void 0 : _a.url)), target: 'blank' }, { children: props.title })));
+    }, [bem, props.title, props.error, props.url, (_a = props.item) === null || _a === void 0 ? void 0 : _a.url]);
+    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()] }))] }))); }, [bem, props.title, renderProgressBar]);
+    var renderFileItem = (0, react_1.useCallback)(function () {
+        var _a;
+        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') }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('icon'), name: (((_a = props.item) === null || _a === void 0 ? void 0 : _a.fullHeight) || props.fullHeight) ? 'img_box' : 'file_dock' }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('content') }, { children: [(0, jsx_runtime_1.jsx)(typography_1.Text, { type: 'boldSpan', content: props.title }), renderLink(), (0, jsx_runtime_1.jsx)(typography_1.Text, __assign({ type: 'body2', color: 'light' }, { children: (0, jsx_runtime_1.jsx)(format_1.FileSize, { value: props.size, showZero: true }) }))] }))] })));
+    }, [bem, props.fullHeight, (_b = props.item) === null || _b === void 0 ? void 0 : _b.fullHeight, props.size, props.title, renderLink]);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.block({
+            error: !props.isFileFromMessage && !!props.error,
+            isFileFromMessage: props.isFileFromMessage,
+            isFileForUploading: !props.isFileFromMessage,
+            'another-user': !!props.isFileByAnotherUser
+        }) }, { children: [isLoading
+                ? renderLoadingState()
+                : renderFileItem(), props.isFileFromMessage ? ((0, jsx_runtime_1.jsx)(Icon_1["default"], { name: 'import', className: bem.element('download'), onClick: function () { return window.open(props.downloadUrl || props.url); } })) : ((0, jsx_runtime_1.jsx)(Icon_1["default"], { name: props.customRemoveIcon || 'cross_8x8', className: bem.element('remove', {
+                    isLoading: isLoading
+                }), onClick: props.onRemove }))] })));
+}
+exports["default"] = ChatFileItemView;

package/tests/ui/content/Chat/mockViews/ChatFileItem/index.d.ts

@@ -0,0 +1,2 @@
+import ChatFileItemMockView from './ChatFileItemMockView';
+export default ChatFileItemMockView;

package/tests/ui/content/Chat/mockViews/ChatFileItem/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var ChatFileItemMockView_1 = __importDefault(require("./ChatFileItemMockView"));
+exports["default"] = ChatFileItemMockView_1["default"];

package/tests/ui/content/Chat/mockViews/ChatInput/ChatInputMockView.d.ts

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

package/tests/ui/content/Chat/mockViews/ChatInput/ChatInputMockView.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;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hooks_1 = require("../../../../../../src/hooks");
+var form_1 = require("../../../../../../src/ui/form");
+var ChatFileItem_1 = __importDefault(require("../ChatFileItem"));
+var HiddenUploadFileButton = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)("button", __assign({ type: 'button', ref: ref }, props))); });
+function ChatInputView(props) {
+    var bem = (0, hooks_1.useBem)('ChatInputView');
+    var filePickerRef = (0, react_1.useRef)(null);
+    var onBrowseFile = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        filePickerRef.current.click();
+    }, [filePickerRef]);
+    var renderInputActions = (0, react_1.useCallback)(function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('actions') }, { children: [(0, jsx_runtime_1.jsx)(form_1.Button, { className: bem.element('action'), icon: 'mockIcon', onClick: onBrowseFile }), (0, jsx_runtime_1.jsx)(form_1.Button, { className: bem.element('action'), icon: 'mockIcon', type: 'submit' })] }))); }, [bem, onBrowseFile]);
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.block() }, { children: (0, jsx_runtime_1.jsxs)(form_1.Form, __assign({ formId: props.chatId, className: bem.element('form'), onSubmit: props.onSendMessage, useRedux: true }, { children: [(0, jsx_runtime_1.jsx)(form_1.InputField, { className: bem.element('input'), attribute: 'text', size: 'lg', placeholder: props.inputPlaceholder, addonAfter: renderInputActions() }), (0, jsx_runtime_1.jsx)(form_1.FileField, __assign({ className: bem.element('files'), attribute: 'filesId', itemView: ChatFileItem_1["default"], buttonView: HiddenUploadFileButton, buttonProps: {
+                        ref: filePickerRef
+                    }, multiple: false, showRemove: true, onChange: props.onUploadFiles }, props.fileFieldProps))] })) })));
+}
+exports["default"] = ChatInputView;

package/tests/ui/content/Chat/mockViews/ChatInput/index.d.ts

@@ -0,0 +1,2 @@
+import ChatInputView from './ChatInputMockView';
+export default ChatInputView;

package/tests/ui/content/Chat/mockViews/ChatInput/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var ChatInputMockView_1 = __importDefault(require("./ChatInputMockView"));
+exports["default"] = ChatInputMockView_1["default"];

package/tests/ui/content/Chat/mockViews/ChatMockView.d.ts

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

package/tests/ui/content/Chat/mockViews/ChatMockView.js

@@ -0,0 +1,30 @@
+"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 BubblesDateGroup_1 = __importDefault(require("./BubblesDateGroup"));
+var hooks_1 = require("../../../../../src/hooks");
+function ChatView(props) {
+    var bem = (0, hooks_1.useBem)('ChatView');
+    var renderChatScreen = (0, react_1.useCallback)(function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('screen') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('wrapper') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('content') }, { children: Object.entries(props.groupedMessagesByDates)
+                    .map(function (_a) {
+                    var date = _a[0], groupedMessages = _a[1];
+                    return ((0, jsx_runtime_1.jsx)(BubblesDateGroup_1["default"], { date: date, groupedMessages: groupedMessages, currentUser: props.currentUser }, date));
+                }) })) })) }))); }, [bem, props.groupedMessagesByDates, props.currentUser]);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.block() }, { children: [renderChatScreen(), props.renderChatInput()] })));
+}
+exports["default"] = ChatView;

package/tests/ui/content/CopyToClipBoard/CopyToClipBoard.test.d.ts

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

package/tests/ui/content/CopyToClipBoard/CopyToClipBoard.test.js

@@ -0,0 +1,106 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 react_1 = require("@testing-library/react");
+var CopyToClipBoardMockView_1 = __importDefault(require("./CopyToClipBoardMockView"));
+var CopyToClipboard_1 = __importDefault(require("../../../../src/ui/content/CopyToClipboard/CopyToClipboard"));
+var helpers_1 = require("../../../helpers");
+describe('CopyToClipBoard', function () {
+    var expectedCopyToClipBoardClassName = 'CopyToClipBoardView';
+    var props = {
+        view: CopyToClipBoardMockView_1["default"],
+        value: 'test'
+    };
+    var clipboardMock = {
+        readText: jest.fn().mockImplementation(function () { return props.value; }),
+        writeText: jest.fn()
+    };
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(CopyToClipboard_1["default"], props)).container;
+        var copyToClipboard = (0, helpers_1.getElementByClassName)(container, expectedCopyToClipBoardClassName);
+        expect(copyToClipboard).toBeInTheDocument();
+    });
+    it('should be called and return value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var container, copyToClipboardIcon;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    Object.defineProperty(window, 'navigator', {
+                        value: {
+                            clipboard: clipboardMock
+                        },
+                        configurable: true
+                    });
+                    container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(CopyToClipboard_1["default"], props)).container;
+                    copyToClipboardIcon = (0, helpers_1.getElementByClassName)(container, "".concat(expectedCopyToClipBoardClassName, "__icon"));
+                    return [4 /*yield*/, (0, react_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                dom_1.fireEvent.click(copyToClipboardIcon);
+                                expect(clipboardMock.writeText).toBeCalledWith(props.value);
+                                expect(clipboardMock.readText()).toBe(props.value);
+                                return [2 /*return*/];
+                            });
+                        }); })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should be disabled', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(CopyToClipboard_1["default"], __assign(__assign({}, props), { disabled: true }))).container;
+        var copyToClipboard = (0, helpers_1.getElementByClassName)(container, expectedCopyToClipBoardClassName);
+        expect(copyToClipboard).toHaveClass("".concat(expectedCopyToClipBoardClassName, "_disabled"));
+    });
+});

package/tests/ui/content/CopyToClipBoard/CopyToClipBoardMockView.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ICopyToClipboardViewProps } from '../../../../src/ui/content/CopyToClipboard/CopyToClipboard';
+declare function CopyToClipBoardView(props: ICopyToClipboardViewProps): JSX.Element;
+export default CopyToClipBoardView;