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

package/components/error-message/error-message.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import ErrorMessage from './error-message';
-
-describe('Error Message', () => {
-  const shallowErrorMessage = props => shallow(<ErrorMessage {...props}/>);
-  const mountErrorMessage = props => mount(<ErrorMessage {...props}/>);
-
-  it('should create component', () => {
-    mountErrorMessage().should.have.type(ErrorMessage);
-  });
-
-  it('should wrap children with div', () => {
-    shallowErrorMessage().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowErrorMessage({className: 'test-class'}).should.have.className('test-class');
-  });
-});

package/components/footer/footer.examples.js

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Footer from '@jetbrains/ring-ui/components/footer/footer';
-
-export default {
-  title: 'Components/Footer',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: `
-Displays a configurable page footer.
-
-A footer consists of three sections, each optional:
-
-- left
-- center
-- right
-    `
-  }
-};
-
-export const basic = () => (
-  <Footer
-    className="stuff"
-    left={[
-      [
-        {
-          url: 'http://www.jetbrains.com/teamcity/?fromserver',
-          label: 'TeamCity'
-        },
-        ' by JetBrains'
-      ],
-      'Enterprise 8.0.2 EAP (build 27448)'
-    ]}
-    center={[
-      [{copyright: 2000, label: ' JetBrains'}],
-      {
-        url: 'https://teamcity.jetbrains.com/showAgreement.html',
-        label: 'License agreement',
-        title: 'read me!',
-        target: '_blank'
-      }
-    ]}
-    right={[
-      {
-        url:
-          'http://www.jetbrains.com/teamcity/feedback?source=footer&version=8.0.3%20(build%2027531)&build=27531&mode=ent',
-        label: 'Feedback'
-      }
-    ]}
-  />
-);
-
-basic.storyName = 'Footer';

package/components/footer/footer.js

@@ -1,138 +0,0 @@
-/**
- * @name Footer
- */
-import React, {memo, isValidElement} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Link from '../link/link';
-
-import styles from './footer.css';
-
-const FooterColumn = memo(function FooterColumn({position, children}) {
-  const classes = classNames({
-    [styles.columnLeft]: position === 'left',
-    [styles.columnCenter]: position === 'center',
-    [styles.columnRight]: position === 'right'
-  });
-  return (
-    <div className={classes}>
-      <ul className={styles.columnItem}>
-        {children}
-      </ul>
-    </div>
-  );
-});
-FooterColumn.propTypes = {
-  position: PropTypes.string,
-  children: PropTypes.node
-};
-
-/**
- * Return copyright string
- * @param year {int}
- * @returns {string}
- */
-export function copyright(year) {
-  const currentYear = (new Date()).getUTCFullYear();
-  const ndash = '–';
-  let ret = 'Copyright © ';
-
-  if (year >= currentYear) {
-    ret += year;
-  } else {
-    ret += year + ndash + currentYear;
-  }
-
-  return ret;
-}
-
-/**
- * @constructor
- * @extends {ReactComponent}
- */
-const FooterLine = memo(function FooterLine(props) {
-  const items = Array.isArray(props.item) ? props.item : [props.item];
-
-  function renderItem(item) {
-    if (isValidElement(item)) {
-      return item;
-    }
-
-    const element = (item.copyright ? copyright(item.copyright) : '') + (item.label || item);
-
-    if (item.url) {
-      return (
-        <Link
-          href={item.url}
-          target={item.target}
-          key={item.url + item.title}
-          title={item.title}
-        >{element}</Link>
-      );
-    }
-
-    return element;
-  }
-
-  return (
-    <li className={styles.line}>
-      {items.map(renderItem)}
-    </li>
-  );
-});
-FooterLine.propTypes = {
-  item: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.array,
-    PropTypes.string
-  ])
-};
-
-const Footer = memo(function Footer({floating, className, left, center, right}) {
-  function content(elements, position) {
-    if (!elements) {
-      return false;
-    }
-
-    return (
-      <FooterColumn
-        key={position}
-        position={position}
-      >
-        {elements.map((item, idx) => (
-          <FooterLine
-            // eslint-disable-next-line react/no-array-index-key
-            key={idx}
-            item={item}
-          />
-        ))}
-      </FooterColumn>
-    );
-  }
-
-  const classes = classNames(styles.footer, className, {
-    [styles.footerFloating]: floating
-  });
-
-  return (
-    <footer
-      className={classes}
-      data-test="ring-footer"
-    >{
-        [
-          content(left, 'left'),
-          content(center, 'center'),
-          content(right, 'right')
-        ]
-      }</footer>
-  );
-});
-Footer.propTypes = {
-  className: PropTypes.string,
-  floating: PropTypes.bool,
-  left: PropTypes.array,
-  center: PropTypes.array,
-  right: PropTypes.array
-};
-export default Footer;

