@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/loader/loader__core.test.js

@@ -1,232 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-import LoaderCore from './loader__core';
-
-describe('Loader', () => {
-  function noop() {}
-
-  let createLoader;
-  let loaderContainer;
-  let loader;
-
-  beforeEach(() => {
-    sandbox.stub(LoaderCore.prototype, 'loop').callsFake(() => {});
-
-    createLoader = props => {
-      loaderContainer = document.createElement('div');
-      loader = new LoaderCore(loaderContainer, props);
-    };
-
-    createLoader({});
-  });
-
-  afterEach(() => loader.destroy());
-
-  it('Should calculate gradient', () => {
-    const middleColor = LoaderCore.calculateGradient(
-      {r: 0, g: 0, b: 0},
-      {r: 255, g: 255, b: 255},
-      0.5
-    );
-    middleColor.should.deep.equal({r: 128, g: 128, b: 128});
-  });
-
-  it('Should do some initial steps to prepare tail for first render', () => {
-    loader.particles.length.should.be.at.least(90);
-  });
-
-  it('Should set canvas size from passed size', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(1);
-    createLoader({size: 42});
-
-    loader.canvas.height.should.equal(42);
-    loader.canvas.width.should.equal(42);
-  });
-
-  it('Should double canvas size on HDPI devices', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(2);
-    createLoader({size: 42});
-
-    loader.canvas.height.should.equal(84);
-    loader.canvas.width.should.equal(84);
-  });
-
-  it('Should fixate canvas CSS size with style to avoid scaling on HDPI devices', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(2);
-    createLoader({size: 42});
-
-    loader.canvas.style.height.should.equal('42px');
-    loader.canvas.style.width.should.equal('42px');
-  });
-
-  it('Should scale canvas on HDPI devices to make visible image size the same as on normal screens', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(2);
-    createLoader({size: 42});
-    sandbox.spy(loader.ctx, 'scale');
-
-    loader.setCanvasSize();
-
-    loader.ctx.scale.should.have.been.calledWith(2, 2);
-  });
-
-  it('Should scale canvas on zoomed out devices to avoid image cropping', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(0.5);
-    createLoader({size: 42});
-    sandbox.spy(loader.ctx, 'scale');
-
-    loader.setCanvasSize();
-
-    loader.ctx.scale.should.have.been.calledWith(0.5, 0.5);
-  });
-
-  it('Should start loop on constructing', () => {
-    loader.isRunning.should.be.true;
-  });
-
-  it('Should stop loop on destroy', () => {
-    loader.destroy();
-    loader.isRunning.should.be.false;
-  });
-
-  it('Should revert direction on reaching top limit', () => {
-    sandbox.stub(Math, 'random').returns(loader.baseSpeed / 2);
-
-    const oldSpeed = loader.baseSpeed;
-    const newSpeed = loader.handleLimits(95, 8, oldSpeed, 100);
-    newSpeed.should.equal(-loader.baseSpeed);
-  });
-
-  it('Should revert direction on reaching zero limit', () => {
-    sandbox.stub(Math, 'random').returns(loader.baseSpeed / 2);
-
-    const oldSpeed = -loader.baseSpeed;
-    const newSpeed = loader.handleLimits(0, 8, oldSpeed, 100);
-    newSpeed.should.equal(loader.baseSpeed);
-  });
-
-  it('Should update radius according to radius change speed', () => {
-    loader.radius = 4;
-    loader.radiusSpeed = 2;
-
-    loader.calculateNextRadius();
-
-    loader.radius.should.equal(6);
-  });
-
-  it('Should mirror radius change speed on reaching top limit', () => {
-    loader.radius = 4;
-    loader.maxRadius = 5;
-    loader.radiusSpeed = 2;
-
-    loader.calculateNextRadius();
-
-    loader.radiusSpeed.should.equal(-2);
-  });
-
-  it('Should mirror radius change speed on reaching low limit', () => {
-    loader.radius = 4;
-    loader.minRadius = 3;
-    loader.radiusSpeed = -2;
-
-    loader.calculateNextRadius();
-
-    loader.radiusSpeed.should.equal(2);
-  });
-
-  it('Should call next color calculation', () => {
-    sandbox.spy(LoaderCore, 'calculateGradient');
-    loader.colorIndex = 1;
-
-    loader.getNextColor();
-    LoaderCore.calculateGradient.should.have.been.calledWith(
-      loader.props.colors[1],
-      loader.props.colors[2],
-      sandbox.match(Number)
-    );
-  });
-
-  it('Should update tick', () => {
-    loader.tick = 1;
-    loader.nextTick();
-
-    loader.tick.should.equal(2);
-  });
-
-  it('Should reset tick and update color after reaching limit', () => {
-    loader.tick = loader.colorChangeTick;
-    loader.colorIndex = 1;
-    loader.nextTick();
-
-    loader.tick.should.equal(0);
-    loader.colorIndex.should.equal(2);
-  });
-
-  it('Should reset colorIndex to 0 if end is reached', () => {
-    loader.tick = loader.colorChangeTick;
-    loader.colorIndex = loader.props.colors.length - 1;
-    loader.nextTick();
-
-    loader.colorIndex.should.equal(0);
-  });
-
-  it('Should update tick on step', () => {
-    sandbox.spy(loader, 'nextTick');
-    loader.step();
-    loader.nextTick.should.have.been.called;
-  });
-
-  it('Should calculate new coordinates on step', () => {
-    sandbox.spy(loader, 'calculateNextCoordinates');
-    loader.step();
-    loader.calculateNextCoordinates.should.have.been.called;
-  });
-
-  it('Should calculate new radius on step', () => {
-    sandbox.spy(loader, 'calculateNextRadius');
-    loader.step();
-    loader.calculateNextRadius.should.have.been.called;
-  });
-
-  it('Should call step for each particle to allow it to update its live points', () => {
-    const stepSpy = sandbox.spy();
-    loader.particles = [{step: stepSpy, draw: noop, isAlive: () => true}];
-
-    loader.step();
-    stepSpy.should.have.been.called;
-  });
-
-  it('Should add particle on step', () => {
-    loader.particles = [];
-    loader.step();
-
-    loader.particles.length.should.equal(1);
-  });
-
-  it('Should remove dead particles', () => {
-    loader.particles = [
-      {isAlive: () => true, step: noop, draw: noop},
-      {isAlive: () => false, step: noop, draw: noop},
-      {isAlive: () => true, step: noop, draw: noop}
-    ];
-
-    loader.removeDeadParticles();
-
-    loader.particles.length.should.equal(2);
-  });
-
-  it('Should clear canvas before rendering new frame', () => {
-    sandbox.spy(loader.ctx, 'clearRect');
-
-    loader.draw();
-
-    loader.ctx.clearRect.should.have.been.called;
-  });
-
-  it('Should call draw for each particle', () => {
-    const drawSpy = sandbox.spy();
-    loader.particles = [{draw: drawSpy, isAlive: () => true, step: noop}];
-
-    loader.draw();
-    drawSpy.should.have.been.called;
-  });
-});

