@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/README.md

@@ -1,5 +1,5 @@
 # Ring UI — JetBrains Web UI components
-[![Storybook][storybook-img]][docsite] [![Build Status][ci-img]][ci-bt] [![Storybook][browserstack-img]][browserstack-build-page] [![Dependencies Status][deps-img]][deps] [![Dev Dependencies Status][dev-deps-img]][dev-deps] [![NPM version][npm-version-img]][npm-package] [![NPM downloads][npm-count-img]][npm-package]
+[![Storybook][storybook-img]][docsite] [![Build Status][ci-img]][ci-bt] [![Storybook][browserstack-img]][browserstack-build-page] [![NPM version][npm-version-img]][npm-package] [![NPM downloads][npm-count-img]][npm-package]
 
 [![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
 
@@ -84,7 +84,6 @@ See [CONTRIBUTING.md](./CONTRIBUTING.md)
 - [Living style guide][docsite]
 - [GitHub repository](https://github.com/JetBrains/ring-ui)
 - [Issues in YouTrack](https://youtrack.jetbrains.com/issues/RG)
-- [Code review in Upsource](https://upsource.jetbrains.com/ring-ui/view)
 - [Builds in TeamCity][ci-project]
 - [npm package][npm-package]
 
@@ -92,10 +91,6 @@ See [CONTRIBUTING.md](./CONTRIBUTING.md)
 [ci-project]: https://teamcity.jetbrains.com/project.html?projectId=JetBrainsUi_RingUi&tab=projectOverview
 [ci-bt]: https://teamcity.jetbrains.com/viewType.html?buildTypeId=JetBrainsUi_RingUi_GeminiTests&tab=buildTypeStatusDiv
 [ci-img]:  https://teamcity.jetbrains.com/app/rest/builds/buildType:JetBrainsUi_RingUi_GeminiTests/statusIcon.svg
-[deps]: https://david-dm.org/jetbrains/ring-ui
-[deps-img]: https://img.shields.io/david/jetbrains/ring-ui.svg
-[dev-deps]: https://david-dm.org/jetbrains/ring-ui?type=dev
-[dev-deps-img]: https://img.shields.io/david/dev/jetbrains/ring-ui.svg
 [npm-package]: https://www.npmjs.com/package/@jetbrains/ring-ui
 [npm-version-img]: https://img.shields.io/npm/v/@jetbrains/ring-ui.svg
 [npm-count-img]: https://img.shields.io/npm/dt/@jetbrains/ring-ui.svg

package/babel.config.js

@@ -7,7 +7,6 @@ module.exports = function config(api) {
     presets: [
       ['@jetbrains/babel-preset-jetbrains', {
         typeScript: true,
-        angular: true,
         useBuiltIns: 'usage',
         corejs: '3'
       }]

package/components/alert/alert.d.ts

@@ -108,6 +108,6 @@ export default class Alert extends PureComponent<AlertProps, State> {
      */
     private _getIcon;
     storeAlertRef: (node: HTMLDivElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export { default as Container } from './container';

package/components/alert/container.css

@@ -14,6 +14,9 @@
   flex-direction: column;
 
   pointer-events: none;
+
+  font-family: var(--ring-font-family);
+  font-size: var(--ring-font-size);
 }
 
 .alertInContainer {

package/components/alert-service/alert-service.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { AlertProps, AlertType } from '../alert/alert';
 export interface AlertItem extends Partial<Omit<AlertProps, 'children'>> {
     key: string | number;
@@ -12,7 +12,7 @@ declare class AlertService {
     showingAlerts: AlertItem[];
     containerElement: HTMLDivElement;
     _getShowingAlerts(): AlertItem[];
-    renderAlertContainer(alerts: readonly AlertItem[]): JSX.Element;
+    renderAlertContainer(alerts: readonly AlertItem[]): React.JSX.Element;
     /**
      * Renders alert container into virtual node to skip maintaining container
      */

package/components/analytics/analytics.d.ts

@@ -1,9 +1,12 @@
-type Serializable = string | number | boolean | null | undefined | {
+export type Serializable = string | number | boolean | null | undefined | {
     [K in string | number]?: Serializable;
 };
 export interface AnalyticsPlugin {
+    /**
+     * @deprecated
+     */
     serializeAdditionalInfo: boolean;
-    trackEvent(category: string, action: string, additionalData?: Record<string, unknown> | undefined): void;
+    trackEvent(category: string, action: string, additionalData?: Record<string, Serializable>): void;
     trackPageView(path: string): void;
 }
 /**
@@ -13,12 +16,23 @@ export declare class Analytics {
     private _plugins;
     constructor();
     config(plugins: readonly AnalyticsPlugin[]): void;
-    track(rawTrackingData: string, additionalData?: Record<string, unknown> | undefined): void;
+    /**
+     * @deprecated
+     */
+    track(rawTrackingData: string, additionalData: Record<string, Serializable>): void;
+    /**
+     * @deprecated
+     */
     trackPageView(path: string): void;
-    trackEvent(category: string, action: string, additionalData?: Record<string, unknown> | undefined): void;
-    trackShortcutEvent(category: string, action: string, additionalData?: Record<string, unknown> | undefined): void;
-    trackEntityProperties(entityName: string, entity: Serializable, propertiesNames: readonly string[], additionalData?: Record<string, unknown> | undefined): void;
-    private _buildSuffix;
+    trackEvent(category: string, action: string, additionalData?: Record<string, Serializable>): void;
+    /**
+     * @deprecated
+     */
+    trackShortcutEvent(category: string, action: string, additionalData: Record<string, Serializable>): void;
+    /**
+     * @deprecated
+     */
+    trackEntityProperties(entityName: string, entity: Serializable, propertiesNames: readonly string[], additionalData?: Record<string, Serializable>): void;
 }
 declare const _default: Analytics;
 export default _default;

package/components/analytics/analytics.js

@@ -1,3 +1,5 @@
+import deprecate from 'util-deprecate';
+const warnOnDeprecationOfAnalyticsMethod = (methodName) => deprecate(() => { }, `Method analytics::${methodName} is deprecated, use analytics::trackEvent instead`)();
 /**
  * @name Analytics
  */
@@ -9,10 +11,14 @@ export class Analytics {
     config(plugins) {
         this._plugins = plugins;
     }
+    /**
+     * @deprecated
+     */
     track(rawTrackingData, additionalData) {
         if (!rawTrackingData) {
             return;
         }
+        warnOnDeprecationOfAnalyticsMethod('track');
         let splitIdx = rawTrackingData.indexOf(':');
         if (splitIdx < 0) {
             splitIdx = rawTrackingData.indexOf('_');
@@ -24,30 +30,32 @@ export class Analytics {
         const subcategory = rawTrackingData.substr(splitIdx + 1);
         this.trackEvent(category, subcategory, additionalData);
     }
+    /**
+     * @deprecated
+     */
     trackPageView(path) {
+        warnOnDeprecationOfAnalyticsMethod('trackPageView');
         this._plugins.forEach(plugin => {
             plugin.trackPageView(path);
         });
     }
     trackEvent(category, action, additionalData) {
-        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);
-            }
+            plugin.trackEvent(category, action, additionalData);
         });
     }
+    /**
+     * @deprecated
+     */
     trackShortcutEvent(category, action, additionalData) {
+        warnOnDeprecationOfAnalyticsMethod('trackShortcutEvent');
         this.trackEvent(category, action, additionalData);
-        this.trackEvent('ring-shortcut', `${category}$${action}`, additionalData);
     }
+    /**
+     * @deprecated
+     */
     trackEntityProperties(entityName, entity, propertiesNames, additionalData) {
+        warnOnDeprecationOfAnalyticsMethod('trackEntityProperties');
         for (let i = 0; i < propertiesNames.length; ++i) {
             const keys = propertiesNames[i].split('.');
             let value = entity;
@@ -70,18 +78,5 @@ export class Analytics {
             this.trackEvent(entityName, resultAction, additionalData);
         }
     }
-    _buildSuffix(additionalData) {
-        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.d.ts

@@ -1,13 +1,14 @@
-import { AnalyticsPlugin } from './analytics';
+import { AnalyticsPlugin, Serializable } from './analytics';
 export interface AnalyticsCustomPluginData {
     category: string;
     action: string;
+    data?: Record<string, Serializable>;
+    timestamp: number;
 }
 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 {
@@ -16,24 +17,13 @@ export default class AnalyticsCustomPlugin implements AnalyticsPlugin {
     private _isDevelopment?;
     private _flushInterval?;
     private _flushMaxPackSize?;
-    private _lastPagePath?;
     private _hasSendSchedule?;
-    private _lastPageViewTime?;
-    constructor(send: AnalyticsCustomPluginConfig['send'], isDevelopment?: AnalyticsCustomPluginConfig['isDevelopment'], flushInterval?: AnalyticsCustomPluginConfig['flushInterval'], flushingAllowedChecker?: AnalyticsCustomPluginConfig['flushingAllowedChecker']);
-    /**
-     * @param config
-     * @property {function} config.send
-     * @property {boolean} config.isDevelopment
-     * @property {number} config.flushInterval
-     * @property {function} config.flushingAllowedChecker
-     * @property {number} config.flushMaxPackSize
-     */
+    constructor(send: AnalyticsCustomPluginConfig['send'], isDevelopment?: AnalyticsCustomPluginConfig['isDevelopment'], flushInterval?: AnalyticsCustomPluginConfig['flushInterval']);
     config(config: AnalyticsCustomPluginConfig): void;
-    trackEvent(category: string, action: string): void;
-    trackPageView(path: string): void;
+    trackEvent(category: string, action: string, additionalData?: Record<string, Serializable>): void;
+    trackPageView(path: string, data?: Record<string, Serializable>): void;
     private _initSendSchedule;
     private _processEvent;
-    private _trackPageViewAdditionalInfo;
     private _addDataToFlushingPack;
     get serializeAdditionalInfo(): boolean;
 }

package/components/analytics/analytics__custom-plugin.js

@@ -1,4 +1,3 @@
-import AnalyticsPluginUtils from './analytics__plugin-utils';
 const DEFAULT_FLUSH_INTERVAL = 10000;
 const DEFAULT_FLUSH_MAX_PACK_SIZE = 100;
 export default class AnalyticsCustomPlugin {
@@ -7,32 +6,18 @@ export default class AnalyticsCustomPlugin {
     _isDevelopment;
     _flushInterval;
     _flushMaxPackSize;
-    _lastPagePath;
     _hasSendSchedule;
-    _lastPageViewTime;
-    constructor(send, isDevelopment, flushInterval, flushingAllowedChecker) {
+    constructor(send, isDevelopment, flushInterval) {
         this._data = [];
         this.config({
             send,
             isDevelopment,
-            flushInterval,
-            flushingAllowedChecker
+            flushInterval
         });
     }
-    /**
-     * @param config
-     * @property {function} config.send
-     * @property {boolean} config.isDevelopment
-     * @property {number} config.flushInterval
-     * @property {function} config.flushingAllowedChecker
-     * @property {number} config.flushMaxPackSize
-     */
     config(config) {
-        const checkFlushingAllowed = typeof config.flushingAllowedChecker === 'function'
-            ? config.flushingAllowedChecker
-            : () => true;
         this._flush = () => {
-            if (this._data.length > 0 && checkFlushingAllowed()) {
+            if (this._data.length > 0) {
                 config.send(this._data);
                 this._data = [];
             }
@@ -41,53 +26,28 @@ export default class AnalyticsCustomPlugin {
         this._flushInterval = config.flushInterval || DEFAULT_FLUSH_INTERVAL;
         this._flushMaxPackSize = config.flushMaxPackSize || DEFAULT_FLUSH_MAX_PACK_SIZE;
     }
-    trackEvent(category, action) {
-        this._processEvent(category, action);
+    trackEvent(category, action, additionalData) {
+        this._processEvent(category, action, additionalData);
     }
-    trackPageView(path) {
-        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());
+    trackPageView(path, data) {
+        this._processEvent('page', 'view', data);
     }
     _initSendSchedule() {
-        window.addEventListener('beforeunload', () => {
-            this._trackPageViewAdditionalInfo();
-            return this._flush?.();
-        });
+        window.addEventListener('beforeunload', () => this._flush?.());
         if (this._flush != null) {
             setInterval(this._flush, this._flushInterval);
         }
         this._hasSendSchedule = true;
     }
-    _processEvent(rawCategory, rawAction) {
+    _processEvent(category, action, data) {
         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 });
-    }
-    _trackPageViewAdditionalInfo(newPagePath) {
-        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);
-            }
+            console.log('TRACKING DATA = ', category, action, data); // eslint-disable-line no-console
         }
-        this._lastPageViewTime = currentTime;
-        this._lastPagePath = newPagePath;
+        const baseSendingData = { category, action, timestamp: Date.now() };
+        this._addDataToFlushingPack(data ? { ...baseSendingData, data } : baseSendingData);
     }
     _addDataToFlushingPack(sendingData) {
         this._data.push(sendingData);

package/components/analytics/analytics__fus-plugin.d.ts

@@ -4,13 +4,6 @@ export interface AnalyticsFUSPluginGroup {
     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;
@@ -38,25 +31,22 @@ declare global {
     }
 }
 /**
+ * @deprecated
  * @name AnalyticsFUSPlugin
- *
- * @param * @param {{
- *   productId: string,
- *   productBuild: string,
- *   recorderVersion: string?,
- *   isDevelopment: boolean?,
- *   groups: object[]?
- * }} config
- * @constructor
  */
-export default class AnalyticsFUSPlugin implements AnalyticsPlugin {
-    private _recorderVersion?;
-    private _lastPagePath?;
-    private _groups;
-    constructor({ productId, productBuild, recorderVersion, isDevelopment, groups }: AnalyticsFUSPluginConfig);
-    trackEvent(category: string, action: string, additionalInfo?: Record<string, unknown>): void;
-    trackPageView(path: string): void;
+declare class AnalyticsFUSPlugin implements AnalyticsPlugin {
+    /**
+     * @deprecated
+     */
+    trackEvent(): void;
+    /**
+     * @deprecated
+     */
+    trackPageView(): void;
+    /**
+     * @deprecated
+     */
     get serializeAdditionalInfo(): boolean;
-    private _processEvent;
 }
-export {};
+declare const _default: typeof AnalyticsFUSPlugin;
+export default _default;

package/components/analytics/analytics__fus-plugin.js

@@ -1,80 +1,22 @@
-import AnalyticsPluginUtils from './analytics__plugin-utils';
+import deprecate from 'util-deprecate';
 /**
+ * @deprecated
  * @name AnalyticsFUSPlugin
- *
- * @param * @param {{
- *   productId: string,
- *   productBuild: string,
- *   recorderVersion: string?,
- *   isDevelopment: boolean?,
- *   groups: object[]?
- * }} config
- * @constructor
  */
-export default class AnalyticsFUSPlugin {
-    _recorderVersion;
-    _lastPagePath;
-    _groups;
-    constructor({ productId, productBuild, recorderVersion = '1', isDevelopment = false, groups = [] }) {
-        if (!productId && !isDevelopment) {
-            return;
-        }
-        ((i, s, o, g, r) => {
-            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, action, additionalInfo) {
-        this._processEvent(category, action, additionalInfo);
-    }
-    trackPageView(path) {
-        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()
-        });
-    }
+class AnalyticsFUSPlugin {
+    /**
+     * @deprecated
+     */
+    trackEvent() { }
+    /**
+     * @deprecated
+     */
+    trackPageView() { }
+    /**
+     * @deprecated
+     */
     get serializeAdditionalInfo() {
         return false;
     }
-    _processEvent(category, action, additionalInfo) {
-        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
-            });
-        }
-    }
 }
+export default deprecate(AnalyticsFUSPlugin, 'AnalyticsFUSPlugin is deprecated, use AnalyticsCustomPlugin instead');

package/components/analytics/analytics__ga-plugin.d.ts

@@ -1,17 +1,27 @@
-import { AnalyticsPlugin } from './analytics';
+import { AnalyticsPlugin, Serializable } from './analytics';
 declare global {
     interface Window {
         'GoogleAnalyticsObject': string;
     }
 }
 /**
- *
+ * @deprecated
  * @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, cookielessUserIdentifier?: string | undefined);
-    trackEvent(category: string, action: string): void;
+    /**
+     * @deprecated
+     */
+    trackEvent(rawCategory: string, rawAction: string, data?: Record<string, Serializable>): void;
+    /**
+     * @deprecated
+     */
     trackPageView(path: string): void;
+    /**
+     * @deprecated
+     */
     get serializeAdditionalInfo(): boolean;
+    private _buildSuffix;
 }

package/components/analytics/analytics__ga-plugin.js

@@ -1,5 +1,6 @@
+import AnalyticsPluginUtils from './analytics__plugin-utils';
 /**
- *
+ * @deprecated
  * @param {string?} gaId Google Analytics ID (should be undefined in development)
  * @constructor
  */
@@ -39,21 +40,50 @@ export default class AnalyticsGAPlugin {
         ga('set', 'location', domain || '/');
         ga('set', 'allowAdFeatures', false);
     }
-    trackEvent(category, action) {
+    /**
+     * @deprecated
+     */
+    trackEvent(rawCategory, rawAction, data) {
         if (window.ga != null) {
-            const eventOptions = {
+            const category = AnalyticsPluginUtils.reformatString(rawCategory, true);
+            const action = AnalyticsPluginUtils.reformatString(rawAction);
+            ga('send', 'event', {
                 eventCategory: category,
                 eventAction: action
-            };
-            ga('send', 'event', eventOptions);
+            });
+            if (data) {
+                ga('send', 'event', {
+                    eventCategory: category,
+                    eventAction: action + this._buildSuffix(data)
+                });
+            }
         }
     }
+    /**
+     * @deprecated
+     */
     trackPageView(path) {
         if (window.ga != null) {
             ga('send', 'pageview', path);
         }
     }
+    /**
+     * @deprecated
+     */
     get serializeAdditionalInfo() {
         return true;
     }
+    _buildSuffix(additionalData) {
+        if (!additionalData) {
+            return '';
+        }
+        let suffix = '';
+        let key;
+        for (key in additionalData) {
+            if (additionalData.hasOwnProperty(key)) {
+                suffix += `__${key}$${additionalData[key]}`;
+            }
+        }
+        return suffix;
+    }
 }

package/components/analytics/analytics__plugin-utils.d.ts

@@ -1,15 +1,31 @@
 declare const AnalyticsPluginUtils: {
     /**
+     * @deprecated
      * 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) => string;
+    /**
+     * @deprecated
+     */
     getPageViewDurationPresentation: (durationMs?: number) => string;
+    /**
+     * @deprecated
+     */
     getScreenWidthPresentation: () => string;
+    /**
+     * @deprecated
+     */
     npeSaveLowerCase: (val: string | null | undefined) => string;
+    /**
+     * @deprecated
+     */
     getUserAgentPresentation: () => string;
+    /**
+     * @deprecated
+     */
     getDevicePixelRatioPresentation: () => string;
 };
 export default AnalyticsPluginUtils;