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

package/hooks/index.d.ts

@@ -17,4 +17,10 @@ import useScreen from './useScreen';
 import useSelector from './useSelector';
 import useSsr from './useSsr';
 import useUniqueId from './useUniqueId';
-export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, };
+import useTheme from './useTheme';
+import useMonthCalendar from '../ui/content/CalendarSystem/hooks/useMonthCalendar';
+import useWeekCalendar from '../ui/content/CalendarSystem/hooks/useWeekCalendar';
+import useDisplayDate from '../ui/content/CalendarSystem/hooks/useDisplayDate';
+import useCalendarControls from '../ui/content/CalendarSystem/hooks/useCalendarControls';
+import useSaveCursorPosition from './useSaveCursorPosition';
+export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, useMonthCalendar, useWeekCalendar, useDisplayDate, useCalendarControls, useSaveCursorPosition, };

package/hooks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
+exports.useSaveCursorPosition = exports.useCalendarControls = exports.useDisplayDate = exports.useWeekCalendar = exports.useMonthCalendar = exports.useTheme = exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
 var useAbsolutePositioning_1 = __importDefault(require("./useAbsolutePositioning"));
 exports.useAbsolutePositioning = useAbsolutePositioning_1["default"];
 var useAddressBar_1 = __importDefault(require("./useAddressBar"));
@@ -42,3 +42,15 @@ var useSsr_1 = __importDefault(require("./useSsr"));
 exports.useSsr = useSsr_1["default"];
 var useUniqueId_1 = __importDefault(require("./useUniqueId"));
 exports.useUniqueId = useUniqueId_1["default"];
+var useTheme_1 = __importDefault(require("./useTheme"));
+exports.useTheme = useTheme_1["default"];
+var useMonthCalendar_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useMonthCalendar"));
+exports.useMonthCalendar = useMonthCalendar_1["default"];
+var useWeekCalendar_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useWeekCalendar"));
+exports.useWeekCalendar = useWeekCalendar_1["default"];
+var useDisplayDate_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useDisplayDate"));
+exports.useDisplayDate = useDisplayDate_1["default"];
+var useCalendarControls_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useCalendarControls"));
+exports.useCalendarControls = useCalendarControls_1["default"];
+var useSaveCursorPosition_1 = __importDefault(require("./useSaveCursorPosition"));
+exports.useSaveCursorPosition = useSaveCursorPosition_1["default"];

package/hooks/useAbsolutePositioning.d.ts

@@ -1,14 +1,55 @@
 import * as React from 'react';
