@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/analytics/analytics.ts

@@ -0,0 +1,130 @@
+type Serializable = string | number | boolean | null | undefined | {
+  [K in string | number]?: Serializable
+}
+
+export interface AnalyticsPlugin {
+  serializeAdditionalInfo: boolean
+  trackEvent(
+    category: string,
+    action: string,
+    additionalData?: Record<string, unknown> | undefined
+  ): void
+  trackPageView(path: string): void
+}
+
+/**
+ * @name Analytics
+ */
+export class Analytics {
+  private _plugins: readonly AnalyticsPlugin[];
+
+  constructor() {
+    this._plugins = [];
+  }
+
+  config(plugins: readonly AnalyticsPlugin[]) {
+    this._plugins = plugins;
+  }
+
+  track(rawTrackingData: string, additionalData?: Record<string, unknown> | undefined) {
+    if (!rawTrackingData) {
+      return;
+    }
+
+    let splitIdx = rawTrackingData.indexOf(':');
+    if (splitIdx < 0) {
+      splitIdx = rawTrackingData.indexOf('_');
+    }
+    if (splitIdx < 0) {
+      splitIdx = rawTrackingData.length;
+    }
+
+    const category = rawTrackingData.substr(0, splitIdx);
+    const subcategory = rawTrackingData.substr(splitIdx + 1);
+
+    this.trackEvent(category, subcategory, additionalData);
+  }
+
+  trackPageView(path: string) {
+    this._plugins.forEach(plugin => {
+      plugin.trackPageView(path);
+    });
+  }
+
+  trackEvent(
+    category: string,
+    action: string,
+    additionalData?: Record<string, unknown> | undefined
+  ) {
+    const subaction = additionalData ? action + this._buildSuffix(additionalData) : null;
+    this._plugins.forEach(plugin => {
+      if (plugin.serializeAdditionalInfo) {
+        plugin.trackEvent(category, action);
+        if (subaction) {
+          plugin.trackEvent(category, subaction);
+        }
+      } else {
+        plugin.trackEvent(category, action, additionalData);
+      }
+    });
+  }
+
+  trackShortcutEvent(
+    category: string,
+    action: string,
+    additionalData?: Record<string, unknown> | undefined
+  ) {
+    this.trackEvent(category, action, additionalData);
+    this.trackEvent('ring-shortcut', `${category}$${action}`, additionalData);
+  }
+
+  trackEntityProperties(
+    entityName: string,
+    entity: Serializable,
+    propertiesNames: readonly string[],
+    additionalData?: Record<string, unknown> | undefined
+  ) {
+    for (let i = 0; i < propertiesNames.length; ++i) {
+      const keys = propertiesNames[i].split('.');
+      let value = entity;
+
+      if (!keys.length) {
+        continue;
+      }
+
+      for (let j = 0; j < keys.length; ++j) {
+        if (typeof value === 'object' && value != null && value.hasOwnProperty(keys[j])) {
+          value = value[keys[j]];
+        } else {
+          value = 'no-value';
+          break;
+        }
+      }
+
+      if (typeof value === 'string') {
+        value = value.toLowerCase().replace(/[._]+/g, '-');
+      }
+
+      const resultAction = `${keys.join('-')}__${value}`;
+      this.trackEvent(entityName, resultAction, additionalData);
+    }
+  }
+
+  private _buildSuffix(additionalData: Record<string, unknown> | undefined) {
+    if (!additionalData) {
+      return '';
+    }
+
+    let suffix = '';
+    let key;
+    for (key in additionalData) {
+      if (additionalData.hasOwnProperty(key)) {
+        suffix += `__${key}$${additionalData[key]}`;
+      }
+    }
+
+    return suffix;
+  }
+}
+
+export default new Analytics();

package/components/analytics/analytics__custom-plugin.ts

