@steroidsjs/core 2.2.87 → 2.3.0-beta.1

package/src/providers/ScreenProvider.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import {PropsWithChildren, useCallback, useMemo, useState} from 'react';
+import {useMount, useUnmount} from 'react-use';
+
+export interface IScreen {
+    width: number,
+    media: Record<string, any>,
+    setMedia: any,
+    isPhone: () => boolean,
+    isTablet: () => boolean,
+    isDesktop: () => boolean,
+    getDeviceType: () => string
+}
+
+export const ScreenContext = React.createContext({} as IScreen);
+
+export interface IScreenProviderProps extends PropsWithChildren<any> {
+    media?: Record<string, any>,
+    skipTimeout?: boolean
+}
+
+export const SCREEN_PHONE = 'phone';
+export const SCREEN_TABLET = 'tablet';
+export const SCREEN_DESKTOP = 'desktop';
+
+export default function ScreenProvider(props: IScreenProviderProps): JSX.Element {
+    const [width, setWidth] = useState(!process.env.IS_SSR ? window.innerWidth : 1280);
+    const [media, setMedia] = useState(props.media || {
+        [SCREEN_PHONE]: 320,
+        [SCREEN_TABLET]: 768,
+        [SCREEN_DESKTOP]: 1024,
+    });
+
+    let timer = null;
+    const onResize = () => {
+        if (timer) {
+            clearTimeout(timer);
+        }
+        if (props.skipTimeout) {
+            setWidth(window.innerWidth);
+        } else {
+            timer = setTimeout(() => setWidth(window.innerWidth), 100);
+        }
+    };
+
+    useMount(() => {
+        window.addEventListener('resize', onResize, false);
+    });
+
+    useUnmount(() => {
+        window.removeEventListener('resize', onResize);
+    });
+
+    const getDeviceType = useCallback(() => {
+        if (width < media[SCREEN_TABLET]) {
+            return SCREEN_PHONE;
+        }
+        if (width < media[SCREEN_DESKTOP]) {
+            return SCREEN_TABLET;
+        }
+        return SCREEN_DESKTOP;
+    }, [width, media]);
+
+    const isPhone = useCallback(() => getDeviceType() === SCREEN_PHONE, [getDeviceType]);
+    const isTablet = useCallback(() => getDeviceType() === SCREEN_TABLET, [getDeviceType]);
+    const isDesktop = useCallback(() => getDeviceType() === SCREEN_DESKTOP, [getDeviceType]);
+
+    const value = useMemo(() => ({
+        width,
+        media,
+        setMedia,
+        isPhone,
+        isTablet,
+        isDesktop,
+        getDeviceType,
+    }), [
+        width,
+        media,
+        setMedia,
+        isPhone,
+        isTablet,
+        isDesktop,
+        getDeviceType,
+    ]);
+
+    return (
+        <ScreenContext.Provider value={value as IScreen}>
+            {props.children}
+        </ScreenContext.Provider>
+    );
+}

package/src/providers/SsrProvider.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {PropsWithChildren} from 'react';
+import {StaticRouterContext} from 'react-router';
+
+export interface IPreloadedData {
+    [configId: string]: any
+}
+
+export interface ISsr {
+    history?: {
+        initialEntries: string[],
+    },
+    staticContext?: StaticRouterContext,
+    preloadedData?: IPreloadedData,
+}
+
+export const SsrProviderContext = React.createContext<ISsr>(null);
+
+export interface ISsrProviderProps extends ISsr, PropsWithChildren<any> {}
+
+export default function SsrProvider(props: ISsrProviderProps): JSX.Element {
+    return (
+        <SsrProviderContext.Provider value={{
+            history: props.history,
+            staticContext: props.staticContext,
+            preloadedData: props.preloadedData,
+        }}
+        >
+            {props.children}
+        </SsrProviderContext.Provider>
+    );
+}

package/src/providers/index.ts

@@ -0,0 +1,9 @@
+import ScreenProvider from './ScreenProvider';
+import ComponentsProvider from './ComponentsProvider';
+import SsrProvider from './SsrProvider';
+
+export {
+    SsrProvider,
+    ScreenProvider,
+    ComponentsProvider,
+};

package/src/reducers/auth.test.ts

