@steroidsjs/core 2.3.0-beta.4 → 2.3.0-beta.5

package/src/components/social/GitlabProvider.ts

@@ -0,0 +1,58 @@
+export default class GitlabProvider {
+    _components: any;
+
+    url: string;
+
+    redirectUrl: any;
+
+    constructor(components, config) {
+        this._components = components;
+        this.url = config.url || '';
+        this.redirectUrl = config.redirectUrl || this._components.http.getUrl('/api/v1/auth/social/proxy');
+    }
+
+    async init() {
+        return Promise.resolve();
+    }
+
+    async start() {
+        return new Promise((resolve, reject) => {
+            // Open popup auth window
+            const width = 600;
+            const height = 400;
+            const params = {
+                toolbar: 'no',
+                location: 'no',
+                directories: 'no',
+                status: 'no',
+                menubar: 'no',
+                scrollbars: 'no',
+                resizable: 'no',
+                width,
+                height,
+                left: window.screen.width / 2 - width / 2,
+                top: window.screen.height / 2 - height / 2,
+            };
+            const popup = window.open(
+                this.url,
+                __('Авторизация через Gitlab'),
+                Object.entries(params)
+                    .map(([key, value]) => key + '=' + value)
+                    .join(','),
+            );
+            popup.onbeforeunload = () => reject();
+
+            // This is a handler which is used by child window to pass auth result
+            (window as any).authCallback = link => {
+                // link: http://127.0.0.1:9424/api/v1/auth/social/proxy
+                // ?provider=gitlab_kozhindev#access_token=7b87e3de0...5518198d885d&token_type=Bearer
+                const token = (/access_token=(\w+)/.exec(link) || [])[1];
+                if (token) {
+                    resolve({token});
+                } else {
+                    reject();
+                }
+            };
+        });
+    }
+}

package/src/components/social/GoogleProvider.ts

@@ -0,0 +1,46 @@
+export default class GoogleProvider {
+    _components: any;
+
+    clientId: string;
+
+    constructor(components, config) {
+        this._components = components;
+        this.clientId = config.clientId;
+    }
+
+    async init() {
+        return this._components.resource.loadScript(
+            'https://apis.google.com/js/client:platform.js',
+            null,
+            async () => {
+                const gapi = await this._components.resource.wait(() => (window as any).gapi);
+                return new Promise(resolve => {
+                    gapi.load('auth2', () => {
+                        if (gapi.auth2.getAuthInstance()) {
+                            return;
+                        }
+                        gapi.auth2
+                            .init({
+                                client_id: this.clientId,
+                                cookie_policy: 'single_host_origin',
+                                //login_hint: loginHint,
+                                //hosted_domain: hostedDomain,
+                                fetch_basic_profile: true,
+                                ux_mode: 'popup',
+                                scope: 'profile email',
+                                access_type: 'online',
+                            })
+                            .then(resolve);
+                    });
+                });
+            },
+        );
+    }
+
+    async start() {
+        const response = await (window as any).gapi.auth2.getAuthInstance().signIn();
+        return {
+            token: response.getAuthResponse().id_token,
+        };
+    }
+}

package/src/components/social/SteamProvider.ts

