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

package/components/list/list__item.js

@@ -1,233 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import dataTests from '../global/data-tests';
-import Avatar, {Size as AvatarSize} from '../avatar/avatar';
-import Checkbox from '../checkbox/checkbox';
-import Icon from '../icon/icon';
-
-import getUID from '../global/get-uid';
-import globalStyles from '../global/global.css';
-
-import styles from './list.css';
-
-/**
- * @constructor
- * @extends {ReactComponent}
- */
-
-const RING_UNIT = 8;
-const DEFAULT_PADDING = 16;
-const CHECKBOX_WIDTH = 28;
-
-export default class ListItem extends PureComponent {
-  static propTypes = {
-    scrolling: PropTypes.bool,
-    hover: PropTypes.bool,
-    details: PropTypes.string,
-    disabled: PropTypes.bool,
-    className: PropTypes.string,
-    tabIndex: PropTypes.number,
-    checkbox: PropTypes.bool,
-    description: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element,
-      PropTypes.array
-    ]),
-    showGeneratedAvatar: PropTypes.bool,
-    username: PropTypes.string,
-    avatar: PropTypes.string,
-    subavatar: PropTypes.string,
-    glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-    icon: PropTypes.string,
-    iconSize: PropTypes.number,
-    rightNodes: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element,
-      PropTypes.array
-    ]),
-    leftNodes: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element,
-      PropTypes.array
-    ]),
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    title: PropTypes.string,
-    level: PropTypes.number,
-    rgItemType: PropTypes.number,
-    rightGlyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-    compact: PropTypes.bool,
-    onClick: PropTypes.func,
-    onCheckboxChange: PropTypes.func,
-    onMouseOver: PropTypes.func,
-    onMouseDown: PropTypes.func,
-    onMouseUp: PropTypes.func,
-    'data-test': PropTypes.string
-  };
-
-  id = getUID('list-item-');
-
-  stopBubbling = e => e.stopPropagation();
-
-  _isString = val => typeof val === 'string' || val instanceof String;
-
-  render() {
-    const {
-      scrolling,
-      className,
-      disabled,
-      checkbox,
-      avatar,
-      subavatar,
-      glyph,
-      icon,
-      rightGlyph,
-      description,
-      label,
-      title,
-      details,
-      hover,
-      rgItemType,
-      level,
-      tabIndex,
-      compact,
-      onClick,
-      onCheckboxChange,
-      onMouseOver,
-      onMouseDown,
-      onMouseUp,
-      rightNodes,
-      leftNodes,
-      showGeneratedAvatar,
-      username,
-      ...restProps
-    } = this.props;
-
-    const checkable = checkbox !== undefined;
-    const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
-    const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
-    const showCheckbox = checkable && (checkbox || !hasLeftNodes || (hover && !disabled));
-
-    const classes = classNames(styles.item, globalStyles.resetButton, className, {
-      [styles.action]: !disabled,
-      [styles.hover]: hover && !disabled,
-      [styles.compact]: compact,
-      [styles.scrolling]: scrolling,
-      [styles.disabled]: disabled
-    });
-
-    const detailsClasses = classNames({
-      [styles.details]: details,
-      [styles.padded]: icon !== undefined ||
-        checkbox !== undefined ||
-        glyph !== undefined
-    });
-
-    const style = {
-      paddingLeft: `${(+level || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`
-    };
-
-    let computedTitle = null;
-    if (this._isString(title)) {
-      // if title is specified and is a string then use it
-      computedTitle = title;
-    } else {
-      // otherwise use label if it is a string;
-      // label can also be an element, use empty string in this case
-      computedTitle = this._isString(label) ? label : '';
-    }
-
-    const dataTest = dataTests({
-      'ring-list-item': (restProps['data-test'] || '').indexOf('ring-list-item') === -1,
-      'ring-list-item-action': !disabled,
-      'ring-list-item-selected': checkbox
-    }, restProps['data-test']);
-
-    return (
-      <div className={styles.itemContainer} data-test={dataTest}>
-        {showCheckbox && (
-          <div
-            className={styles.checkboxContainer}
-          >
-            <Checkbox
-              aria-labelledby={this.id}
-              checked={checkbox}
-              disabled={disabled}
-              onChange={onCheckboxChange}
-              onClick={this.stopBubbling}
-            />
-          </div>
-        )}
-        <button
-          id={this.id}
-          type="button"
-          tabIndex={tabIndex}
-          onClick={onClick}
-          onMouseOver={onMouseOver}
-          onMouseDown={onMouseDown}
-          onFocus={onMouseOver}
-          onMouseUp={onMouseUp}
-          className={classes}
-          style={style}
-        >
-          <div className={styles.top} onMouseOut={this.stopBubbling} onBlur={this.stopBubbling}>
-            {!showCheckbox && (
-              <div className={styles.left}>
-                {leftNodes}
-                {glyph && (
-                  <Icon
-                    className={styles.glyph}
-                    glyph={glyph}
-                    size={this.props.iconSize}
-                  />
-                )}
-                {(avatar || shouldShowGeneratedAvatar) && (
-                  <Avatar
-                    className={styles.avatar}
-                    url={avatar}
-                    size={AvatarSize.Size20}
-                    subavatar={subavatar}
-                    username={username}
-                  />
-                )}
-              </div>
-            )}
-
-            <span
-              className={styles.label}
-              title={computedTitle}
-              data-test="ring-list-item-label"
-            >{label}</span>
-
-            {description && (
-              <span
-                className={styles.description}
-                data-test="ring-list-item-description"
-              >{description}</span>
-            )}
-
-            <div className={styles.right}>
-              {rightGlyph && (
-                <Icon
-                  className={styles.rightGlyph}
-                  glyph={rightGlyph}
-                  size={this.props.iconSize}
-                />
-              )}
-              {icon && (
-                <div
-                  className={styles.icon}
-                  style={{backgroundImage: `url("${icon}")`}}
-                />
-              )}
-              {rightNodes}
-            </div>
-          </div>
-
-          {details && <div className={detailsClasses}>{details}</div>}
-        </button>
-      </div>
-    );
-  }
-}