@@ -0,0 +1,240 @@
+import {
+    AUTH_INIT,
+    AUTH_INIT_USER,
+    AUTH_SET_DATA,
+    AUTH_ADD_SOCIAL,
+} from '../actions/auth';
+import auth from './auth';
+
+describe('auth reducer', () => {
+    const initialState = {
+        isInitialized: false,
+        initializeCounter: 0,
+        redirectPageId: null,
+        user: null,
+        data: null,
+    };
+
+    describe('AUTH_INIT', () => {
+        it('without redirectPageId', () => {
+            const action = {
+                type: AUTH_INIT,
+            };
+
+            expect(auth(initialState, action)).toEqual({
+                ...initialState,
+                initializeCounter: initialState.initializeCounter + 1,
+                redirectPageId: null,
+            });
+        });
+
+        it('with redirectPageId', () => {
+            const action = {
+                type: AUTH_INIT,
+                redirectPageId: 'root',
+            };
+
+            expect(auth(initialState, action)).toEqual({
+                ...initialState,
+                initializeCounter: initialState.initializeCounter + 1,
+                redirectPageId: action.redirectPageId,
+            });
+        });
+    });
+
+    describe('AUTH_INIT_USER', () => {
+        it('without user', () => {
+            const action = {
+                type: AUTH_INIT_USER,
+            };
+
+            expect(auth(initialState, action)).toEqual({
+                ...initialState,
+                isInitialized: true,
+                user: undefined,
+            });
+        });
+
+        it('with null user', () => {
+            const action = {
+                type: AUTH_INIT_USER,
+                user: null,
+            };
+
+            expect(auth(initialState, action)).toEqual({
+                ...initialState,
+                isInitialized: true,
+                user: null,
+            });
+        });
+
+        it('with user', () => {
+            const action = {
+                type: AUTH_INIT_USER,
+                user: {
+                    id: 1,
+                    name: 'Ivan',
+                },
+            };
+
+            expect(auth(initialState, action)).toEqual({
+                ...initialState,
+                isInitialized: true,
+                user: action.user,
+            });
+        });
+    });
+
+    describe('AUTH_SET_DATA', () => {
+        it('without data', () => {
+            const action = {
+                type: AUTH_SET_DATA,
+            };
+
+            expect(auth(initialState, action)).toEqual({
+                ...initialState,
+                data: {},
+            });
+        });
+
+        it('with null data', () => {
+            const action = {
+                type: AUTH_SET_DATA,
+                user: null,
+            };
+
+            expect(auth(initialState, action)).toEqual({
+                ...initialState,
+                data: {},
+            });
+        });
+
+        it('with data', () => {
+            const action = {
+                type: AUTH_SET_DATA,
+                data: {
+                    title: 'data',
+                    value: 42,
+                },
+            };
+
+            expect(auth(initialState, action)).toEqual({
+                ...initialState,
+                data: action.data,
+            });
+        });
+
+        it('with merge data', () => {
+            const newInitialState = {
+                ...initialState,
+                data: {
+                    value: 10,
+                    name: 'test',
+                },
+            };
+
+            const action = {
+                type: AUTH_SET_DATA,
+                data: {
+                    title: 'data',
+                    value: 42,
+                },
+            };
+
+            expect(auth(newInitialState, action)).toEqual({
+                ...newInitialState,
+                data: {
+                    title: 'data',
+                    value: 42,
+                    name: 'test',
+                },
+            });
+        });
+    });
+
+    describe('AUTH_ADD_SOCIAL', () => {
+        it('without social', () => {
+            const action = {
+                type: AUTH_ADD_SOCIAL,
+            };
+
+            expect(auth(initialState, action)).toEqual({
+                ...initialState,
+                user: {
+                    socials: [],
+                },
+            });
+        });
+
+        it('with null social', () => {
+            const action = {
+                type: AUTH_ADD_SOCIAL,
+                social: null,
+            };
+
+            expect(auth(initialState, action)).toEqual({
+                ...initialState,
+                user: {
+                    socials: [],
+                },
+            });
+        });
+
+        it('with social', () => {
+            const action = {
+                type: AUTH_ADD_SOCIAL,
+                social: [
+                    {
+                        title: 'social',
+                        value: 42,
+                    },
+                ],
+            };
+
+            expect(auth(initialState, action)).toEqual({
+                ...initialState,
+                user: {
+                    socials: action.social,
+                },
+            });
+        });
+
+        it('with merge social', () => {
+            const newInitalState = {
+                ...initialState,
+                user: {
+                    socials: [{
+                        title: 'test',
+                        value: 10,
+                    }],
+                },
+            };
+
+            const action = {
+                type: AUTH_ADD_SOCIAL,
+                social: [{
+                    title: 'social',
+                    value: 42,
+                }],
+            };
+
+            expect(auth(newInitalState, action)).toEqual({
+                ...newInitalState,
+                user: {
+                    ...newInitalState.user,
+                    socials: [
+                        {
+                            title: 'test',
+                            value: 10,
+                        },
+                        {
+                            title: 'social',
+                            value: 42,
+                        },
+
+                    ],
+                },
+            });
+        });
+    });
+});

package/src/reducers/auth.ts

@@ -0,0 +1,56 @@
+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 || []),
+                    ],
+                },
+            };
+        default:
+            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/src/reducers/fields.ts