package/components/loader-inline/loader-inline.examples.js

@@ -1,106 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import LoaderInline from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
-import injectStyles from '@jetbrains/ring-ui/components/loader-inline/inject-styles';
-
-export default {
-  title: 'Components/Inline Loader',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes:
-      'Displays a small animated loader, shown inline with text. Use case: contextual loading animation.'
-  }
-};
-
-export const basic = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div>
-          <span>some text on top</span>
-          <div>
-            before <LoaderInline/> Some text after
-          </div>
-          <div>some text under loader</div>
-        </div>
-      );
-    }
-  }
-
-  return <Example/>;
-};
-
-basic.storyName = 'basic';
-
-export const withChildren = () => {
-  class Example extends React.Component {
-    render() {
-      return <LoaderInline>Loading...</LoaderInline>;
-    }
-  }
-
-  return <Example/>;
-};
-
-withChildren.storyName = 'with children';
-
-export const onBlackBackground = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div style={{backgroundColor: 'black', color: '#ccc'}}>
-          <span>some text on top</span>
-          <div>
-            before <LoaderInline/> Some text after
-          </div>
-          <div>some text under loader</div>
-        </div>
-      );
-    }
-  }
-
-  return <Example/>;
-};
-
-onBlackBackground.storyName = 'on black background';
-
-export const onCustomBackground = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div style={{backgroundColor: '#E5F4FF'}}>
-          <span>some text on top</span>
-          <div>
-            before <LoaderInline/> Some text after
-          </div>
-          <div>some text under loader</div>
-        </div>
-      );
-    }
-  }
-
-  return <Example/>;
-};
-
-onCustomBackground.storyName = 'on custom background';
-
-export const withoutReact = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div>
-          <div className="ring-loader-inline"/>
-        </div>
-      );
-    }
-  }
-
-  injectStyles();
-
-  return <Example/>;
-};
-
-withoutReact.storyName = 'without React';

