@steroidsjs/core 3.0.0-beta.79 → 3.0.0-beta.80

package/README.md

@@ -1,9 +1,26 @@
-# Steroids for React
+# Steroids
 
-Find documentation [here](docs/index.md)
+<p align="center">
+    <img src="https://i.ibb.co/Q9XvtNc/Group-338025.png" alt="Steroids logo" height="120px">
+</p>
 
-## Use package from source in project
+<p align="center">
+    <a href="https://steroids.kozhindev.com/">Steroids site</a> •
+    <a href="https://github.com/steroids/react/issues/new">Submit an Issue</a> •
+    <a href="https://t.me/+R0N4XzKbVSYzOTUy">Contact Us</a>
+</p>
+
+Our Open-Source **Steroids** framework is an ecosystem based on React and Redux with a large set of ready-made components, unique architecture, UI Kit and SSR
+
+## Why Steroids
+
+- **Steroids** contains ready-made project architecture
+
+- **Steroids** provides the ability to customize components, thanks to the separation of core and view parts
+
+- An extensive library of ready-made components with detailed documentation that simplifies integration into the project
+
+- Intuitive design layout of UI components in Figma for quick visualization and adaptation to unique needs
+
+Explore and immerse yourself in the world of rapid development through documentation [Documentation](https://steroids.kozhin.dev/ru/docs/getting-started).
 
-1. Copy `tsconfig-debug.json.sample` to `tsconfig-debug.json`
-2. Replace `outDir` path to node_modules nest path in project
-3. Run from this directory `yarn run watch`

package/components/ClientStorageComponent.d.ts

@@ -1,8 +1,34 @@
+/**
+ * Интерфейс для ClientStorageComponent
+ */
+export interface IClientStorageComponent {
+    /**
+     * Получить значение из хранилища.
+     * @param name Имя записи.
+     * @param storageName (Необязательный) Имя хранилища (local, session, или cookie).
+     * @returns Значение записи.
+     */
+    get(name: string, storageName?: 'local' | 'session' | 'cookie'): string | null;
+    /**
+     * Установить значение в хранилище.
+     * @param name Имя записи.
+     * @param value Значение записи.
+     * @param storageName (Необязательный) Имя хранилища (local, session, или cookie).
+     * @param expires (Необязательный) Срок действия записи в миллисекундах.
+     */
+    set(name: string, value: string, storageName?: 'local' | 'session' | 'cookie', expires?: number | null): void;
+    /**
+     * Удалить значение из хранилища.
+     * @param name Имя записи.
+     * @param storageName (Необязательный) Имя хранилища (local, session, или cookie).
+     */
+    remove(name: string, storageName?: 'local' | 'session' | 'cookie'): void;
+}
 /**
  * Client Storage Component
  * Слой хранения данных в браузере (cookie, local/session storage) или ReactNative
  */
-export default class ClientStorageComponent {
+export default class ClientStorageComponent implements IClientStorageComponent {
     STORAGE_COOKIE: string;
     STORAGE_LOCAL: any;
     STORAGE_SESSION: any;

package/components/ClientStorageComponent.js

@@ -26,9 +26,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-unused-expressions */
 var cookie = __importStar(require("js-cookie"));
-var moment_1 = __importDefault(require("moment"));
+var dayjs_1 = __importDefault(require("dayjs"));
 /**
  * Client Storage Component
  * Слой хранения данных в браузере (cookie, local/session storage) или ReactNative
@@ -101,7 +102,7 @@ var ClientStorageComponent = /** @class */ (function () {
                 domain: this._getDomain()
             };
             if (expires && process.env.IS_SSR) {
-                options.expires = (0, moment_1["default"])().add(options.expires).utc().toDate();
+                options.expires = (0, dayjs_1["default"])().add(options.expires, 'days').utc().toDate();
             }
             process.env.IS_SSR ? this._ssrCookie.set(name, value, options) : cookie.set(name, value, options);
         }

package/components/HttpComponent.d.ts

@@ -19,6 +19,7 @@ export default class HttpComponent {
     _csrfToken: any;
     _lazyRequests: any;
     _promises: any;
+    _isWindowAvailable: boolean;
     constructor(components: any, config?: any);
     getAxiosConfig(): Promise<{
         withCredentials: boolean;

package/components/HttpComponent.js

@@ -65,9 +65,10 @@ var HttpComponent = /** @class */ (function () {
         if (config === void 0) { config = {}; }
         this.accessTokenKey = 'accessToken';
         this._components = components;
+        this._isWindowAvailable = !process.env.IS_SSR && process.env.PLATFORM !== 'mobile';
         this.apiUrl = config.apiUrl
             //|| process.env.APP_BACKEND_URL
-            || (!process.env.IS_SSR ? window.location.protocol + '//' + window.location.host : '');
+            || (this._isWindowAvailable ? window.location.protocol + '//' + window.location.host : '');
         this.accessTokenKey = config.accessTokenKey || 'accessToken';
         this.clientStorageName = config.clientStorageName || this._components.clientStorage.STORAGE_COOKIE;
         this.clientStorageExpiresIn = config.clientStorageExpiresIn || 180;
@@ -200,7 +201,7 @@ var HttpComponent = /** @class */ (function () {
         });
     };
     HttpComponent.prototype.getUrl = function (method) {
-        if (method === null && !process.env.IS_SSR) {
+        if (method === null && this._isWindowAvailable) {
             method = window.location.pathname;
         }
         if (method.indexOf('://') === -1) {
@@ -310,7 +311,7 @@ var HttpComponent = /** @class */ (function () {
                             store.dispatch((0, notifications_1.setFlashes)(response.data.flashes));
                         }
                         // Ajax redirect
-                        if (response.data.redirectUrl && !process.env.IS_SSR) {
+                        if (response.data.redirectUrl && this._isWindowAvailable) {
                             if (window.location.href === response.data.redirectUrl.split('#')[0]) {
                                 window.location.href = response.data.redirectUrl;
                                 window.location.reload();

package/components/LocaleComponent.d.ts

@@ -1,13 +1,60 @@
-import moment from 'moment';
-import 'moment/locale/it';
-import 'moment/locale/ru';
+import dayjs from 'dayjs';
+import 'dayjs/locale/it';
+import 'dayjs/locale/ru';
+/**
+ * Интерфейс для LocaleComponent
+ */
+export interface ILocaleComponent {
+    /**
+     * Разница времени с бекендом (в микросекундах)
+     */
+    backendTimeDiff: null;
+    /**
+     * Временная зона бекенда
+     */
+    backendTimeZone: any;
+    /**
+     * Язык приложения
+     * @example ru
+     */
+    language: string;
+    /**
+     * Исходный язык
+     */
+    sourceLanguage: string;
+    /**
+     * Переводы сообщений
+     */
+    translations: any;
+    /**
+     * Получение экземпляра `dayjs` с учетом временной зоны бекенда
+     * @param date Дата
+     * @param format Формат даты
+     * @returns Экземпляр `dayjs`
+     */
+    dayjs(date?: string, format?: string): dayjs.Dayjs;
+    /**
+     * Алиас для метода `translate`
+     * @param message Сообщение для перевода
+     * @param params Параметры перевода
+     * @returns Переведенное сообщение
+     */
+    t(message: string, params?: Record<string, any>): string;
+    /**
+     * Перевод сообщения
+     * @param message Сообщение для перевода
+     * @param params Параметры перевода
+     * @returns Переведенное сообщение
+     */
+    translate(message: string, params?: Record<string, any>): string;
+}
 /**
  * Locale Component
  * Компонент для локализации приложения. Поддерживает конфигурацию языка и временной зоны
  *
  * Пример строки: `{__('{count} {count, plural, one{день} few{дня} many{дней}}', {count: 2})}`
  */
-export default class LocaleComponent {
+export default class LocaleComponent implements ILocaleComponent {
     backendTimeDiff: null;
     backendTimeZone: any;
     /**
@@ -19,11 +66,11 @@ export default class LocaleComponent {
     translations: any;
     constructor(components: any, config: any);
     /**
-     * Получение экземпляра `moment` с учетом временной зоны бекенда
+     * Получение экземпляра `dayjs` с учетом временной зоны бекенда
      * @param date Дата
      * @param format Формат
      */
-    moment(date?: string, format?: string): moment.Moment;
+    dayjs(date?: string, format?: string): dayjs.Dayjs;
     t(message: any, params?: {}): any;
     translate(message: any, params?: {}): any;
     _pasteComponents(message: any, components: any): any;

package/components/LocaleComponent.js

@@ -26,12 +26,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
 var React = __importStar(require("react"));
 var intl_messageformat_1 = __importDefault(require("intl-messageformat"));
-var moment_1 = __importDefault(require("moment"));
+var dayjs_1 = __importDefault(require("dayjs"));
 var isObject_1 = __importDefault(require("lodash-es/isObject"));
-require("moment/locale/it");
-require("moment/locale/ru");
+require("dayjs/locale/it");
+require("dayjs/locale/ru");
 /**
  * Locale Component
  * Компонент для локализации приложения. Поддерживает конфигурацию языка и временной зоны
@@ -56,24 +57,24 @@ var LocaleComponent = /** @class */ (function () {
         }
     }
     /**
-     * Получение экземпляра `moment` с учетом временной зоны бекенда
+     * Получение экземпляра `dayjs` с учетом временной зоны бекенда
      * @param date Дата
      * @param format Формат
      */
-    LocaleComponent.prototype.moment = function (date, format) {
+    LocaleComponent.prototype.dayjs = function (date, format) {
         if (date === void 0) { date = undefined; }
         if (format === void 0) { format = undefined; }
         if (date && this.backendTimeZone) {
             if (date.length === 16
-                && (0, moment_1["default"])(date, 'YYYY-MM-DD HH:mm').isValid()) {
+                && (0, dayjs_1["default"])(date, 'YYYY-MM-DD HH:mm').isValid()) {
                 date += ':00';
             }
             if (date.length === 19
-                && (0, moment_1["default"])(date, 'YYYY-MM-DD HH:mm:ss').isValid()) {
+                && (0, dayjs_1["default"])(date, 'YYYY-MM-DD HH:mm:ss').isValid()) {
                 date += this.backendTimeZone;
             }
         }
-        return (0, moment_1["default"])(date, format).locale(this.language);
+        return (0, dayjs_1["default"])(date, format).locale(this.language);
     };
     LocaleComponent.prototype.t = function (message, params) {
         if (params === void 0) { params = {}; }

package/hooks/useApplication.js

@@ -53,6 +53,10 @@ 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 dayjs_1 = __importDefault(require("dayjs"));
+var utc_1 = __importDefault(require("dayjs/plugin/utc"));
 var ThemeProvider_1 = __importDefault(require("../providers/ThemeProvider"));
 var ClientStorageComponent_1 = __importDefault(require("../components/ClientStorageComponent"));
 var HtmlComponent_1 = __importDefault(require("../components/HtmlComponent"));
@@ -93,6 +97,10 @@ exports.defaultComponents = {
 function useApplication(config) {
     if (config === void 0) { config = {}; }
     var useGlobal = config.useGlobal !== false;
+    //Extending dayjs / day.js with modules that used in steroids
+    dayjs_1["default"].extend(relativeTime_1["default"]);
+    dayjs_1["default"].extend(localizedFormat_1["default"]);
+    dayjs_1["default"].extend(utc_1["default"]);
     var components = (0, useComponents_1["default"])();
     if (useGlobal && !process.env.IS_SSR) {
         components = window.SteroidsComponents || null;

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.79",
+ "version": "3.0.0-beta.80",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {
@@ -31,6 +31,7 @@
   "@splidejs/react-splide": "^0.7.12",
   "axios": "^0.21.1",
   "connected-react-router": "^6.9.3",
+  "dayjs": "^1.11.9",
   "domready": "^1.0.8",
   "dot-prop-immutable": "^2.1.0",
   "fileup-core": "^1.2.7",
@@ -40,7 +41,6 @@
   "load-js": "^3.0.3",
   "lodash": "^4.17.21",
   "lodash-es": "^4.17.21",
-  "moment": "^2.29.1",
   "path-to-regexp": "^1.7.0",
   "qs": "^6.9.4",
   "query-string": "^6.14.0",

package/providers/ComponentsProvider.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { IUiApplicationComponent } from 'src/components/UiComponent';
+import { ILocaleComponent } from 'src/components/LocaleComponent';
+import { IClientStorageComponent } from 'src/components/ClientStorageComponent';
 import { IResourceComponent } from '../components/ResourceComponent';
 declare global {
     interface Window {
@@ -8,10 +10,10 @@ declare global {
     }
 }
 export interface IComponents {
-    clientStorage?: any;
+    clientStorage?: IClientStorageComponent;
     html?: any;
     http?: any;
-    locale?: any;
+    locale?: ILocaleComponent;
     store?: any;
     ui?: IUiApplicationComponent;
     resource?: IResourceComponent;

package/ui/form/DateField/useDateInputState.js

@@ -14,9 +14,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
 var react_1 = require("react");
 var react_use_1 = require("react-use");
-var moment_1 = __importDefault(require("moment"));
+var dayjs_1 = __importDefault(require("dayjs"));
 var calendar_1 = require("../../../utils/calendar");
 function useDateInputState(props) {
     // Get props value
@@ -78,7 +79,7 @@ function useDateInputState(props) {
         onDisplayValueChange('');
     }, [onDisplayValueChange]);
     var onNow = (0, react_1.useCallback)(function () {
-        onDisplayValueChange((0, moment_1["default"])().format(props.displayFormat));
+        onDisplayValueChange((0, dayjs_1["default"])().format(props.displayFormat));
     }, [onDisplayValueChange, props.displayFormat]);
     // Display input props
     var inputProps = (0, react_1.useMemo)(function () { return (__assign({ value: displayValue, onChange: onDisplayValueChange, onFocus: onFocus, onBlur: onBlur, disabled: props.disabled, placeholder: props.placeholder || props.displayFormat.toLowerCase(), required: props.required, name: props.input.name, autoComplete: 'off', type: 'text' }, props.inputProps)); }, [displayValue, onBlur, onDisplayValueChange, onFocus, props.disabled, props.displayFormat,

package/ui/form/DateField/useDateTime.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
 var react_1 = require("react");
-var moment_1 = __importDefault(require("moment"));
+var dayjs_1 = __importDefault(require("dayjs"));
 var calendar_1 = require("../../../utils/calendar");
 /**
  * useDateTime
@@ -26,7 +27,7 @@ function useDateTime(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.dateTimeSeparator, props.input.onChange, props.valueFormat, timeValue]);
     var onTimeSelect = (0, react_1.useCallback)(function (time) {
-        var result = (dateValue || (0, moment_1["default"])().format(dateValueFormat)) + props.dateTimeSeparator + time;
+        var result = (dateValue || (0, dayjs_1["default"])().format(dateValueFormat)) + props.dateTimeSeparator + time;
         props.input.onChange.call(null, (0, calendar_1.convertDate)(result, [props.valueFormat, 'YYYY-MM-DD HH:mm'], props.valueFormat, 
         // converting to UTC here depends on whether the date is stored in UTC
         props.dateInUTC, 

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) {
@@ -26,7 +27,7 @@ var validate = function (data, rules) {
                     }
                     break;
                 case 'date':
-                    if (value && !(0, 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;

package/ui/format/DateFormatter/DateFormatter.js

@@ -10,7 +10,7 @@ function DateFormatter(props) {
         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.js

@@ -3,7 +3,8 @@ 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 = (0, hooks_1.useComponents)();
@@ -11,8 +12,8 @@ function DateTimeFormatter(props) {
         return null;
     }
     var date = props.timeZone === false
-        ? (0, 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/utils/calendar.d.ts

@@ -1,4 +1,4 @@
-export declare const convertDate: (date: string | Date, fromFormats: string | string[], toFormat?: string, utc?: boolean, dateInUtc?: boolean) => any;
+export declare const convertDate: (date: string | Date, fromFormats: string | string[], toFormat?: string, isUtc?: boolean, dateInUtc?: boolean) => any;
 /**
  * Регулярка проверяет соответствие введенной строки формату 'hh:mm'
  * Максимальная величина - 23:59

package/utils/calendar.js

@@ -4,43 +4,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.convertDate = void 0;
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable import/prefer-default-export */
-var moment_1 = __importDefault(require("moment"));
-var convertDate = function (date, fromFormats, toFormat, utc, dateInUtc) {
+var dayjs_1 = __importDefault(require("dayjs"));
+var utc_1 = __importDefault(require("dayjs/plugin/utc"));
+dayjs_1["default"].extend(utc_1["default"]);
+var convertDate = function (date, fromFormats, toFormat, isUtc, dateInUtc) {
     if (toFormat === void 0) { toFormat = null; }
-    if (utc === void 0) { utc = false; }
+    if (isUtc === void 0) { isUtc = false; }
     if (dateInUtc === void 0) { dateInUtc = false; }
     if (!date) {
         return null;
     }
-    var momentDate;
+    var dayjsDate;
     if (typeof date === 'string' && fromFormats) {
         var validFormat = [].concat(fromFormats || []).find(function (format) { return (date
             && date.length === format.length
-            && (0, moment_1["default"])(date, format).isValid()); });
+            && (0, dayjs_1["default"])(date, format).isValid()); });
         if (!validFormat) {
             return null;
         }
         if (dateInUtc) {
-            momentDate = moment_1["default"].utc(date, validFormat);
+            dayjsDate = (0, dayjs_1["default"])(date, validFormat).utc(true);
         }
         else {
-            momentDate = (0, moment_1["default"])(date, validFormat);
+            dayjsDate = (0, dayjs_1["default"])(date, validFormat);
         }
     }
     else if (date instanceof Date) {
-        momentDate = (0, moment_1["default"])(date);
+        dayjsDate = (0, dayjs_1["default"])(date);
     }
-    if (!momentDate) {
+    if (!dayjsDate) {
         return null;
     }
-    if (utc) {
-        momentDate = momentDate.utc();
+    if (isUtc) {
+        dayjsDate = dayjsDate.utc();
     }
-    else {
-        momentDate = momentDate.local();
-    }
-    return toFormat ? momentDate.format(toFormat) : momentDate.toDate();
+    return toFormat ? dayjsDate.format(toFormat) : dayjsDate.toDate();
 };
 exports.convertDate = convertDate;
 /**