package/components/list/list__item.test.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Icon from '../icon/icon';
-import Checkbox from '../checkbox/checkbox';
-
-import ListItem from './list__item';
-
-
-describe('ListItem', () => {
-  const shallowListItem = props => shallow(<ListItem {...props}/>);
-  const mountListItem = props => mount(<ListItem {...props}/>);
-
-
-  it('should create component', () => {
-    mountListItem().should.have.type(ListItem);
-  });
-
-
-  it('should use passed className', () => {
-    shallowListItem({className: 'test-class'}).find('button').should.
-      have.className('test-class');
-  });
-
-
-  it('should add data test attributes', () => {
-    shallowListItem().should.
-      match('div[data-test="ring-list-item ring-list-item-action"]');
-  });
-
-
-  it('should remove ring-list-item-action data-test attribute if item is disabled', () => {
-    shallowListItem({disabled: true}).should.
-      match('div[data-test="ring-list-item"]');
-  });
-
-
-  it('should add data-test attribute if item is selected', () => {
-    shallowListItem({checkbox: false}).should.
-      match('div[data-test="ring-list-item ring-list-item-action"]');
-
-    shallowListItem({checkbox: true}).should.
-      match('div[data-test="ring-list-item ring-list-item-action ring-list-item-selected"]');
-  });
-
-
-  it('should render checkbox icon', () => {
-    shallowListItem({checkbox: true}).
-      find(Checkbox).prop('checked').should.be.true;
-
-    shallowListItem({checkbox: undefined}).
-      find(Checkbox).length.should.equal(0);
-  });
-
-
-  it('should not render check mark icon', () => {
-    shallowListItem().should.not.
-      containMatchingElement(<Icon/>);
-  });
-});

package/components/list/list__link.js