package/components/loader-inline/loader-inline.js

@@ -1,57 +0,0 @@
-import React, {PureComponent} from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import Theme, {withTheme} from '../global/theme';
-import dataTests from '../global/data-tests';
-
-import styles from './loader-inline.css';
-import injectStyles from './inject-styles';
-
-/**
- * @name Loader Inline
- */
-
-class LoaderInline extends PureComponent {
-  static propTypes = {
-    theme: PropTypes.oneOf(Object.values(Theme)),
-    className: PropTypes.string,
-    'data-test': PropTypes.string,
-    children: PropTypes.node
-  };
-
-  componentDidMount() {
-    injectStyles();
-  }
-
-  static Theme = Theme;
-
-  render() {
-    const {className, theme, 'data-test': dataTest, children, ...restProps} = this.props;
-
-    const classes = classNames(
-      styles.loader,
-      className,
-      `${styles.loader}_${theme}`
-    );
-
-    const loader = (
-      <div
-        {...restProps}
-        data-test={dataTests('ring-loader-inline', dataTest)}
-        className={classes}
-      />
-    );
-
-    return children
-      ? (
-        <>
-          {loader}
-          <span className={styles.children}>{children}</span>
-        </>
-      )
-      : loader;
-  }
-}
-
-export default withTheme()(LoaderInline);

package/components/loader-inline/loader-inline.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {mount} from 'enzyme';
-
-import LoaderInline from './loader-inline';
-
-describe('Loader Inline', () => {
-  const mountLoaderInline = props => mount(<LoaderInline {...props}/>);
-  const getLoaderInlineDiv = props => mountLoaderInline(props).find('div');
-
-  it('should create component', () => {
-    mountLoaderInline().type().should.equal(LoaderInline.type);
-  });
-
-  it('should add custom class', () => {
-    const wrapper = getLoaderInlineDiv({
-      className: 'test'
-    });
-
-    wrapper.should.have.className('test');
-  });
-});

package/components/loader-screen/loader-screen.examples.js

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import LoaderScreen from '@jetbrains/ring-ui/components/loader-screen/loader-screen';
-
-export default {
-  title: 'Components/Loader Screen',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes:
-      'Displays a large animated loader with an optional caption. Typical use cases: page loading animation, major action animation.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  class Example extends React.Component {
-    render() {
-      return <LoaderScreen/>;
-    }
-  }
-
-  return <Example/>;
-};
-
-basic.storyName = 'basic';
-
-export const withMessage = () => {
-  class Example extends React.Component {
-    render() {
-      return <LoaderScreen message={'Some message'}/>;
-    }
-  }
-
-  return <Example/>;
-};
-
-withMessage.storyName = 'with message';

package/components/loader-screen/loader-screen.js

@@ -1,38 +0,0 @@
-import React, {PureComponent} from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import Loader from '../loader/loader';
-
-import styles from './loader-screen.css';
-
-/**
- * @name Loader Screen
- */
-export default class LoaderScreen extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    containerClassName: PropTypes.string,
-    message: PropTypes.string
-  };
-
-  render() {
-    const {message, className, containerClassName, ...restProps} = this.props;
-
-    const containerClasses = classNames(containerClassName, styles.loaderScreen);
-
-    const loaderClasses = classNames(className, styles.loader, {
-      [styles.loaderWithoutSpacing]: !message
-    });
-
-    return (
-      <div className={containerClasses}>
-        <Loader
-          {...restProps}
-          message={message}
-          className={loaderClasses}
-        />
-      </div>
-    );
-  }
-}

package/components/login-dialog/login-dialog.js

