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

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/compose.js

@@ -1,4 +0,0 @@
-const compose = (...funcs) =>
-  funcs.reduce((acc, func) => arg => acc(func(arg)), arg => arg);
-
-export default compose;

package/components/global/composeRefs.js

@@ -1,7 +0,0 @@
-export default (...refs) => value => refs.forEach(ref => {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref != null) {
-    ref.current = value;
-  }
-});

package/components/global/conic-gradient.js

@@ -1,31 +0,0 @@
-/* global ConicGradient */
-import 'conic-gradient';
-
-import memoize from './memoize';
-import supportsCss from './supports-css';
-
-const conicGradient = memoize(({stops, size}) => (
-  supportsCss('background-image: conic-gradient(white, black)')
-    ? `conic-gradient(${stops})`
-    : new ConicGradient({stops, size})
-));
-
-export default stops => conicGradient(stops).toString();
-
-export const conicGradientWithMask = (mask, stops, size) => {
-  const gradient = conicGradient({stops, size});
-
-  if (!mask.supports && gradient instanceof ConicGradient) {
-    Object.defineProperty(gradient, 'svg', {
-      value: gradient.svg.replace('<image ', `
-        ${mask.svgDefs}    
-        <image mask="url(#${mask.maskId})" `)
-    });
-  }
-
-  return {
-    ...mask.css,
-    'background-image': gradient.toString()
-  };
-};
-

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.js

@@ -1,17 +0,0 @@
-
-function expandMap(attrsMap) {
-  return Object.entries(attrsMap).
-    reduce((result, [key, value]) => (value ? [...result, key] : result), []);
-}
-
-export default function joinDataTestAttributes(...attrs) {
-  return attrs.
-    filter(attr => !!attr).
-    reduce((result, attr) => {
-      if (typeof attr === 'object') {
-        return [...result, ...expandMap(attr)];
-      }
-      return [...result, attr];
-    }, []).
-    join(' ');
-}

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.js

@@ -1,105 +0,0 @@
-/**
- * @name DOM
- */
-
-export const getStyles = window.getComputedStyle.bind(window);
-
-export function isMounted(node) {
-  if (node === document) {
-    return true;
-  }
-
-  return node instanceof Node && document.documentElement.contains(node.parentNode);
-}
-
-const rectStub = {top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0};
-
-export function getRect(node) {
-  if (node instanceof Range || isMounted(node)) {
-    const {top, right, bottom, left, width, height} = node.getBoundingClientRect();
-    return {top, right, bottom, left, width, height};
-  } else {
-    return Object.assign({}, rectStub);
-  }
-}
-
-export function getPixelRatio() {
-  return 'devicePixelRatio' in window ? window.devicePixelRatio : 1;
-}
-
-export function getWindowHeight() {
-  return window.innerHeight;
-}
-
-export function getWindowWidth() {
-  return window.innerWidth;
-}
-
-export function isNodeInVisiblePartOfPage(node) {
-  const {top, bottom, left, right} = getRect(node);
-  return !(bottom < 0 || right < 0 || getWindowHeight() - top < 0 || getWindowWidth() - left < 0);
-}
-
-export function getDocumentScrollTop() {
-  return (document.documentElement && document.documentElement.scrollTop) ||
-    document.body.scrollTop;
-}
-
-export function getDocumentScrollLeft() {
-  return (document.documentElement && document.documentElement.scrollLeft) ||
-    document.body.scrollLeft;
-}
-
-export const applyMethodToClasses = method => (classList, classes = '') => {
-  classes.
-    split(/\s+/g).
-    filter(className => !!className).
-    forEach(className => classList[method](className));
-};
-
-export const addClasses = applyMethodToClasses('add');
-export const removeClasses = applyMethodToClasses('remove');
-export const toggleClasses = (classList, classes) =>
-  Object.entries(classes).forEach(([className, on]) => classList.toggle(className, on));
-
-export function setRootStyleProperties(properties = {}) {
-  const rootStyle = document.documentElement.style;
-
-  Object.entries(properties).forEach(([key, value]) => {
-    rootStyle.setProperty(key, value);
-  });
-}
-
-export function resetRootStyleProperties(properties = {}) {
-  const rootStyle = document.documentElement.style;
-
-  Object.keys(properties).
-    forEach(key => rootStyle.removeProperty(key));
-}
-
-export class Listeners {
-  _all = new Set();
-
-  add(el, event, handler, useCapture) {
-    el.addEventListener(event, handler, useCapture);
-    const dispatchFn = () => el.removeEventListener(event, handler, useCapture);
-    this._all.add(dispatchFn);
-    return dispatchFn;
-  }
-
-  remove(fn) {
-    fn();
-    this._all.delete(fn);
-  }
-
-  removeAll() {
-    this._all.forEach(fn => this.remove(fn));
-  }
-}
-
-// Synthetic events from Combokeys#trigger are plain objects
-export function preventDefault(e) {
-  if (e.preventDefault) {
-    e.preventDefault();
-  }
-}

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']);
-    });
-  });
-});