@steroidsjs/core 3.0.0-beta.1 → 3.0.0-beta.100

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.MONTH_CONVERT_FORMAT = void 0;
+var react_1 = __importDefault(require("react"));
+var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
+var calendar_1 = require("../../../../utils/calendar");
+exports.MONTH_CONVERT_FORMAT = 'MMMM YYYY';
+var getFirstDayOfCurrentMonth = function () {
+    var currentDate = new Date();
+    var firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+    return firstDayOfMonth;
+};
+var convertDateToRequiredFormat = function (date) { return (0, calendar_1.convertDate)(date, null, exports.MONTH_CONVERT_FORMAT); };
+var useDisplayDate = function () {
+    var _a = react_1["default"].useState((0, upperFirst_1["default"])(convertDateToRequiredFormat(getFirstDayOfCurrentMonth()))), dateToDisplay = _a[0], setDateToDisplay = _a[1];
+    var setNewDateToDisplay = function (newDate) {
+        setDateToDisplay(convertDateToRequiredFormat(newDate));
+    };
+    return {
+        dateToDisplay: dateToDisplay,
+        setNewDateToDisplay: setNewDateToDisplay
+    };
+};
+exports["default"] = useDisplayDate;

package/ui/content/CalendarSystem/hooks/useExpandClickAway.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const useExpandClickAway: () => {
+    isExpanded: boolean;
+    setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+    triggerRef: React.MutableRefObject<any>;
+};
+export default useExpandClickAway;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var react_use_1 = require("react-use");
+var useExpandClickAway = function () {
+    var _a = react_1["default"].useState(false), isExpanded = _a[0], setIsExpanded = _a[1];
+    var triggerRef = react_1["default"].useRef(null);
+    (0, react_use_1.useClickAway)(triggerRef, function () {
+        if (!isExpanded) {
+            return;
+        }
+        setIsExpanded(false);
+    });
+    return {
+        isExpanded: isExpanded,
+        setIsExpanded: setIsExpanded,
+        triggerRef: triggerRef
+    };
+};
+exports["default"] = useExpandClickAway;

package/ui/content/CalendarSystem/hooks/useMonthCalendar.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IDay } from '../CalendarSystem';
+declare const useMonthCalendar: () => {
+    getCalendarArray: () => IDay[];
+    getCurrentMonthDataUTC: () => {
+        currentMonth: number;
+        lastDayOfCurrentMonth: number;
+        firstDayOfCurrentMonth: Date;
+        daysInCurrentMonth: any[];
+    };
+    getWeekFromDate: (date: Date) => IDay[];
+    calendarArray: IDay[];
+    setCurrentMonthDate: React.Dispatch<React.SetStateAction<Date>>;
+    currentMonthDate: Date;
+};
+export default useMonthCalendar;

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

@@ -0,0 +1,87 @@
+"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;
+/* eslint-disable no-plusplus */
+/* eslint-disable import/order */
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils/utils");
+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 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 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);
+        }
+        var daysInCurrentMonth = [];
+        // Пройдемся по всем дням месяца и добавим их в массив
+        for (var dayNumber = 1; dayNumber <= lastDayOfCurrentMonth; dayNumber++) {
+            var date = new Date(Date.UTC(currentYear, month, dayNumber));
+            daysInCurrentMonth.push({ date: date, dayNumber: dayNumber });
+        }
+        return {
+            currentMonth: month,
+            lastDayOfCurrentMonth: lastDayOfCurrentMonth,
+            firstDayOfCurrentMonth: firstDayOfCurrentMonth,
+            daysInCurrentMonth: daysInCurrentMonth
+        };
+    }, [currentMonthDate]);
+    var getCalendarArray = react_1["default"].useCallback(function () {
+        var calendarArray = [];
+        var _a = getCurrentMonthDataUTC(), firstDayOfCurrentMonth = _a.firstDayOfCurrentMonth, month = _a.currentMonth, daysInCurrentMonth = _a.daysInCurrentMonth;
+        var firstWeekInMonth = (0, utils_1.getWeekDaysFromDate)(firstDayOfCurrentMonth);
+        firstWeekInMonth.forEach(function (day) { return calendarArray.push({
+            date: day.date,
+            dayNumber: day.dayNumber,
+            outOfRange: day.date.getMonth() < month
+        }); });
+        daysInCurrentMonth.forEach(function (day) {
+            var existingDay = calendarArray.find(function (item) { return item.date.getTime() === day.date.getTime(); });
+            if (!existingDay) {
+                calendarArray.push({
+                    date: day.date,
+                    dayNumber: day.dayNumber,
+                    outOfRange: false
+                });
+            }
+        });
+        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);
+            calendarArray.push({
+                date: currentDate,
+                dayNumber: currentDate.getDate(),
+                outOfRange: currentDate.getMonth() > month
+            });
+        }
+        return calendarArray.map(function (day) { return (0, utils_1.isDateIsToday)(day.date) ? (__assign(__assign({}, day), { isToday: true })) : day; });
+    }, [currentMonthDate, getCurrentMonthDataUTC]);
+    return {
+        getCalendarArray: getCalendarArray,
+        getCurrentMonthDataUTC: getCurrentMonthDataUTC,
+        getWeekFromDate: utils_1.getWeekDaysFromDate,
+        calendarArray: getCalendarArray(),
+        setCurrentMonthDate: setCurrentMonthDate,
+        currentMonthDate: currentMonthDate
+    };
+};
+exports["default"] = useMonthCalendar;

