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

package/src/components/MetaComponent.ts

@@ -0,0 +1,226 @@
+/**
+ * Мета информация о моделе
+ */
+export interface Model {
+    primaryKey?: string,
+    attributes?: (string | ModelAttribute)[],
+}
+
+export interface ModelAttribute {
+    type?: 'autoTime' | 'boolean' | 'dateTime' | 'date' | 'double' | 'email' | 'enum' | 'file' | 'files' | 'html'
+        | 'integer' | 'money' | 'password' | 'phone' | 'primaryKey' | 'size' | 'string' | 'text' | 'time' | string,
+    jsType?: 'boolean' | 'string' | 'string[]' | 'number' | 'number[]' | string,
+    attribute?: string,
+    label?: string,
+    hint?: string,
+    isRequired?: boolean,
+    isSortable?: boolean,
+    field?: string | any,
+    fieldProps?: Record<string, unknown>,
+    searchField?: string | any,
+    searchFieldProps?: Record<string, unknown>,
+    formatter?: string | any,
+    formatterProps?: Record<string, unknown>,
+    defaultValue?: any,
+    fromStringConverter?: (value: string, type: string, item: any) => any,
+    toStringConverter?: (value: any, type: string, item: any) => string | null,
+}
+
+/**
+ * Meta Component
+ * Компонент для работы с мета-данными моделей и типами приложения (appType)
+ */
+export default class MetaComponent {
+    defaultPrimaryKey: string;
+
+    defaultAttributeType: string;
+
+    models: any;
+
+    types: any;
+
+    _components: any;
+
+    constructor(components) {
+        this._components = components;
+        this.models = {};
+        this.types = this._defaultTypes();
+
+        this.defaultPrimaryKey = 'id';
+        this.defaultAttributeType = 'string';
+    }
+
+    setModel(name: string, item: Model) {
+        name = this.normalizeName(name);
+        item = this.normalizeModel(item);
+
+        this.models[name] = item;
+    }
+
+    getModel(name: string) {
+        return this.models[name] || null;
+    }
+
+    setType(name, config) {
+        this.types[name] = config;
+    }
+
+    getType(name: string) {
+        return this.types[name] || null;
+    }
+
+    normalizeName(name) {
+        return name.replace(/\\/g, '.').replace(/^\./, '');
+    }
+
+    normalizeModel(inputModel: Model, defaultModel: Model | any = null) {
+        if (!inputModel && !defaultModel) {
+            return null;
+        }
+
+        inputModel = inputModel || {};
+        defaultModel = defaultModel ? this.normalizeModel(defaultModel) : {};
+
+        const defaults = {};
+        (defaultModel.attributes || []).forEach(item => {
+            if (typeof item !== 'string') {
+                defaults[item.attribute] = item;
+            }
+        });
+
+        // Normalize attributes config
+        const attributes = [].concat(inputModel.attributes || []).map(item => {
+            if (typeof item === 'string') {
+                const parts = item.split(':');
+
+                item = {
+                    attribute: parts[0],
+                    type: parts[1] || null,
+                    label: parts[2] || null,
+                };
+            }
+
+            return {
+                type: this.defaultAttributeType,
+                attribute: null,
+                label: null,
+                hint: null,
+                isRequired: false,
+                isSortable: false,
+                ...defaults[item.attribute],
+                ...this.getType(item.type || this.defaultAttributeType),
+                ...item,
+            };
+        });
+
+        // Add non-exists default attributes
+        const attributeNames = attributes.map(item => item.attribute);
+        (defaultModel.attributes || []).forEach(item => {
+            if (typeof item !== 'string' && !attributeNames.includes(item.attribute)) {
+                attributes.push(item);
+            }
+        });
+
+        return {
+            primaryKey: inputModel.primaryKey || defaultModel.primaryKey || this.defaultPrimaryKey,
+            attributes,
+        };
+    }
+
+    _defaultTypes() {
+        return {
+            autoTime: {
+                jsType: 'string',
+                field: 'DateTimeField',
+                formatter: 'DateTimeFormatter',
+            },
+            boolean: {
+                jsType: 'boolean',
+                field: 'CheckboxField',
+                formatter: 'BooleanFormatter',
+            },
+            dateTime: {
+                jsType: 'string',
+                field: 'DateTimeField',
+                formatter: 'DateTimeFormatter',
+            },
+            date: {
+                jsType: 'string',
+                field: 'DateField',
+                formatter: 'DateFormatter',
+            },
+            double: {
+                jsType: 'number',
+                field: 'NumberField',
+            },
+            email: {
+                jsType: 'string',
+                field: 'InputField',
+                fieldProps: {
+                    type: 'email',
+                },
+            },
+            enum: {
+                jsType: 'string',
+                field: 'DropDownField',
+                formatter: 'EnumFormatter',
+            },
+            file: {
+                jsType: 'number',
+                field: 'FileField',
+                // TODO formatter: 'FileFormatter',
+            },
+            files: {
+                jsType: 'number[]',
+                field: 'FileField',
+                fieldProps: {
+                    multiple: true,
+                },
+                // TODO formatter: 'FileFormatter',
+            },
+            html: {
+                jsType: 'string',
+                field: 'HtmlField',
+                // TODO formatter: 'HtmlFormatter',
+            },
+            integer: {
+                jsType: 'number',
+                field: 'NumberField',
+            },
+            password: {
+                jsType: 'string',
+                field: 'PasswordField',
+            },
+            phone: {
+                jsType: 'string',
+                field: 'InputField',
+                fieldProps: {
+                    type: 'phone',
+                },
+            },
+            primaryKey: {
+                jsType: 'number',
+                field: 'InputField',
+                fieldProps: {
+                    type: 'hidden',
+                },
+                searchFieldProps: {
+                    type: 'text',
+                },
+            },
+            string: {
+                jsType: 'string',
+                field: 'InputField',
+            },
+            text: {
+                jsType: 'string',
+                field: 'TextField',
+            },
+            time: {
+                jsType: 'string',
+                field: 'TimeField',
+                // TODO formatter: 'TimeFormatter',
+            },
+        };
+    }
+}

