@steroidsjs/core 3.0.0-beta.10 → 3.0.0-beta.101

package/ui/format/EnumFormatter/EnumFormatter.d.ts

@@ -1,10 +1,16 @@
 /// <reference types="react" />
 import { DataProviderItems } from '../../../hooks/useDataProvider';
+/**
+ * IEnumFormatterProps
+ *
+ * Компонент EnumFormatter предназначен для форматирования перечисления элементов с использованием заданного формата.
+ * Он позволяет кастомизировать отображение элементов, используя переданный view React компонент.
+ **/
 export interface IEnumFormatterProps {
     /**
      * Перечисление элементов.
      * 1) Может быть строкой вида: `app.geo.enums.Cities`
-     * 2) Массивом: [{id: 1, label: "London"}]
+     * 2) Массивом: ['{'id: 1, label: "London"'}']
      */
     items?: DataProviderItems;
     /**
@@ -12,6 +18,10 @@ export interface IEnumFormatterProps {
      * @example unique label
      */
     value?: number | string;
+    /**
+     * Переопределение view React компонента для кастомизации отображения колонки
+     * @example MyCustomView
+     */
     view?: CustomView;
     [key: string]: any;
 }

package/ui/format/FileSize/FileSize.d.ts

@@ -1,12 +1,17 @@
 /// <reference types="react" />