@@ -0,0 +1,69 @@
+import * as queryString from 'qs';
+
+export default class Vk {
+    _components: any;
+
+    clientId: string;
+
+    constructor(components, config) {
+        this._components = components;
+        this.clientId = config.clientId;
+    }
+
+    async init() {
+        return Promise.resolve();
+    }
+
+    async start() {
+        return new Promise((resolve, reject) => {
+            // Generate url
+            const url = 'https://steamcommunity.com/openid/login?'
+                + queryString.stringify({
+                    'openid.mode': 'checkid_setup',
+                    'openid.ns': 'http://specs.openid.net/auth/2.0',
+                    'openid.identity':
+                        'http://specs.openid.net/auth/2.0/identifier_select',
+                    'openid.claimed_id':
+                        'http://specs.openid.net/auth/2.0/identifier_select',
+                    'openid.return_to': this._components.http.getUrl(
+                        '/api/v1/auth/social/proxy',
+                    ),
+                    'openid.realm': window.location.origin,
+                });
+            // Open popup auth window
+            const width = 900;
+            const height = 600;
+            const params = {
+                toolbar: 'no',
+                location: 'no',
+                directories: 'no',
+                status: 'no',
+                menubar: 'no',
+                scrollbars: 'no',
+                resizable: 'no',
+                width,
+                height,
+                left: window.screen.width / 2 - width / 2,
+                top: window.screen.height / 2 - height / 2,
+            };
+            const popup = window.open(
+                url,
+                __('Авторизация через Steam'),
+                Object.entries(params)
+                    .map(([key, value]) => key + '=' + value)
+                    .join(','),
+            );
+            popup.onbeforeunload = () => reject();
+
+            // This is a handler which is used by child window to pass auth result
+            (window as any).authCallback = link => {
+                const query = queryString.parse(new URL(link).search);
+                if (!query['openid.mode']) {
+                    reject();
+                } else {
+                    resolve(query);
+                }
+            };
+        });
+    }
+}

package/src/components/social/VkProvider.ts

@@ -0,0 +1,69 @@
+import * as queryString from 'qs';
+
+export default class VkProvider {
+    _components: any;
+
+    clientId: string;
+
+    redirectUrl: any;
+
+    constructor(components, config) {
+        this._components = components;
+        this.clientId = config.clientId;
+        this.redirectUrl = config.redirectUrl || this._components.http.getUrl('/api/v1/auth/social/proxy');
+    }
+
+    async init() {
+        return Promise.resolve();
+    }
+
+    async start() {
+        return new Promise((resolve, reject) => {
+            // Generate url
+            const url = 'https://oauth.vk.com/authorize/?'
+                + queryString.stringify({
+                    client_id: this.clientId,
+                    redirect_uri: this.redirectUrl,
+                    scope: 'offline,public_profile',
+                    response_type: 'code',
+                });
+            // Open popup auth window
+            const width = 655;
+            const height = 600;
+            const params = {
+                toolbar: 'no',
+                location: 'no',
+                directories: 'no',
+                status: 'no',
+                menubar: 'no',
+                scrollbars: 'no',
+                resizable: 'no',
+                width,
+                height,
+                left: window.screen.width / 2 - width / 2,
+                top: window.screen.height / 2 - height / 2,
+            };
+            const popup = window.open(
+                url,
+                __('Авторизация через VK'),
+                Object.entries(params)
+                    .map(([key, value]) => key + '=' + value)
+                    .join(','),
+            );
+            popup.onbeforeunload = () => reject();
+
+            // This is a handler which is used by child window to pass auth result
+            (window as any).authCallback = link => {
+                const query = new URL(link).searchParams;
+                const error = query.get('error');
+                if (error) {
+                    reject(error);
+                } else {
+                    resolve({
+                        token: query.get('code'),
+                    });
+                }
+            };
+        });
+    }
+}

package/src/hoc/application.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import useApplication, {IApplicationHookConfig} from '../hooks/useApplication';
+
+/**
+ * Application HOC
+ * Обертка над корневым компонентом приложения, используется только в `Application.tsx`. Добавляет через React Context
+ * компоненты приложения и конфигурирует их.
+ */
+export default (config: IApplicationHookConfig): any => WrappedComponent => function ApplicationHoc(props) {
+    const {renderApplication} = useApplication(config);
+    return renderApplication(
+        <WrappedComponent {...props} />,
+    );
+};

package/src/hoc/bem.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {IComponentsHocOutput} from './components';
+import {useBem} from '../hooks';
+import {IBem} from '../hooks/useBem';
+
+/**
+ * Bem HOC
+ * Прокидывает утилиту `bem` для правильной генерации CSS классов по методологии БЭМ (блок, элемент, модификатор)
+ */
+export interface IBemHocInput {
+    style?: any
+}
+
+export interface IBemHocOutput extends IComponentsHocOutput {
+    bem?: IBem,
+}
+
+export default (namespace: string): any => WrappedComponent => function BemHoc(props) {
+    const bem = useBem(namespace);
+    return (
+        <WrappedComponent
+            {...props}
+            bem={bem}
+        />
+    );
+};