@@ -1,72 +0,0 @@
-import React, {Component, PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Link, {linkHOC} from '../link/link';
-import dataTests from '../global/data-tests';
-
-import styles from './list.css';
-
-/**
- * @constructor
- * @extends {ReactComponent}
- */
-export default class ListLink extends PureComponent {
-  static propTypes = {
-    ...Link.propTypes,
-    description: PropTypes.string,
-    label: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.string,
-      PropTypes.func
-    ]),
-    rgItemType: PropTypes.number,
-    scrolling: PropTypes.bool,
-    url: PropTypes.string,
-    LinkComponent: PropTypes.oneOfType([
-      PropTypes.instanceOf(Component),
-      PropTypes.func,
-      PropTypes.string
-    ]),
-    onCheckboxChange: PropTypes.func,
-    compact: PropTypes.bool
-  };
-
-  render() {
-    const {
-      scrolling,
-      'data-test': dataTest,
-      className,
-      label,
-      hover,
-      description,
-      rgItemType,
-      url,
-      onCheckboxChange,
-      disabled,
-      LinkComponent,
-      compact,
-      hoverClassName,
-      ...restProps
-    } = this.props;
-    const classes = classNames(styles.item, className, {
-      [styles.actionLink]: !disabled,
-      [styles.compact]: compact,
-      [styles.scrolling]: scrolling
-    });
-
-    const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
-
-    return (
-      <Comp
-        pseudo={!this.props.href}
-        {...restProps}
-        hover={hover && !disabled}
-        className={classes}
-        data-test={dataTests('ring-list-link', dataTest)}
-      >
-        {label}
-      </Comp>
-    );
-  }
-}

package/components/list/list__separator.js

@@ -1,30 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import styles from './list.css';
-
-export default class ListSeparator extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    description: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.string
-    ]),
-    isFirst: PropTypes.bool
-  };
-
-  render() {
-    const {description, isFirst, className} = this.props;
-
-    const classes = classNames(styles.separator, className, {
-      [styles.separator_first]: isFirst
-    });
-
-    return (
-      <span
-        className={classes}
-      >{description}</span>
-    );
-  }
-}

package/components/list/list__title.js

@@ -1,44 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import styles from './list.css';
-
-export default class ListTitle extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    description: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.string
-    ]),
-    label: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.string
-    ]),
-    isFirst: PropTypes.bool
-  };
-
-  render() {
-    const {className, description, label, isFirst} = this.props;
-
-    const classes = classnames(styles.title, className, {
-      [styles.title_first]: isFirst
-    });
-
-    return (
-      <span
-        className={classes}
-        data-test="ring-list-title"
-      >
-        <span
-          className={classnames(styles.label, styles.text)}
-          data-test="ring-list-title-label"
-        >{label}</span>
-        <div
-          className={styles.description}
-          data-test="ring-list-title-description"
-        >{description}</div>
-      </span>
-    );
-  }
-}

package/components/list/list__users-groups-source.test.js