@@ -1,125 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-
-import Dialog from '../dialog/dialog';
-import {Content} from '../island/island';
-import LoaderScreen from '../loader-screen/loader-screen';
-import {HUB_AUTH_PAGE_OPENED} from '../auth/background-flow';
-
-import styles from './login-dialog.css';
-
-const HUB_AUTH_PAGE_LOGIN_STARTED = 'HUB_AUTH_PAGE_LOGIN_STARTED';
-const HUB_AUTH_PAGE_LOGIN_DIMENSIONS = 'HUB_AUTH_PAGE_LOGIN_DIMENSIONS';
-
-const DEFAULT_HEIGHT = 517;
-const DEFAULT_WIDTH = 333;
-const DEFAULT_SHOW_FALLBACK_TIMEOUT = 5000;
-/**
- * @name Login Dialog
- */
-
-export default class LoginDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool,
-    className: PropTypes.string,
-    url: PropTypes.string,
-    loader: PropTypes.bool,
-    loadingMessage: PropTypes.string,
-    showFallbackTimeout: PropTypes.number,
-    renderFallbackLink: PropTypes.func,
-    onCancel: PropTypes.func.isRequired
-  };
-
-  static defaultProps = {
-    show: false,
-    url: 'about:blank',
-    renderFallbackLink: () => null,
-    showFallbackTimeout: DEFAULT_SHOW_FALLBACK_TIMEOUT
-  };
-
-  state = {
-    loading: true,
-    loggingIn: false,
-    showFallbackLink: false,
-    height: DEFAULT_HEIGHT,
-    width: DEFAULT_WIDTH
-  };
-
-  componentDidMount() {
-    window.addEventListener('message', this.onMessage);
-    this.startFallbackCountdown();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('message', this.onMessage);
-  }
-
-  startFallbackCountdown() {
-    this.showFallbackTimout = setTimeout(
-      () => this.setState({showFallbackLink: true}),
-      this.props.showFallbackTimeout
-    );
-  }
-
-  onMessage = event => {
-    const {data} = event;
-    if (!data) {
-      return;
-    }
-
-    if (data === HUB_AUTH_PAGE_OPENED) {
-      clearTimeout(this.showFallbackTimout);
-      this.setState({loading: false, loggingIn: false});
-      return;
-    }
-
-    if (data === HUB_AUTH_PAGE_LOGIN_STARTED) {
-      this.setState({loading: true, loggingIn: true});
-      this.startFallbackCountdown();
-      return;
-    }
-
-    if (data.message === HUB_AUTH_PAGE_LOGIN_DIMENSIONS) {
-      this.setState({height: data.height, width: data.width});
-    }
-  };
-
-  render() {
-    const {show, className, url, loadingMessage, renderFallbackLink, onCancel} = this.props;
-    const {loading, height, width, loggingIn, showFallbackLink} = this.state;
-
-    const iFrameStyle = {height, width};
-
-    return (
-      <Dialog
-        data-test="ring-login-dialog"
-        className={className}
-        contentClassName={styles.dialogContent}
-        trapFocus
-        autoFocusFirst={false}
-        show={show}
-        showCloseButton
-        onCloseAttempt={onCancel}
-      >
-        <Content>
-          <iframe
-            title="Login dialog"
-            style={iFrameStyle}
-            src={url}
-            className={styles.iFrame}
-            scrolling="no"
-          />
-        </Content>
-
-        {loading && (
-          <LoaderScreen message={loadingMessage} containerClassName={styles.nonOpaqueLoader}/>
-        )}
-
-        {showFallbackLink && (
-          <div className={styles.fallbackLinkContainer}>{renderFallbackLink(loggingIn)}</div>
-        )}
-      </Dialog>
-    );
-  }
-}
-

package/components/login-dialog/service.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
-
-import LoginDialog from './login-dialog';
-
-const containerElement = document.createElement('div');
-
-/**
- * Renders LoginDialog into virtual node to skip maintaining container
- */
-function renderLoginDialog(props) {
-  render(<LoginDialog {...props}/>, containerElement);
-}
-
-export default function showAuthDialog(props = {}) {
-  renderLoginDialog({
-    ...props,
-    show: true
-  });
-
-  return () => {
-    unmountComponentAtNode(containerElement);
-  };
-}

package/components/markdown/code.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Code from '../code/code';
-
-const MarkdownCode = ({value, language, inline}) => (
-  <Code
-    language={language}
-    code={value || ''}
-    inline={inline}
-  />
-);
-
-MarkdownCode.propTypes = {
-  language: PropTypes.string,
-  value: PropTypes.string,
-  inline: PropTypes.bool
-};
-
-export default MarkdownCode;

package/components/markdown/link.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Link from '../link/link';
-
-const MarkdownLink = ({href, title, children}) => <Link {...{href, title}}>{children}</Link>;
-
-MarkdownLink.propTypes = {
-  href: PropTypes.string,
-  title: PropTypes.string,
-  children: PropTypes.node
-};
-
-export default MarkdownLink;