package/src/hoc/components.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import {useComponents} from '../hooks';
+import {IComponents} from '../providers/ComponentsProvider';
+
+export interface IComponentsHocOutput extends IComponents {
+    components?: IComponents,
+}
+
+const exportComponents = (components, names) => {
+    const props = {};
+    names.forEach(items => {
+        [].concat(items).forEach(name => {
+            props[name] = components[name];
+        });
+    });
+    return props;
+};
+
+/**
+ * Components HOC
+ * Прокидывает в пропсы компоненты приложения. Ключ соответствует названию компонента, объявленного при инициализации
+ * приложения (см. `Application.tsx`)
+ */
+export default (...names): any => WrappedComponent => function ComponentsHoc(props) {
+    const components = useComponents();
+    return (
+        <WrappedComponent
+            {...props}
+            {...exportComponents(components, names)}
+            components={components}
+        />
+    );
+};

package/src/hoc/connect.ts

@@ -0,0 +1,7 @@
+export type Dispatch = (any) => any;
+
+export interface IConnectHocOutput {
+    dispatch?: Dispatch,
+}
+
+export default require('react-redux').connect;

package/src/hoc/fetch.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import {useSelector} from 'react-redux';
+import {useCallback, useMemo} from 'react';
+import {getRouteParams} from '../reducers/router';
+import useFetch, {IFetchConfig} from '../hooks/useFetch';
+
+export interface IFetchHocOutput {
+    fetchRefresh?: (ids?: string | string[]) => void,
+    fetchUpdate?: (props: any) => void,
+}
+
+export type IFetchHocConfigFunc = (props: any) => IFetchConfig & {key: string}
+
+interface IFetchHocOptions {
+    waitLoading?: any,
+}
+
+export default (
+    configFunc: IFetchHocConfigFunc,
+    options: IFetchHocOptions = {},
+): any => WrappedComponent => function FetchHoc(props) {
+    const params = useSelector(state => getRouteParams(state));
+    const config = useMemo(() => configFunc({...props, params}), [params, props]);
+    const {data, isLoading, fetch} = useFetch(config);
+
+    const fetchRefresh = useCallback(() => fetch(), [fetch]);
+    const fetchUpdate = useCallback((newParams) => fetch({params: newParams}), [fetch]);
+
+    if (isLoading && options.waitLoading !== false) {
+        // TODO Loader
+        return null;
+    }
+
+    return (
+        <WrappedComponent
+            {...props}
+            fetchRefresh={fetchRefresh}
+            fetchUpdate={fetchUpdate}
+            {...({[config.key]: data})}
+        />
+    );
+};

package/src/hoc/file.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import useFile from '../hooks/useFile';
+
+/**
+ * File HOC
+ * Компонент для асинхронной загрузки файлов на сервер, используется в `FileField`
+ */
+export interface IFileHocInput {
+    // TODO Remove unused props
+    /*
+      multiple: PropTypes.bool,
+      uploader: PropTypes.object,
+      backendUrl: PropTypes.string,
+      mimeTypes: PropTypes.arrayOf(PropTypes.string),
+      imagesOnly: PropTypes.bool,
+      imagesProcessor: PropTypes.string,
+      imagesExactSize: PropTypes.arrayOf(PropTypes.number),
+      initialFiles: PropTypes.arrayOf(
+        PropTypes.shape({
+          uid: PropTypes.string,
+          path: PropTypes.string,
+          type: PropTypes.string,
+          bytesTotal: PropTypes.number,
+          bytesUploaded: PropTypes.number,
+          bytesUploadEnd: PropTypes.number,
+          resultHttpMessage: PropTypes.object
+        })
+      )
+     */
+    input?: FormInputType,
+    multiple?: boolean;
+    uploader?: any;
+    backendUrl?: any;
+    mimeTypes?: any;
+    imagesOnly?: any;
+    imagesProcessor?: any;
+    imagesExactSize?: any;
+    initialFiles?: any;
+    uploaderConfig?: {
+        useFormData?: boolean,
+        fileFieldName?: string,
+    } | any
+}
+
+export interface IFileHocOutput {
+    uploader?: any;
+    files?: any[];
+    onBrowse?: any;
+    onRemove?: any;
+    onAdd?: any;
+}
+
+export default (): any => WrappedComponent => function FileHOC(props) {
+    const fileProps = useFile(props);
+    return (
+        <WrappedComponent
+            {...props}
+            uploader={fileProps.uploader}
+            files={fileProps.files}
+            onBrowse={fileProps.onBrowse}
+            onRemove={fileProps.onRemove}
+        />
+    );
+};

