@steroidsjs/core 2.0.0-rc.7 → 2.0.1-beta.113

package/hoc/screen.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import _isObject from 'lodash-es/isObject';
+import {setWidth, setMedia} from '../actions/screen';
+import {IConnectHocOutput} from './connect';
+
+/**
+ * Screen HOC
+ * Компонент подписывается на изменения размера экрана и обновляет ее в Redux Store.
+ */
+export interface IScreenHocInput {
+
+}
+
+export interface IScreenHocOutput {
+
+}
+
+interface IScreenWatcherHocPrivateProps extends IConnectHocOutput {
+}
+
+export default (media): any => WrappedComponent =>
+    connect()(
+        class ScreenWatcherHoc extends React.PureComponent<IScreenHocInput & IScreenWatcherHocPrivateProps> {
+            static WrappedComponent = WrappedComponent;
+            /**
+             * Proxy real name, prop types and default props for storybook
+             */
+            static displayName = WrappedComponent.displayName || WrappedComponent.name;
+
+            constructor(props) {
+                super(props);
+                this._onResize = this._onResize.bind(this);
+            }
+
+            UNSAFE_componentWillMount() {
+                if (typeof window !== 'undefined') {
+                    this.props.dispatch(setWidth(window.innerWidth, true));
+                    if (_isObject(media)) {
+                        this.props.dispatch(setMedia(media));
+                    }
+                }
+            }
+
+            componentDidMount() {
+                if (typeof window !== 'undefined') {
+                    window.addEventListener('resize', this._onResize, false);
+                }
+            }
+
+            componentWillUnmount() {
+                if (typeof window !== 'undefined') {
+                    window.removeEventListener('resize', this._onResize);
+                }
+            }
+
+            render() {
+                return <WrappedComponent {...this.props} />;
+            }
+
+            _onResize() {
+                this.props.dispatch(setWidth(window.innerWidth));
+            }
+        }
+    )
+

package/hoc/theme.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+export interface IThemeContext {
+    /**
+     * Укажите `true` для переключения на темную тему
+     */
+    dark?: boolean,
+
+    /**
+     * Размер элемента
+     */
+    size?: Size,
+}
+
+/**
+ * Theme HOC
+ * Получает данные темы (size, dark) из контекста и прокидывает их в `props`. Полученные данные используются
+ * для стилизации компонентов.
+ */
+export interface IThemeHocInput extends IThemeContext {
+}
+
+export interface IThemeHocOutput extends IThemeHocInput {
+}
+
+export const defaultTheme = {
+    size: 'md',
+    dark: false,
+} as IThemeContext;
+
+export const ThemeContext = React.createContext(defaultTheme as IThemeContext);
+
+export default (config: IThemeContext = {}): any => WrappedComponent =>
+    class FormHoc extends React.PureComponent<IThemeHocInput> {
+        static WrappedComponent = WrappedComponent;
+
+        render() {
+            return (
+                <ThemeContext.Consumer>
+                    {context => {
+                        const outputProps = {
+                            dark: typeof this.props.dark === 'boolean' ? this.props.dark : context.dark,
+                            size: this.props.size || context.size,
+                            ...config,
+                        } as IThemeHocOutput;
+
+                        return (
+                            <ThemeContext.Provider value={outputProps}>
+                                <WrappedComponent {...this.props} {...outputProps} />
+                            </ThemeContext.Provider>
+                        );
+                    }}
+                </ThemeContext.Consumer>
+            );
+        }
+    }

package/index.d.ts