-export interface IFileSizeFormatterProps {
+/**
+ * FileSize
+ *
+ * Компонент FileSize предназначен для форматирования размера файла в человеко-читаемом формате.
+ * Он позволяет кастомизировать отображение размера файла, используя переданный view React компонент.
+ **/
+export interface IFileSizeProps extends IUiComponent {
     /**
      * Если не указан размер файла, то в случае, если showZero = true
      * то будет показан `0`, иначе пустая строка
      * @example true
      */
     showZero?: boolean;
-    view?: CustomView;
     /**
      * Размер файла
      * @example 6920
@@ -15,4 +20,4 @@ export interface IFileSizeFormatterProps {
     [key: string]: any;
 }
 export declare const asHumanFileSize: (bytes: any, showZero: any) => string;
-export default function FileSize(props: IFileSizeFormatterProps): JSX.Element;
+export default function FileSize(props: IFileSizeProps): JSX.Element;

package/ui/format/FileSize/FileSize.js

@@ -30,7 +30,7 @@ var asHumanFileSize = function (bytes, showZero) {
 exports.asHumanFileSize = asHumanFileSize;
 function FileSize(props) {
     return (0, hooks_1.useComponents)().ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: (0, exports.asHumanFileSize)(props.value, this.props.showZero)
+        value: (0, exports.asHumanFileSize)(props.value, props.showZero)
     });
 }
 exports["default"] = FileSize;

package/ui/format/Format/Format.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="react" />
+/**
+ * IFormatProps
+ *
+ * Компонент Format предназначен для форматирования значения на основе заданного форматтера.
+ * Он позволяет кастомизировать отображение значения, используя переданный view React компонент.
+ **/
 export interface IFormatProps {
     attribute?: string;
     model?: string | ((...args: any[]) => any) | any;

package/ui/format/MoneyFormatter/MoneyFormatter.d.ts

@@ -1,7 +1,13 @@
 /// <reference types="react" />
+/**
+ * IMoneyFormatterProps
+ *
+ * Компонент MoneyFormatter предназначен для форматирования денежных значений с учетом валюты и округления.
+ * Он позволяет кастомизировать отображение денежного значения, используя переданный view React компонент.
+ **/
 export interface IMoneyFormatterProps {
     /**
-     * Валюта @enum {eur, rub, usd}
+     * Валюта @enum '{eur, rub, usd}'
      * @example rub
      */
     currency?: string;
@@ -15,7 +21,9 @@ export interface IMoneyFormatterProps {
      * @example 2
      */
     precision?: number;
-    view?: CustomView;
+    /**
+    * Значение для MoneyFormatter
+    */
     value?: any;
     [key: string]: any;
 }

package/ui/format/MoneyFormatter/MoneyFormatter.js

@@ -19,15 +19,16 @@ var moneyFormat = function (amount, currency, scale) {
 };
 exports.moneyFormat = moneyFormat;
 function MoneyFormatter(props) {
+    var components = (0, hooks_1.useComponents)();
     var value = props.precision > 0
         ? props.value / Math.pow(10, props.precision)
         : props.value;
-    return (0, hooks_1.useComponents)().ui.renderView(props.view || 'format.DefaultFormatterView', {
+    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
         value: (0, exports.moneyFormat)(value, props.currency, props.scale)
     });
 }
+exports["default"] = MoneyFormatter;
 MoneyFormatter.defaultProps = {
     scale: 2,
     precision: 0
 };
-exports["default"] = MoneyFormatter;

package/ui/layout/Header/Header.d.ts

@@ -1,24 +1,107 @@
 /// <reference types="react" />
+import { IButtonProps } from '../../form/Button/Button';
+import { IAvatarProps } from '../../content/Avatar/Avatar';
+import { ILinkProps } from '../../nav/Link/Link';
+import { IModalProps } from '../../modal/Modal/Modal';
+import { IMenuProps } from '../../content/Menu/Menu';
 import { INavProps } from '../../nav/Nav/Nav';
-export interface IHeaderProps {
-    className?: CssClassName;
-    view?: any;
+/**
+ * IHeaderProps
+ *
+ * Компонент Header представляет собой верхнюю часть макета страницы.
+ * Он может содержать логотип и навигацию, а также кастомизироваться с помощью переданного view React компонента.
+ **/
+export interface IHeaderProps extends IUiComponent {
+    /**
+     * Свойства для логотипа.
+     */
     logo?: {
+        /**
+         * Заголовок логотипа.
+         */
         title: string;
-        linkProps?: Record<string, unknown>;
-        icon?: string | any;
+        /**
+         * Дополнительные свойства ссылки логотипа.
+         */
+        linkProps?: ILinkProps;
+        /**
+         * Иконка логотипа в виде строки или компонента React.
+         */
+        icon?: string | React.ReactElement;
+        /**
+         * Дополнительные классы стилей для логотипа.
+         */
         className?: CssClassName;
     };
+    /**
+    * Свойства для навигации
+    */
     nav?: INavProps;
     /**
      * Размер
      */
     size?: Size;
     /**
-     * Темная тема
+     * Параметры авторизации.
      */
-    dark?: boolean;
+    authParams?: {
+        /**
+         * Флаг для отображения кнопки авторизации
+         */
+        isAuth: boolean;
+        /**
+         * Маршрут, на который перенаправлять пользователя для авторизации.
+         */
+        toRoute?: string;
+        /**
+         * Свойства для модального окна авторизации.
+         */
+        modal?: IModalProps;
+        /**
+        * Параметры для кнопки авторизации
+        */
+        buttonProps?: IButtonProps;
+    };
+    /**
+     * Информация о пользователе.
+     */
+    user?: {
+        /**
+         * Имя пользователя.
+         */
+        name?: string;
+        /**
+         * Свойства для аватара пользователя.
+         */
+        avatar?: IAvatarProps;
+        /**
+         * Свойства для меню пользователя.
+         */
+        menu?: IMenuProps;
+    };
+    /**
+     * Свойства для бургер-меню.
+     */
+    burgerMenu?: {
+        /**
+         * Контент бургер-меню в виде компонента React.
+         */
+        content?: React.ReactElement;
+        /**
+         * Свойства для ссылок бургер-меню.
+         */
+        links?: ILinkProps;
+    };
     [key: string]: any;
 }
-export type IHeaderViewProps = IHeaderProps;
-export default function Header(props: IHeaderProps): JSX.Element;
+export interface IHeaderViewProps extends IHeaderProps {
+    toggleBurger: VoidFunction;
+    isBurgerOpened: boolean;
+}
+declare function Header(props: IHeaderProps): JSX.Element;
+declare namespace Header {
+    var defaultProps: {
+        size: string;
+    };
+}
+export default Header;

package/ui/layout/Header/Header.js

@@ -1,7 +1,26 @@
 "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 Header(props) {
-    return (0, hooks_1.useComponents)().ui.renderView(props.view || 'layout.HeaderView', props);
+    var _a = (0, react_1.useState)(false), isBurgerOpened = _a[0], setIsBurgerOpened = _a[1];
+    var toggleBurger = (0, react_1.useCallback)(function () {
+        setIsBurgerOpened(function (prev) { return !prev; });
+    }, []);
+    return (0, hooks_1.useComponents)().ui.renderView(props.view || 'layout.HeaderView', __assign(__assign({}, props), { toggleBurger: toggleBurger, isBurgerOpened: isBurgerOpened }));
 }
+Header.defaultProps = {
+    size: 'md'
+};
 exports["default"] = Header;

package/ui/layout/Loader/Loader.d.ts

@@ -1,6 +1,20 @@
 /// <reference types="react" />
+/**
+ * ILoaderProps
+ *
+ * Компонент Loader представляет собой индикатор загрузки,
+ * который может использоваться для обозначения процесса загрузки данных или выполнения операции.
+ **/
 export interface ILoaderProps {
-    view?: any;
+    /**
+    * Размер элемента
+    */
+    size?: Size;
+    /**
+     * Название цвета
+     */
+    color?: ColorName;
     [key: string]: any;
 }
+export type ILoaderViewProps = ILoaderProps;
 export default function Loader(props: ILoaderProps): JSX.Element;

package/ui/layout/Notifications/Notifications.d.ts

@@ -14,6 +14,9 @@ import * as React from 'react';
  * ```
  */
 interface INotificationItem {
+    /**
+    * Идентификатор уведомления
+    */
     id?: number;
     /**
      * Цвет всплывающего уведомления
@@ -27,15 +30,43 @@ interface INotificationItem {
     message?: string;
     isClosing?: boolean;
 }
+/**
+ * Notifications
+ *
+ * Компонент Notifications представляет собой контейнер для отображения всплывающих уведомлений.
+ **/
 export interface INotificationsProps {
+    /**
+    * Исходные уведомления
+    */
     initialFlashes?: {
         [key: string]: string | any;
     };
+    /**
+    * Коллекция уведомлений
+    */
     notifications?: INotificationItem[];
+    /**
+    * Задержка перед закрытием
+    */
     closeTimeoutMs?: number;
+    /**
+    * Дополнительный CSS-класс для элемента отображения
+    */
     className?: CssClassName;
-    view?: any;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    /**
+     * Переопределение view React компонента для кастомизации отображения элемента
+     * @example MyCustomView
+     */
     itemView?: any;
+    /**
+    * Позиционирование элемента уведомления
+    */
     position?: string;
     [key: string]: any;
 }

package/ui/layout/Sidebar/Sidebar.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { IMenuProps } from '../../content/Menu/Menu';
+import { INavItem } from '../../nav/Nav/Nav';
+import { IIconProps } from '../../content/Icon/Icon';
+export interface ISidebarItem extends INavItem {
+    /**
+    * Наличие верней границы у элемента
+    */
+    border?: boolean;
+}
+/**
+* Sidebar
+*
+* Компонент Sidebar представляет собой боковое меню с возможностью гибкой настройки
+*/
+export interface ISidebarProps extends IUiComponent {
+    /**
+     * Объект с информацией о логотипе.
+     */
+    logo?: {
+        /**
+         * Текст или React-элемент для отображения логотипа.
+         */
+        label: string;
+        /**
+         * Путь к иконке или React-элемент для отображения иконки логотипа.
+         */
+        icon: string | React.ReactElement;
+    };
+    /**
+     * Объект с информацией о пользователе.
+     */
+    user?: {
+        /**
+         * URL изображения пользователя.
+         */
+        picture: string;
+        /**
+         * Имя пользователя.
+         */
+        name: string;
+    };
+    /**
+     * Props для компонента Menu.
+     */
+    menu?: IMenuProps;
+    /**
+     * Элементы навигации для компонента Nav.
+     */
+    items?: ISidebarItem[];
+    /**
+     * Флаг, определяющий, следует ли разделять элементы навигации.
+     */
+    hasSeparatedNavItem?: boolean;
+    /**
+     * Массив объектов с информацией об иконках для футера.
+     */
+    footerIcons?: IIconProps[];
+    /**
+     * Флаг, определяющий, будет ли сайдбар открытым по умолчанию.
+     */
+    isOpenedByDefault?: boolean;
+    /**
+     * Callback-функция, вызывается при клике на элемент навигации.
+     * @param itemId - идентификатор элемента навигации, по которому произошел клик.
+     */
+    onClickItem?: (itemId: number) => void;
+    [key: string]: any;
+}
+export interface ISidebarViewProps extends ISidebarProps {
+    isOpened: boolean;
+    toggleSidebar: VoidFunction;
+    onClickNav: (itemId: number) => void;
+}
+declare function Sidebar(props: ISidebarProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare namespace Sidebar {
+    var defaultProps: {
+        hasSeparatedNavItem: boolean;
+        isOpenedByDefault: boolean;
+    };
+}
+export default Sidebar;

package/ui/{list/ControlsColumn/demo/basic.js → layout/Sidebar/Sidebar.js}

@@ -33,17 +33,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
-var React = __importStar(require("react"));
-var ControlsColumn_1 = __importDefault(require("../../../list/ControlsColumn"));
-var basic_1 = require("../../../nav/Controls/demo/basic");
-/**
- * Basic
- * @order 1
- * @col 8
- */
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(ControlsColumn_1["default"], { controls: basic_1.controls.map(function (item) { return (__assign(__assign({}, item), { visible: true })); }), item: {} }))); });
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../../hooks");
+function Sidebar(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, react_1.useState)(props.isOpenedByDefault), isOpened = _a[0], setIsOpened = _a[1];
+    var toggleSidebar = (0, react_1.useCallback)(function () {
+        var newState = !isOpened;
+        setIsOpened(newState);
+    }, [isOpened]);
+    var onClickNav = react_1["default"].useCallback(function (itemId) {
+        if (props === null || props === void 0 ? void 0 : props.onClickItem) {
+            props.onClickItem(itemId);
+        }
+    }, [props]);
+    return components.ui.renderView(props.view || 'layout.SidebarView', __assign(__assign({}, props), { isOpened: isOpened, toggleSidebar: toggleSidebar, onClickNav: onClickNav }));
+}
+exports["default"] = Sidebar;
+Sidebar.defaultProps = {
+    hasSeparatedNavItem: false,
+    isOpenedByDefault: true
+};

package/ui/layout/Sidebar/index.d.ts

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

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

package/ui/layout/Skeleton/Skeleton.d.ts

@@ -1,18 +1,41 @@
 import * as React from 'react';
 export interface ISkeletonViewProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
     animation?: 'pulse' | 'wave';
     type?: 'text' | 'rect' | 'circle';
     height?: string | number;
     width?: string | number;
 }
+/**
+ * Компонент Skeleton представляет собой заглушку для отображения временных данных
+ * во время загрузки или ожидания загрузки реальных данных.
+ **/
 export interface ISkeletonProps {
-    className?: string;
+    /**
+    * Дополнительные CSS классы
+    * @example my-block
+    */
+    className?: CssClassName;
+    /**
+    * Дочерние элементы
+    */
     children?: React.ReactNode;
+    /**
+    * Тип анимации
+    */
     animation?: 'pulse' | 'wave';
+    /**
+    * Тип компонента
+    */
     type?: 'text' | 'rect' | 'circle';
+    /**
+    * Высота элемента
+    */
     height?: string | number;
+    /**
+    * Ширина элемента
+    */
     width?: string | number;
 }
 declare function Skeleton(props: ISkeletonProps): JSX.Element;

package/ui/layout/Tooltip/Tooltip.d.ts

@@ -1,20 +1,42 @@
 /// <reference types="react" />
-/**
- * Варианты позиций всплывающей подсказки
- * @example 'top'
- */
-type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
-export interface TooltipArrowPosition {
+import { PositionType } from '../../../hooks/useAbsolutePositioning';
+export interface ITooltipArrowPosition {
+    /**
+    * Позиция стрелки слева
+    */
     left?: number | string;
+    /**
+    * Позиция стрелки справа
+    */
     right?: number | string;
+    /**
+    * Позиция стрелки сверху
+    */
     top?: number | string;
+    /**
+    * Позиция стрелки снизу
+    */
     bottom?: number | string;
 }
-export interface TooltipStylePosition {
+export interface ITooltipStylePosition {
+    /**
+    * Позиция Tooltip слева
+    */
     left: 'unset' | number;
+    /**
+    * Позиция Tooltip справа
+    */
     right: 'unset' | number;
+    /**
+    * Позиция Tooltip сверху
+    */
     top: 'unset' | number;
 }
+/**
+ * Tooltip
+ *
+ * Компонент Tooltip предоставляет всплывающую подсказку для дочерних элементов.
+ **/
 export interface ITooltipProps {
     /**
      * Текст подсказки
@@ -28,7 +50,7 @@ export interface ITooltipProps {
     /**
      * Позиционирование подсказки, относительно целевого элемента
      */
-    position?: TooltipPosition;
+    position?: PositionType;
     /**
      * Показывать ли подсказку сразу после рендера страницы
      * @example true
@@ -47,23 +69,28 @@ export interface ITooltipProps {
     /**
      * Стили для абсолютного позиционирования подсказки
      */
-    style?: TooltipStylePosition;
+    style?: ITooltipStylePosition;
     /**
      * Стили для позиционирования стрелки
      * @example {left: 10}
      */
-    arrowPosition?: TooltipArrowPosition;
+    arrowPosition?: ITooltipArrowPosition;
     /**
      * Рассчет позиции подсказки
      */
     calculatePosition?: (tooltipDimensions: Record<string, any>, arrowDimensions: Record<string, any>) => void;
+    /**
+     * Дополнительный CSS-класс для элемента отображения
+     */
+    className?: CssClassName;
     [key: string]: any;
 }
 export interface ITooltipViewProps extends ITooltipProps {
     isTooltipVisible: boolean;
     content: string | any;
-    position: TooltipPosition;
-    style: TooltipStylePosition;
+    position: PositionType;
+    style: ITooltipStylePosition;
+    className?: CssClassName;
 }
 declare function Tooltip(props: ITooltipProps): JSX.Element;
 declare namespace Tooltip {