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

package/components/alert/alert.test.js

@@ -1,61 +0,0 @@
-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'});
-    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/container.js

@@ -1,47 +0,0 @@
-import React, {Children, cloneElement, PureComponent} 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}
-      >
-        {Children.map(children, child => {
-          const alertClassNames = classNames(styles.alertInContainer, child.props.className);
-
-          return cloneElement(child, {
-            className: alertClassNames
-          });
-        })}
-      </div>,
-      document.body
-    );
-  }
-}

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

@@ -1,91 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import styles from './alert-service.examples.css';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-import ButtonToolbar from '@jetbrains/ring-ui/components/button-toolbar/button-toolbar';
-
-import alert from '@jetbrains/ring-ui/components/alert-service/alert-service';
-
-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));
-    }
-
-    showCustomMessage = () => {
-      this.lastKey = alert.addAlert(
-        <div className={styles.customAlert}>
-          <h1>Hello!</h1>
-          <p>{'This is a custom message'}</p>
-        </div>,
-        null,
-        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/>;
-};

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

@@ -1,137 +0,0 @@
-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/alert-service/alert-service.test.js

@@ -1,88 +0,0 @@
-import Alert from '../alert/alert';
-
-import alert from './alert-service';
-
-const SMALL_TICK = 1000;
-const BIG_TICK = 2000;
-const ALERT_SHOW_TIME = 100;
-
-describe('Alert Service', () => {
-  let alertKey;
-  let clock;
-
-  beforeEach(() => {
-    clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
-  });
-
-  afterEach(() => {
-    alert.setDefaultTimeout(0);
-    alert.removeWithoutAnimation(alertKey);
-  });
-
-  it('Should show alert', () => {
-    alertKey = alert.message('foo');
-    const alertItem = alert._getShowingAlerts()[0];
-
-    alertItem.message.should.equal('foo');
-    alertItem.type.should.equal(Alert.Type.MESSAGE);
-    alertItem.timeout.should.equal(0);
-    alertItem.isClosing.should.be.false;
-  });
-
-  it('Should show message', () => {
-    alertKey = alert.message('foo');
-    alert._getShowingAlerts()[0].type.should.equal(Alert.Type.MESSAGE);
-  });
-
-  it('Should show error', () => {
-    alertKey = alert.error('foo');
-    alert._getShowingAlerts()[0].type.should.equal(Alert.Type.ERROR);
-  });
-
-  it('Should show warning', () => {
-    alertKey = alert.warning('foo');
-    alert._getShowingAlerts()[0].type.should.equal(Alert.Type.WARNING);
-  });
-
-  it('Should join same alerts and shake', () => {
-    alertKey = alert.message('foo');
-    alertKey = alert.message('foo');
-
-    alert._getShowingAlerts().length.should.equal(1);
-    alert._getShowingAlerts()[0].isShaking.should.be.true;
-  });
-
-  it('Should remove alert after timeout', () => {
-    alertKey = alert.message('foo', ALERT_SHOW_TIME);
-    clock.tick(SMALL_TICK);
-    alert._getShowingAlerts().length.should.equal(0);
-  });
-
-  it('Should remove alert after timeout', () => {
-    alertKey = alert.message('foo', ALERT_SHOW_TIME);
-    clock.tick(SMALL_TICK);
-    alert._getShowingAlerts().length.should.equal(0);
-  });
-
-  it('should remove alert without animation', () => {
-    alertKey = alert.message('foo');
-    alert.removeWithoutAnimation(alertKey);
-    alert._getShowingAlerts().length.should.equal(0);
-  });
-
-  it('should remove alert after animation', () => {
-    alertKey = alert.message('foo');
-    alert.remove(alertKey);
-    alert._getShowingAlerts().filter(it => it.key === alertKey)[0].isClosing.should.be.true;
-    clock.tick(SMALL_TICK);
-
-    alert._getShowingAlerts().length.should.equal(0);
-  });
-
-  it('should allow configuring default timeout', () => {
-    alert.setDefaultTimeout(SMALL_TICK);
-    alertKey = alert.message('foo');
-    clock.tick(BIG_TICK);
-    alert._getShowingAlerts().length.should.equal(0);
-  });
-});

package/components/analytics/analytics.examples.js

@@ -1,47 +0,0 @@
-import linkStyles from '@jetbrains/ring-ui/components/link/link.css';
-
-import analytics from '@jetbrains/ring-ui/components/analytics/analytics';
-import AnalyticsCustomPlugin from '@jetbrains/ring-ui/components/analytics/analytics__custom-plugin';
-
-export default {
-  title: 'Components/Analytics',
-
-  parameters: {
-    notes:
-      'Provides a façade to Google Analytics and other web analytics services through a system of plugins.',
-    hermione: {skip: true}
-  },
-  argTypes: {onAnalytics: {}}
-};
-
-export const Analytics = ({onAnalytics}) => {
-  const node = document.createElement('div');
-
-  node.innerHTML = `
-      <div>
-        <p>Click the link below and check the console output:</p>
-        <div>
-          <a href id="click-me" class="${linkStyles.link}">
-            Track click event
-          </a>
-        </div>
-      </div>
-    `;
-
-  const FLUSH_INTERVAL = 100;
-
-  const customPlugin = new AnalyticsCustomPlugin(
-    events => onAnalytics('Custom plugin receives:', events[0].category, events[0].action),
-    false,
-    FLUSH_INTERVAL
-  );
-
-  analytics.config([customPlugin]);
-
-  node.querySelector('#click-me').addEventListener('click', event => {
-    analytics.trackEvent('test-category', 'test-action');
-    event.preventDefault();
-  });
-
-  return node;
-};

package/components/analytics/analytics.js

@@ -1,101 +0,0 @@
-/**
- * @name Analytics
- */
-class Analytics {
-  constructor() {
-    this._plugins = [];
-  }
-
-  config(plugins) {
-    this._plugins = plugins;
-  }
-
-  track(rawTrackingData, /* optional */ additionalData) {
-    if (!rawTrackingData) {
-      return;
-    }
-
-    let splitIdx = rawTrackingData.indexOf(':');
-    if (splitIdx < 0) {
-      splitIdx = rawTrackingData.indexOf('_');
-    }
-    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);
-        }
-      } 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 (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;
-  }
-}
-
-export default new Analytics();