@@ -0,0 +1,151 @@
+import AnalyticsPluginUtils from './analytics__plugin-utils';
+import {AnalyticsPlugin} from './analytics';
+
+const DEFAULT_FLUSH_INTERVAL = 10000;
+const DEFAULT_FLUSH_MAX_PACK_SIZE = 100;
+
+export interface AnalyticsCustomPluginData {
+  category: string
+  action: string
+}
+
+export interface AnalyticsCustomPluginConfig {
+  send: (data: AnalyticsCustomPluginData[]) => void
+  isDevelopment?: boolean | undefined
+  flushInterval?: number | undefined
+  flushingAllowedChecker?: (() => boolean) | undefined
+  flushMaxPackSize?: number | undefined
+}
+
+export default class AnalyticsCustomPlugin implements AnalyticsPlugin {
+  _data: AnalyticsCustomPluginData[];
+  private _flush?: () => void;
+  private _isDevelopment?: boolean | undefined;
+  private _flushInterval?: number;
+  private _flushMaxPackSize?: number;
+  private _lastPagePath?: string;
+  private _hasSendSchedule?: boolean;
+  private _lastPageViewTime?: number;
+
+  constructor(
+    send: AnalyticsCustomPluginConfig['send'],
+    isDevelopment?: AnalyticsCustomPluginConfig['isDevelopment'],
+    flushInterval?: AnalyticsCustomPluginConfig['flushInterval'],
+    flushingAllowedChecker?: AnalyticsCustomPluginConfig['flushingAllowedChecker']
+  ) {
+    this._data = [];
+    this.config({
+      send,
+      isDevelopment,
+      flushInterval,
+      flushingAllowedChecker
+    });
+  }
+
+  /**
+   * @param config
+   * @property {function} config.send
+   * @property {boolean} config.isDevelopment
+   * @property {number} config.flushInterval
+   * @property {function} config.flushingAllowedChecker
+   * @property {number} config.flushMaxPackSize
+   */
+  config(config: AnalyticsCustomPluginConfig) {
+    const checkFlushingAllowed = typeof config.flushingAllowedChecker === 'function'
+      ? config.flushingAllowedChecker
+      : () => true;
+
+    this._flush = () => {
+      if (this._data.length > 0 && checkFlushingAllowed()) {
+        config.send(this._data);
+        this._data = [];
+      }
+    };
+
+    this._isDevelopment = config.isDevelopment;
+    this._flushInterval = config.flushInterval || DEFAULT_FLUSH_INTERVAL;
+    this._flushMaxPackSize = config.flushMaxPackSize || DEFAULT_FLUSH_MAX_PACK_SIZE;
+  }
+
+  trackEvent(category: string, action: string) {
+    this._processEvent(category, action);
+  }
+
+  trackPageView(path: string) {
+    if (this._lastPagePath === path) {
+      return;
+    }
+
+    this._trackPageViewAdditionalInfo(path);
+    this._processEvent('ring-page', path);
+    this._processEvent(
+      'ring-navigator_user-agent',
+      AnalyticsPluginUtils.getUserAgentPresentation()
+    );
+    this._processEvent(
+      'ring-navigator_platform',
+      AnalyticsPluginUtils.npeSaveLowerCase(navigator.platform)
+    );
+    this._processEvent(
+      'ring-navigator_lang',
+      AnalyticsPluginUtils.npeSaveLowerCase(navigator.language)
+    );
+    this._processEvent(
+      'ring-device-pixel-ratio',
+      AnalyticsPluginUtils.getDevicePixelRatioPresentation()
+    );
+    this._processEvent(
+      'ring-screen-width',
+      AnalyticsPluginUtils.getScreenWidthPresentation()
+    );
+  }
+
+  private _initSendSchedule() {
+    window.addEventListener('beforeunload', () => {
+      this._trackPageViewAdditionalInfo();
+      return this._flush?.();
+    });
+
+    if (this._flush != null) {
+      setInterval(this._flush, this._flushInterval);
+    }
+    this._hasSendSchedule = true;
+  }
+
+  private _processEvent(rawCategory: string, rawAction: string) {
+    if (!this._hasSendSchedule && this._flush) {
+      this._initSendSchedule();
+    }
+    const category = AnalyticsPluginUtils.reformatString(rawCategory, true);
+    const action = AnalyticsPluginUtils.reformatString(rawAction);
+    if (this._isDevelopment) {
+      console.log('TRACKING DATA = ', category, action); // eslint-disable-line no-console
+    }
+    this._addDataToFlushingPack({category, action});
+  }
+
+  private _trackPageViewAdditionalInfo(newPagePath?: string) {
+    const currentTime = (new Date()).getTime();
+    if (this._lastPagePath) {
+      if (this._lastPageViewTime) {
+        const duration = AnalyticsPluginUtils.
+          getPageViewDurationPresentation(currentTime - this._lastPageViewTime);
+        this._processEvent(`ring-pageview-duration_${this._lastPagePath}`, duration);
+      }
+    }
+    this._lastPageViewTime = currentTime;
+    this._lastPagePath = newPagePath;
+  }
+
+  private _addDataToFlushingPack(sendingData: AnalyticsCustomPluginData) {
+    this._data.push(sendingData);
+
+    if (this._flushMaxPackSize != null && this._data.length >= this._flushMaxPackSize) {
+      this._flush?.();
+    }
+  }
+
+  get serializeAdditionalInfo() {
+    return true;
+  }
+}