package/src/hoc/http.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {useCallback} from 'react';
+import useFetch from '../hooks/useFetch';
+
+/**
+ * Http HOC
+ * Обертка для асинхронного получения данных с бекенда. В отличии от `Fetch HOC`, он не хранит данные в Redux Store
+ * и не добавляет "Загрузка..." при запросе.
+ */
+export default (requestFunc: (props: any) => any): any => WrappedComponent => function HttpHoc(props) {
+    const onFetch = useCallback(() => requestFunc(props), [props]);
+    const {data, isLoading, fetch} = useFetch({onFetch});
+    const fetchUpdate = useCallback((newParams) => fetch({params: newParams}), [fetch]);
+
+    return (
+        <WrappedComponent
+            {...props}
+            {...data}
+            isLoading={isLoading}
+            fetch={fetchUpdate}
+        />
+    );
+};

package/src/hoc/index.ts

@@ -0,0 +1,17 @@
+import application from './application';
+import bem from './bem';
+import components from './components';
+import connect from './connect';
+import fetch from './fetch';
+import http from './http';
+import layout from './layout';
+
+export {
+    application,
+    bem,
+    components,
+    connect,
+    fetch,
+    http,
+    layout,
+};

package/src/hoc/layout.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+import {IComponentsHocOutput} from './components';
+import {IRouteItem} from '../ui/nav/Router/Router';
+import useLayout from '../hooks/useLayout';
+
+/**
+ * Layout HOC
+ * Используется для макета (layout) приложения, добавляя в него данные авторизации и статуса рендера страницы.
+ * Передаваемый первым аргументом `initAction` будет вызываться каждый раз, когда необходимо обновить данные
+ * авторизации (первая загрузка страницы, логин/регистация и выход).
+ */
+export interface ILayoutHocInput {
+    route?: IRouteItem,
+    user?: {
+        role: string,
+    },
+    data?: Record<string, unknown>,
+    initializeCounter?: number,
+    components: IComponentsHocOutput,
+    isInitialized?: boolean,
+    redirectPageId?: any,
+}
+
+export interface ILayoutHocOutput {
+    http?: any,
+    status: string,
+    renderError: string,
+    route: IRouteItem,
+    user: any,
+    data: any,
+    isInitialized: boolean,
+}
+
+export default (initAction: any = null): any => WrappedComponent => function LayoutHoc(props) {
+    const layoutProps = useLayout(initAction);
+    return (
+        <WrappedComponent
+            {...props}
+            status={layoutProps.status}
+            renderError={layoutProps.error}
+            {...layoutProps.data}
+        />
+    );
+};

package/src/hooks/index.ts

@@ -0,0 +1,41 @@
+import useAbsolutePositioning from './useAbsolutePositioning';
+import useAddressBar from './useAddressBar';
+import useApplication from './useApplication';
+import useBem from './useBem';
+import useComponents from './useComponents';
+import useDataProvider from './useDataProvider';
+import useDataSelect from './useDataSelect';
+import useDispatch from './useDispatch';
+import useFetch from './useFetch';
+import useFile from './useFile';
+import useForm from './useForm';
+import useInitial from './useInitial';
+import useLayout from './useLayout';
+import useList from './useList';
+import useModel from './useModel';
+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,
+};