package/src/components/MetricsComponent.tsx

@@ -0,0 +1,187 @@
+import _upperFirst from 'lodash-es/upperFirst';
+import _isEmpty from 'lodash-es/isEmpty';
+import {isInitialized} from '../reducers/auth';
+
+declare global {
+    interface Window {
+        ym: any;
+        dataLayer: any;
+        VK: any;
+        fbq: any;
+        _fbq: any;
+    }
+}
+
+type ConfigType = {
+    counters?: {
+        yandexMetrika?: any,
+        googleTagManager?: any,
+        googleAnalytics?: any,
+        vkRetargeting?: any,
+        facebookAnalytics?: any,
+    },
+    enable?: boolean
+}
+
+export default class MetricsComponent {
+    _components: any;
+
+    _prevUrl: string;
+
+    _isMetricsInitialized: boolean;
+
+    _config: any;
+
+    _enable: boolean;
+
+    _yandexMetrika: any;
+
+    unsubscribe: () => void;
+
+    unlisten: () => void;
+
+    constructor(components, config: ConfigType = {}) {
+        this._components = components;
+        this._isMetricsInitialized = false;
+        this._config = config;
+        this._enable = config.enable === undefined
+            ? process.env.APP_ENV === 'prod'
+            : !!config.enable;
+
+        if (!process.env.IS_SSR) {
+            this._init();
+        }
+    }
+
+    _init() {
+        this.unsubscribe = this._components.store.subscribe(() => {
+            const {store} = this._components;
+            const state = store.getState();
+
+            if (!isInitialized(state)) {
+                return;
+            }
+
+            this.unsubscribe();
+            this.setCounters(this._config.counters);
+
+            if (this._enable && this._yandexMetrika) {
+                this.unlisten = store.history.listen(({pathname, search, hash}) => {
+                    this._changePageViewHandler(pathname + search + hash);
+                });
+            }
+        });
+    }
+
+    setCounters(values) {
+        if (!this._enable || _isEmpty(values) || this._isMetricsInitialized) {
+            return;
+        }
+
+        Object.entries(values).forEach(([counterName, counterValue]) => {
+            if (counterValue) {
+                this._isMetricsInitialized = true;
+                this['_' + counterName] = counterValue;
+                const setter = '_set' + _upperFirst(counterName);
+                this[setter](counterValue);
+            }
+        });
+    }
+
+    _setYandexMetrika(value) {
+        (function (m, e, t, r, i, k, a) {
+            m[i] = m[i] || function (...args) {
+                (m[i].a = m[i].a || []).push(args);
+            };
+            m[i].l = Date.now();
+            k = e.createElement(t);
+            a = e.getElementsByTagName(t)[0];
+            k.async = 1;
+            k.src = r;
+            a.parentNode.insertBefore(k, a);
+        }(window, document, 'script', 'https://mc.yandex.ru/metrika/tag.js', 'ym'));
+
+        window.ym(value, 'init', {
+            defer: true,
+            clickmap: true,
+            trackLinks: true,
+            accurateTrackBounce: true,
+            webvisor: true,
+        });
+    }
+
+    _setGoogleTagManager(value) {
+        (function (w, d, s, l, i) {
+            w[l] = w[l] || [];
+            w[l].push({
+                'gtm.start': new Date().getTime(), event: 'gtm.js',
+            });
+            const f = d.getElementsByTagName(s)[0];
+            const j = d.createElement(s) as HTMLScriptElement;
+            const dl = l !== 'dataLayer' ? '&l=' + l : '';
+            j.async = true;
+            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+            f.parentNode.insertBefore(j, f);
+        }(window, document, 'script', 'dataLayer', value));
+    }
+
+    _setGoogleAnalytics(value) {
+        const googleLoad = document.createElement('script');
+        googleLoad.async = true;
+        googleLoad.src = `https://www.googletagmanager.com/gtag/js?id=${value}`;
+        document.body.appendChild(googleLoad);
+
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag(...args: any[]): any;
+        function gtag(...args) {
+            window.dataLayer.push(args);
+        }
+
+        gtag('js', new Date());
+        gtag('config', value);
+    }
+
+    _setVkRetargeting(value) {
+        const t = document.createElement('script');
+        t.type = 'text/javascript';
+        t.async = !0;
+        t.src = 'https://vk.com/js/api/openapi.js?168';
+        t.onload = function () {
+            window.VK.Retargeting.Init(value);
+            window.VK.Retargeting.Hit();
+        };
+        document.head.appendChild(t);
+    }
+
+    _setFacebookAnalytics(value) {
+        (function (f, b, e, v, n, t, s) {
+            if (f.fbq) { return; }
+            n = function (...args) {
+                // eslint-disable-next-line no-unused-expressions
+                n.callMethod ? n.callMethod(...args) : n.queue.push(args);
+            };
+            f.fbq = n;
+            if (!f._fbq) { f._fbq = n; }
+            n.push = n;
+            n.loaded = !0;
+            n.version = '2.0';
+            n.queue = [];
+            t = b.createElement(e);
+            t.async = !0;
+            t.src = v;
+            s = b.getElementsByTagName(e)[0];
+            s.parentNode.insertBefore(t, s);
+        }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js'));
+
+        window.fbq('init', value);
+        window.fbq('track', 'PageView');
+    }
+
+    _changePageViewHandler(url) {
+        if (this._prevUrl !== url) {
+            window.ym(this._yandexMetrika, 'hit', url);
+            this._prevUrl = url;
+        }
+    }
+}

package/src/components/ResourceComponent.ts

@@ -0,0 +1,169 @@
+import * as queryString from 'qs';
+import _isArray from 'lodash-es/isArray';
+
+declare global {
+    interface Window {
+        grecaptcha: {
+            ready: (...args: any[]) => void,
+            execute: (...args: any[]) => Promise<string>
+        };
+    }
+}
+/**
+ * Resource Component
+ * Компонент для подгрузки внешних API: Google Maps, Yandex Maps, Twitter, ...
+ */
+export default class ResourceComponent {
+    _callbacks: any;
+
+    _components: any;
+
+    googleApiKey: string;
+
+    googleCaptchaSiteKey: string;
+
+    language: string;
+
+    static RESOURCE_GOOGLE_MAP_API = '//maps.googleapis.com/maps/api/js';
+
+    static RESOURCE_YANDEX_MAP_API = 'https://api-maps.yandex.ru/2.1/';
+
+    static RESOURCE_TWITTER_WIDGET = 'https://platform.twitter.com/widgets.js';
+
+    static RESOURCE_GEETEST_API = '//static.geetest.com/static/tools/gt.js';
+
+    static RESOURCE_GOOGLE_CAPTCHA = 'https://www.google.com/recaptcha/api.js';
+
+    constructor(components, config) {
+        this.googleApiKey = config.googleApiKey || '';
+        this.googleCaptchaSiteKey = config.googleCaptchaSiteKey || '';
+        this.language = config.language || '';
+        this._callbacks = {};
+        this._components = components;
+    }
+
+    loadGoogleCaptcha() {
+        if (window.grecaptcha) {
+            return Promise.resolve(window.grecaptcha);
+        }
+
+        return this.loadScript(
+            ResourceComponent.RESOURCE_GOOGLE_CAPTCHA,
+            {render: this.googleCaptchaSiteKey},
+            () => window.grecaptcha,
+        );
+    }
+
+    loadGoogleMapApi() {
+        const locale = this._components.locale;
+        // @ts-ignore
+        if (window.google && window.google.maps) {
+            // @ts-ignore
+            return Promise.resolve(window.google.maps);
+        }
+        return this.loadScript(
+            ResourceComponent.RESOURCE_GOOGLE_MAP_API,
+            {
+                libraries: 'places,geometry',
+                key: this.googleApiKey,
+                language: this.language || locale.language,
+            },
+            // @ts-ignore
+            () => window.google.maps,
+        );
+    }
+
+    loadYandexMap() {
+        const locale = this._components.locale;
+        // @ts-ignore
+        if (window.ymaps) {
+            return new Promise(resolve =>
+                // @ts-ignore
+                window.ymaps.ready(() => resolve(window.ymaps)));
+        }
+        return this.loadScript(
+            ResourceComponent.RESOURCE_YANDEX_MAP_API,
+            {
+                lang: this.language || locale.language,
+            },
+            // @ts-ignore
+            () => new Promise(resolve => window.ymaps.ready(() => resolve(window.ymaps))),
+        );
+    }
+
+    loadTwitterWidget() {
+        // @ts-ignore
+        if (window.twttr) {
+            // @ts-ignore
+            return Promise.resolve(window.twttr);
+        }
+        return this.loadScript(
+            ResourceComponent.RESOURCE_TWITTER_WIDGET,
+            {},
+            // @ts-ignore
+            () => new Promise(resolve => window.twttr.ready(() => resolve(window.twttr))),
+        );
+    }
+
+    loadGeetest() {
+        // @ts-ignore
+        if (window.initGeetest) {
+            // @ts-ignore
+            return Promise.resolve(window.initGeetest);
+        }
+        return this.loadScript(
+            ResourceComponent.RESOURCE_GEETEST_API + '?_t=' + new Date().getTime(),
+            {},
+            // @ts-ignore
+            () => window.initGeetest,
+        );
+    }
+
+    loadScript(url, params, firstResolver) {
+        if (this._callbacks[url] === true) {
+            return Promise.resolve(firstResolver());
+        }
+        if (_isArray(this._callbacks[url])) {
+            return new Promise(resolve => {
+                this._callbacks[url].push(resolve);
+            });
+        }
+        this._callbacks[url] = [];
+        // Append script to page
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.async = true;
+            script.onload = () => {
+                setTimeout(() => {
+                    Promise.resolve(firstResolver())
+                        .then(result => {
+                            // Resolve current
+                            resolve(result);
+                            // Resolve queue promises after current
+                            const callbacks = this._callbacks[url];
+                            this._callbacks[url] = true;
+                            callbacks.forEach(callback => callback(result));
+                        })
+                        .catch(reject);
+                });
+            };
+            script.src = url + (params ? '?' + queryString.stringify(params) : '');
+            document.body.appendChild(script);
+        });
+    }
+
+    wait(condition, timeout = 5000) {
+        const start = Date.now();
+        const checker = (resolve, reject) => {
+            const result = condition();
+            if (result) {
+                resolve(result);
+            } else if (start + timeout > Date.now()) {
+                reject();
+            } else {
+                setTimeout(() => checker(resolve, reject), 500);
+            }
+        };
+        return new Promise(checker);
+    }
+}