package/components/analytics/analytics__fus-plugin.ts

@@ -0,0 +1,144 @@
+import AnalyticsPluginUtils from './analytics__plugin-utils';
+import {AnalyticsPlugin} from './analytics';
+
+export interface AnalyticsFUSPluginGroup {
+  id: string
+  version: string
+  baseline: string
+}
+
+export interface AnalyticsFUSPluginConfig {
+  productId?: string | undefined
+  productBuild?: string | undefined
+  recorderVersion?: number | string | undefined
+  isDevelopment?: boolean | undefined
+  groups?: readonly AnalyticsFUSPluginGroup[] | undefined
+}
+
+interface FusraInitParams {
+  recorderCode?: string | undefined,
+  recorderVersion: number | string,
+  productCode?: string | undefined,
+  productBuild?: string | undefined,
+  internal: boolean,
+  eventCountDelay?: number | undefined,
+  reportingFrequency?: number | undefined,
+  groups?: readonly AnalyticsFUSPluginGroup[] | undefined,
+  useForSubdomains?: boolean | undefined
+}
+interface FusraEventParams {
+  groupId: string,
+  groupVersion?: number | string | undefined,
+  eventData?: Record<string, unknown> | undefined,
+  eventId: string
+}
+declare global {
+  interface Window {
+    fusra?: {
+      (method: 'init', params: FusraInitParams): void
+      (method: 'event', params: FusraEventParams): void
+      query?: ['init' | 'event', FusraInitParams | FusraEventParams][]
+    }
+  }
+}
+
+/**
+ * @name AnalyticsFUSPlugin
+ *
+ * @param * @param {{
+ *   productId: string,
+ *   productBuild: string,
+ *   recorderVersion: string?,
+ *   isDevelopment: boolean?,
+ *   groups: object[]?
+ * }} config
+ * @constructor
+ */
+export default class AnalyticsFUSPlugin implements AnalyticsPlugin {
+  private _recorderVersion?: number | string;
+  private _lastPagePath?: string;
+  private _groups: readonly AnalyticsFUSPluginGroup[] | undefined;
+  constructor({
+    productId,
+    productBuild,
+    recorderVersion = '1',
+    isDevelopment = false,
+    groups = []
+  }: AnalyticsFUSPluginConfig) {
+    if (!productId && !isDevelopment) {
+      return;
+    }
+    ((i, s, o: 'script', g, r: 'fusra') => {
+      i[r] = i[r] || function addArgumentsToQueueForWaitingTheScriptLoading(...args) {
+        const fn = i[r];
+        if (fn != null) {
+          (fn.query = fn.query || []).push(args);
+        }
+      };
+      const script = document.createElement(o);
+      script.async = true;
+      script.src = g;
+      const firstScript = document.getElementsByTagName(o)[0];
+      firstScript.parentNode?.insertBefore(script, firstScript);
+    })(window, document, 'script', '//resources.jetbrains.com/storage/fus/api/fus-reporting-api.js', 'fusra');
+    window.fusra?.('init', {
+      recorderCode: productId,
+      recorderVersion,
+      productCode: productId,
+      productBuild,
+      internal: isDevelopment,
+      groups,
+      useForSubdomains: true
+    });
+
+    this._recorderVersion = recorderVersion;
+    this._groups = groups;
+  }
+
+  trackEvent(category: string, action: string, additionalInfo?: Record<string, unknown>) {
+    this._processEvent(category, action, additionalInfo);
+  }
+
+  trackPageView(path: string) {
+    if (this._lastPagePath === path) {
+      return;
+    }
+
+    this._lastPagePath = path;
+
+    this._processEvent('ring.page.view', 'open', {
+      path,
+      browser: AnalyticsPluginUtils.getUserAgentPresentation(),
+      platform: AnalyticsPluginUtils.npeSaveLowerCase(navigator.platform),
+      lang: AnalyticsPluginUtils.npeSaveLowerCase(navigator.language),
+      ['page-view-duration']: AnalyticsPluginUtils.getPageViewDurationPresentation(),
+      ['pixel-ratio']: AnalyticsPluginUtils.getDevicePixelRatioPresentation(),
+      screen: AnalyticsPluginUtils.getScreenWidthPresentation()
+    });
+  }
+
+  get serializeAdditionalInfo() {
+    return false;
+  }
+
+  private _processEvent(
+    category: string,
+    action: string,
+    additionalInfo: Record<string, unknown> | undefined
+  ) {
+    const groupId = category.replace(/[-]/g, '.');
+
+    const group = (this._groups || []).filter(
+      currentGroup => currentGroup.id === groupId
+    )[0];
+
+    if (group && window.fusra) {
+      window.fusra('event', {
+        groupId,
+        groupVersion: group.version || this._recorderVersion,
+        eventId: action,
+        eventData: additionalInfo
+      });
+    }
+  }
+}

