@jetbrains/ring-ui 4.1.11 → 5.0.0-beta.10

package/components/alert/container.js

@@ -1,47 +1,30 @@
-import React, {Children, cloneElement, PureComponent} from 'react';
-import {createPortal} from 'react-dom';
+import React, { Children, cloneElement, PureComponent, isValidElement } from 'react';
+import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-
 import styles from './container.css';
-
-/**
- * @name Alert Container
- * @description Displays a stack of alerts on top of the page.
- * @extends {PureComponent}
- */
-
 export default class Alerts extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string
-  };
-
-  render() {
-    const {children, className, ...restProps} = this.props;
-    const classes = classNames(styles.alertContainer, className);
-    const show = Children.count(children) > 0;
-
-    if (!show) {
-      return null;
-    }
-
-    return createPortal(
-      <div
-        data-test="alert-container"
-        className={classes}
-        aria-live="polite"
-        {...restProps}
-      >
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const classes = classNames(styles.alertContainer, className);
+        const show = Children.count(children) > 0;
+        if (!show) {
+            return null;
+        }
+        return createPortal(<div data-test="alert-container" className={classes} aria-live="polite" {...restProps}>
         {Children.map(children, child => {
-          const alertClassNames = classNames(styles.alertInContainer, child.props.className);
-
-          return cloneElement(child, {
-            className: alertClassNames
-          });
-        })}
-      </div>,
-      document.body
-    );
-  }
+                if (!isValidElement(child)) {
+                    return child;
+                }
+                const alertClassNames = classNames(styles.alertInContainer, child.props.className);
+                return cloneElement(child, {
+                    className: alertClassNames
+                });
+            })}
+      </div>, document.body);
+    }
 }

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { AlertProps, AlertType } from '../alert/alert';
+export interface AlertItem extends Partial<Omit<AlertProps, 'children'>> {
+    key: string | number;
+    message: ReactNode;
+}
+/**
+ * @name Alert Service
+ */
+declare class AlertService {
+    defaultTimeout: number;
+    showingAlerts: AlertItem[];
+    containerElement: HTMLDivElement;
+    _getShowingAlerts(): AlertItem[];
+    renderAlertContainer(alerts: readonly AlertItem[]): JSX.Element;
+    /**
+     * Renders alert container into virtual node to skip maintaining container
+     */
+    renderAlerts(): void;
+    findSameAlert(message: ReactNode, type: AlertType | undefined): AlertItem;
+    startAlertClosing(alert: AlertItem): void;
+    remove(key: string | number | null | undefined): void;
+    removeWithoutAnimation(key: string | number): void;
+    stopShakingWhenAnimationDone(shakingAlert: AlertItem): void;
+    addAlert(message: ReactNode, type?: AlertType | undefined, timeout?: number, options?: Partial<AlertItem>): string | number;
+    setDefaultTimeout(timeout: number): void;
+    error(message: ReactNode, timeout?: number): string | number;
+    message(message: ReactNode, timeout?: number): string | number;
+    warning(message: ReactNode, timeout?: number): string | number;
+    successMessage(message: ReactNode, timeout?: number): string | number;
+    loadingMessage(message: ReactNode, timeout?: number): string | number;
+}
+declare const alertService: AlertService;
+export default alertService;

package/components/alert-service/alert-service.examples.css

@@ -1,16 +1,18 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value icon from "../button/button.css";
 @value animation-duration: 300ms;
 @value animation-easing: ease-out;
 
 .customAlert {
+  color: var(--ring-white-text-color);
   background: var(--ring-main-color);
 }
 
