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

package/ui/form/validate.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
 var isString_1 = __importDefault(require("lodash-es/isString"));
 var isInteger_1 = __importDefault(require("lodash-es/isInteger"));
 var set_1 = __importDefault(require("lodash-es/set"));
@@ -10,7 +11,7 @@ var get_1 = __importDefault(require("lodash-es/get"));
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var size_1 = __importDefault(require("lodash-es/size"));
 var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
-var moment_1 = __importDefault(require("moment"));
+var dayjs_1 = __importDefault(require("dayjs"));
 var validate = function (data, rules) {
     var errors = {};
     rules.forEach(function (item) {
@@ -18,7 +19,7 @@ var validate = function (data, rules) {
         var rule = item[1];
         var params = item[2] || {};
         attributes.forEach(function (attribute) {
-            var value = get_1["default"](data, attribute);
+            var value = (0, get_1["default"])(data, attribute);
             switch (rule) {
                 case 'required':
                     if (!value) {
@@ -26,17 +27,17 @@ var validate = function (data, rules) {
                     }
                     break;
                 case 'date':
-                    if (value && !moment_1["default"](value, 'YYYY-MM-DD').isValid()) {
+                    if (value && !(0, dayjs_1["default"])(value, 'YYYY-MM-DD').isValid()) {
                         errors[attribute] = __('Date wrong format');
                     }
                     break;
                 case 'integer':
                 case 'number':
                     if (value) {
-                        if (isString_1["default"](value)) {
+                        if ((0, isString_1["default"])(value)) {
                             value = Number(value);
                         }
-                        if (rule === 'integer' && !isInteger_1["default"](value)) {
+                        if (rule === 'integer' && !(0, isInteger_1["default"])(value)) {
                             errors[attribute] = __('Field must be integer');
                         }
                         else if ((params.min || params.min === 0) && value < params.min) {
@@ -54,44 +55,46 @@ var validate = function (data, rules) {
                 case 'string':
                     params.max = params.max || 1000;
                     if (value) {
-                        if (isInteger_1["default"](value)) {
+                        if ((0, isInteger_1["default"])(value)) {
                             value = String(value);
                         }
-                        if (!isString_1["default"](value)) {
+                        if (!(0, isString_1["default"])(value)) {
                             errors[attribute] = __('Field must be string');
                         }
-                        else if (size_1["default"](value) > params.max) {
+                        else if ((0, size_1["default"])(value) > params.max) {
                             errors[attribute] = __('String is too long, max: {max}', {
                                 max: params.max
                             });
                         }
-                        else if ((params.min || params.min === 0) &&
-                            size_1["default"](value) < params.min) {
+                        else if ((params.min || params.min === 0)
+                            && (0, size_1["default"])(value) < params.min) {
                             errors[attribute] = __('String is too short, min: {min}', {
                                 min: params.min
                             });
                         }
                     }
                     break;
+                default:
+                    break;
             }
-            if (isFunction_1["default"](rule)) {
+            if ((0, isFunction_1["default"])(rule)) {
                 var error = rule(data, attribute);
                 if (error) {
                     errors[attribute] = error;
                 }
             }
-            set_1["default"](data, attribute, value);
+            (0, set_1["default"])(data, attribute, value);
         });
     });
-    if (!isEmpty_1["default"](errors)) {
+    if (!(0, isEmpty_1["default"])(errors)) {
         // TODO
         // throw new SubmissionError(errors);
     }
 };
-validate.error = function (attribute, message) {
-    // TODO
-    // throw new SubmissionError({
-    //     [attribute]: message
-    // });
-};
+// validate.error = (attribute, message) => {
+//     // TODO
+//     // throw new SubmissionError({
+//     //     [attribute]: message
+//     // });
+// };
 exports["default"] = validate;

package/ui/format/BooleanFormatter/BooleanFormatter.d.ts

@@ -1,6 +1,19 @@
 import * as React from 'react';
+/**
+ * BooleanFormatter
+ *
+ * Компонент BooleanFormatter предназначен для форматирования значения типа boolean, string или number.
+ * Он позволяет кастомизировать отображение значения, используя переданный view React компонент.
+ **/
 export interface IBooleanFormatterProps {
+    /**
+    * Значение для BooleanFormatter
+    */
     value?: string | number | boolean;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
     view?: CustomView;
     [key: string]: any;
 }

package/ui/format/BooleanFormatter/BooleanFormatter.js

@@ -2,7 +2,7 @@
 exports.__esModule = true;
 var hooks_1 = require("../../../hooks");
 function BooleanFormatter(props) {
-    return hooks_1.useComponents().ui.renderView(props.view || 'format.BooleanFormatterView', {
+    return (0, hooks_1.useComponents)().ui.renderView(props.view || 'format.BooleanFormatterView', {
         value: props.value
     });
 }

package/ui/format/DateFormatter/DateFormatter.d.ts

@@ -1,16 +1,26 @@
 /// <reference types="react" />
+/**
+ * DateFormatter
+ *
+ * Компонент DateFormatter предназначен для форматирования даты с использованием заданного формата.
+ * Он позволяет кастомизировать отображение даты, используя переданный view React компонент.
+ **/
 export interface IDateFormatterProps {
     /**
      * Формат даты
      * @example LL
      */
     format?: string;
-    view?: CustomView;
     /**
      * Дата
      * @example 2023-09-11
      */
     value?: any;
+    /**
+     * Переопределение view React компонента для кастомизации отображения колонки
+     * @example MyCustomView
+     */
+    view?: CustomView;
     [key: string]: any;
 }
 export default function DateFormatter(props: IDateFormatterProps): JSX.Element;

package/ui/format/DateFormatter/DateFormatter.js

@@ -5,12 +5,12 @@ var defaultProps = {
     format: 'LL'
 };
 function DateFormatter(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     if (!props.value) {
         return null;
     }
     return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: components.locale.moment(props.value).format(props.format || defaultProps.format)
+        value: components.locale.dayjs(props.value).format(props.format || defaultProps.format)
     });
 }
 exports["default"] = DateFormatter;

package/ui/format/DateTimeFormatter/DateTimeFormatter.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { IDateFormatterProps } from '../DateFormatter/DateFormatter';
+/**
+ * DateTimeFormatter
+ *
+ * Компонент DateTimeFormatter предназначен для форматирования даты и времени с использованием заданного формата.
+ * Он позволяет кастомизировать отображение даты и времени, используя переданный view React компонент.
+ **/
 export interface IDateTimeFormatterProps {
     /**
      * Формат даты
@@ -11,12 +17,16 @@ export interface IDateTimeFormatterProps {
      * @example true
      */
     timeZone?: string | boolean;
-    view?: CustomView;
     /**
      * Дата
      * @example 2023-09-11
      */
     value?: any;
+    /**
+     * Переопределение view React компонента для кастомизации отображения колонки
+     * @example MyCustomView
+     */
+    view?: CustomView;
     [key: string]: any;
 }
 declare function DateTimeFormatter(props: IDateFormatterProps): JSX.Element;

package/ui/format/DateTimeFormatter/DateTimeFormatter.js

@@ -3,16 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var moment_1 = __importDefault(require("moment"));
+/* eslint-disable import/no-extraneous-dependencies */
+var dayjs_1 = __importDefault(require("dayjs"));
 var hooks_1 = require("../../../hooks");
 function DateTimeFormatter(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     if (!props.value) {
         return null;
     }
     var date = props.timeZone === false
-        ? moment_1["default"](props.value).locale(components.locale.language)
-        : components.locale.moment(props.value);
+        ? (0, dayjs_1["default"])(props.value).locale(components.locale.language)
+        : components.locale.dayjs(props.value);
     return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
         value: date.format(props.format)
     });

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/EnumFormatter/EnumFormatter.js

@@ -15,22 +15,22 @@ var hooks_1 = require("../../../hooks");
  */
 var getLabel = function (items, id) {
     // Array
-    if (isArray_1["default"](items)) {
+    if ((0, isArray_1["default"])(items)) {
         var foundItem = items.find(function (item) { return item.id === id; });
         return foundItem ? foundItem.label : null;
     }
     // Enum
-    if (isObject_1["default"](items) && isFunction_1["default"](items.getLabel)) {
+    if ((0, isObject_1["default"])(items) && (0, isFunction_1["default"])(items.getLabel)) {
         return items.getLabel(id);
     }
     return null;
 };
 exports.getLabel = getLabel;
 function EnumFormatter(props) {
-    var components = hooks_1.useComponents();
-    var items = hooks_1.useDataProvider({ items: props.items }).items;
+    var components = (0, hooks_1.useComponents)();
+    var items = (0, hooks_1.useDataProvider)({ items: props.items }).items;
     return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: exports.getLabel(items, props.value)
+        value: (0, exports.getLabel)(items, props.value)
     });
 }
 exports["default"] = EnumFormatter;

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

@@ -29,8 +29,8 @@ var asHumanFileSize = function (bytes, showZero) {
 };
 exports.asHumanFileSize = asHumanFileSize;
 function FileSize(props) {
-    return hooks_1.useComponents().ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: exports.asHumanFileSize(props.value, this.props.showZero)
+    return (0, hooks_1.useComponents)().ui.renderView(props.view || 'format.DefaultFormatterView', {
+        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/Format/Format.js

@@ -30,14 +30,14 @@ function getFormatterPropsFromModel(model, attribute) {
 }
 exports.getFormatterPropsFromModel = getFormatterPropsFromModel;
 function Format(props) {
-    var context = react_1.useContext(Form_1.FormContext);
-    var components = hooks_1.useComponents();
+    var context = (0, react_1.useContext)(Form_1.FormContext);
+    var components = (0, hooks_1.useComponents)();
     // Get field config from model
-    var model = useModel_1["default"](props.model || (context === null || context === void 0 ? void 0 : context.model));
+    var model = (0, useModel_1["default"])(props.model || (context === null || context === void 0 ? void 0 : context.model));
     var component = props.component || getFormatterPropsFromModel(model, props.attribute);
-    if (isString_1["default"](component)) {
+    if ((0, isString_1["default"])(component)) {
         component = components.ui.getFormatter('format.' + component);
     }
-    return components.ui.renderView(component || 'format.DefaultFormatterView', __assign(__assign({}, props), { value: get_1["default"](props.item, props.attribute) || props.emptyText || null }));
+    return components.ui.renderView(component || 'format.DefaultFormatterView', __assign(__assign({}, props), { value: (0, get_1["default"])(props.item, props.attribute) || props.emptyText || null }));
 }
 exports["default"] = Format;

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

@@ -13,21 +13,22 @@ var moneyFormat = function (amount, currency, scale) {
         usd: __('$')
     };
     return __('{amount, number} {symbol}', {
-        amount: round_1["default"](amount, scale),
+        amount: (0, round_1["default"])(amount, scale),
         symbol: symbols[currency] || currency.toUpperCase()
     });
 };
 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 hooks_1.useComponents().ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: exports.moneyFormat(value, props.currency, props.scale)
+    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 declare 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 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/Loader/Loader.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 var hooks_1 = require("../../../hooks");
 function Loader(props) {
-    return hooks_1.useComponents().ui.renderView(props.view || 'layout.LoaderView', props);
+    return (0, hooks_1.useComponents)().ui.renderView(props.view || 'layout.LoaderView', props);
 }
 exports["default"] = Loader;

package/ui/layout/Meta/Meta.js

@@ -21,9 +21,9 @@ function Meta(props) {
     return (react_1["default"].createElement(react_helmet_1["default"], null,
         react_1["default"].createElement("title", null, props.title),
         props.base && react_1["default"].createElement("base", __assign({}, props.base)),
-        props.description && react_1["default"].createElement("meta", { name: 'description', content: props.description }), (_a = props.meta) === null || _a === void 0 ? void 0 :
-        _a.map(function (attrs, index) { return react_1["default"].createElement("meta", __assign({ key: index }, attrs)); }), (_b = props.links) === null || _b === void 0 ? void 0 :
-        _b.map(function (attrs, index) { return react_1["default"].createElement("link", __assign({ key: index }, attrs)); }), (_c = props.styles) === null || _c === void 0 ? void 0 :
+        props.description && (react_1["default"].createElement("meta", { name: 'description', content: props.description })), (_a = props.meta) === null || _a === void 0 ? void 0 :
+        _a.map(function (attrs, index) { return (react_1["default"].createElement("meta", __assign({ key: index }, attrs))); }), (_b = props.links) === null || _b === void 0 ? void 0 :
+        _b.map(function (attrs, index) { return (react_1["default"].createElement("link", __assign({ key: index }, attrs))); }), (_c = props.styles) === null || _c === void 0 ? void 0 :
         _c.map(function (attrs, index) { return (react_1["default"].createElement("style", __assign({ key: index }, attrs, { dangerouslySetInnerHTML: {
                 __html: attrs.innerHtml
             } }))); }), (_d = props.scripts) === null || _d === void 0 ? void 0 :