@jetbrains/ring-ui 4.1.6 → 5.0.0-beta.3

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.js

@@ -1,57 +1,49 @@
-import React, {PureComponent} from 'react';
+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 from '../icon/icon';
+import Icon, { Color } from '../icon/icon';
 import Loader from '../loader-inline/loader-inline';
-import {getRect} from '../global/dom';
+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}
  */
-const Type = {
-  ERROR: 'error',
-  MESSAGE: 'message',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  LOADING: 'loading'
-};
-
+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.<Type, string>}
+ * @type {Object.<AlertType, string>}
  */
 const TypeToIcon = {
-  [Type.ERROR]: exceptionIcon,
-  [Type.SUCCESS]: checkmarkIcon,
-  [Type.WARNING]: warningIcon
+    [AlertType.ERROR]: exceptionIcon,
+    [AlertType.SUCCESS]: checkmarkIcon,
+    [AlertType.WARNING]: warningIcon
 };
-
 /**
  * Lookup table of alert type to icon color.
- * @type {Object.<Type, Icon.Color>}
+ * @type {Object.<AlertType, Icon.Color>}
  */
 const TypeToIconColor = {
-  [Type.ERROR]: Icon.Color.RED,
-  [Type.SUCCESS]: Icon.Color.GREEN,
-  [Type.WARNING]: Icon.Color.WHITE
+    [AlertType.ERROR]: Color.RED,
+    [AlertType.SUCCESS]: Color.GREEN,
+    [AlertType.WARNING]: Color.WHITE
 };
-
 /**
  * @constructor
  * @name Alert
@@ -61,182 +53,133 @@ const TypeToIconColor = {
  * **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,
+    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);
+    }
     /**
-     * Fires when alert starts closing if timeout is out or user clicks "Close" button
+     * @param {SyntheticEvent} evt
+     * @private
      */
-    onCloseRequest: PropTypes.func,
-    onClose: PropTypes.func,
-    isShaking: PropTypes.bool,
-    isClosing: PropTypes.bool,
+    _handleCaptionsLinksClick = (evt) => {
+        if (evt.target instanceof Element && evt.target.matches('a')) {
+            this.closeRequest(evt);
+        }
+    };
     /**
-     * Whether an alert is rendered inside an **Alerts** container
-     * or standalone.
+     * @private
      */
-    inline: PropTypes.bool,
-    showWithAnimation: PropTypes.bool,
-    closeable: PropTypes.bool,
-    type: PropTypes.oneOf(Object.values(Type)),
-
-    children: PropTypes.node,
-    className: PropTypes.string,
-    captionClassName: PropTypes.string,
-    closeButtonClassName: PropTypes.string,
-    'data-test': PropTypes.string
-  };
-
-  /** @override */
-  static defaultProps = {
-    closeable: true,
-    showWithAnimation: true,
-    type: Type.MESSAGE,
-    inline: true,
-    isClosing: false,
-    isShaking: false,
-    timeout: 0,
-    onClose: () => {},
-    onCloseRequest: () => {}
-  };
-
-  state = {
-    height: null
-  };
-
-  componentDidMount() {
-    if (this.props.timeout > 0) {
-      this.hideTimeout = setTimeout(this.closeRequest, this.props.timeout);
-    }
-  }
-
-  componentDidUpdate() {
-    if (this.props.isClosing) {
-      this._close();
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.hideTimeout);
-  }
-
-  static Type = Type;
-
-  closeRequest = (...args) => {
-    this.startCloseAnimation();
-    return this.props.onCloseRequest(...args);
-  };
-
-  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.matches('a')) {
-      this.closeRequest(evt);
-    }
-  };
-
-  /**
-   * @private
-   */
-  _getCaption() {
-    return (
-      <span
-        className={classNames(styles.caption, this.props.captionClassName, {
-          [styles.withCloseButton]: this.props.closeable
-        })}
-        onClick={this._handleCaptionsLinksClick}
+    _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"
-      >
+        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] || Icon.Color.DEFAULT}
-        />
-      );
-    } else if (this.props.type === Type.LOADING) {
-      return (
-        <Loader className={styles.loader} theme={Loader.Theme.DARK}/>
-      );
+      </span>);
     }
-
-    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 style = this.state.height ? {marginBottom: -this.state.height} : null;
-
-    return (
-      <div
-        className={classes}
-        data-test={dataTests('alert', dataTest)}
-        data-test-type={type}
-        style={style}
-        ref={this.storeAlertRef}
-      >
+    /**
+     * @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}
-              >
+        {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>
-    );
-  }
+              </button>)
+                : ''}
+      </div>);
+    }
 }
-
-export {default as Container} from './container';
+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.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;