package/ui/content/CalendarSystem/hooks/useWeekCalendar.d.ts

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

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

@@ -0,0 +1,86 @@
+"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 react_1 = __importDefault(require("react"));
+var calendar_1 = require("../../../../utils/calendar");
+var DateControlType_1 = __importDefault(require("../enums/DateControlType"));
+var useCalendarControls_1 = require("./useCalendarControls");
+var utils_1 = require("../utils/utils");
+var WEEK_DAY_FORMAT = 'dd, D MMM';
+var ONE_DAY = 1;
+var getFormattedWeekFromDate = function (fromDate) {
+    if (fromDate === void 0) { fromDate = null; }
+    var currentWeek = (0, utils_1.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);
+        // eslint-disable-next-line no-unused-expressions
+        (0, utils_1.isDateIsToday)(copyOfDayWeek.date) ? copyOfDayWeek.isToday = true : copyOfDayWeek.isToday = false;
+        return copyOfDayWeek;
+    });
+};
+var useWeekCalendar = function (currentMonthDate) {
+    var _a;
+    var _b = react_1["default"].useState(getFormattedWeekFromDate()), currentWeek = _b[0], setCurrentWeek = _b[1];
+    var forceUpdateWeekOnMonthChange = react_1["default"].useCallback(function (newMonthDate) {
+        setCurrentWeek(getFormattedWeekFromDate(newMonthDate));
+    }, []);
+    var changeMonthAfterWeekChanged = react_1["default"].useCallback(function (formattedWeek) {
+        var firstDayOfWeek = formattedWeek[0].date;
+        var currentMonthNumber = currentMonthDate.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, useCalendarControls_1.getSourceCalendarControl)(DateControlType_1["default"].PREV_ONE);
+            prevMonthControl.click();
+            forceUpdateWeekOnMonthChange(lastDayOfWeekInNewMonth);
+        }
+        else {
+            var firstDayOfWeekInNewMonth = formattedWeek[0].date;
+            var nextMonthControl = (0, useCalendarControls_1.getSourceCalendarControl)(DateControlType_1["default"].NEXT_ONE);
+            nextMonthControl.click();
+            forceUpdateWeekOnMonthChange(firstDayOfWeekInNewMonth);
+        }
+    }, [currentMonthDate, forceUpdateWeekOnMonthChange]);
+    var setNextWeek = react_1["default"].useCallback(function () {
+        var lastDayOfWeek = currentWeek[currentWeek.length - 1].date;
+        lastDayOfWeek.setDate(lastDayOfWeek.getDate() + ONE_DAY);
+        var formattedNextWeek = 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 = getFormattedWeekFromDate(firstDayOfWeek);
+        setCurrentWeek(formattedPrevWeek);
+        changeMonthAfterWeekChanged(formattedPrevWeek);
+    }, [currentWeek, changeMonthAfterWeekChanged]);
+    return {
+        currentWeek: currentWeek,
+        weekControls: (_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),
+        forceUpdateWeekOnMonthChange: forceUpdateWeekOnMonthChange
+    };
+};
+exports["default"] = useWeekCalendar;

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

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

