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

package/components/social/FacebookProvider.ts

@@ -0,0 +1,55 @@
+export default class FacebookProvider {
+    _components: any;
+    clientId: string;
+    language: string;
+
+    constructor(components) {
+        this._components = components;
+        this.clientId = '';
+        this.language =
+            this._components.locale.language +
+            '_' +
+            this._components.locale.language.toUpperCase();
+    }
+
+    async init() {
+        // @ts-ignore
+        window.fbAsyncInit = () => {
+            // @ts-ignore
+            window.FB.init({
+                version: 'v3.1',
+                appId: this.clientId,
+                xfbml: false,
+                cookie: false
+            });
+        };
+        return this._components.resource.loadScript(
+            `https://connect.facebook.net/${this.language}/sdk.js`,
+            null,
+            // @ts-ignore
+            () => this._components.resource.wait(() => window.FB)
+        );
+    }
+
+    async start() {
+        return new Promise((resolve, reject) => {
+            // @ts-ignore
+            window.FB.login(
+                response => {
+                    if (response.authResponse) {
+                        resolve({
+                            token: response.authResponse.accessToken
+                        });
+                    } else {
+                        reject('FB error: ' + response.status);
+                    }
+                },
+                {
+                    scope: 'public_profile,email',
+                    return_scopes: false,
+                    auth_type: ''
+                }
+            );
+        });
+    }
+}

package/components/social/GoogleProvider.ts

@@ -0,0 +1,47 @@
+export default class GoogleProvider {
+    _components: any;
+    clientId: string;
+
+    constructor(components) {
+        this._components = components;
+        this.clientId = '';
+    }
+
+    async init() {
+        return this._components.resource.loadScript(
+            'https://apis.google.com/js/client:platform.js',
+            null,
+            async () => {
+                // @ts-ignore
+                const gapi = await this._components.resource.wait(() => window.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() {
+        // @ts-ignore
+        const response = await window.gapi.auth2.getAuthInstance().signIn();
+        return {
+            token: response.getAuthResponse().id_token
+        };
+    }
+}

package/components/social/SteamProvider.ts

@@ -0,0 +1,69 @@
+import * as queryString from 'qs';
+
+export default class Vk {
+    _components: any;
+    clientId: string;
+
+    constructor(components) {
+        this._components = components;
+        this.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': 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
+            // @ts-ignore
+            window.authCallback = link => {
+                const params = queryString.parse(new URL(link).search);
+                if (!params['openid.mode']) {
+                    reject();
+                } else {
+                    resolve(params);
+                }
+            };
+        });
+    }
+}

package/components/social/VkProvider.ts

@@ -0,0 +1,70 @@
+import * as queryString from 'qs';
+
+export default class VkProvider {
+    _components: any;
+    clientId: string;
+    redirectUrl: any;
+
+    constructor(components) {
+        this._components = components;
+        this.clientId = '';
+        this.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
+          // @ts-ignore
+            window.authCallback = link => {
+                const params = new URL(link).searchParams;
+                const error = params.get('error');
+                if (error) {
+                    reject(error);
+                } else {
+                    resolve({
+                        token: params.get('code')
+                    });
+                }
+            };
+        });
+    }
+}

package/components/social/index.ts

@@ -0,0 +1,10 @@
+import facebook from './FacebookProvider';
+import google from './GoogleProvider';
+import steam from './SteamProvider';
+import vk from './VkProvider';
+export default {
+  facebook,
+  google,
+  steam,
+  vk
+};

package/hoc/application.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import {Provider} from 'react-redux';
+import _merge from 'lodash-es/merge';
+import ClientStorageComponent from '../components/ClientStorageComponent';
+import HtmlComponent from '../components/HtmlComponent';
+import HttpComponent from '../components/HttpComponent';
+import LocaleComponent from '../components/LocaleComponent';
+import StoreComponent from '../components/StoreComponent';
+import UiComponent from '../components/UiComponent';
+import {IComponentsHocOutput} from './components';
+import {ThemeContext, defaultTheme} from './theme';
+import MetaComponent from '../components/MetaComponent';
+
+/**
+ * Application HOC
+ * Обертка над корневым компонентом приложения, используется только в `Application.tsx`. Добавляет через React Context
+ * компоненты приложения и конфигурирует их.
+ */
+export interface IApplicationHocInput {
+}
+
+export interface IApplicationHocOutput {
+}
+
+export interface IApplicationHocConfig {
+    components?: {
+        [key: string]: {
+            className: any,
+            [key: string]: any,
+        } | any,
+    }
+    onInit?: (...args: any) => any,
+    useGlobal?: boolean,
+}
+
+export const ComponentsContext = React.createContext({} as IComponentsHocOutput);
+
+const defaultComponents = {
+    clientStorage: {
+        className: ClientStorageComponent,
+    },
+    html: {
+        className: HtmlComponent,
+    },
+    http: {
+        className: HttpComponent,
+    },
+    locale: {
+        className: LocaleComponent,
+    },
+    meta: {
+        className: MetaComponent,
+    },
+    store: {
+        className: StoreComponent,
+    },
+    ui: {
+        className: UiComponent,
+    },
+};
+
+export default (config: IApplicationHocConfig): any => WrappedComponent =>
+    class ApplicationHoc extends React.PureComponent<IApplicationHocInput> {
+
+        _components: any;
+
+        static WrappedComponent = WrappedComponent;
+
+        constructor(props) {
+            super(props);
+
+            // Create components
+            this._components = {};
+            const componentsConfig = _merge({}, defaultComponents, config.components);
+            Object.keys(componentsConfig).forEach(name => {
+                const {className, ...componentConfig} = componentsConfig[name];
+                this._components[name] = new className(this._components, componentConfig);
+            });
+
+            if (config.useGlobal !== false && typeof window !== 'undefined') {
+                window['SteroidsComponents'] = this._components;
+            }
+
+            // Init callback
+            if (config.onInit) {
+                config.onInit(this._components);
+            }
+        }
+
+        render() {
+            if (!process.env.IS_SSR) {
+                return (
+                    <Provider store={this._components.store.store}>
+                        <ComponentsContext.Provider value={{components: this._components}}>
+                            <ThemeContext.Provider value={defaultTheme}>
+                                <WrappedComponent {...this.props as IApplicationHocOutput} />
+                            </ThemeContext.Provider>
+                        </ComponentsContext.Provider>
+                    </Provider>
+                );
+            }
+        }
+    }