-.closeButton,
-.closeButton:hover {
-  color: var(--ring-dark-text-color);
+.closeButton .icon,
+.closeButton:hover .icon {
+  color: var(--ring-white-text-color);
 }
 
 .closeButton:hover {

package/components/alert-service/alert-service.js

@@ -1,137 +1,107 @@
 import React from 'react';
-import {render} from 'react-dom';
-
+import { render } from 'react-dom';
 import getUID from '../global/get-uid';
-
-import Alert, {ANIMATION_TIME, Container as AlertContainer} from '../alert/alert';
-
+import Alert, { ANIMATION_TIME, Container as AlertContainer } from '../alert/alert';
 /**
  * @name Alert Service
  */
-
 class AlertService {
-  defaultTimeout = 0;
-  // This alerts are stored in inverse order (last shown is first in array)
-  showingAlerts = [];
-  containerElement = document.createElement('div');
-
-  _getShowingAlerts() {
-    return [...this.showingAlerts];
-  }
-
-  renderAlertContainer(alerts) {
-    if (alerts.length === 0) {
-      return <span/>;
+    defaultTimeout = 0;
+    // This alerts are stored in inverse order (last shown is first in array)
+    showingAlerts = [];
+    containerElement = document.createElement('div');
+    _getShowingAlerts() {
+        return [...this.showingAlerts];
     }
-
-    return (
-      <AlertContainer>
+    renderAlertContainer(alerts) {
+        if (alerts.length === 0) {
+            return <span />;
+        }
+        return (<AlertContainer>
         {alerts.map(alert => {
-          const {message, key, ...rest} = alert;
-          return (
-            <Alert
-              key={key}
-              {...rest}
-            >{message}</Alert>
-          );
-        })}
-      </AlertContainer>
-    );
-  }
-
-  /**
-   * Renders alert container into virtual node to skip maintaining container
-   */
-  renderAlerts() {
-    render(this.renderAlertContainer(this.showingAlerts), this.containerElement);
-  }
-
-  findSameAlert(message, type) {
-    return this.showingAlerts.filter(it => it.type === type && it.message === message)[0];
-  }
-
-  startAlertClosing(alert) {
-    alert.isClosing = true;
-    this.renderAlerts();
-  }
-
-  remove(key) {
-    const alertToClose = this.showingAlerts.filter(alert => alert.key === key)[0];
-    if (!alertToClose) {
-      return;
+                const { message, key, ...rest } = alert;
+                return (<Alert key={key} {...rest}>{message}</Alert>);
+            })}
+      </AlertContainer>);
     }
-    this.startAlertClosing(alertToClose);
-  }
-
-  removeWithoutAnimation(key) {
-    this.showingAlerts = this.showingAlerts.filter(alert => alert.key !== key);
-    this.renderAlerts();
-  }
-
-  stopShakingWhenAnimationDone(shakingAlert) {
-    setTimeout(() => {
-      shakingAlert.showWithAnimation = false;
-      shakingAlert.isShaking = false;
-      this.renderAlerts();
-    }, ANIMATION_TIME);
-  }
-
-  addAlert(message, type, timeout = this.defaultTimeout, options = {}) {
-    const {onCloseRequest, onClose, ...restOptions} = options;
-    const sameAlert = this.findSameAlert(message, type);
-    if (sameAlert) {
-      sameAlert.isShaking = true;
-      this.renderAlerts();
-      this.stopShakingWhenAnimationDone(sameAlert);
-      return sameAlert.key;
+    /**
+     * Renders alert container into virtual node to skip maintaining container
+     */
+    renderAlerts() {
+        render(this.renderAlertContainer(this.showingAlerts), this.containerElement);
+    }
+    findSameAlert(message, type) {
+        return this.showingAlerts.filter(it => it.type === type && it.message === message)[0];
+    }
+    startAlertClosing(alert) {
+        alert.isClosing = true;
+        this.renderAlerts();
+    }
+    remove(key) {
+        const alertToClose = this.showingAlerts.filter(alert => alert.key === key)[0];
+        if (!alertToClose) {
+            return;
+        }
+        this.startAlertClosing(alertToClose);
+    }
+    removeWithoutAnimation(key) {
+        this.showingAlerts = this.showingAlerts.filter(alert => alert.key !== key);
+        this.renderAlerts();
+    }
+    stopShakingWhenAnimationDone(shakingAlert) {
+        setTimeout(() => {
+            shakingAlert.showWithAnimation = false;
+            shakingAlert.isShaking = false;
+            this.renderAlerts();
+        }, ANIMATION_TIME);
+    }
+    addAlert(message, type, timeout = this.defaultTimeout, options = {}) {
+        const { onCloseRequest, onClose, ...restOptions } = options;
+        const sameAlert = this.findSameAlert(message, type);
+        if (sameAlert) {
+            sameAlert.isShaking = true;
+            this.renderAlerts();
+            this.stopShakingWhenAnimationDone(sameAlert);
+            return sameAlert.key;
+        }
+        const alert = {
+            key: getUID('alert-service-'),
+            message,
+            type,
+            timeout,
+            isClosing: false,
+            onCloseRequest: () => {
+                onCloseRequest && onCloseRequest();
+                this.startAlertClosing(alert);
+            },
+            onClose: () => {
+                onClose && onClose();
+                this.removeWithoutAnimation(alert.key);
+            },
+            ...restOptions
+        };
+        this.showingAlerts = [alert, ...this.showingAlerts];
+        this.renderAlerts();
+        return alert.key;
+    }
+    setDefaultTimeout(timeout) {
+        this.defaultTimeout = timeout;
+    }
+    error(message, timeout) {
+        return this.addAlert(message, Alert.Type.ERROR, timeout);
+    }
+    message(message, timeout) {
+        return this.addAlert(message, Alert.Type.MESSAGE, timeout);
+    }
+    warning(message, timeout) {
+        return this.addAlert(message, Alert.Type.WARNING, timeout);
+    }
+    successMessage(message, timeout) {
+        return this.addAlert(message, Alert.Type.SUCCESS, timeout);
+    }
+    loadingMessage(message, timeout) {
+        return this.addAlert(message, Alert.Type.LOADING, timeout);
     }
-
-    const alert = {
-      key: getUID('alert-service-'),
-      message,
-      type,
-      timeout,
-      isClosing: false,
-      onCloseRequest: () => {
-        onCloseRequest && onCloseRequest();
-        this.startAlertClosing(alert);
-      },
-      onClose: () => {
-        onClose && onClose();
-        this.removeWithoutAnimation(alert.key);
-      },
-      ...restOptions
-    };
-
-    this.showingAlerts = [alert, ...this.showingAlerts];
-    this.renderAlerts();
-    return alert.key;
-  }
-
-  setDefaultTimeout(timeout) {
-    this.defaultTimeout = timeout;
-  }
-
-  error(message, timeout) {
-    return this.addAlert(message, Alert.Type.ERROR, timeout);
-  }
-
-  message(message, timeout) {
-    return this.addAlert(message, Alert.Type.MESSAGE, timeout);
-  }
-
-  warning(message, timeout) {
-    return this.addAlert(message, Alert.Type.WARNING, timeout);
-  }
-
-  successMessage(message, timeout) {
-    return this.addAlert(message, Alert.Type.SUCCESS, timeout);
-  }
-
-  loadingMessage(message, timeout) {
-    return this.addAlert(message, Alert.Type.LOADING, timeout);
-  }
 }
-
 const alertService = new AlertService();
 export default alertService;

package/components/analytics/analytics.d.ts

@@ -0,0 +1,24 @@
+declare 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 declare class Analytics {
+    private _plugins;
+    constructor();
+    config(plugins: readonly AnalyticsPlugin[]): void;
+    track(rawTrackingData: string, additionalData?: Record<string, unknown> | undefined): void;
+    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;
+}
+declare const _default: Analytics;
+export default _default;

package/components/analytics/analytics.js

@@ -1,101 +1,87 @@
 /**
  * @name Analytics
  */
-class Analytics {
-  constructor() {
-    this._plugins = [];
-  }
-
-  config(plugins) {
-    this._plugins = plugins;
-  }
-
-  track(rawTrackingData, /* optional */ additionalData) {
-    if (!rawTrackingData) {
-      return;
+export class Analytics {
+    _plugins;
+    constructor() {
+        this._plugins = [];
     }
-
-    let splitIdx = rawTrackingData.indexOf(':');
-    if (splitIdx < 0) {
-      splitIdx = rawTrackingData.indexOf('_');
+    config(plugins) {
+        this._plugins = plugins;
     }
-    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) {
-    this._plugins.forEach(plugin => {
-      plugin.trackPageView(path);
-    });
-  }
-
-  trackEvent(category, action, /* optional */ 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);
+    track(rawTrackingData, additionalData) {
+        if (!rawTrackingData) {
+            return;
+        }
+        let splitIdx = rawTrackingData.indexOf(':');
+        if (splitIdx < 0) {
+            splitIdx = rawTrackingData.indexOf('_');
         }
-      } else {
-        plugin.trackEvent(category, action, additionalData);
-      }
-    });
-  }
-
-  trackShortcutEvent(category, action, /* optional */ additionalData) {
-    this.trackEvent(category, action, additionalData);
-    this.trackEvent('ring-shortcut', `${category}$${action}`, additionalData);
-  }
-
-  trackEntityProperties(entityName, entity, propertiesNames, /* optional */ additionalData) {
-    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 (value.hasOwnProperty(keys[j])) {
-          value = value[keys[j]];
-        } else {
-          value = 'no-value';
-          break;
+        if (splitIdx < 0) {
+            splitIdx = rawTrackingData.length;
         }
-      }
-
-      if (typeof value === 'string') {
-        value = value.toLowerCase().replace(/[._]+/g, '-');
-      }
-
-      const resultAction = `${keys.join('-')}__${value}`;
-      this.trackEvent(entityName, resultAction, additionalData);
+        const category = rawTrackingData.substr(0, splitIdx);
+        const subcategory = rawTrackingData.substr(splitIdx + 1);
+        this.trackEvent(category, subcategory, additionalData);
+    }
+    trackPageView(path) {
+        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);
+            }
+        });
     }