@@ -1,89 +1,80 @@
-declare module '*.json' {
-    const value: any;
-    export default value;
-}
-
-declare module '*.svg' {
-    const content: string;
-    export default content;
-}
-
-declare module '*.png' {
-    const content: string;
-    export default content;
-}
-
-/**
- * Метод для локализации фраз и предложений
- * @example {__('{count} {count, plural, one{день} few{дня} many{дней}}', {count: 2})}
- * @param {string} phrase
- * @param {object} params
- * @private
- */
-declare function __(phrase: string, params?: any): string;
-
-/**
- * Название цвета, соответствующее ему состоянию
- */
-declare type ColorName =
-    'primary'
-    | 'secondary'
-    | 'success'
-    | 'info'
-    | 'warning'
-    | 'danger'
-    | 'light'
-    | 'dark'
-    | string;
-
-/**
- * Уникальный ключ. ID, UUID или другое
- */
-declare type PrimaryKey = number | string;
-
-/**
- * Размер элемента
- */
-declare type Size = 'sm' | 'md' | 'lg' | string;
-
-/**
- * Макет формы или ее части, влияющий на расположение полей
- */
-declare type FormLayoutName = 'default' | 'horizontal' | 'inline' | string;
-
-/**
- * Свойства для настройки макета формы
- */
-declare type FormLayout = FormLayoutName | boolean | {
-    layout: FormLayoutName | boolean,
-    className?: string,
-    label?: boolean,
-    cols?: number[],
-    [key: string]: any,
-};
-
-/**
- * Объект из свойства `input` от redux-form
- */
-declare type FormInputType = {
-    name?: string,
-    value?: any,
-    onChange?: (...args: any[]) => any,
-};
-
-/**
- * Дополнительные CSS классы
- * @example my-block
- */
-declare type CssClassName = string;
-
-/**
- * Переопределение view React компонента для кастомизации отображения
- * @example MyCustomView
- */
-declare type CustomView = React.ReactNode;
-
-/**
- * HTTP метод
- */
-declare type HttpMethod = 'get' | 'post' | 'put' | 'delete' | string;
+declare module '*.json' {
+    const value: any;
+    export default value;
+}
+
+declare module '*.svg' {
+    const content: string;
+    export default content;
+}
+
+declare module '*.png' {
+    const content: string;
+    export default content;
+}
+
+/**
+ * Метод для локализации фраз и предложений
+ * @example {__('{count} {count, plural, one{день} few{дня} many{дней}}', {count: 2})}
+ * @param {string} phrase
+ * @param {object} params
+ * @private
+ */
+declare function __(phrase: string, params?: any): string;
+
+/**
+ * Название цвета, соответствующее ему состоянию
+ */
+declare type ColorName = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark' | string;
+
+/**
+ * Уникальный ключ. ID, UUID или другое
+ */
+declare type PrimaryKey = number | string;
+
+/**
+ * Размер элемента
+ */
+declare type Size = 'sm' | 'md' | 'lg' | string;
+
+/**
+ * Макет формы или ее части, влияющий на расположение полей
+ */
+declare type FormLayoutName = 'default' | 'horizontal' | 'inline' | string;
+
+/**
+ * Свойства для настройки макета формы
+ */
+declare type FormLayout = FormLayoutName | boolean | {
+    layout: FormLayoutName | boolean,
+    className: string,
+    label: boolean,
+    cols: number[],
+    [key: string]: any,
+};
+
+/**
+ * Объект из свойства `input` от redux-form
+ */
+declare type FormInputType = {
+    name?: string,
+    value?: any,
+    onChange?: (...args: any[]) => any,
+};
+
+/**
+ * Дополнительные CSS классы
+ * @example my-block
+ */
+declare type CssClassName = string;
+
+/**
+ * Переопределение view React компонента для кастомизациии отображения
+ * @example MyCustomView
+ */
+declare type CustomView = React.ReactNode;
+
+/**
+ * HTTP метод
+ */
+declare type HttpMethod = 'get' | 'post' | 'put' | 'delete' | string;

package/package.json

@@ -1,88 +1,48 @@
 {
   "name": "@steroidsjs/core",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.1-beta.113",
   "description": "",
   "author": "Vladimir Kozhin <hello@kozhindev.com>",
   "repository": {
     "type": "git",
     "url": "https://github.com/steroids/react"
   },
-  "main": "dist/index.ts",
-  "types": "dist/index.d.ts",
-  "exports": {
-    "./": "./dist"
-  },
   "license": "MIT",
   "homepage": "https://github.com/steroids/react",
   "bugs": {
     "url": "https://github.com/steroids/react/issues"
   },
   "scripts": {
-    "docs": "typedoc --ignoreCompilerErrors --json typedoc.json .",
-    "test": "jest",
-    "build": "tsc && cp ./{package.json,LICENSE,README.md} dist/ && cp src/index.d.ts dist/"
+    "docs": "typedoc --ignoreCompilerErrors --json typedoc.json ."
   },
   "dependencies": {
     "axios": "^0.21.1",
     "conditional-decorator": "^0.1.7",
-    "connected-react-router": "^6.9.1",
+    "connected-react-router": "^6.5.2",
     "domready": "^1.0.8",
-    "dot-prop-immutable": "^2.1.0",
+    "draft-js": "^0.11.7",
+    "draftjs-to-html": "^0.9.1",
     "fileup-core": "^1.2.0",
-    "fileup-redux": "^1.1.3",
     "history": "^4.10.1",
-    "intl-messageformat": "^2.2.0",
+    "html-to-draftjs": "^1.5.0",
+    "intl-messageformat": "^9.11.0",
     "js-cookie": "^2.2.1",
     "load-js": "^3.0.3",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "moment": "^2.29.1",
-    "path-to-regexp": "^6.2.0",
+    "lodash": "^4.17.20",
+    "lodash-es": "^4.17.15",
+    "moment": "^2.27.0",
+    "path-to-regexp": "^3.2.0",
     "qs": "^6.9.4",
-    "query-string": "^6.14.0",
-    "react": "^17.0.2",
+    "react": "^16.4.2",
     "react-click-outside": "^3.0.1",
-    "react-day-picker": "^7.4.8",
-    "react-dom": "^17.0.2",
+    "react-day-picker": "^7.1.4",
+    "react-dom": "^16.4.2",
     "react-grid-gallery": "^0.4.8",
     "react-input-mask": "^3.0.0-alpha.2",
-    "react-redux": "^7.1.1",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-use": "^17.1.0",
+    "react-redux": "7.1.1",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
     "redux": "^4.0.4",
-    "redux-form": "^8.2.6",
-    "redux-mock-store": "^1.5.4"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.13.14",
-    "@babel/core": "^7.13.15",
-    "@babel/preset-env": "^7.13.15",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
-    "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.22",
-    "@types/markdown-to-jsx": "^6.11.3",
-    "@types/reach__router": "^1.3.7",
-    "@types/react": "^17.0.2",
-    "@types/react-color": "^3.0.4",
-    "@types/react-redux": "^7.1.16",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/react-syntax-highlighter": "^13.5.0",
-    "@types/webpack-env": "^1.16.0",
-    "@typescript-eslint/eslint-plugin": "^4.15.0",
-    "@typescript-eslint/parser": "^4.15.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
-    "enzyme": "^3.11.0",
-    "eslint": "^7.20.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "jest": "^26.6.3",
-    "jest-enzyme": "^7.1.2",
-    "ts-jest": "^26.5.1",
-    "typescript": "^4.1.3"
+    "redux-form": "^8.2.6"
   }
 }