package/ui/content/CalendarSystem/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 CalendarSystem_1 = __importDefault(require("./CalendarSystem"));
+exports["default"] = CalendarSystem_1["default"];

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

@@ -0,0 +1,5 @@
+import { IDay, IEvent, IEventGroup } from '../CalendarSystem';
+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">[];

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

@@ -0,0 +1,34 @@
+"use strict";
+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;
+/* eslint-disable no-plusplus */
+var dayjs_1 = __importDefault(require("dayjs"));
+var omit_1 = __importDefault(require("lodash-es/omit"));
+var SIX_DAYS_DIFF = 6;
+var MAX_DAYS_DIFF_IN_WEEK = 7;
+var getWeekDaysFromDate = function (date) {
+    var weekDays = [];
+    var firstDayOfWeek = new Date(date);
+    var currentDay = date.getDay();
+    var diff = currentDay === 0 ? SIX_DAYS_DIFF : currentDay - 1; // Разница между текущим днем и понедельником
+    firstDayOfWeek.setDate(firstDayOfWeek.getDate() - diff); // Устанавливаем первый день недели (понедельник)
+    for (var i = 0; i < MAX_DAYS_DIFF_IN_WEEK; i++) {
+        var currentDate = new Date(firstDayOfWeek);
+        currentDate.setDate(currentDate.getDate() + i);
+        weekDays.push({
+            dayNumber: currentDate.getDate(),
+            date: new Date(currentDate)
+        });
+    }
+    return weekDays;
+};
+exports.getWeekDaysFromDate = getWeekDaysFromDate;
+var isDateIsToday = function (date) { return (0, dayjs_1["default"])(date).isToday(); };
+exports.isDateIsToday = isDateIsToday;
+var getOmittedEvent = function (event) { return (0, omit_1["default"])(event, ['color', 'eventGroupId']); };
+exports.getOmittedEvent = getOmittedEvent;
+var sortEventsInGroup = function (group) { return group.events.sort(function (eventA, eventB) { return eventA.date.getTime() - eventB.date.getTime(); }); };
+exports.sortEventsInGroup = sortEventsInGroup;

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