package/src/components/SocialComponent.ts

@@ -0,0 +1,45 @@
+import _isFunction from 'lodash-es/isFunction';
+
+/**
+ * Social Component
+ * Провайдер для социальных сетей. Обеспечивает вызов окна соц сети для oauth авторизации
+ */
+export default class SocialComponent {
+    _components: any;
+
+    _initializing: any;
+
+    providers: any;
+
+    constructor(components, config) {
+        this.providers = config.providers || {};
+        this._initializing = {};
+        this._components = components;
+    }
+
+    init() {
+        Object.keys(this.providers).forEach(name => {
+            if (_isFunction(this.providers[name])) {
+                this.providers[name] = {className: this.providers[name]};
+            }
+
+            const ProviderClass = this.providers[name].className;
+            delete this.providers[name].className;
+            if (!ProviderClass) {
+                throw new Error('Not found class for social provider: ' + name);
+            }
+
+            this.providers[name] = new ProviderClass(this._components, this.providers[name]);
+        });
+        Object.keys(this.providers).forEach(name => {
+            this._initializing[name] = this.providers[name].init();
+        });
+    }
+
+    start(socialName) {
+        if (!this._initializing[socialName]) {
+            return Promise.reject();
+        }
+        return this._initializing[socialName].then(() => this.providers[socialName].start());
+    }
+}