@@ -0,0 +1,55 @@
+import _isString from 'lodash-es/isString';
+import _get from 'lodash-es/get';
+import {FIELDS_SET_META, FIELDS_DATA_PROVIDER_SET_ITEMS} from '../actions/fields';
+
+const initialState = {
+    props: {},
+    dataProvider: {},
+    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,
+                },
+            };
+
+        case FIELDS_DATA_PROVIDER_SET_ITEMS:
+            return {
+                ...state,
+                dataProvider: {
+                    ...state.dataProvider,
+                    [action.dataProviderId]: action.items,
+                },
+            };
+
+        default:
+            return state;
+    }
+};
+
+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;
+    }
+    return name || null;
+};
+
+export const getDataProviderItems = (state, dataProviderId) => state?.fields?.dataProvider?.[dataProviderId] || null;

package/src/reducers/form.ts

@@ -0,0 +1,121 @@
+import _get from 'lodash-es/get';
+import _isEqual from 'lodash-es/isEqual';
+import _cloneDeep from 'lodash-es/cloneDeep';
+import _isObject from 'lodash-es/isObject';
+import _isEmpty from 'lodash-es/isEmpty';
+import {set as _set, delete as _delete} from 'dot-prop-immutable';
+
+import {
+    FORM_INITIALIZE,
+    FORM_CHANGE,
+    FORM_SET_ERRORS,
+    FORM_SUBMIT,
+    FORM_SET_SUBMITTING,
+    FORM_RESET,
+    FORM_HARD_RESET,
+    FORM_ARRAY_ADD,
+    FORM_ARRAY_REMOVE,
+    FORM_DESTROY,
+} from '../actions/form';
+
+/**
+ * Редьюрес для одной формы. Используется как для Redux, так и для React Reducer
+ * @param state
+ * @param action
+ */
+export function reducerItem(state, action) {
+    if (!state && action.type !== FORM_INITIALIZE) {
+        state = reducerItem(state, {
+            type: FORM_INITIALIZE,
+            formId: action.formId,
+        });
+    }
+
+    switch (action.type) {
+        case FORM_INITIALIZE:
+            return {
+                errors: {},
+                isInvalid: false,
+                isSubmitting: false,
+                ...state,
+                values: _cloneDeep(action.values) || state?.values || {},
+                initialValues: action.values || state?.values || null,
+            };
+
+        case FORM_CHANGE:
+            if (_isObject(action.nameOrObject)) {
+                const newValues = {
+                    ...state.values,
+                    ...action.nameOrObject,
+                };
+                if (!_isEqual(state.values, newValues)) {
+                    return {
+                        ...state,
+                        values: {
+                            ...state.values,
+                            ...action.nameOrObject,
+                        },
+                    };
+                }
+                return state;
+            }
+            return _set(state, 'values.' + action.nameOrObject, action.value);
+
+        case FORM_SET_ERRORS:
+            return {
+                ...state,
+                errors: action.errors,
+                isInvalid: !_isEmpty(action.errors),
+            }
+
+        case FORM_SUBMIT:
+            return _set(state, 'submitCounter', (state.submitCounter || 0) + 1);
+
+        case FORM_SET_SUBMITTING:
+            return _set(state, 'isSubmitting', action.isSubmitting);
+
+        case FORM_RESET:
+            return {
+                ...state,
+                values: _cloneDeep(state.initialValues || {}),
+            };
+
+        case FORM_HARD_RESET:
+            return {
+                ...state,
+                initialValues: null,
+                values: {},
+                errors: {},
+                isInvalid: false,
+                isSubmitting: false,
+            };
+
+        case FORM_DESTROY:
+            return null;
+
+        case FORM_ARRAY_ADD:
+            // eslint-disable-next-line no-case-declarations
+            const newValue = [].concat(_get(state, 'values.' + action.name) || []);
+            for (let i = 0; i < action.rowsCount; i += 1) {
+                newValue.push(_cloneDeep(action.initialValues || {}));
+            }
+            return _set(state, 'values.' + action.name, newValue);
+
+        case FORM_ARRAY_REMOVE:
+            return _delete(state, 'values.' + action.name + '.' + action.index);
+
+        default:
+            return state;
+    }
+}
+
+const initialState = {};
+export default (state = initialState, action) => {
+    if (action.formId) {
+        return _set(state, action.formId, reducerItem(state[action.formId], action));
+    }
+    return state;
+};
+
+export const formSelector = (state, formId, selector) => selector(state.form?.[formId] || {});
+export const getFormValues = (state, formId) => state.form?.[formId]?.values || null;

package/src/reducers/index.ts

@@ -0,0 +1,24 @@
+import {combineReducers} from 'redux';
+import auth from './auth';
+import fields from './fields';
+import form from './form';
+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 ? asyncReducers.router(state, action) : {}, action),
+});