-interface IStyleObj {
+export interface IComponentStylePosition {
+    /**
+     * Позиция компонента слева
+     */
     left: 'unset' | number;
+    /**
+     * Позиция компонента справа
+     */
     right: 'unset' | number;
+    /**
+     * Позиция компонента сверху
+     */
     top: 'unset' | number;
 }
+export interface IComponentArrowPosition {
+    /**
+     * Позиция стрелки слева
+     */
+    left?: number | string;
+    /**
+     * Позиция стрелки справа
+     */
+    right?: number | string;
+    /**
+     * Позиция стрелки сверху
+     */
+    top?: number | string;
+    /**
+     * Позиция стрелки снизу
+     */
+    bottom?: number | string;
+}
+export declare const enum Position {
+    TOP = "top",
+    TOP_LEFT = "topLeft",
+    TOP_RIGHT = "topRight",
+    BOTTOM = "bottom",
+    BOTTOM_LEFT = "bottomLeft",
+    BOTTOM_RIGHT = "bottomRight",
+    LEFT = "left",
+    LEFT_TOP = "leftTop",
+    LEFT_BOTTOM = "leftBottom",
+    RIGHT = "right",
+    RIGHT_TOP = "rightTop",
+    RIGHT_BOTTOM = "rightBottom"
+}
 /**
  * Варианты абсолютного позиционирования
  * @example 'top'
  */
-declare type Position = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
+export type PositionType = keyof typeof Position | string;
 export interface IAbsolutePositioningInputProps {
     /**
      * Включает "умное" позиционирование - если компонент не может быть помещен в промежуток между целевым компонентом
@@ -32,13 +73,17 @@ export interface IAbsolutePositioningInputProps {
     /**
      * Позиционирование компонента, относительно целевого элемента
      */
-    position: Position;
+    position: PositionType;
     /**
      * Отобразить или скрыть компонент.
      * Включает "ручной режим", при котором можно задать логику отображения компонента извне,
      * через измененение данного свойства.
      */
     visible?: boolean;
+    /**
+     * Показывать ли компонент сразу после рендера страницы
+     */
+    defaultVisible?: boolean;
     /**
      * Обработчик изменения свойства isComponentVisible (отображение на странице).
      * Возвращает значение isComponentVisible.
@@ -62,15 +107,19 @@ export interface IAbsolutePositioningOutputProps {
     /**
      * Объект стилей для абсолютного позиционирования
      */
-    style: IStyleObj;
+    style: IComponentStylePosition;
+    /**
+     * Объект стилей для позиционирования стрелки
+     */
+    arrowPosition?: IComponentArrowPosition;
 }
 export default function useAbsolutePositioning(props: IAbsolutePositioningInputProps): {
     isComponentExist: boolean;
     isComponentVisible: boolean;
-    style: IStyleObj;
+    style: IComponentStylePosition;
     position: string;
-    calculateAbsolutePosition: (newPosition: Position, childRef: any, componentSize: any) => void;
+    arrowPosition: IComponentArrowPosition;
+    calculateAbsolutePosition: (newPosition: PositionType, parentRef: any, componentSize: any, arrowSize?: any) => void;
     onShow: () => void;
     onHide: () => void;
 };
-export {};

package/hooks/useAbsolutePositioning.js

@@ -1,144 +1,54 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
+exports.Position = void 0;
 var react_1 = require("react");
+var calculateComponentAbsolutePosition_1 = __importDefault(require("../utils/calculateComponentAbsolutePosition"));
+var Position;
+(function (Position) {
+    Position["TOP"] = "top";
+    Position["TOP_LEFT"] = "topLeft";
+    Position["TOP_RIGHT"] = "topRight";
+    Position["BOTTOM"] = "bottom";
+    Position["BOTTOM_LEFT"] = "bottomLeft";
+    Position["BOTTOM_RIGHT"] = "bottomRight";
+    Position["LEFT"] = "left";
+    Position["LEFT_TOP"] = "leftTop";
+    Position["LEFT_BOTTOM"] = "leftBottom";
+    Position["RIGHT"] = "right";
+    Position["RIGHT_TOP"] = "rightTop";
+    Position["RIGHT_BOTTOM"] = "rightBottom";
+})(Position = exports.Position || (exports.Position = {}));
+var DEFAULT_AUTO_POSITIONING_VALUE = true;
 function useAbsolutePositioning(props) {
-    var _a = react_1.useState(props.visible), isComponentExist = _a[0], setIsComponentExist = _a[1];
-    var _b = react_1.useState(props.visible), isComponentVisible = _b[0], setIsComponentVisible = _b[1];
-    var _c = react_1.useState(props.position), position = _c[0], setPosition = _c[1];
-    var _d = react_1.useState({
+    var _a = (0, react_1.useState)(props.visible), isComponentExist = _a[0], setIsComponentExist = _a[1];
+    var _b = (0, react_1.useState)(props.visible || props.defaultVisible), isComponentVisible = _b[0], setIsComponentVisible = _b[1];
+    var _c = (0, react_1.useState)(props.position), position = _c[0], setPosition = _c[1];
+    var _d = (0, react_1.useState)({
+        left: null,
+        right: null,
+        top: null,
+        bottom: null
+    }), arrowPosition = _d[0], setArrowPosition = _d[1];
+    var _e = (0, react_1.useState)({
         left: null,
         right: null,
         top: null
-    }), style = _d[0], setStyle = _d[1];
-    var timerRef = react_1.useRef(null);
-    var calculateAbsolutePosition = react_1.useCallback(function (newPosition, childRef, componentSize) {
-        var newStyle = { left: null, right: null, top: null };
-        var _a = childRef.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, width = _a.width, height = _a.height;
-        var parentDimensions = { top: top, right: right, left: left, width: width, height: height };
-        parentDimensions.top += window.scrollY;
-        var useAutoPositioning = props.autoPositioning;
-        // eslint-disable-next-line default-case
-        switch (newPosition) {
-            case 'top':
-            case 'topLeft':
-            case 'topRight':
-                // Проверка - выходит ли tooltip за верхний край страницы?
-                // Если да - меняем позицию на bottom
-                if (useAutoPositioning && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + props.gap))) {
-                    newStyle.top = parentDimensions.top + parentDimensions.height;
-                    newPosition = newPosition.replace('top', 'bottom');
-                }
-                else {
-                    newStyle.top = parentDimensions.top - componentSize.height;
-                }
-                break;
-            case 'bottom':
-            case 'bottomLeft':
-            case 'bottomRight':
-                // Проверка - выходит ли tooltip за нижний край страницы?
-                // Если да - меняем позицию на top
-                if (useAutoPositioning && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)))
-                    <= Math.round(componentSize.height + props.gap)) {
-                    newStyle.top = parentDimensions.top - componentSize.height;
-                    newPosition = newPosition.replace('bottom', 'top');
-                }
-                else {
-                    newStyle.top = parentDimensions.top + parentDimensions.height;
-                }
-                break;
-            case 'left':
-            case 'leftTop':
-            case 'leftBottom':
-                // Проверка - выходит ли tooltip за левый край страницы?
-                // Если да - меняем позицию на right
-                if (useAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + props.gap))) {
-                    newStyle.left = parentDimensions.right;
-                    newPosition = newPosition.replace('left', 'right');
-                }
-                else {
-                    newStyle.left = parentDimensions.left - componentSize.width;
-                }
-                break;
-            case 'right':
-            case 'rightTop':
-            case 'rightBottom':
-                // Проверка - выходит ли tooltip за правый край страницы?
-                // Если да - меняем позицию на left
-                if (useAutoPositioning && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + props.gap))) {
-                    newStyle.left = parentDimensions.left - componentSize.width;
-                    newPosition = newPosition.replace('right', 'left');
-                }
-                else {
-                    newStyle.left = parentDimensions.right;
-                }
-                break;
-        }
-        // eslint-disable-next-line default-case
-        switch (newPosition) {
-            case 'top':
-            case 'bottom':
-                // Выравнивание по середине
-                newStyle.left = (parentDimensions.left + (parentDimensions.width / 2)) - (componentSize.width / 2);
-                break;
-            case 'topLeft':
-            case 'bottomLeft':
-                // Ширина tooltip больше родителя - стрелка на середину родителя
-                newStyle.left = parentDimensions.left;
-                break;
-            case 'topRight':
-            case 'bottomRight':
-                // Ширина tooltip больше родителя - стрелка на середину родителя
-                newStyle.right = document.body.clientWidth - parentDimensions.right;
-                break;
-            case 'left':
-            case 'right':
-                newStyle.top = (parentDimensions.top + (parentDimensions.height / 2)) - (componentSize.height / 2);
-                break;
-            case 'leftTop':
-            case 'rightTop':
-                newStyle.top = parentDimensions.top;
-                break;
-            case 'leftBottom':
-            case 'rightBottom':
-                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
-                break;
-        }
-        // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
-        if (newPosition.includes('top') || newPosition.includes('bottom')) {
-            if (!newPosition.includes('Left')
-                && (newStyle.left < 0 || parentDimensions.left
-                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
-                newStyle.right = null;
-                newPosition = newPosition.replace('Right', 'Left');
-                newStyle.left = parentDimensions.left;
-            }
-            if (!newPosition.includes('Right')
-                && (document.body.clientWidth - parentDimensions.right
-                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
-                newPosition = newPosition.replace('Left', 'Right');
-                newStyle.left = null;
-                newStyle.right = document.body.clientWidth - parentDimensions.right;
-            }
-        }
-        // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
-        if (newPosition.includes('left') || newPosition.includes('right')) {
-            if (!newPosition.includes('Top')
-                && parentDimensions.top - window.scrollY
-                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap)) {
-                newPosition = newPosition.replace('Bottom', 'Top');
-                newStyle.top = parentDimensions.top;
-            }
-            if (!newPosition.includes('Bottom')
-                && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)
-                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap))) {
-                newPosition = newPosition.replace('Top', 'Bottom');
-                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
-            }
-        }
+    }), style = _e[0], setStyle = _e[1];
+    var hasAutoPositioning = (0, react_1.useMemo)(function () { var _a; return (_a = props.autoPositioning) !== null && _a !== void 0 ? _a : DEFAULT_AUTO_POSITIONING_VALUE; }, [props.autoPositioning]);
+    var timerRef = (0, react_1.useRef)(null);
+    var calculateAbsolutePosition = (0, react_1.useCallback)(function (newPosition, parentRef, componentSize, arrowSize) {
+        if (arrowSize === void 0) { arrowSize = null; }
+        var _a = (0, calculateComponentAbsolutePosition_1["default"])(props.gap, newPosition, parentRef, componentSize, arrowSize, hasAutoPositioning), newStyle = _a.style, calculatedPosition = _a.position, calculatedArrowPosition = _a.arrowPosition;
         setStyle(newStyle);
-        setPosition(newPosition);
-    }, [props.gap]);
-    var onShow = react_1.useCallback(function () {
+        setPosition(calculatedPosition);
+        if (calculatedArrowPosition) {
+            setArrowPosition(calculatedArrowPosition);
+        }
+    }, [hasAutoPositioning, props.gap]);
+    var onShow = (0, react_1.useCallback)(function () {
         if (timerRef.current) {
             clearTimeout(timerRef.current);
         }
@@ -147,7 +57,7 @@ function useAbsolutePositioning(props) {
         // TODO: How to wait setState callback?
         setTimeout(function () { return setIsComponentVisible(true); });
     }, []);
-    var onHide = react_1.useCallback(function () {
+    var onHide = (0, react_1.useCallback)(function () {
         setIsComponentVisible(false);
         if (timerRef.current) {
             clearTimeout(timerRef.current);
@@ -156,7 +66,7 @@ function useAbsolutePositioning(props) {
         timerRef.current = setTimeout(function () { return setIsComponentExist(false); }, props.componentDestroyDelay);
     }, [props.componentDestroyDelay]);
     // Trigger on visible
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (props.visible) {
             onShow();
         }
@@ -166,7 +76,7 @@ function useAbsolutePositioning(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.visible]);
     // Trigger on isComponentVisible
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (props.onVisibleChange) {
             props.onVisibleChange(isComponentVisible);
         }
@@ -177,6 +87,7 @@ function useAbsolutePositioning(props) {
         isComponentVisible: isComponentVisible,
         style: style,
         position: position,
+        arrowPosition: arrowPosition,
         calculateAbsolutePosition: calculateAbsolutePosition,
         onShow: onShow,
         onHide: onHide

package/hooks/useAddressBar.d.ts

@@ -1,9 +1,20 @@
 /// <reference types="connected-react-router" />
 import { Model } from '../components/MetaComponent';
-export declare type ListControlPosition = 'top' | 'bottom' | 'both' | string;
+export type ListControlPosition = 'top' | 'bottom' | 'both' | string;
 export interface IAddressBarConfig {
+    /**
+   * Флаг для управления включением синхронизации с addressBar
+    * @example true
+    */
     enable?: boolean;
+    /**
+    * Использовать ли #
+    * @example false
+    */
     useHash?: boolean;
+    /**
+    * Модель
+    */
     model?: Model;
 }
 export interface IAddressBarOutput {
@@ -19,5 +30,5 @@ export declare const queryRestore: (model: Model, location: any, useHash: any) =
  * // @todo use 'qs' library instead of 'query-string'
  *
  */
-export declare const queryReplace: (model: Model, location: any, values: any, useHash: any) => any[] | import("connected-react-router").CallHistoryMethodAction<[any, any?]>;
+export declare const queryReplace: (model: Model, location: any, values: any, useHash: any) => any[] | import("connected-react-router").CallHistoryMethodAction<[Path, LocationState?]>;
 export default function useAddressBar(config: IAddressBarConfig): IAddressBarOutput;

package/hooks/useAddressBar.js

@@ -21,13 +21,13 @@ var defaultFromStringConverter = function (value, type, item) {
     if (type.substr(-2) === '[]') {
         var subType_1 = type.substr(0, type.length - 2);
         return value
-            ? value.split(ARRAY_VALUE_SEPARATOR).map(function (v) { return exports.defaultFromStringConverter(v, subType_1, item); })
+            ? value.split(ARRAY_VALUE_SEPARATOR).map(function (v) { return (0, exports.defaultFromStringConverter)(v, subType_1, item); })
             : null;
     }
     // Single
     switch (type) {
         case 'number':
-            return value || String(value) === '0' ? toInteger_1["default"](value) : null;
+            return value || String(value) === '0' ? (0, toInteger_1["default"])(value) : null;
         case 'boolean':
             return ['1', 't', 'y'].includes(String(value).substr(0, 1)) || null;
         default:
@@ -63,7 +63,7 @@ var queryRestore = function (model, location, useHash) {
         if (typeof item === 'string') {
             item = { attribute: item };
         }
-        var defaultValue = has_1["default"](item, 'defaultValue') ? item.defaultValue : null;
+        var defaultValue = (0, has_1["default"])(item, 'defaultValue') ? item.defaultValue : null;
         var converter = item.fromStringConverter || exports.defaultFromStringConverter;
         var value = converter(values[item.attribute], item.jsType || 'string', item);
         if (value !== null || defaultValue !== null) {
@@ -86,7 +86,7 @@ var queryReplace = function (model, location, values, useHash) {
         if (typeof item === 'string') {
             item = { attribute: item };
         }
-        var defaultValue = has_1["default"](item, 'defaultValue') ? item.defaultValue : null;
+        var defaultValue = (0, has_1["default"])(item, 'defaultValue') ? item.defaultValue : null;
         if ((values === null || values === void 0 ? void 0 : values[item.attribute]) !== defaultValue) {
             var converter = item.toStringConverter || exports.defaultToStringConverter;
             var value = converter(values === null || values === void 0 ? void 0 : values[item.attribute], item.jsType || 'string', item);
@@ -106,37 +106,37 @@ var queryReplace = function (model, location, values, useHash) {
     }
     query = '?' + query;
     if (location.search !== query) {
-        return connected_react_router_1.replace(location.pathname + query);
+        return (0, connected_react_router_1.replace)(location.pathname + query);
     }
     return [];
 };
 exports.queryReplace = queryReplace;
 function useAddressBar(config) {
     // Get location from redux
-    var location = useSelector_1["default"](function (state) { return get_1["default"](state, 'router.location') || null; });
+    var location = (0, useSelector_1["default"])(function (state) { return (0, get_1["default"])(state, 'router.location') || null; });
     // Initial query
-    var initialQueryRef = react_1.useRef(null);
+    var initialQueryRef = (0, react_1.useRef)(null);
     if (!initialQueryRef.current && config.enable) {
-        initialQueryRef.current = exports.queryRestore(config.model, location, config.useHash);
+        initialQueryRef.current = (0, exports.queryRestore)(config.model, location, config.useHash);
     }
     // Update handler
-    var dispatch = useDispatch_1["default"]();
-    var updateQuery = react_1.useCallback(function (values) {
+    var dispatch = (0, useDispatch_1["default"])();
+    var updateQuery = (0, react_1.useCallback)(function (values) {
         if (config.enable) {
             // Remove all 'undefined' values or empty objects/arrays from passed form values
             var normalizedValues = Object.keys(values).reduce(function (obj, key) {
                 var value = values[key];
                 var isValidValue = typeof value === 'object'
-                    ? !isEmpty_1["default"](value)
+                    ? !(0, isEmpty_1["default"])(value)
                     : value !== undefined;
                 if (isValidValue) {
                     obj[key] = value;
                 }
                 return obj;
             }, {});
-            if (!isEqual_1["default"](initialQueryRef.current, normalizedValues)) {
+            if (!(0, isEqual_1["default"])(initialQueryRef.current, normalizedValues)) {
                 initialQueryRef.current = normalizedValues;
-                dispatch(exports.queryReplace(config.model, location, normalizedValues, config.useHash));
+                dispatch((0, exports.queryReplace)(config.model, location, normalizedValues, config.useHash));
             }
         }
     }, [config.enable, config.model, config.useHash, dispatch, location]);

package/hooks/useApplication.d.ts

@@ -1,14 +1,24 @@
 /// <reference types="react" />
-import ClientStorageComponent from '../components/ClientStorageComponent';
+import { IHttpComponentConfig } from '../components/HttpComponent';
+import { IWebSocketComponentConfig } from '../components/WebSocketComponent';
+import { ILocaleComponentConfig } from '../components/LocaleComponent';
+import { IJwtHttpComponentConfig } from '../components/JwtHttpComponent';
+import { IResourceComponentConfig } from '../components/ResourceComponent';
+import { IThemeProviderProps } from '../providers/ThemeProvider';
+import ClientStorageComponent, { IClientStorageComponentConfig } from '../components/ClientStorageComponent';
 import HtmlComponent from '../components/HtmlComponent';
 import StoreComponent from '../components/StoreComponent';
 import UiComponent from '../components/UiComponent';
 import MetaComponent from '../components/MetaComponent';
 import { IComponents } from '../providers/ComponentsProvider';
-import { IRouteItem } from '../ui/nav/Router/Router';
+import { IRouteItem, IRouterProps } from '../ui/nav/Router/Router';
 import MetricsComponent from '../components/MetricsComponent';
 import { IScreenProviderProps } from '../providers/ScreenProvider';
 import { IFetchConfig } from '../hooks/useFetch';
+export interface IComponentConfig {
+    className?: Record<string, any>;
+    [key: string]: any;
+}
 /**
  * Application HOC
  * Обертка над корневым компонентом приложения, используется только в `Application.tsx`. Добавляет через React Context
@@ -16,18 +26,27 @@ import { IFetchConfig } from '../hooks/useFetch';
  */
 export interface IApplicationHookConfig {
     components?: {
-        [key: string]: {
-            className: any;
-            [key: string]: any;
-        } | any;
-    } | any;
+        clientStorage?: IClientStorageComponentConfig & IComponentConfig;
+        html?: IComponentConfig;
+        http?: IHttpComponentConfig & IJwtHttpComponentConfig & IComponentConfig;
+        locale?: ILocaleComponentConfig & IComponentConfig;
+        store?: IComponentConfig;
+        ui?: IComponentConfig;
+        resource?: IResourceComponentConfig & IComponentConfig;
+        ws?: IWebSocketComponentConfig & IComponentConfig;
+        pushNotification?: IComponentConfig;
+        meta?: IComponentConfig;
+        [key: string]: IComponentConfig;
+    };
     onInit?: (components: IComponents) => void;
     useGlobal?: boolean;
     reducers?: any;
     routes?: () => IRouteItem;
     layoutView?: () => CustomView;
     layoutProps?: Record<string, unknown>;
-    screen?: boolean | Omit<IScreenProviderProps, 'children'>;
+    screen?: Omit<IScreenProviderProps, 'children'>;
+    theme?: Omit<IThemeProviderProps, 'children'>;
+    routerProps?: IRouterProps;
     /**
      * These fetch configurations will be used to preload and store for no matter what route matched in case of SSR
      */

package/hooks/useApplication.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -49,6 +53,14 @@ var React = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var merge_1 = __importDefault(require("lodash-es/merge"));
 var react_1 = require("react");
+var relativeTime_1 = __importDefault(require("dayjs/plugin/relativeTime"));
+var localizedFormat_1 = __importDefault(require("dayjs/plugin/localizedFormat"));
+var localeData_1 = __importDefault(require("dayjs/plugin/localeData"));
+var customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var utc_1 = __importDefault(require("dayjs/plugin/utc"));
+var isToday_1 = __importDefault(require("dayjs/plugin/isToday"));
+var ThemeProvider_1 = __importDefault(require("../providers/ThemeProvider"));
 var ClientStorageComponent_1 = __importDefault(require("../components/ClientStorageComponent"));
 var HtmlComponent_1 = __importDefault(require("../components/HtmlComponent"));
 var StoreComponent_1 = __importDefault(require("../components/StoreComponent"));
@@ -88,14 +100,21 @@ exports.defaultComponents = {
 function useApplication(config) {
     if (config === void 0) { config = {}; }
     var useGlobal = config.useGlobal !== false;
-    var components = useComponents_1["default"]();
+    //Extending dayjs / day.js with modules that used in steroids
+    dayjs_1["default"].extend(relativeTime_1["default"]);
+    dayjs_1["default"].extend(customParseFormat_1["default"]);
+    dayjs_1["default"].extend(localizedFormat_1["default"]);
+    dayjs_1["default"].extend(utc_1["default"]);
+    dayjs_1["default"].extend(localeData_1["default"]);
+    dayjs_1["default"].extend(isToday_1["default"]);
+    var components = (0, useComponents_1["default"])();
     if (useGlobal && !process.env.IS_SSR) {
         components = window.SteroidsComponents || null;
     }
     // Create components
     if (!components) {
         components = {};
-        var componentsConfig_1 = merge_1["default"]({}, exports.defaultComponents, config.components);
+        var componentsConfig_1 = (0, merge_1["default"])({}, exports.defaultComponents, config.components);
         Object.keys(componentsConfig_1).forEach(function (name) {
             if (typeof componentsConfig_1[name] === 'function') {
                 componentsConfig_1[name] = { className: componentsConfig_1[name] };
@@ -117,16 +136,19 @@ function useApplication(config) {
         }
     }
     // Application wrapper
-    var renderApplication = react_1.useCallback(function (children) {
+    var renderApplication = (0, react_1.useCallback)(function (children) {
         if (children === void 0) { children = null; }
         var content = children;
         // Wrap in routes
         if (config.routes) {
-            content = (React.createElement(Router_1["default"], { routes: config.routes(), wrapperView: config.layoutView(), wrapperProps: config.layoutProps }));
+            content = (React.createElement(Router_1["default"], __assign({ routes: config.routes(), wrapperView: config.layoutView(), wrapperProps: config.layoutProps }, config.routerProps)));
         }
         if (config.screen) {
             content = (React.createElement(ScreenProvider_1["default"], __assign({}, config.screen), content));
         }
+        if (config.theme) {
+            content = (React.createElement(ThemeProvider_1["default"], __assign({}, config.theme), content));
+        }
         if (!(useGlobal || process.env.IS_SSR)) {
             content = (React.createElement(ComponentsProvider_1["default"], { components: components }, content));
         }

package/hooks/useBem.js

@@ -9,6 +9,6 @@ var useComponents_1 = __importDefault(require("./useComponents"));
  * Возвращает утилиту `bem` для правильной генерации CSS классов по методологии БЭМ (блок, элемент, модификатор)
  */
 function useBem(namespace) {
-    return useComponents_1["default"]().html.bem(namespace);
+    return (0, useComponents_1["default"])().html.bem(namespace);
 }
 exports["default"] = useBem;

package/hooks/useComponents.js

@@ -6,6 +6,6 @@ function useComponents() {
     if (!process.env.IS_SSR) {
         return window.SteroidsComponents;
     }
-    return react_1.useContext(ComponentsProvider_1.ComponentsContext); // eslint-disable-line react-hooks/rules-of-hooks
+    return (0, react_1.useContext)(ComponentsProvider_1.ComponentsContext); // eslint-disable-line react-hooks/rules-of-hooks
 }
 exports["default"] = useComponents;