@@ -1,125 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import ListUsersGroupsSource from './list__users-groups-source';
-
-describe('List Users Groups Source', () => {
-  let fakeAuth;
-  beforeEach(() => {
-    fakeAuth = {
-      requestToken: sandbox.stub().returns(Promise.resolve('testToken'))
-    };
-  });
-
-  it('Should convert users to list model', async () => {
-    const source = new ListUsersGroupsSource(fakeAuth);
-
-    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
-      id: 1,
-      name: 'test user',
-      login: 'testUser',
-      type: 'user',
-      profile: {avatar: {url: 'http://test.com.url'}}
-    }]));
-
-    sandbox.stub(source, 'getGroups').returns(Promise.resolve([{
-      id: 1,
-      name: 'test group',
-      type: 'userGroup',
-      userCount: 123,
-      iconUrl: 'http://foo.bar'
-    }]));
-
-    const dataForList = await source.getForList();
-    dataForList.should.deep.contain({
-      id: 1,
-      login: 'testUser',
-      profile: {avatar: {url: 'http://test.com.url'}},
-      name: 'test user',
-      key: 1,
-      type: 'user',
-      label: 'test user',
-      description: 'testUser',
-      avatar: 'http://test.com.url'
-    });
-
-  });
-
-  it('Should convert usergroups to list model', async () => {
-    const source = new ListUsersGroupsSource(fakeAuth);
-
-    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
-      id: 1,
-      name: 'test user',
-      profile: {avatar: {url: 'http://test.com.url'}}
-    }]));
-
-    sandbox.stub(source, 'getGroups').returns(Promise.resolve([{
-      id: 1,
-      name: 'test group',
-      type: 'userGroup',
-      userCount: 123,
-      iconUrl: 'http://foo.bar'
-    }]));
-
-    const dataForList = await source.getForList();
-    dataForList.should.deep.contain({
-      id: 1,
-      key: 1,
-      name: 'test group',
-      label: 'test group',
-      type: 'userGroup',
-      description: '123 members',
-      userCount: 123,
-      avatar: 'http://foo.bar',
-      glyph: null,
-      iconUrl: 'http://foo.bar'
-    });
-  });
-
-  it('Should support userCount plural formatter', async () => {
-    const source = new ListUsersGroupsSource(fakeAuth, {
-      getPluralForUserCount: count => `${count} text`
-    });
-
-    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
-      id: 1,
-      name: 'test user',
-      profile: {avatar: {url: 'http://test.com.url'}}
-    }]));
-
-    sandbox.stub(source, 'getGroups').returns(Promise.resolve([{
-      id: 1,
-      name: 'test group',
-      userCount: 123
-    }]));
-
-    const dataForList = await source.getForList();
-    dataForList[3].description.should.equal('123 text');
-  });
-
-  it('Should display "No users" title if no users found', async () => {
-    const source = new ListUsersGroupsSource(fakeAuth, {});
-
-    sandbox.stub(source, 'getUsers').returns(Promise.resolve([]));
-
-    sandbox.stub(source, 'getGroups').
-      returns(Promise.resolve([{id: 1, name: 'test group'}]));
-
-    const dataForList = await source.getForList();
-    dataForList[0].description.should.equal('No users');
-  });
-
-  it('Should display "No groups" title if no groups found', async () => {
-    const source = new ListUsersGroupsSource(fakeAuth, {});
-
-    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
-      id: 1,
-      name: 'test user',
-      profile: {avatar: {url: 'http://test.com.url'}}
-    }]));
-
-    sandbox.stub(source, 'getGroups').returns(Promise.resolve([]));
-
-    const dataForList = await source.getForList();
-    dataForList[2].description.should.equal('No groups');
-  });
-});

package/components/loader/loader.examples.js

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Loader from '@jetbrains/ring-ui/components/loader/loader';
-
-export default {
-  title: 'Components/Loader',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: Loader,
-    framework: 'react',
-
-    hermione: {skip: true}
-  }
-};
-
-export const basic = args => <Loader {...args}/>;
-
-basic.storyName = 'Loader';
-basic.args = {message: 'Loading...'};

package/components/loader/loader.js

@@ -1,64 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-
-import dataTests from '../global/data-tests';
-
-import LoaderCore from './loader__core';
-
-/**
- * @name Loader
- */
-/**
- * Displays a large animated loader with an optional caption. Typical use cases: page loading animation, major action animation.
- */
-export default class Loader extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    size: PropTypes.number,
-    colors: PropTypes.array,
-    message: PropTypes.string,
-    'data-test': PropTypes.string,
-    stop: PropTypes.bool,
-    deterministic: PropTypes.bool
-  };
-
-  componentDidUpdate(prevProps) {
-    if (this.loader) {
-      if (!prevProps.stop && this.props.stop) {
-        this.loader.stopAnimation();
-      } else if (prevProps.stop && !this.props.stop) {
-        this.loader.startAnimation();
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    this.loader.destroy();
-  }
-
-  initLoader = el => {
-    if (el) {
-      this.loader = new LoaderCore(el, this.props);
-    }
-  };
-
-  render() {
-    const {
-      message,
-      size,
-      colors,
-      'data-test': dataTest,
-      stop,
-      deterministic,
-      ...restProps
-    } = this.props;
-
-    return (
-      <div
-        data-test={dataTests('ring-loader', dataTest)}
-        {...restProps}
-        ref={this.initLoader}
-      />
-    );
-  }
-}