package/components/analytics/analytics__ga-plugin.ts

@@ -0,0 +1,61 @@
+import {AnalyticsPlugin} from './analytics';
+
+declare global {
+  interface Window {
+    'GoogleAnalyticsObject': string
+  }
+}
+
+/**
+ *
+ * @param {string?} gaId Google Analytics ID (should be undefined in development)
+ * @constructor
+ */
+export default class AnalyticsGAPlugin implements AnalyticsPlugin {
+  constructor(gaId?: string | undefined, isDevelopment?: boolean | undefined, domain?: string) {
+    if (!gaId && !isDevelopment) {
+      return;
+    }
+    ((i, s, o: 'script', g, r: 'ga') => {
+      i.GoogleAnalyticsObject = r;
+      i[r] = i[r] || function addArgumentsToQueueForWaitingTheScriptLoading(...args) {
+        (i[r].q = i[r].q || []).push(args);
+      };
+      i[r].l = Number(new Date());
+      const a = s.createElement(o);
+      const m = s.getElementsByTagName(o)[0];
+      a.async = true;
+      a.src = g;
+      m.parentNode?.insertBefore(a, m);
+    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+    /**
+     * UA-57284711-1 - ga key for development purpose
+     */
+    const key = gaId || 'UA-57284711-1';
+    /* global ga */
+    const gaCookieParams = domain ? {cookieDomain: domain} : {};
+    ga('create', key, (!gaId ? {cookieDomain: 'none'} : gaCookieParams));
+    ga('set', 'anonymizeIp', true);
+    ga('set', 'allowAdFeatures', false);
+  }
+
+  trackEvent(category: string, action: string) {
+    if (window.ga != null) {
+      const eventOptions = {
+        eventCategory: category,
+        eventAction: action
+      };
+      ga('send', 'event', eventOptions);
+    }
+  }
+
+  trackPageView(path: string) {
+    if (window.ga != null) {
+      ga('send', 'pageview', path);
+    }
+  }
+
+  get serializeAdditionalInfo() {
+    return true;
+  }
+}

package/components/analytics/analytics__plugin-utils.ts

@@ -0,0 +1,79 @@
+import sniffer from '../global/sniffer';
+
+const SECOND = 1000;
+const HOUR = 3600;
+
+const AnalyticsPluginUtils = {
+  /**
+   * Statistics server does not accept undefined values and strings containing certain symbols
+   * @param value
+   * @param isCategory
+   * @returns string, where forbidden symbols are replaced with '_'
+   */
+  reformatString: (value: unknown, isCategory?: boolean) => {
+    const str = String(value);
+    /**
+     * Category also cannot contain the '/' character (but an action can)
+     */
+    const regexp = isCategory ? /[.:;!@#^&*(){}\[\]?,%=+\\\/]+/g : /[.:;!@#^&*(){}\[\]?,%=+\\]+/g;
+    return str.replace(regexp, '_');
+  },
+
+  getPageViewDurationPresentation: (durationMs?: number) => {
+    if (durationMs == null) {
+      return 'less-than-1-sec';
+    }
+
+    const duration = durationMs / SECOND;
+    if (duration > HOUR) {
+      return 'more-than-hour';
+    }
+
+    /**
+     * rounded duration possible values:
+     * less than 1 second: [0, 1)
+     * less than 2 seconds: [1, 2)
+     * less than 4 seconds: [2, 4)
+     * less than 16 seconds: [4, 16)
+     * ....
+     * n - less than 2^(n + 1) seconds
+     */
+    let roundedDuration = Math.floor(Math.pow(2, Math.floor(Math.log2(duration)) + 1));
+    roundedDuration = (roundedDuration > 0) ? roundedDuration : 1;
+
+    return `less-than-${roundedDuration}-sec`;
+  },
+
+  getScreenWidthPresentation: () => {
+    /**
+     * Sizes were taken from bootstrap's grid (xs, sm, md, lg)
+     */
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    const sizes = [0, 768, 992, 1200];
+    for (let i = 1; i < sizes.length; ++i) {
+      if (window.innerWidth < sizes[i]) {
+        return `[${sizes[i - 1]}px;${sizes[i]}px)`;
+      }
+    }
+    return '[1200px;inf)';
+  },
+
+  npeSaveLowerCase: (val: string | null | undefined) => (val || 'unknown').toLowerCase(),
+
+  getUserAgentPresentation: () => {
+    const name = AnalyticsPluginUtils.npeSaveLowerCase(sniffer.browser.name || 'unknown');
+    const majorVersion = sniffer.browser.version[0];
+    const version = majorVersion || 'unknown';
+
+    return `${name}$${version}`;
+  },
+
+  getDevicePixelRatioPresentation: () => {
+    if (!window.devicePixelRatio || !window.devicePixelRatio.toFixed) {
+      return 'unknown';
+    }
+    return String(window.devicePixelRatio.toFixed(1));
+  }
+};
+
+export default AnalyticsPluginUtils;

package/components/analytics-ng/analytics-ng.examples.js

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import LinkNG from '@jetbrains/ring-ui/components/link-ng/link-ng';
+import LinkNG from '../link-ng/link-ng';
 
-import AnalyticsNG from '@jetbrains/ring-ui/components/analytics-ng/analytics-ng';
+import AnalyticsNG from './analytics-ng';
 
 export default {
   title: 'Legacy Angular/Analytics Ng',