@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [5.0.0]
+
+### BREAKING CHANGES
+- The codebase has migrated to TypeScript
+
+
 ## [4.1.0]
 
 ### Pre-built version

package/README.md

@@ -37,17 +37,6 @@ export const Demo = () => {
 
 The bundle size will depend on the amount of components you imported.
 
-### Generating app
-
-1. Install Yeoman and Ring UI generator: `npm install -g yo@next-4 @jetbrains/generator-ring-ui`
-2. Go to the root directory of your project (create one if necessary), run `yo @jetbrains/ring-ui` and enter the name of the project. Then run `npm install` to install all the necessary npm dependencies.
-3. Your project is ready to be developed. The following commands are available:
-  - `npm start` to run a local development server
-  - `npm test` to launch karma tests
-  - `npm run lint` to lint your code
-  - `npm run build` to build a production bundle
-  - `npm run create-component` to create a new component template with styles and tests
-
 ### Building Ring UI from source via Webpack
 
 In case you have complex build, and you want to compile RingUI sources together with your sources
@@ -86,18 +75,6 @@ in a same build process, you can use the following configuration:
    module.exports = webpackConfig;
    ```
 
-### Yeoman scaffolding
-
-1. Install Yeoman and Ring UI generator: `npm install -g yo @jetbrains/generator-ring-ui`
-2. Go to the root directory of your project (create one if necessary) and run `yo @jetbrains/ring-ui`. After you enter the name of the project all the necessary npm dependencies will be installed.
-3. Your project is ready to be developed. The following commands are available:
-  - `npm start` to run a local development server
-  - `npm test` to launch karma tests
-  - `npm run lint` to lint your code
-  - `npm run build` to build a production bundle
-  - `npm run create-component` to create a new component template with styles and tests
-
-
 ## Contributing
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md)

package/babel.config.js

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

package/components/alert/alert.d.ts

@@ -0,0 +1,110 @@
+import React, { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export declare const ANIMATION_TIME = 500;
+/**
+ * @name Alert
+ */
+/**
+ * List of available alert types.
+ * @enum {string}
+ */
+export declare enum AlertType {
+    ERROR = "error",
+    MESSAGE = "message",
+    SUCCESS = "success",
+    WARNING = "warning",
+    LOADING = "loading"
+}
+export interface AlertProps {
+    timeout: number;
+    onCloseRequest: ((event?: React.MouseEvent<HTMLElement>) => void);
+    onClose: (() => void);
+    isShaking: boolean;
+    isClosing: boolean;
+    inline: boolean;
+    showWithAnimation: boolean;
+    closeable: boolean;
+    type: AlertType;
+    children?: ReactNode;
+    className?: string | null | undefined;
+    captionClassName?: string | null | undefined;
+    closeButtonClassName?: string | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+interface State {
+    height: number | null;
+}
+/**
+ * @constructor
+ * @name Alert
+ * @extends {ReactComponent}
+ */
+/**
+ * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
+ */
+export default class Alert extends PureComponent<AlertProps, State> {
+    static propTypes: {
+        timeout: PropTypes.Requireable<number>;
+        /**
+         * Fires when alert starts closing if timeout is out or user clicks "Close" button
+         */
+        onCloseRequest: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        isShaking: PropTypes.Requireable<boolean>;
+        isClosing: PropTypes.Requireable<boolean>;
+        /**
+         * Whether an alert is rendered inside an **Alerts** container
+         * or standalone.
+         */
+        inline: PropTypes.Requireable<boolean>;
+        showWithAnimation: PropTypes.Requireable<boolean>;
+        closeable: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<AlertType>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        captionClassName: PropTypes.Requireable<string>;
+        closeButtonClassName: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    /** @override */
+    static defaultProps: {
+        closeable: boolean;
+        showWithAnimation: boolean;
+        type: AlertType;
+        inline: boolean;
+        isClosing: boolean;
+        isShaking: boolean;
+        timeout: number;
+        onClose: () => void;
+        onCloseRequest: () => void;
+    };
+    state: {
+        height: null;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    node?: HTMLDivElement | null;
+    hideTimeout?: number;
+    static Type: typeof AlertType;
+    closeRequest: (event: React.MouseEvent<HTMLElement>) => void;
+    startCloseAnimation: () => void;
+    private _close;
+    /**
+     * @param {SyntheticEvent} evt
+     * @private
+     */
+    private _handleCaptionsLinksClick;
+    /**
+     * @private
+     */
+    private _getCaption;
+    /**
+     * @private
+     * @return {XML|string}
+     */
+    private _getIcon;
+    storeAlertRef: (node: HTMLDivElement | null) => void;
+    render(): JSX.Element;
+}
+export { default as Container } from './container';

package/components/alert/alert.jsx

@@ -0,0 +1,185 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import exceptionIcon from '@jetbrains/icons/exception';
+import checkmarkIcon from '@jetbrains/icons/checkmark';
+import warningIcon from '@jetbrains/icons/warning';
+import closeIcon from '@jetbrains/icons/close';
+import Icon, { Color } from '../icon/icon';
+import Loader from '../loader-inline/loader-inline';
+import { getRect } from '../global/dom';
+import dataTests from '../global/data-tests';
+import styles from './alert.css';
+export const ANIMATION_TIME = 500;
+/**
+ * @name Alert
+ */
+/**
+ * List of available alert types.
+ * @enum {string}
+ */
+export var AlertType;
+(function (AlertType) {
+    AlertType["ERROR"] = "error";
+    AlertType["MESSAGE"] = "message";
+    AlertType["SUCCESS"] = "success";
+    AlertType["WARNING"] = "warning";
+    AlertType["LOADING"] = "loading";
+})(AlertType || (AlertType = {}));
+/**
+ * Lookup table of alert type to icon modifier.
+ * @type {Object.<AlertType, string>}
+ */
+const TypeToIcon = {
+    [AlertType.ERROR]: exceptionIcon,
+    [AlertType.SUCCESS]: checkmarkIcon,
+    [AlertType.WARNING]: warningIcon
+};
+/**
+ * Lookup table of alert type to icon color.
+ * @type {Object.<AlertType, Icon.Color>}
+ */
+const TypeToIconColor = {
+    [AlertType.ERROR]: Color.RED,
+    [AlertType.SUCCESS]: Color.GREEN,
+    [AlertType.WARNING]: Color.WHITE
+};
+/**
+ * @constructor
+ * @name Alert
+ * @extends {ReactComponent}
+ */
+/**
+ * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
+ */
+export default class Alert extends PureComponent {
+    static propTypes = {
+        timeout: PropTypes.number,
+        /**
+         * Fires when alert starts closing if timeout is out or user clicks "Close" button
+         */
+        onCloseRequest: PropTypes.func,
+        onClose: PropTypes.func,
+        isShaking: PropTypes.bool,
+        isClosing: PropTypes.bool,
+        /**
+         * Whether an alert is rendered inside an **Alerts** container
+         * or standalone.
+         */
+        inline: PropTypes.bool,
+        showWithAnimation: PropTypes.bool,
+        closeable: PropTypes.bool,
+        type: PropTypes.oneOf(Object.values(AlertType)),
+        children: PropTypes.node,
+        className: PropTypes.string,
+        captionClassName: PropTypes.string,
+        closeButtonClassName: PropTypes.string,
+        'data-test': PropTypes.string
+    };
+    /** @override */
+    static defaultProps = {
+        closeable: true,
+        showWithAnimation: true,
+        type: AlertType.MESSAGE,
+        inline: true,
+        isClosing: false,
+        isShaking: false,
+        timeout: 0,
+        onClose: () => { },
+        onCloseRequest: () => { }
+    };
+    state = {
+        height: null
+    };
+    componentDidMount() {
+        if (this.props.timeout > 0) {
+            this.hideTimeout = window.setTimeout(this.closeRequest, this.props.timeout);
+        }
+    }
+    componentDidUpdate() {
+        if (this.props.isClosing) {
+            this._close();
+        }
+    }
+    componentWillUnmount() {
+        clearTimeout(this.hideTimeout);
+    }
+    node;
+    hideTimeout;
+    static Type = AlertType;
+    closeRequest = (event) => {
+        this.startCloseAnimation();
+        return this.props.onCloseRequest(event);
+    };
+    startCloseAnimation = () => {
+        const height = getRect(this.node).height;
+        this.setState({ height });
+    };
+    _close() {
+        this.startCloseAnimation();
+        setTimeout(() => {
+            this.props.onClose();
+        }, ANIMATION_TIME);
+    }
+    /**
+     * @param {SyntheticEvent} evt
+     * @private
+     */
+    _handleCaptionsLinksClick = (evt) => {
+        if (evt.target instanceof Element && evt.target.matches('a')) {
+            this.closeRequest(evt);
+        }
+    };
+    /**
+     * @private
+     */
+    _getCaption() {
+        return (<span className={classNames(styles.caption, this.props.captionClassName, {
+                [styles.withCloseButton]: this.props.closeable
+            })} onClick={this._handleCaptionsLinksClick} 
+        // We only process clicks on `a` elements, see above
+        role="presentation">
+        {this.props.children}
+      </span>);
+    }
+    /**
+     * @private
+     * @return {XML|string}
+     */
+    _getIcon() {
+        const glyph = TypeToIcon[this.props.type];
+        if (glyph) {
+            return (<Icon glyph={glyph} className={styles.icon} color={TypeToIconColor[this.props.type] || Color.DEFAULT}/>);
+        }
+        else if (this.props.type === AlertType.LOADING) {
+            return (<Loader className={styles.loader} theme={Loader.Theme.DARK}/>);
+        }
+        return '';
+    }
+    storeAlertRef = (node) => {
+        this.node = node;
+    };
+    render() {
+        const { type, inline, isClosing, isShaking, closeButtonClassName, showWithAnimation, className, 'data-test': dataTest } = this.props;
+        const classes = classNames(className, {
+            [styles.alert]: true,
+            [styles.animationOpen]: showWithAnimation,
+            [styles.error]: type === 'error',
+            [styles.alertInline]: inline,
+            [styles.animationClosing]: isClosing,
+            [styles.animationShaking]: isShaking
+        });
+        const height = this.state.height;
+        const style = height ? { marginBottom: -height } : undefined;
+        return (<div className={classes} data-test={dataTests('alert', dataTest)} data-test-type={type} style={style} ref={this.storeAlertRef}>
+        {this._getIcon()}
+        {this._getCaption()}
+        {this.props.closeable
+                ? (<button type="button" className={classNames(styles.close, closeButtonClassName)} data-test="alert-close" aria-label="close alert" onClick={this.closeRequest}>
+                <Icon glyph={closeIcon}/>
+              </button>)
+                : ''}
+      </div>);
+    }
+}
+export { default as Container } from './container';

package/components/alert/container.d.ts

@@ -0,0 +1,15 @@
+import React, { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Alert Container
+ * @description Displays a stack of alerts on top of the page.
+ * @extends {PureComponent}
+ */
+export declare type AlertContainerProps = HTMLAttributes<HTMLDivElement>;
+export default class Alerts extends PureComponent<AlertContainerProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): React.ReactPortal | null;
+}

package/components/alert/container.jsx

@@ -0,0 +1,30 @@
+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';
+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}>
+        {Children.map(children, child => {
+                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.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { render } from 'react-dom';
+import getUID from '../global/get-uid';
+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 />;
+        }
+        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;
+        }
+        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 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;