package/hoc/bem.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import components, {IComponentsHocOutput} from './components';
+
+/**
+ * Bem HOC
+ * Прокидывает утилиту `bem` для правильной генерации CSS классов по методологии БЭМ (блок, элемент, модификатор)
+ */
+export interface IBemHocInput {
+    style?: any
+}
+
+export interface IBemHocOutput extends IComponentsHocOutput {
+    bem?: {
+        element(...classes: any[]): string;
+        block(...classes: any[]): string;
+    } | any,
+}
+
+export interface IBemHocPrivateProps extends IComponentsHocOutput {
+}
+
+export default (namespace: string, styles = null): any => WrappedComponent =>
+    components()(
+        class BemHoc extends React.PureComponent<IBemHocInput & IBemHocPrivateProps> {
+            static WrappedComponent = WrappedComponent;
+
+            private readonly bem;
+
+            constructor(props) {
+                super(props);
+
+                if (namespace) {
+                    this.bem = this.props.components.html.bem(namespace, props.style);
+                }
+
+                // Only for React Native
+                if (styles && this.props.components.html.addStyles) {
+                    this.props.components.html.addStyles(styles);
+                }
+            }
+
+            render() {
+                const props = {} as IBemHocOutput;
+                props.bem = this.bem;
+
+                return (
+                    <WrappedComponent
+                        {...this.props}
+                        {...props}
+                        components={this.props.components}
+                    />
+                );
+            }
+        }
+    )

package/hoc/components.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import {ComponentsContext} from './application';
+
+export interface IComponents {
+    clientStorage?: any,
+    html?: any,
+    http?: any,
+    locale?: any,
+    store?: any,
+    ui?: any,
+    resource?: any,
+    ws?: any,
+    pushNotification?: any,
+}
+
+/**
+ * Components HOC
+ * Прокидывает в пропсы компоненты приложения. Ключ соответствует названию компонента, объявленного при инициализации
+ * приложения (см. `Application.tsx`)
+ */
+export interface IComponentsHocInput {
+}
+
+export interface IComponentsHocOutput extends IComponents {
+    components?: IComponents,
+}
+
+interface IComponentHocPrivateProps {
+    components?: IComponents,
+}
+
+export default (...names): any => WrappedComponent =>
+    class ComponentHoc extends React.PureComponent<IComponentsHocInput & IComponentHocPrivateProps> {
+
+        static WrappedComponent = WrappedComponent;
+
+        render() {
+            if (typeof window !== 'undefined' && window['SteroidsComponents']) {
+                return this.renderInternal(window['SteroidsComponents']);
+            } else if (this.props.components) {
+                return this.renderInternal(this.props.components);
+            } else {
+                return (
+                    <ComponentsContext.Consumer>
+                        {({components}) => this.renderInternal(components)}
+                    </ComponentsContext.Consumer>
+                );
+            }
+        }
+
+        renderInternal(components) {
+            const props = {};
+            names.forEach(items => {
+                [].concat(items).forEach(name => {
+                    props[name] = components[name];
+                });
+            });
+            return (
+                <WrappedComponent
+                    {...this.props}
+                    {...props}
+                    components={components}
+                />
+            );
+        }
+    }

package/hoc/connect.ts

@@ -0,0 +1,16 @@
+import {connect} from 'react-redux';
+
+export type Dispatch = (any) => any;
+
+/**
+ * Connect HOC
+ * Обертка над `connect()` из `react-redux` для упрощения импорта.
+ */
+export interface IConnectHocInput {
+}
+
+export interface IConnectHocOutput {
+    dispatch?: Dispatch,
+}
+
+export default connect;