@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

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/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.examples.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Link from '../link/link';
+import Button from '../button/button';
+
+import {AlertItem} from '../alert-service/alert-service';
+
+import Alert, {Container} from './alert';
+
+export default {
+  title: 'Components/Alert',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    component: Alert,
+    framework: 'react'
+  }
+};
+
+export const simple = () => {
+  class AlertDemo extends React.Component {
+    state = {
+      show: true,
+      isClosing: false
+    };
+
+    onClose = () => {
+      this.setState({show: false});
+    };
+
+    onCloseRequest = () => {
+      this.setState({isClosing: true});
+    };
+
+    render() {
+      const {show, isClosing} = this.state;
+      if (!show) {
+        return null;
+      }
+
+      return (
+        <Alert
+          type={Alert.Type.SUCCESS}
+          onClose={this.onClose}
+          showWithAnimation={false}
+          onCloseRequest={this.onCloseRequest}
+          isClosing={isClosing}
+        >
+          Sample alert <Link>with link</Link>
+        </Alert>
+      );
+    }
+  }
+
+  return <AlertDemo/>;
+};
+
+simple.storyName = 'simple';
+
+interface AlertContainerState {
+  alerts: Array<AlertItem>
+}
+export const alertContainer = () => {
+  class AlertContainerDemo extends React.Component<Record<string, never>, AlertContainerState> {
+    state = {
+      alerts: [
+        {type: Alert.Type.ERROR, key: 0, message: 'Test error', isClosing: false},
+        {type: Alert.Type.WARNING, key: 1, message: 'Test warning', isClosing: false},
+        {type: Alert.Type.LOADING, key: 2, message: 'Test loading', isClosing: false},
+        {type: Alert.Type.MESSAGE, key: 3, message: 'Test message', isClosing: false},
+        {
+          type: Alert.Type.MESSAGE,
+          key: 4,
+          message: (
+            <span>
+              Message <Link href="#">with link</Link>
+            </span>
+          ),
+          isClosing: false
+        }
+      ]
+    };
+
+    yetAnotherMessage = () => {
+      this.setState(prevState => ({
+        ...prevState,
+        alerts: [
+          {
+            type: Alert.Type.MESSAGE,
+            key: Date.now(),
+            message: `Another message at ${new Date()}`
+          },
+          ...prevState.alerts
+        ]
+      }));
+    };
+
+    onCloseAlert = (closedAlert: AlertItem) => {
+      this.setState(prevState => ({
+        ...prevState,
+        alerts: prevState.alerts.filter(alert => alert !== closedAlert)
+      }));
+    };
+
+    onCloseAlertClick = (alert: AlertItem) => {
+      const alertToClose = this.state.alerts.filter(it => alert.key === it.key)[0];
+      alertToClose.isClosing = true;
+      this.setState(prevState => ({
+        ...prevState,
+        alerts: [...prevState.alerts]
+      }));
+    };
+
+    render() {
+      return (
+        <div>
+          <Button onClick={this.yetAnotherMessage}>Create another message</Button>
+
+          <Container>
+            {this.state.alerts.map(alert => {
+              const {message, key, ...rest} = alert;
+              return (
+                <Alert
+                  key={key}
+                  {...rest}
+                  onCloseRequest={() => this.onCloseAlertClick(alert)}
+                  onClose={() => this.onCloseAlert(alert)}
+                >
+                  {message}
+                </Alert>
+              );
+            })}
+          </Container>
+        </div>
+      );
+    }
+  }
+
+  return <AlertContainerDemo/>;
+};
+
+alertContainer.parameters = {
+  hermione: {
+    captureSelector: '*[data-test="alert-container"]'
+  },
+  a11y: {element: '*[data-test="alert-container"]'}
+};

package/components/alert/alert.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Alert from './alert';
+import styles from './alert.css';
+
+const TIMEOUT = 100;
+const TICK = 500;
+
+describe('Alert', () => {
+  it('should render text', () => {
+    render(<Alert type={Alert.Type.MESSAGE}>{'Test message'}</Alert>);
+    screen.getByText('Test message').should.exist;
+  });
+
+  it('should transfer className', () => {
+    render(<Alert className="foo"/>);
+    screen.getByTestId('alert').should.have.class('foo');
+  });
+
+  it('should render component', () => {
+    render(<Alert type={Alert.Type.MESSAGE}><div>{'foo'}</div></Alert>);
+    screen.getByText('foo').should.exist;
+  });
+
+  it('should render an error', () => {
+    render(<Alert type={Alert.Type.ERROR}>{'Test'}</Alert>);
+    screen.getByTestId('alert').should.have.class(styles.error);
+  });
+
+  it('should be closeable if by default', () => {
+    render(<Alert>{'Test element'}</Alert>);
+
+    screen.getByRole('button', {name: 'close alert'}).should.exist;
+  });
+
+  it('should be not closeable if defined', () => {
+    render(<Alert closeable={false}>{'Test element'}</Alert>);
+
+    should.not.exist(screen.queryByRole('button', {name: 'close alert'}));
+  });
+
+  it('should call onCloseRequest on click by close button', () => {
+    const closeSpy = sandbox.spy();
+    render(<Alert onCloseRequest={closeSpy}>{'Test element'}</Alert>);
+    const closeElement = screen.queryByRole('button', {name: 'close alert'});
+    if (closeElement != null) {
+      userEvent.click(closeElement);
+    }
+    closeSpy.should.have.been.called;
+  });
+
+  it('should call onCloseRequest on timeout', () => {
+    const clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
+    const closeSpy = sandbox.spy();
+    render(<Alert timeout={TIMEOUT} onCloseRequest={closeSpy}>{'Test element'}</Alert>);
+
+    clock.tick(TICK);
+
+    closeSpy.should.have.been.called;
+  });
+});

