@steroidsjs/core 3.0.0-beta.98 → 3.0.0

package/ui/content/CalendarSystem/hooks/{useMonthCalendar.js → useMonthGrid.js}

@@ -18,25 +18,31 @@ exports.__esModule = true;
 /* eslint-disable import/order */
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils/utils");
+var concat_1 = __importDefault(require("lodash-es/concat"));
+var slice_1 = __importDefault(require("lodash-es/slice"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
 var FIRST_DAY = 1;
 var ONE_MONTH = 1;
 var TOTAL_DAYS_IN_CALENDAR = 42;
-var useMonthCalendar = function () {
-    var _a = react_1["default"].useState(null), currentMonthDate = _a[0], setCurrentMonthDate = _a[1];
+var useMonthGrid = function (currentMonthFirstDayDate, setCurrentMonthFirstDayDate) {
     var getCurrentMonthDataUTC = react_1["default"].useCallback(function () {
-        var currentYear = (currentMonthDate === null || currentMonthDate === void 0 ? void 0 : currentMonthDate.getFullYear()) || new Date().getFullYear();
-        var month = (currentMonthDate === null || currentMonthDate === void 0 ? void 0 : currentMonthDate.getMonth()) || new Date().getMonth();
+        var currentYear = (currentMonthFirstDayDate === null || currentMonthFirstDayDate === void 0 ? void 0 : currentMonthFirstDayDate.getFullYear()) || new Date().getFullYear();
+        var month = (currentMonthFirstDayDate === null || currentMonthFirstDayDate === void 0 ? void 0 : currentMonthFirstDayDate.getMonth()) || new Date().getMonth();
         var nextMonthFirstDay = new Date(currentYear, month + ONE_MONTH, FIRST_DAY);
         var lastDayOfCurrentMonth = new Date(nextMonthFirstDay.getTime() - FIRST_DAY).getDate();
         var firstDayOfCurrentMonth = new Date(Date.UTC(currentYear, month, FIRST_DAY));
-        if (currentMonthDate === null) {
-            setCurrentMonthDate(firstDayOfCurrentMonth);
+        if (currentMonthFirstDayDate === null) {
+            setCurrentMonthFirstDayDate(firstDayOfCurrentMonth);
         }
         var daysInCurrentMonth = [];
         // Пройдемся по всем дням месяца и добавим их в массив
         for (var dayNumber = 1; dayNumber <= lastDayOfCurrentMonth; dayNumber++) {
             var date = new Date(Date.UTC(currentYear, month, dayNumber));
-            daysInCurrentMonth.push({ date: date, dayNumber: dayNumber });
+            daysInCurrentMonth.push({
+                date: date,
+                dayNumber: dayNumber
+            });
         }
         return {
             currentMonth: month,
@@ -44,7 +50,7 @@ var useMonthCalendar = function () {
             firstDayOfCurrentMonth: firstDayOfCurrentMonth,
             daysInCurrentMonth: daysInCurrentMonth
         };
-    }, [currentMonthDate]);
+    }, [currentMonthFirstDayDate, setCurrentMonthFirstDayDate]);
     var getCalendarArray = react_1["default"].useCallback(function () {
         var calendarArray = [];
         var _a = getCurrentMonthDataUTC(), firstDayOfCurrentMonth = _a.firstDayOfCurrentMonth, month = _a.currentMonth, daysInCurrentMonth = _a.daysInCurrentMonth;
@@ -66,7 +72,7 @@ var useMonthCalendar = function () {
         });
         var daysAfterCurrentMonth = TOTAL_DAYS_IN_CALENDAR - calendarArray.length;
         for (var i = 1; i <= daysAfterCurrentMonth; i++) {
-            var currentDate = new Date(currentMonthDate === null || currentMonthDate === void 0 ? void 0 : currentMonthDate.getFullYear(), month + 1, i);
+            var currentDate = new Date(currentMonthFirstDayDate === null || currentMonthFirstDayDate === void 0 ? void 0 : currentMonthFirstDayDate.getFullYear(), month + 1, i);
             calendarArray.push({
                 date: currentDate,
                 dayNumber: currentDate.getDate(),
@@ -74,14 +80,17 @@ var useMonthCalendar = function () {
             });
         }
         return calendarArray.map(function (day) { return (0, utils_1.isDateIsToday)(day.date) ? (__assign(__assign({}, day), { isToday: true })) : day; });
-    }, [currentMonthDate, getCurrentMonthDataUTC]);
+    }, [currentMonthFirstDayDate, getCurrentMonthDataUTC]);
+    var weekDays = react_1["default"].useMemo(function () {
+        var unformattedDaysOfWeek = dayjs_1["default"].weekdaysMin();
+        return (0, concat_1["default"])((0, slice_1["default"])(unformattedDaysOfWeek, 1), unformattedDaysOfWeek[0]).map(function (weekDay) { return __("".concat((0, upperFirst_1["default"])(weekDay))); });
+    }, []);
     return {
+        monthGridWeekDays: weekDays,
+        monthGridCalendarDays: getCalendarArray(),
         getCalendarArray: getCalendarArray,
         getCurrentMonthDataUTC: getCurrentMonthDataUTC,
-        getWeekFromDate: utils_1.getWeekDaysFromDate,
-        calendarArray: getCalendarArray(),
-        setCurrentMonthDate: setCurrentMonthDate,
-        currentMonthDate: currentMonthDate
+        getWeekFromDate: utils_1.getWeekDaysFromDate
     };
 };
-exports["default"] = useMonthCalendar;
+exports["default"] = useMonthGrid;

package/ui/content/CalendarSystem/hooks/{useWeekCalendar.d.ts → useWeekGrid.d.ts}

@@ -1,15 +1,16 @@
 import DateControlEnum from '../enums/DateControlType';
-declare const useWeekCalendar: (currentMonthDate: Date) => {
-    currentWeek: {
+declare const useWeekGrid: (currentMonthFirstDayDate: Date) => {
+    weekGridTwentyFourHoursArray: any[];
+    weekGridCurrentWeekDays: {
         dayNumber: number;
         date: Date;
         outOfRange?: boolean;
         isToday?: boolean;
         formattedDisplay?: string;
     }[];
-    weekControls: {
+    weekGridControls: {
         [key: string]: () => void | DateControlEnum;
     };
-    forceUpdateWeekOnMonthChange: (newMonthDate: Date) => void;
+    updateWeekOnMonthChange: (newMonthDate: Date) => void;
 };
-export default useWeekCalendar;
+export default useWeekGrid;

package/ui/content/CalendarSystem/hooks/useWeekGrid.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable no-plusplus */
+var react_1 = __importDefault(require("react"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var DateControlType_1 = __importDefault(require("../enums/DateControlType"));
+var utils_1 = require("../utils/utils");
+var ONE_DAY = 1;
+var getTwentyFourHoursArray = function () {
+    var hoursArray = [];
+    for (var i = 0; i < 24; i++) {
+        var formattedHour = (0, dayjs_1["default"])().startOf('day').add(i, 'hour').format('HH:00');
+        hoursArray.push(formattedHour);
+    }
+    return hoursArray;
+};
+var useWeekGrid = function (currentMonthFirstDayDate) {
+    var _a;
+    var _b = react_1["default"].useState((0, utils_1.getFormattedWeekFromDate)()), currentWeek = _b[0], setCurrentWeek = _b[1];
+    var updateWeekOnMonthChange = react_1["default"].useCallback(function (newMonthDate) {
+        setCurrentWeek((0, utils_1.getFormattedWeekFromDate)(newMonthDate));
+    }, []);
+    var changeMonthAfterWeekChanged = react_1["default"].useCallback(function (formattedWeek) {
+        var firstDayOfWeek = formattedWeek[0].date;
+        var currentMonthNumber = currentMonthFirstDayDate.getMonth();
+        var isWeekOutOfMonth = formattedWeek.every(function (dayOfWeek) { return dayOfWeek.date.getMonth() !== currentMonthNumber; });
+        if (!isWeekOutOfMonth) {
+            return;
+        }
+        if (currentMonthNumber - firstDayOfWeek.getMonth() === 1) {
+            var lastDayOfWeekInNewMonth = formattedWeek[formattedWeek.length - 1].date;
+            var prevMonthControl = (0, utils_1.getSourceCalendarControl)(DateControlType_1["default"].PREV_ONE);
+            prevMonthControl.click();
+            updateWeekOnMonthChange(lastDayOfWeekInNewMonth);
+        }
+        else {
+            var firstDayOfWeekInNewMonth = formattedWeek[0].date;
+            var nextMonthControl = (0, utils_1.getSourceCalendarControl)(DateControlType_1["default"].NEXT_ONE);
+            nextMonthControl.click();
+            updateWeekOnMonthChange(firstDayOfWeekInNewMonth);
+        }
+    }, [currentMonthFirstDayDate, updateWeekOnMonthChange]);
+    var setNextWeek = react_1["default"].useCallback(function () {
+        var lastDayOfWeek = currentWeek[currentWeek.length - 1].date;
+        lastDayOfWeek.setDate(lastDayOfWeek.getDate() + ONE_DAY);
+        var formattedNextWeek = (0, utils_1.getFormattedWeekFromDate)(lastDayOfWeek);
+        setCurrentWeek(formattedNextWeek);
+        changeMonthAfterWeekChanged(formattedNextWeek);
+    }, [currentWeek, changeMonthAfterWeekChanged]);
+    var setPrevWeek = react_1["default"].useCallback(function () {
+        var firstDayOfWeek = currentWeek[0].date;
+        firstDayOfWeek.setDate(firstDayOfWeek.getDate() - ONE_DAY);
+        var formattedPrevWeek = (0, utils_1.getFormattedWeekFromDate)(firstDayOfWeek);
+        setCurrentWeek(formattedPrevWeek);
+        changeMonthAfterWeekChanged(formattedPrevWeek);
+    }, [currentWeek, changeMonthAfterWeekChanged]);
+    return {
+        weekGridTwentyFourHoursArray: getTwentyFourHoursArray(),
+        weekGridCurrentWeekDays: currentWeek,
+        weekGridControls: (_a = {},
+            _a[DateControlType_1["default"].NEXT_DOUBLE] = DateControlType_1["default"].NEXT_ONE,
+            _a[DateControlType_1["default"].NEXT_ONE] = setNextWeek,
+            _a[DateControlType_1["default"].PREV_ONE] = setPrevWeek,
+            _a[DateControlType_1["default"].PREV_DOUBLE] = DateControlType_1["default"].PREV_ONE,
+            _a),
+        updateWeekOnMonthChange: updateWeekOnMonthChange
+    };
+};
+exports["default"] = useWeekGrid;

package/ui/content/CalendarSystem/utils/utils.d.ts

@@ -3,3 +3,11 @@ export declare const getWeekDaysFromDate: (date: Date) => IDay[];
 export declare const isDateIsToday: (date: Date) => boolean;
 export declare const getOmittedEvent: (event: IEvent | Omit<IEvent, 'color'>) => any;
 export declare const sortEventsInGroup: (group: IEventGroup) => Omit<IEvent, "color">[];
+export declare const getSourceCalendarControl: (control: string) => HTMLElement;
+export declare const getFormattedWeekFromDate: (fromDate?: Date) => {
+    dayNumber: number;
+    date: Date;
+    outOfRange?: boolean;
+    isToday?: boolean;
+    formattedDisplay?: string;
+}[];

package/ui/content/CalendarSystem/utils/utils.js

@@ -1,14 +1,27 @@
 "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;
-exports.sortEventsInGroup = exports.getOmittedEvent = exports.isDateIsToday = exports.getWeekDaysFromDate = void 0;
+exports.getFormattedWeekFromDate = exports.getSourceCalendarControl = exports.sortEventsInGroup = exports.getOmittedEvent = exports.isDateIsToday = exports.getWeekDaysFromDate = void 0;
 /* eslint-disable no-plusplus */
 var dayjs_1 = __importDefault(require("dayjs"));
 var omit_1 = __importDefault(require("lodash-es/omit"));
+var calendar_1 = require("../../../../utils/calendar");
 var SIX_DAYS_DIFF = 6;
 var MAX_DAYS_DIFF_IN_WEEK = 7;
+var WEEK_DAY_FORMAT = 'dd, D MMM';
 var getWeekDaysFromDate = function (date) {
     var weekDays = [];
     var firstDayOfWeek = new Date(date);
@@ -32,3 +45,16 @@ var getOmittedEvent = function (event) { return (0, omit_1["default"])(event, ['
 exports.getOmittedEvent = getOmittedEvent;
 var sortEventsInGroup = function (group) { return group.events.sort(function (eventA, eventB) { return eventA.date.getTime() - eventB.date.getTime(); }); };
 exports.sortEventsInGroup = sortEventsInGroup;
+var getSourceCalendarControl = function (control) { return document.querySelector("[data-sourcecontrol=\"".concat(control, "\"]")); };
+exports.getSourceCalendarControl = getSourceCalendarControl;
+var getFormattedWeekFromDate = function (fromDate) {
+    if (fromDate === void 0) { fromDate = null; }
+    var currentWeek = (0, exports.getWeekDaysFromDate)(fromDate || new Date());
+    return currentWeek.map(function (dayOfWeek) {
+        var copyOfDayWeek = __assign({}, dayOfWeek);
+        copyOfDayWeek.formattedDisplay = (0, calendar_1.convertDate)(dayOfWeek.date, null, WEEK_DAY_FORMAT);
+        copyOfDayWeek.isToday = (0, exports.isDateIsToday)(copyOfDayWeek.date);
+        return copyOfDayWeek;
+    });
+};
+exports.getFormattedWeekFromDate = getFormattedWeekFromDate;

package/ui/content/Card/Card.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ILinkProps } from '../../nav/Link/Link';
 import { IButtonProps } from '../../form/Button/Button';
 import { IAvatarProps } from '../Avatar/Avatar';
@@ -38,6 +38,10 @@ export interface ICardHeader {
  * футер, коллекцию ссылок и коллекцию кнопок.
  */
 export interface ICardProps extends IUiComponent {
+    /**
+     * Коллекция кнопок
+     */
+    buttons?: IButtonProps[];
     /**
      * Дочерние элементы
      */
@@ -52,46 +56,48 @@ export interface ICardProps extends IUiComponent {
      * @example 'Scroll to see more...'
      */
     description?: string;
+    /**
+     * Контент футера
+     */
+    footer?: {
+        head: string;
+        subhead: string;
+    };
     /**
      * Контент хедера
      * @example
      * avatar: {
-     * src: 'Kate.png',
-     * status: true,
+     *  src: 'Kate.png',
+     *  status: true,
      * },
      * head: 'Header',
      * subhead: 'Subhead',
      * menu: {
      *  dropDownProps: {
-            position: 'bottom',
-            closeMode: 'click-any',
-        },
-        items: [
-            {label: 'Вырезать', icon: 'cut', onClick: voidFunction},
-            {label: 'Копировать', icon: 'copy', hasBorder: true, onClick: voidFunction},
-            {label: 'Показать историю изменений', hasBorder: true, onClick: voidFunction},
-            {label: 'Редактировать', icon: 'edit', onClick: voidFunction},
-            {label: 'Удалить', icon: 'trash', onClick: voidFunction},
-        ],
-        icon: 'menu_dots',
+     *   position: 'bottom',
+     *   closeMode: 'click-any',
+     *  },
+     *  items: [
+     *   {
+     *    label: 'Вырезать',
+     *    icon: 'cut',
+     *    onClick: voidFunction
+     *   },
+     *   {
+     *    label: 'Копировать',
+     *    icon: 'copy',
+     *    hasBorder: true
+     *    onClick: voidFunction
+     *   },
+     *  ],
+     *  icon: 'menu_dots',
      * },
      */
     header?: ICardHeader;
     /**
-     * Контент футера
+     * Коллекция ссылок
      */
-    footer?: {
-        head: string;
-        subhead: string;
-    };
-    /**
-    * Коллекция ссылок
-    */
     links?: ILinkProps[];
-    /**
-     * Коллекция кнопок
-     */
-    buttons?: IButtonProps[];
     /**
      * Заголовок карточки
      * @example 'Main card'
@@ -99,5 +105,5 @@ export interface ICardProps extends IUiComponent {
     title?: string;
 }
 export type ICardViewProps = ICardProps;
-declare function Card(props: ICardProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare function Card(props: ICardProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default Card;

package/ui/content/Card/Card.js

@@ -1,19 +1,8 @@
 "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 hooks_1 = require("../../../hooks");
 function Card(props) {
     var components = (0, hooks_1.useComponents)();
-    return components.ui.renderView(props.view || 'content.CardView', __assign({}, props));
+    return components.ui.renderView(props.view || 'content.CardView', props);
 }
 exports["default"] = Card;

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

@@ -1,9 +1,12 @@
 /// <reference types="react" />
+import { ICheckboxListFieldProps } from 'src/ui/form/CheckboxListField/CheckboxListField';
+import { IButtonGroupProps } from 'src/ui/nav/ButtonGroup/ButtonGroup';
 /**
  * Chart
- * Этот компонент позволяет создавать в проекте графики разных типов. Под капотом для графиков используется библиотека nivo.
- * Для работы этого компонента необходимо установить в проекте зависимости @nivo/core и пакет конкретного графика nivo, например @nivo/line.
- * Компонент графика nivo нужно передать в пропс chartComponent
+ * Этот компонент позволяет создавать в проекте графики разных типов, используя библиотеки nivo, react-vis и другие.
+ *  Под капотом для графиков могут использоваться различные библиотеки в зависимости от предпочтений и потребностей проекта.
+ *  Для работы с nivo графиками, необходимо установить в проекте зависимости @nivo/core и соответствующий пакет графика, например @nivo/line.
+ *  Компонент графика, независимо от выбранной библиотеки, нужно передать в пропс chartComponent.
  */
 export interface IChartProps extends IUiComponent {
     /**
@@ -13,19 +16,46 @@ export interface IChartProps extends IUiComponent {
     chartComponent: any;
     /**
      * Данные для графика
-     * @example [{id: 1, value: 15}, {id: 2, value: 30}]
+     * @example
+     * [
+     *  {id: 1, value: 15},
+     *  {id: 2, value: 30}
+     * ]
      */
-    data: Record<string, any>[];
+    data?: Record<string, any>[];
     /**
      * Конфигурация, настройки отображения графика
-     * @example {lineWidth: 3, pointSize: 10}
+     * @example
+     * {
+     *  lineWidth: 3,
+     *  pointSize: 10
+     * }
      */
     config?: Record<string, any>;
     /**
-     * Фиксированная высота графика в пикселях
+     * Фиксированная высота обертки в пикселях
      * @example 500
      */
-    height?: number;
+    wrapperHeight?: number;
+    /**
+     * Фиксированная высота обертки в пикселях
+     * @example 500
+     */
+    chartHeight?: number;
+    /**
+    * Чекбоксы
+    * Могут служить в качестве настаиваемых контроллов для создания функционала
+    */
+    checkboxes?: ICheckboxListFieldProps;
+    /**
+    * Кнопки
+    * Могут служить в качестве настаиваемых контроллов для создания функционала
+    */
+    buttonGroup?: IButtonGroupProps;
+    /**
+    * Заголовок графика
+    */
+    title?: string;
     /**
      * Использовать ли дефолтную конфигурацию для графика типа line
      * @example ResponsiveLine

package/ui/content/Chart/Chart.js

@@ -1,19 +1,23 @@
 "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 react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 function Chart(props) {
     var components = (0, hooks_1.useComponents)();
-    return components.ui.renderView(props.view || 'content.ChartView', __assign({}, props));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        chartComponent: props.chartComponent,
+        data: props.data,
+        config: props.config,
+        wrapperHeight: props.wrapperHeight,
+        chartHeight: props.chartHeight,
+        checkboxes: props.checkboxes,
+        buttonGroup: props.buttonGroup,
+        title: props.title,
+        useDefaultLineChartConfig: props.useDefaultLineChartConfig,
+        className: props.className,
+        style: props.style
+    }); }, [props.chartComponent, props.data, props.config, props.wrapperHeight, props.chartHeight,
+        props.checkboxes, props.buttonGroup, props.title, props.useDefaultLineChartConfig, props.className, props.style]);
+    return components.ui.renderView(props.view || 'content.ChartView', viewProps);
 }
 exports["default"] = Chart;

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import { IFileFieldProps } from '../../form/FileField/FileField';
+import { IAvatarProps } from '../Avatar/Avatar';
+import { IGroupedMessagesByDates } from './hooks/useChat';
+export interface IChatUser {
+    id: number;
+    firstName?: string;
+    lastName?: string;
+    avatar?: IAvatarProps;
+}
+export interface IMessageFile {
+    uid?: string;
+    title?: string;
+    size?: number;
+    url?: string;
+    downloadUrl?: string;
+    fullHeight?: number;
+    fullWidth?: number;
+}
+export interface IChatMessage {
+    id: number;
+    user: IChatUser;
+    text: string;
+    timestamp: Date | string;
+    files?: IMessageFile[];
+}
+/**
+ * Chat
+ *
+ * Комплексный компонент `Chat` предназначен для коммуникации пользователей с помощью текстовых сообщений.
+ */
+export interface IChatProps extends IUiComponent {
+    /**
+     * Идентификатор чата
+     * @example TaskChat
+     */
+    chatId: string;
+    /**
+     * Коллекция сообщений
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   text: 'Всем привет!',
+     *   files: [
+     *      {
+     *       id: 929,
+     *       uid: 'c46f3d14-5891-4601-9e98-06f2c1e70a07',
+     *       title: 'image.jpg',
+     *       url: 'https://kozhin.dev/files/uploaded/c46f3d14-5891-4601-9e98-06f2c1e70a07.jpg',
+     *       size: 47305,
+     *      }
+     *   ],
+     *   user: {
+     *     id: 1,
+     *     firstName: 'Olga',
+     *     lastName: 'Petrova',
+     *     avatar: {
+     *       src: 'images.com/image.png',
+     *       status: true,
+     *     },
+     *   },
+     *   timestamp: '2023-10-25T12:38:00',
+     *  },
+     * ]
+     */
+    messages: IChatMessage[];
+    /**
+     * Данные о текущем пользователе, нужны для отправки сообщений и определения сообщений пользователя
+     * @example
+     * {
+     *  id: 1,
+     *  firstName: 'Olga',
+     *  lastName: 'Petrova',
+     *  avatar: {
+     *    src: 'images.com/image.png',
+     *    status: true,
+     *  },
+     * }
+     */
+    currentUser: IChatUser;
+    /**
+     * Обработчик события отправки сообщения
+     */
+    onSendMessage?: (chatId: string, message: IChatMessage) => void;
+    /**
+     * Переопределение view React компонента для кастомизации отображения элемента инпута
+     * @example MyCustomView
+     */
+    customChatInputView?: React.ReactNode;
+    /**
+     * Кастомный placeholder для инпута
+     */
+    customInputPlaceholder?: string;
+    /**
+     * Пропсы для инпута загрузки файлов
+     */
+    fileFieldProps?: IFileFieldProps;
+}
+export interface IChatViewProps extends Pick<IChatProps, 'currentUser'> {
+    groupedMessagesByDates: IGroupedMessagesByDates;
+    renderChatInput: () => JSX.Element;
+}
+export interface IChatInputViewProps extends Pick<IChatProps, 'chatId' | 'fileFieldProps'> {
+    onSendMessage: (data: any) => void;
+    onUploadFiles: (files: any) => void;
+    inputPlaceholder: string;
+}
+export default function Chat(props: IChatProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/ui/content/Chat/Chat.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../../hooks");
+var useChat_1 = __importDefault(require("./hooks/useChat"));
+function Chat(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, useChat_1["default"])({
+        chatId: props.chatId,
+        messages: props.messages,
+        currentUser: props.currentUser,
+        onSendMessage: props.onSendMessage
+    }), onSendMessage = _a.onSendMessage, onUploadFiles = _a.onUploadFiles, groupedMessagesByDates = _a.groupedMessagesByDates;
+    var ChatInputView = props.customChatInputView || components.ui.getView('content.ChatInputView');
+    var renderChatInput = (0, react_1.useCallback)(function () { return (react_1["default"].createElement(ChatInputView, { chatId: props.chatId, onSendMessage: onSendMessage, onUploadFiles: onUploadFiles, fileFieldProps: props.fileFieldProps, inputPlaceholder: props.customInputPlaceholder || __('Введите сообщение') })); }, [ChatInputView, onSendMessage, onUploadFiles, props.chatId, props.customInputPlaceholder, props.fileFieldProps]);
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        currentUser: props.currentUser,
+        groupedMessagesByDates: groupedMessagesByDates,
+        onSendMessage: onSendMessage,
+        renderChatInput: renderChatInput,
+        className: props.className,
+        style: props.style
+    }); }, [groupedMessagesByDates, onSendMessage, props.className, props.currentUser, props.style, renderChatInput]);
+    return components.ui.renderView(props.view || 'content.ChatView', viewProps);
+}
+exports["default"] = Chat;

package/ui/content/Chat/constants/timeTemplatesAndUnits.d.ts

@@ -0,0 +1,8 @@
+export declare const MONTH_AND_DAY_TEMPLATE = "MMMM DD";
+export declare const HOURS_AND_MINUTES_TEMPLATE = "HH:mm";
+export declare const MINUTE_UNIT = "minute";
+export declare const ISO_TIMESTAMP_TEMPLATE = "YYYY-MM-DDTHH:mm:ss.SSS";
+export declare const HOUR_UNIT = "hour";
+export declare const SECONDS_IN_MINUTE_VALUE = 60000;
+export declare const MINUTES_IN_HOUR_VALUE = 60;
+export declare const HOURS_IN_DAY_VALUE = 24;

package/ui/content/Chat/constants/timeTemplatesAndUnits.js

@@ -0,0 +1,11 @@
+"use strict";
+exports.__esModule = true;
+exports.HOURS_IN_DAY_VALUE = exports.MINUTES_IN_HOUR_VALUE = exports.SECONDS_IN_MINUTE_VALUE = exports.HOUR_UNIT = exports.ISO_TIMESTAMP_TEMPLATE = exports.MINUTE_UNIT = exports.HOURS_AND_MINUTES_TEMPLATE = exports.MONTH_AND_DAY_TEMPLATE = void 0;
+exports.MONTH_AND_DAY_TEMPLATE = 'MMMM DD';
+exports.HOURS_AND_MINUTES_TEMPLATE = 'HH:mm';
+exports.MINUTE_UNIT = 'minute';
+exports.ISO_TIMESTAMP_TEMPLATE = 'YYYY-MM-DDTHH:mm:ss.SSS';
+exports.HOUR_UNIT = 'hour';
+exports.SECONDS_IN_MINUTE_VALUE = 60000;
+exports.MINUTES_IN_HOUR_VALUE = 60;
+exports.HOURS_IN_DAY_VALUE = 24;

package/ui/content/Chat/hooks/useChat.d.ts

@@ -0,0 +1,12 @@
+import { IChatMessage, IChatProps } from '../Chat';
+export type IChatConfig = Pick<IChatProps, 'chatId' | 'messages' | 'currentUser' | 'onSendMessage'>;
+export interface IGroupedMessage extends IChatMessage {
+    isFirstMessage?: boolean;
+    isLastMessage?: boolean;
+}
+export type IGroupedMessagesByDates = Record<string, IGroupedMessage[][]>;
+export default function useChat(config: IChatConfig): {
+    groupedMessagesByDates: {};
+    onSendMessage: (rawMessage: any) => void;
+    onUploadFiles: (files: any) => void;
+};