package/components/footer/footer.test.js

@@ -1,78 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import {shallow, mount, render} from 'enzyme';
-
-import Footer from './footer';
-
-describe('Footer', () => {
-  const shallowFooter = props => shallow(<Footer {...props}/>);
-  const mountFooter = props => mount(<Footer {...props}/>);
-  const renderFooter = props => render(<Footer {...props}/>);
-
-  it('should create component', () => {
-    shallowFooter().should.exist;
-  });
-
-  it('should be empty by default', () => {
-    const wrapper = shallowFooter();
-    wrapper.should.have.tagName('footer');
-    wrapper.should.be.blank();
-  });
-
-  describe('should render items', () => {
-    it('should add given class', () => {
-      const wrapper = shallowFooter({className: 'myClass'});
-
-      wrapper.should.have.className('myClass');
-    });
-
-    it('add left column one line', () => {
-      const wrapper = renderFooter({left: ['One Line']});
-      wrapper.should.have.text('One Line');
-      wrapper.find('li').should.have.text('One Line');
-    });
-
-    it('add left column two lines', () => {
-      const wrapper = renderFooter({left: ['One Line', 'Second Line']});
-      wrapper.should.have.exactly(2).descendants('li');
-    });
-
-    it('add three columns two lines', () => {
-      const wrapper = mountFooter({
-        left: ['One Line', 'Second Line'],
-        center: ['One Line', 'Second Line'],
-        right: ['One Line', 'Second Line']
-      });
-
-      wrapper.should.have.exactly(3).descendants('ul');
-      const uls = wrapper.find('ul');
-
-      uls.forEach(ul => ul.should.have.exactly(2).descendants('li'));
-    });
-
-  });
-
-  it('should render copyright', () => {
-    const wrapper = renderFooter({
-      left: [
-        {copyright: 2010, label: ' JetBrains'}
-      ]
-    });
-
-    wrapper.find('li').should.contain.text(`Copyright © 2010–${(new Date()).getFullYear()} JetBrains`);
-  });
-
-  it('should render link', () => {
-    const wrapper = renderFooter({
-      left: [
-        {url: 'http://jetbrains.com', label: 'JetBrains', title: 'JetBrains Official Site'}
-      ]
-    });
-
-    const link = wrapper.find('a');
-
-    link.should.have.text('JetBrains');
-    link.should.have.attr('href', 'http://jetbrains.com');
-    link.should.have.attr('title', 'JetBrains Official Site');
-  });
-});

package/components/global/create-stateful-context.js

@@ -1,46 +0,0 @@
-import React, {createContext, memo, useContext, useEffect, useState} from 'react';
-import PropTypes from 'prop-types';
-
-export default function createStatefulContext(initialValue, name = '') {
-  const ValueContext = createContext(initialValue);
-  const UpdateContext = createContext(() => {});
-
-  function Provider({children}) {
-    const [value, update] = useState(initialValue);
-    return (
-      <ValueContext.Provider value={value}>
-        <UpdateContext.Provider value={update}>
-          {children}
-        </UpdateContext.Provider>
-      </ValueContext.Provider>
-    );
-  }
-  Provider.propTypes = {
-    children: PropTypes.node
-  };
-  Provider.displayName = `${name}Provider`;
-
-  function useUpdate(value, skipUpdate) {
-    const update = useContext(UpdateContext);
-    useEffect(() => {
-      if (!skipUpdate) {
-        update(value);
-      }
-    }, [update, value, skipUpdate]);
-  }
-
-  function Updater({value, skipUpdate}) {
-    useUpdate(value, skipUpdate);
-
-    return null;
-  }
-  Updater.displayName = `${name}Updater`;
-
-  return {
-    ValueContext,
-    UpdateContext,
-    Provider,
-    useUpdate,
-    Updater: memo(Updater)
-  };
-}

package/components/global/data-tests.test.js

@@ -1,18 +0,0 @@
-import dataTests from './data-tests';
-
-describe('dataTests', () => {
-  it('should join strings', () => {
-    dataTests('foo', 'bar').should.be.equal('foo bar');
-  });
-
-  it('should ignore nulls', () => {
-    dataTests('foo', null, undefined, '', 'bar').should.be.equal('foo bar');
-  });
-
-  it('should support map-like arguments', () => {
-    dataTests('foo', {
-      bar: true,
-      notBar: false
-    }).should.be.equal('foo bar');
-  });
-});

package/components/global/dom.examples.js

