@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/README.md

@@ -6,7 +6,7 @@
 This collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.
 
 ## Try now
-* Try the [codesandbox](https://codesandbox.io/p/devbox/ring-ui-6-0-demo-l5v5fk), based on `create-react-app` tooling, to see and try the UI components
+* Try the [codesandbox](https://codesandbox.io/p/sandbox/ring-ui-sandbox-6-0-demo-qk5vgv), based on `create-react-app` tooling, to see and try the UI components
 * Check out [list of examples](https://jetbrains.github.io/ring-ui/master/index.html) for each component
 
 ## Installation

package/components/alert/alert.css

@@ -0,0 +1,146 @@
+@import "../global/variables.css";
+
+@value link from "../link/link.css";
+@value animation-duration: 300ms;
+@value animation-easing: ease-out;
+
+.alert {
+  position: relative;
+
+  display: flex;
+  align-items: baseline;
+
+  box-sizing: border-box;
+  min-height: calc(var(--ring-unit) * 5);
+  margin: var(--ring-unit) auto;
+  padding: 0 calc(var(--ring-unit) * 2);
+
+  transition:
+    transform animation-duration animation-easing,
+    margin-bottom animation-duration animation-easing,
+    opacity animation-duration animation-easing;
+  white-space: nowrap;
+  pointer-events: auto;
+
+  border-radius: var(--ring-border-radius);
+  background-color: var(--ring-popup-background-color);
+  box-shadow: var(--ring-popup-shadow);
+
+  font-size: var(--ring-font-size);
+  line-height: calc(var(--ring-unit) * 5);
+}
+
+.alertInline {
+  margin: var(--ring-unit);
+}
+
+.error {
+  word-wrap: break-word;
+
+  color: var(--ring-icon-error-color);
+}
+
+.icon {
+  margin-right: var(--ring-unit);
+}
+
+.caption {
+  overflow: hidden;
+
+  max-width: calc(100% - calc(var(--ring-unit) * 5));
+
+  margin: 12px 0;
+
+  white-space: normal;
+
+  color: var(--ring-active-text-color);
+
+  line-height: 20px;
+
+  & :global(.ring-link),
+  /* This link styles are used in link.css */
+  & .link {
+    color: var(--ring-main-color);
+  }
+
+  &.withCloseButton {
+    margin-right: calc(var(--ring-unit) * 5);
+  }
+}
+
+.badge {
+  margin-left: var(--ring-unit);
+
+  vertical-align: baseline;
+}
+
+.loader {
+  top: 2px;
+
+  margin-right: var(--ring-unit);
+}
+
+.close.close {
+  position: absolute;
+  top: 2px;
+  right: 0;
+
+  margin: calc(var(--ring-unit) / 2);
+  padding: var(--ring-unit);
+
+  font-size: 0;
+  line-height: 0;
+}
+
+@keyframes show {
+  from {
+    transform: translateY(100%);
+
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+
+    opacity: 1;
+  }
+}
+
+@keyframes shaking {
+  10%,
+  90% {
+    transform: translateX(-1px);
+  }
+
+  20%,
+  80% {
+    transform: translateX(2px);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translateX(-4px);
+  }
+
+  40%,
+  60% {
+    transform: translateX(4px);
+  }
+}
+
+.animationOpen {
+  animation-name: show;
+  animation-duration: animation-duration;
+}
+
+.animationClosing {
+  z-index: var(--ring-invisible-element-z-index);
+
+  opacity: 0;
+}
+
+.animationShaking {
+  animation-name: shaking;
+  animation-duration: 500ms;
+}

package/components/alert/alert.d.ts

@@ -0,0 +1,113 @@
+import React, { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import Theme from '../global/theme';
+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 {
+    theme: Theme;
+    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: {
+        theme: Theme;
+        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(): React.JSX.Element;
+}
+export { default as Container } from './container';

package/components/alert/alert.js

@@ -0,0 +1,186 @@
+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 Button from '../button/button';
+import Theme, { ThemeProvider } from '../global/theme';
+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 = {
+        theme: Theme.DARK,
+        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}/>);
+        }
+        return '';
+    }
+    storeAlertRef = (node) => {
+        this.node = node;
+    };
+    render() {
+        const { type, inline, isClosing, isShaking, closeButtonClassName, showWithAnimation, className, 'data-test': dataTest, theme } = 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 (<ThemeProvider theme={theme} className={classes} data-test={dataTests('alert', dataTest)} data-test-type={type} style={style} ref={this.storeAlertRef}>
+        {this._getIcon()}
+        {this._getCaption()}
+        {this.props.closeable
+                ? (<Button icon={closeIcon} className={classNames(styles.close, closeButtonClassName)} data-test="alert-close" aria-label="close alert" onClick={this.closeRequest}/>)
+                : ''}
+      </ThemeProvider>);
+    }
+}
+export { default as Container } from './container';

package/components/alert/container.css

@@ -0,0 +1,26 @@
+@import "../global/variables.css";
+
+.alertContainer {
+  position: fixed;
+  z-index: var(--ring-alert-z-index);
+  right: calc(var(--ring-unit) * 2);
+  bottom: calc(var(--ring-unit));
+
+  display: flex;
+  overflow: visible;
+  align-items: flex-end;
+  flex-direction: column;
+
+  pointer-events: none;
+
+  font-family: var(--ring-font-family);
+  font-size: var(--ring-font-size);
+}
+
+.alertInContainer {
+  composes: alert from "./alert.css";
+
+  min-width: calc(var(--ring-unit) * 30);
+  max-width: calc(var(--ring-unit) * 50);
+  margin-top: 0;
+}

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

@@ -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,36 @@
+import React, { ReactNode, Ref } from 'react';
+import Alert, { AlertProps, AlertType } from '../alert/alert';
+export interface AlertItem extends Partial<Omit<AlertProps, 'children'>> {
+    key: string | number;
+    message: ReactNode;
+    ref?: Ref<Alert>;
+}
+/**
+ * @name Alert Service
+ */
+declare class AlertService {
+    defaultTimeout: number;
+    showingAlerts: AlertItem[];
+    containerElement: HTMLDivElement;
+    reactRoot: import("react-dom/client").Root;
+    _getShowingAlerts(): AlertItem[];
+    renderAlertContainer(alerts: readonly AlertItem[]): React.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.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+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');
+    reactRoot = createRoot(this.containerElement);
+    _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() {
+        this.reactRoot.render(this.renderAlertContainer(this.showingAlerts));
+    }
+    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/alert-service/alert-service.stories.css

@@ -0,0 +1,17 @@
+@import "../global/variables.css";
+
+@value icon from "../button/button.css";
+
+.customAlert {
+  color: var(--ring-white-text-color);
+  background: var(--ring-main-color);
+}
+
+.closeButton .icon,
+.closeButton:hover .icon {
+  color: var(--ring-white-text-color);
+}
+
+.closeButton:hover {
+  opacity: 0.8;
+}