@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/alert/alert.examples.js

@@ -1,143 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Link from '@jetbrains/ring-ui/components/link/link';
-import Button from '@jetbrains/ring-ui/components/button/button';
-import Alert, {Container} from '@jetbrains/ring-ui/components/alert/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';
-
-export const alertContainer = () => {
-  class AlertContainerDemo extends React.Component {
-    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 => {
-      this.setState(prevState => ({
-        ...prevState,
-        alerts: prevState.alerts.filter(alert => alert !== closedAlert)
-      }));
-    };
-
-    onCloseAlertClick = alert => {
-      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.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.test.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-
-import Alert from './alert';
-import AlertContainer from './container';
-
-describe('Alert Container', () => {
-  it('should render alert container to body', () => {
-    render(<AlertContainer><Alert>{'Test'}</Alert></AlertContainer>);
-    screen.getByTestId('alert-container').should.exist;
-  });
-});

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.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;
-};