@@ -1,22 +1,47 @@
-export interface ICardProps {
+/// <reference types="react" />
+import { ILinkProps } from '../../nav/Link/Link';
+import { IButtonProps } from '../../form/Button/Button';
+import { IAvatarProps } from '../Avatar/Avatar';
+import { IMenuProps } from '../Menu/Menu';
+export interface ICardHeader {
     /**
-     * Цвет границы (если передать false, то граница будет скрыта)
-     * @example success
-     */
-    borderColor?: ColorName | 'default' | boolean;
+    * Параметры для аватара
+    * @example
+    * {
+    *   src: 'Kate.png',
+    *   status: true,
+    * }
+    */
+    avatar?: IAvatarProps;
     /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
+    * Свойства для компонента <Menu/>
+    */
+    menu?: IMenuProps;
     /**
-     * Дочерние элементы
-     */
-    children?: CustomView;
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js head'
+    */
+    head?: string;
     /**
-     * Цвет состояния
-     * @example success
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js subhead'
+    */
+    subhead?: string;
+}
+/**
+ * Card
+ *
+ * Компонент карточки, который представляет контент в структурированном формате с заголовком, обложкой, описанием,
+ * кнопками, ссылками и другими элементами.
+ *
+ * Компонент `Card` позволяет передать дочерние элементы, обложку, описание, заголовок, параметры заголовка,
+ * футер, коллекцию ссылок и коллекцию кнопок.
+ */
+export interface ICardProps extends IUiComponent {
+    /**
+     * Дочерние элементы
      */
-    color?: ColorName;
+    children?: React.ReactNode;
     /**
      * Обложка для карточки, нужно передать ссылку на изображение
      * @example 'https://cat/cat.png'
@@ -24,50 +49,55 @@ export interface ICardProps {
     cover?: string;
     /**
      * Описание карточки
-     * @example {'Scroll to see more...'}
+     * @example 'Scroll to see more...'
      */
     description?: string;
     /**
-     * Текст для header
+     * Контент хедера
+     * @example
+     * avatar: {
+     * 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',
+     * },
      */
-    header?: string;
+    header?: ICardHeader;
     /**
-     * Текст для footer
+     * Контент футера
      */
-    footer?: string;
-    /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
-     */
-    orientation?: 'vertical' | 'vertical-reverse' | 'horizontal' | string;
+    footer?: {
+        head: string;
+        subhead: string;
+    };
     /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
-     */
-    shape?: 'square' | 'circle';
+    * Коллекция ссылок
+    */
+    links?: ILinkProps[];
     /**
-     * Объект CSS стилей
-     * @example {width: '30px'}
+     * Коллекция кнопок
      */
-    style?: CustomStyle;
+    buttons?: IButtonProps[];
     /**
      * Заголовок карточки
-     * @example {'Main card'}
+     * @example 'Main card'
      */
     title?: string;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-}
-export declare type ICardViewProps = ICardProps;
-declare function Card(props: ICardProps): any;
-declare namespace Card {
-    var defaultProps: {
-        borderColor: string;
-        orientation: string;
-        shape: string;
-    };
 }
+export type ICardViewProps = ICardProps;
+declare function Card(props: ICardProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default Card;

package/ui/content/Card/Card.js

@@ -13,12 +13,7 @@ var __assign = (this && this.__assign) || function () {
 exports.__esModule = true;
 var hooks_1 = require("../../../hooks");
 function Card(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     return components.ui.renderView(props.view || 'content.CardView', __assign({}, props));
 }
-Card.defaultProps = {
-    borderColor: 'default',
-    orientation: 'vertical',
-    shape: 'circle'
-};
 exports["default"] = Card;

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+/**
+ * Chart
+ * Этот компонент позволяет создавать в проекте графики разных типов. Под капотом для графиков используется библиотека nivo.
+ * Для работы этого компонента необходимо установить в проекте зависимости @nivo/core и пакет конкретного графика nivo, например @nivo/line.
+ * Компонент графика nivo нужно передать в пропс chartComponent
+ */
+export interface IChartProps extends IUiComponent {
+    /**
+     * Компонент графика из библиотеки nivo
+     * @example ResponsiveLine
+     */
+    chartComponent: any;
+    /**
+     * Данные для графика
+     * @example [{id: 1, value: 15}, {id: 2, value: 30}]
+     */
+    data: Record<string, any>[];
+    /**
+     * Конфигурация, настройки отображения графика
+     * @example {lineWidth: 3, pointSize: 10}
+     */
+    config?: Record<string, any>;
+    /**
+     * Фиксированная высота графика в пикселях
+     * @example 500
+     */
+    height?: number;
+    /**
+     * Использовать ли дефолтную конфигурацию для графика типа line
+     * @example ResponsiveLine
+     */
+    useDefaultLineChartConfig?: boolean;
+    [key: string]: any;
+}
+export type IChartViewProps = IChartProps;
+export default function Chart(props: IChartProps): JSX.Element;

package/ui/content/Chart/Chart.js

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

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

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

package/ui/content/Chart/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 Chart_1 = __importDefault(require("./Chart"));
+exports["default"] = Chart_1["default"];

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { IAvatarProps } from '../Avatar/Avatar';
+import { IGroupedMessagesByDates } from './hooks/useChat';
+export interface IChatUser {
+    id: number;
+    firstName?: string;
+    lastName?: string;
+    avatar?: IAvatarProps;
+}
+export interface IChatMessage {
+    id: number;
+    user: IChatUser;
+    text: string;
+    timestamp: Date | string;
+}
+export interface IChatProps extends IUiComponent {
+    /**
+     * Идентификатор чата
+     * @example TaskChat
+     */
+    chatId: string;
+    /**
+     * Коллекция сообщений,
+     * @example [
+     *  {
+     *         id: 1,
+     *         text: 'Всем привет!',
+     *         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;
+}
+export interface IChatViewProps extends Omit<IChatProps, 'messages'> {
+    groupedMessagesByDates: IGroupedMessagesByDates;
+    onSendMessage: (data: any) => void;
+}
+export default function Chat(props: IChatProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/ui/content/Chat/Chat.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 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, groupedMessagesByDates = _a.groupedMessagesByDates;
+    return components.ui.renderView(props.view || 'content.ChatView', __assign(__assign({}, props), { groupedMessagesByDates: groupedMessagesByDates, onSendMessage: onSendMessage }));
+}
+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;