package/components/alert/alert.tsx

@@ -0,0 +1,267 @@
+import React, {PureComponent, ReactNode} 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 enum AlertType {
+  ERROR= 'error',
+  MESSAGE= 'message',
+  SUCCESS= 'success',
+  WARNING= 'warning',
+  LOADING= 'loading'
+}
+
+/**
+ * Lookup table of alert type to icon modifier.
+ * @type {Object.<AlertType, string>}
+ */
+const TypeToIcon: Partial<Record<AlertType, string>> = {
+  [AlertType.ERROR]: exceptionIcon,
+  [AlertType.SUCCESS]: checkmarkIcon,
+  [AlertType.WARNING]: warningIcon
+};
+
+/**
+ * Lookup table of alert type to icon color.
+ * @type {Object.<AlertType, Icon.Color>}
+ */
+const TypeToIconColor: Partial<Record<AlertType, Color>> = {
+  [AlertType.ERROR]: Color.RED,
+  [AlertType.SUCCESS]: Color.GREEN,
+  [AlertType.WARNING]: Color.WHITE
+};
+
+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.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?: HTMLDivElement | null;
+  hideTimeout?: number;
+
+  static Type = AlertType;
+
+  closeRequest = (event: React.MouseEvent<HTMLElement>) => {
+    this.startCloseAnimation();
+    return this.props.onCloseRequest(event);
+  };
+
+  startCloseAnimation = () => {
+    const height = getRect(this.node).height;
+    this.setState({height});
+  };
+
+  private _close() {
+    this.startCloseAnimation();
+    setTimeout(() => {
+      this.props.onClose();
+    }, ANIMATION_TIME);
+  }
+
+  /**
+   * @param {SyntheticEvent} evt
+   * @private
+   */
+  private _handleCaptionsLinksClick = (evt: React.MouseEvent<HTMLSpanElement>) => {
+    if (evt.target instanceof Element && evt.target.matches('a')) {
+      this.closeRequest(evt);
+    }
+  };
+
+  /**
+   * @private
+   */
+  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}
+   */
+  private _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: HTMLDivElement | null) => {
+    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.tsx

@@ -0,0 +1,53 @@
+import React, {Children, cloneElement, PureComponent, HTMLAttributes, 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 type AlertContainerProps = HTMLAttributes<HTMLDivElement>
+
+export default class Alerts extends PureComponent<AlertContainerProps> {
+  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.examples.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+
+import Button from '../button/button';
+import ButtonToolbar from '../button-toolbar/button-toolbar';
+
+import alert from './alert-service';
+
+import styles from './alert-service.examples.css';
+
+export default {
+  title: 'Services/Alert Service',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Service for managing a stack of alerts.',
+    hermione: {skip: true}
+  }
+};
+
+export const alertService = () => {
+  const MSG_TIMEOUT = 5000;
+  const MSG_LONG_TIMEOUT = 30000;
+
+  class AlertServiceDemo extends React.Component {
+    componentDidMount() {
+      setTimeout(() => {
+        alert.message('A initial message', MSG_TIMEOUT);
+        alert.error('Error message');
+        this.showCustomMessage();
+      });
+    }
+
+    componentWillUnmount() {
+      alert._getShowingAlerts().forEach(item => alert.removeWithoutAnimation(item.key));
+    }
+
+    lastKey?: string | number;
+
+    showCustomMessage = () => {
+      this.lastKey = alert.addAlert(
+        <div className={styles.customAlert}>
+          <h1>Hello!</h1>
+          <p>{'This is a custom message'}</p>
+        </div>,
+        undefined,
+        0,
+        {
+          className: styles.customAlert,
+          closeButtonClassName: styles.closeButton
+        }
+      );
+    };
+
+    showError = () => {
+      this.lastKey = alert.error('Something wrong happened');
+    };
+
+    showRandomWarning = () => {
+      this.lastKey = alert.warning(
+        `Warning! Something bad is going to happen (${Math.random()})`,
+        MSG_LONG_TIMEOUT
+      );
+    };
+
+    showMessage = () => {
+      this.lastKey = alert.message('This is just a message', MSG_TIMEOUT);
+    };
+
+    removeLastAlert = () => {
+      alert.remove(this.lastKey);
+    };
+
+    render() {
+      return (
+        <ButtonToolbar>
+          <Button onClick={this.showError}>Show error</Button>
+          <Button onClick={this.showMessage} primary>
+            Show message
+          </Button>
+          <Button onClick={this.showCustomMessage}>
+            Show custom message
+          </Button>
+          <Button onClick={this.showRandomWarning}>Show warning</Button>
+          <Button onClick={this.removeLastAlert}>Remove last alert</Button>
+        </ButtonToolbar>
+      );
+    }
+  }
+
+  return <AlertServiceDemo/>;
+};