-  }
-
-  _buildSuffix(additionalData) {
-    if (!additionalData) {
-      return '';
+    trackShortcutEvent(category, action, additionalData) {
+        this.trackEvent(category, action, additionalData);
+        this.trackEvent('ring-shortcut', `${category}$${action}`, additionalData);
     }
-
-    let suffix = '';
-    let key;
-    for (key in additionalData) {
-      if (additionalData.hasOwnProperty(key)) {
-        suffix += `__${key}$${additionalData[key]}`;
-      }
+    trackEntityProperties(entityName, entity, propertiesNames, additionalData) {
+        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);
+        }
+    }
+    _buildSuffix(additionalData) {
+        if (!additionalData) {
+            return '';
+        }
+        let suffix = '';
+        let key;
+        for (key in additionalData) {
+            if (additionalData.hasOwnProperty(key)) {
+                suffix += `__${key}$${additionalData[key]}`;
+            }
+        }
+        return suffix;
     }
-
-    return suffix;
-  }
 }
-
 export default new Analytics();

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

@@ -0,0 +1,39 @@
+import { AnalyticsPlugin } from './analytics';
+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?;
+    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
+     */
+    config(config: AnalyticsCustomPluginConfig): void;
+    trackEvent(category: string, action: string): void;
+    trackPageView(path: string): void;
+    private _initSendSchedule;
+    private _processEvent;
+    private _trackPageViewAdditionalInfo;
+    private _addDataToFlushingPack;
+    get serializeAdditionalInfo(): boolean;
+}