@@ -1,39 +0,0 @@
-import {getStyles, getRect, getPixelRatio, getWindowHeight} from '@jetbrains/ring-ui/components/global/dom';
-
-export default {
-  title: 'Utilities/DOM',
-
-  parameters: {
-    notes: 'A collection of DOM utilities.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  const node = document.createElement('div');
-
-  node.innerHTML = `
-      <div id="rect-target" style="min-width: 200px"></div>
-      <div id="report"></div>
-    `;
-
-  function calc() {
-    const rectTarget = node.querySelector('#rect-target');
-    rectTarget.innerHTML = `
-        Element min-width = ${getStyles(rectTarget).minWidth} <br/>
-        Element rect = ${JSON.stringify(getRect(rectTarget))} <br/>
-      `;
-
-    const report = node.querySelector('#report');
-    report.innerHTML = `
-       Pixel ratio = ${getPixelRatio()} <br/>
-       Window height = ${getWindowHeight()} <br/>
-      `;
-  }
-
-  setTimeout(calc);
-
-  return node;
-};
-
-basic.storyName = 'DOM';

package/components/global/dom.test.js

@@ -1,99 +0,0 @@
-import {getRect, getStyles, isMounted} from './dom';
-
-const nodes = [];
-
-function create(tag = 'div') {
-  return document.createElement(tag);
-}
-
-function attach(node) {
-  nodes.push(node);
-  return document.body.insertBefore(node, document.body.firstChild);
-}
-
-afterEach(() => {
-  let node;
-  while ((node = nodes.pop())) {
-    if (node.parentNode) {
-      node.parentNode.removeChild(node);
-    }
-  }
-});
-
-describe('DOM', () => {
-  describe('isMounted', () => {
-    it('should return true for the document', () => {
-      isMounted(document).should.equal(true);
-    });
-
-    it('should return true for an element attached to DOM', () => {
-      const element = attach(create());
-      isMounted(element).should.equal(true);
-    });
-
-    it('should return false for an element that\'s not attached to DOM', () => {
-      const element = create();
-      isMounted(element).should.equal(false);
-    });
-
-    it('should return true for textNode attached to DOM', () => {
-      const textNode = attach(document.createTextNode('Lorem ipsum dolor sit amet.'));
-      isMounted(textNode).should.equal(true);
-    });
-
-    it('should return false for textNode that\'s not attached to DOM', () => {
-      const textNode = document.createTextNode('Lorem ipsum dolor sit amet.');
-      isMounted(textNode).should.equal(false);
-    });
-  });
-
-  describe('getStyles', () => {
-    it('should return css-property that has been set via setAttribute(\'style\')', () => {
-      const element = attach(create());
-      element.setAttribute('style', 'width: 100px;');
-
-      getStyles(element).width.should.equal('100px');
-    });
-
-    it('should return css-property that has been set via style-attribute', () => {
-      const element = attach(create());
-      element.style.width = '100px';
-
-      getStyles(element).width.should.equal('100px');
-    });
-
-    it('should return css-property that has been set before mounting the node', () => {
-      const element = attach(create());
-      element.style.width = '100px';
-
-      getStyles(element).width.should.equal('100px');
-    });
-  });
-
-  describe('getRect', () => {
-    const style = 'position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; padding: 3px; margin: 4px; border: 2px solid;';
-
-    it('should return DOMRect-like object for an element', () => {
-      const element = attach(create());
-      element.setAttribute('style', style);
-
-      getRect(element).should.
-        deep.equal({top: 14, right: 124, bottom: 124, left: 14, width: 110, height: 110});
-    });
-
-    it('should return DOMRect-like stub for unmounted element', () => {
-      const element = create();
-      element.setAttribute('style', style);
-
-      getRect(element).should.
-        deep.equal({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0});
-    });
-
-    it('should return DOMRect-like object for a range', () => {
-      const range = document.createRange();
-      range.selectNode(document.body);
-
-      getRect(range).should.have.all.keys(['top', 'right', 'bottom', 'left', 'width', 'height']);
-    });
-  });
-});

package/components/global/focus-sensor-hoc.js

@@ -1,112 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-
-import composeRefs from './composeRefs';
-
-export default function focusSensorHOC(ComposedComponent) {
-  return class FocusSensor extends Component {
-    static propTypes = {
-      ...ComposedComponent.propTypes,
-      focused: PropTypes.bool,
-      autofocus: PropTypes.bool,
-      onFocus: PropTypes.func,
-      onBlur: PropTypes.func,
-      innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-    };
-
-    static defaultProps = {
-      ...ComposedComponent.defaultProps,
-      focused: false,
-      autofocus: false,
-      onFocus: () => {},
-      onBlur: () => {}
-    };
-
-    state = {
-      focused: this.props.focused
-    };
-
-    componentDidMount() {
-      const {props: {autofocus}, node} = this;
-
-      node.setAttribute('tabindex', '0');
-      node.style.outline = 'none';
-
-      document.addEventListener('focus', this.onFocusCapture, true);
-      document.addEventListener('blur', this.onBlurCapture, true);
-
-      if (autofocus) {
-        node.focus();
-      }
-    }
-
-    componentDidUpdate(prevProps) {
-      const {focused} = this.props;
-      if (focused && !prevProps.focused) {
-        this.onFocusRestore();
-      } else if (!focused && prevProps.focused) {
-        this.onFocusReset();
-      }
-    }
-
-    componentWillUnmount() {
-      document.removeEventListener('focus', this.onFocusCapture, true);
-      document.removeEventListener('blur', this.onBlurCapture, true);
-    }
-
-    _skipNextCapture = false;
-
-    onRefUpdate = node => {
-      if (node) {
-        this.node = node;
-      }
-    };
-
-    onFocusCapture = ({target}) => {
-      if (this._skipNextCapture) {
-        this._skipNextCapture = false;
-        return;
-      }
-      const focused = this.node.contains(target);
-      if (focused && !this.state.focused) {
-        this.setState({focused: true});
-        this.props.onFocus();
-      }
-    };
-
-    onBlurCapture = ({target}) => {
-      const {state: {focused}, node} = this;
-      if (focused) {
-        setTimeout(() => {
-          const blurred = node.contains(target) && !node.contains(document.activeElement);
-          if (blurred) {
-            this.setState({focused: false});
-            this.props.onBlur();
-          }
-        }, 1);
-      }
-    };
-
-    onFocusRestore = () => {
-      this._skipNextCapture = true;
-      this.node.focus();
-    };
-
-    onFocusReset = () => {
-      this.node.blur();
-    };
-
-    render() {
-      const {autofocus, focused, onFocus, onBlur, innerRef, ...rest} = this.props;
-      return (
-        <ComposedComponent
-          {...rest}
-          innerRef={composeRefs(innerRef, this.onRefUpdate)}
-          focused={this.state.focused}
-          onFocusReset={this.onFocusReset}
-          onFocusRestore={this.onFocusRestore}
-        />
-      );
-    }
-  };
-}

package/components/global/fuzzy-highlight.test.js

@@ -1,52 +0,0 @@
-import fuzzyHighlight from './fuzzy-highlight';
-
-describe('fuzzyHighlight', () => {
-  it('should match full haystack', () => {
-    fuzzyHighlight('cartwheel', 'cartwheel').should.deep.equal({
-      matched: true,
-      highlight: '**cartwheel**'
-    });
-  });
-  it('should match part of the haystack', () => {
-    fuzzyHighlight('car', 'cartwheel').should.deep.equal({
-      matched: true,
-      highlight: '**car**twheel'
-    });
-    fuzzyHighlight('cwhl', 'cartwheel').should.deep.equal({
-      matched: true,
-      highlight: '**c**art**wh**ee**l**'
-    });
-    fuzzyHighlight('cwheel', 'cartwheel').should.deep.equal({
-      matched: true,
-      highlight: '**c**art**wheel**'
-    });
-  });
-  it('shouldn\'t match needle with extra symbols', () => {
-    fuzzyHighlight('cwheeel', 'cartwheel').should.deep.equal({
-      matched: false,
-      highlight: 'cartwheel'
-    });
-  });
-  it('shouldn\'t match needle with false order', () => {
-    fuzzyHighlight('lw', 'cartwheel').should.deep.equal({
-      matched: false,
-      highlight: 'cartwheel'
-    });
-  });
-  it('should be case-insensitive by default', () => {
-    fuzzyHighlight('cAr', 'Cartwheel').should.deep.equal({
-      matched: true,
-      highlight: '**Car**twheel'
-    });
-  });
-  it('should allow case-sensitivity as an option', () => {
-    fuzzyHighlight('cAr', 'Cartwheel', true).should.deep.equal({
-      matched: false,
-      highlight: 'Cartwheel'
-    });
-    fuzzyHighlight('Car', 'Cartwheel', true).should.deep.equal({
-      matched: true,
-      highlight: '**Car**twheel'
-    });
-  });
-});

package/components/global/get-uid.test.js

@@ -1,21 +0,0 @@
-import getUID from './get-uid';
-
-describe('getUid', () => {
-  it('should throw an exception if the "name" argument isn\'t passed', () => {
-    () => getUID().should.throw(Error);
-  });
-
-  it('should return a unique id every time', () => {
-    const id1 = getUID('test');
-    const id2 = getUID('test');
-    const id3 = getUID('test');
-
-    id1.should.not.be.equal(id2);
-    id2.should.not.be.equal(id3);
-  });
-
-  it('should return an id having a passed prefix', () => {
-    getUID('test').should.have.string('test');
-    getUID('tset').should.have.string('tset');
-  });
-});