package/reducers/auth.ts

@@ -0,0 +1,57 @@
+import _merge from 'lodash-es/merge';
+import {
+    AUTH_INIT,
+    AUTH_INIT_USER,
+    AUTH_SET_DATA,
+    AUTH_ADD_SOCIAL
+} from '../actions/auth';
+
+const initialState = {
+    isInitialized: false,
+    initializeCounter: 0,
+    redirectPageId: null,
+    user: null,
+    data: null
+};
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case AUTH_INIT:
+            return {
+                ...state,
+                initializeCounter: state.initializeCounter + 1,
+                redirectPageId: action.redirectPageId || null
+            };
+        case AUTH_INIT_USER:
+            return {
+                ...state,
+                isInitialized: true,
+                user: action.user
+            };
+        case AUTH_SET_DATA:
+            return {
+                ...state,
+                data: _merge({}, state.data, action.data)
+            };
+        case AUTH_ADD_SOCIAL:
+            return {
+                ...state,
+                user: {
+                    ...state.user,
+                    socials: [
+                        ...(state.user?.socials || []),
+                        ...(action.social || [])
+                    ]
+                }
+            };
+    }
+    return state;
+};
+export const isInitialized = state => state.auth.isInitialized;
+export const getInitializeCounter = state => state.auth.initializeCounter;
+export const isAuthorized = state => !!state.auth.user;
+export const getUser = state => state.auth.user;
+export const getUserId = state =>
+    (state.auth.user && state.auth.user.id) || null;
+export const getUserRole = state =>
+    (state.auth.user && state.auth.user.role) || null;
+export const getData = state => state.auth.data;

package/reducers/fields.ts

@@ -0,0 +1,44 @@
+import _isString from 'lodash-es/isString';
+import _get from 'lodash-es/get';
+import {FIELDS_SET_META} from '../actions/fields';
+
+const initialState = {
+    props: {},
+    meta: null
+};
+const normalizeName = name => name.replace(/\\/g, '.').replace(/^\./, '');
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case FIELDS_SET_META:
+            Object.keys(action.meta).forEach(name => {
+                action.meta[name].className = name;
+            });
+            return {
+                ...state,
+                meta: {
+                    ...state.meta,
+                    ...action.meta
+                }
+            };
+    }
+    return state;
+};
+export const getFieldProps = (state, fieldId) =>
+    _get(state, ['fields', 'props', fieldId, 'props']);
+export const isMetaFetched = state => _get(state, ['fields', 'meta']) !== null;
+export const getEnumLabels = (state, name) =>
+    _get(state, ['fields', 'meta', name, 'labels']) || null;
+const warnings = {};
+export const getModel = (state, name) => {
+    if (_isString(name)) {
+        name = normalizeName(name);
+        const meta = _get(state, ['fields', 'meta', name]) || null;
+        if (!meta && isMetaFetched(state) && !warnings[name]) {
+            warnings[name] = true;
+            console.warn('Steroids: Not found model meta:', name); // eslint-disable-line no-console
+        }
+        return meta;
+    } else {
+        return name || null;
+    }
+};

package/reducers/index.ts

@@ -0,0 +1,23 @@
+import {combineReducers} from 'redux';
+import {reducer as form} from 'redux-form';
+import auth from './auth';
+import fields from './fields';
+import list from './list';
+import notifications from './notifications';
+import modal from './modal';
+import router from './router';
+import screen from './screen';
+
+export {form, auth, fields, list, notifications, modal, router, screen};
+export default asyncReducers =>
+    combineReducers({
+        form,
+        auth,
+        fields,
+        list,
+        notifications,
+        modal,
+        screen,
+        ...asyncReducers,
+        router: (state, action) => router(asyncReducers.router(state, action), action),
+    });