@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/avatar/avatar.js

@@ -1,169 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import {encodeURL, isDataURI, parseQueryString} from '../global/url';
-import {getPixelRatio} from '../global/dom';
-
-import styles from './avatar.css';
-import FallbackAvatar from './fallback-avatar';
-
-/**
- * @name Avatar
- */
-
-export const Size = {
-  Size18: 18,
-  Size20: 20,
-  Size24: 24,
-  Size28: 28,
-  Size32: 32,
-  Size40: 40,
-  Size48: 48,
-  Size56: 56
-};
-
-export default class Avatar extends PureComponent {
-  static propTypes = {
-    dpr: PropTypes.number,
-    className: PropTypes.string,
-    size: PropTypes.number,
-    style: PropTypes.object,
-    url: PropTypes.string,
-    round: PropTypes.bool,
-    subavatar: PropTypes.string,
-    subavatarSize: PropTypes.number,
-    username: PropTypes.string,
-    skipParams: PropTypes.bool
-  };
-
-  static defaultProps = {
-    dpr: getPixelRatio(),
-    size: Size.Size20,
-    subavatarSize: Size.Size20 / 2,
-    style: {}
-  };
-
-  state = {
-    errorUrl: ''
-  };
-
-  handleError = () => {
-    this.setState({errorUrl: this.props.url});
-  };
-
-  handleSuccess = () => {
-    this.setState({errorUrl: ''});
-  };
-
-  render() {
-    const {
-      size,
-      url,
-      dpr,
-      style,
-      round,
-      subavatar,
-      subavatarSize,
-      username,
-      skipParams,
-      ...restProps
-    } = this.props;
-    const sizeString = `${size}px`;
-    const subavatarSizeString = `${subavatarSize}px`;
-    const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
-    const styleObj = {
-      borderRadius: round ? '50%' : borderRadius,
-      height: sizeString,
-      width: sizeString,
-      ...style
-    };
-
-    const styleObjGroup = {
-      borderRadius: '2px',
-      height: subavatarSizeString,
-      width: subavatarSizeString,
-      ...style
-    };
-
-    if (!url || this.state.errorUrl === url) {
-      return (
-        <span
-          {...restProps}
-          data-test="avatar"
-          className={
-            classNames(styles.avatar, this.props.className, {[styles.empty]: username == null})
-          }
-          style={styleObj}
-        >{
-            username != null && (
-              <FallbackAvatar
-                size={size}
-                round={round}
-                username={username}
-              />
-            )
-          }</span>
-      );
-    }
-
-    let src = url;
-    if (!skipParams && !isDataURI(url)) {
-      const [urlStart, query] = url.split('?');
-      const queryParams = {
-        ...parseQueryString(query),
-        dpr,
-        size
-      };
-
-      src = encodeURL(urlStart, queryParams);
-    }
-    let subavatarSrc = null;
-    if (subavatar && !isDataURI(subavatar)) {
-      const [urlStart, query] = subavatar.split('?');
-      const queryParams = {
-        ...parseQueryString(query),
-        dpr,
-        subavatarSizeString
-      };
-
-      subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
-      return (
-        <div>
-          <img
-            {...restProps}
-            onError={this.handleError}
-            onLoad={this.handleSuccess}
-            className={classNames(styles.avatar, this.props.className)}
-            style={styleObj}
-            src={src}
-            alt="User avatar"
-          />
-          <img
-            {...restProps}
-            data-test="avatar"
-            onError={this.handleError}
-            onLoad={this.handleSuccess}
-            className={classNames(styles.subavatar)}
-            style={styleObjGroup}
-            src={subavatarSrc}
-            alt="Subavatar"
-          />
-        </div>
-      );
-    } else {
-      return (
-        <img
-          {...restProps}
-          data-test="avatar"
-          onError={this.handleError}
-          onLoad={this.handleSuccess}
-          className={classNames(styles.avatar, this.props.className)}
-          style={styleObj}
-          src={src}
-          alt="User avatar"
-        />
-      );
-    }
-  }
-}

package/components/avatar/avatar.test.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-
-import {getPixelRatio} from '../global/dom';
-
-import Avatar from './avatar';
-
-const dataURI = `data:image/svg+xml,${encodeURIComponent(`
-  <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="60" cy="60" r="50" fill="#00cc00"/>
-  </svg>`
-)}`;
-
-describe('Avatar', () => {
-  it('should create component', () => {
-    render(<Avatar/>);
-    screen.getByTestId('avatar').should.exist;
-  });
-
-  it('should use passed className', () => {
-    render(<Avatar className="test-class"/>);
-    screen.getByTestId('avatar').should.have.class('test-class');
-  });
-
-  it('should use passed className when url is passed', () => {
-    render(<Avatar className="test-class" url={dataURI}/>);
-    screen.getByAltText('User avatar').should.have.class('test-class');
-  });
-
-  it('should render span when no url is passed', () => {
-    render(<Avatar/>);
-    screen.getByTestId('avatar').should.have.tagName('span');
-  });
-
-  it('should render image when url is passed', () => {
-    render(<Avatar url={dataURI}/>);
-    screen.getByAltText('User avatar').should.exist;
-  });
-
-  it('should not append params when data:uri is passed', () => {
-    render(<Avatar url={dataURI}/>);
-    screen.getByAltText('User avatar').src.should.not.match(/dpr=|size=/);
-  });
-
-  it('should append params when http:uri is passed', () => {
-    render(<Avatar url="http://"/>);
-    screen.getByAltText('User avatar').src.should.match(/dpr=|size=/);
-  });
-
-  it('should set size 20 as default', () => {
-    render(<Avatar url="http://"/>);
-    screen.getByAltText('User avatar').src.should.match(/size=20/);
-  });
-
-  it('should set proper dpr', () => {
-    render(<Avatar url="http://"/>);
-    screen.getByAltText('User avatar').src.should.match(new RegExp(`dpr=${getPixelRatio()}`));
-  });
-});

package/components/avatar/fallback-avatar.js

@@ -1,136 +0,0 @@
-import React, {useMemo} from 'react';
-import PropTypes from 'prop-types';
-
-import getUID from '../global/get-uid';
-
-const colorPairs = [
-  ['#60A800', '#D5CA00'],
-  ['#21D370', '#03E9E1'],
-  ['#3BA1FF', '#36E97D'],
-  ['#00C243', '#00FFFF'],
-  ['#4BE098', '#627FFF'],
-  ['#168BFA', '#26F7C7'],
-  ['#9D4CFF', '#39D3C3'],
-  ['#0A81F6', '#0ACFF6'],
-  ['#765AF8', '#5A91F8'],
-  ['#9E54FF', '#0ACFF6'],
-  ['#B345F1', '#669DFF'],
-  ['#765AF8', '#C059EE'],
-  ['#9039D0', '#C239D0'],
-  ['#9F2AFF', '#FD56FD'],
-  ['#AB3AF2', '#E40568'],
-  ['#9F2AFF', '#E9A80B'],
-  ['#D50F6B', '#E73AE8'],
-  ['#ED5502', '#E73AE8'],
-  ['#ED358C', '#DBED18'],
-  ['#ED358C', '#F9902E'],
-  ['#FF7500', '#FFCA00']
-];
-
-const Sizes = {
-  18: {
-    radius: 2,
-    text: {x: 9, y: 13},
-    fontSize: '11px',
-    textAnchor: 'middle'
-  },
-  24: {
-    radius: 3,
-    text: {x: 2, y: 13},
-    fontSize: '11px',
-    underscore: {x: 3, y: 17}
-  },
-  32: {
-    radius: 3,
-    text: {x: 3, y: 17},
-    fontSize: '13px',
-    letterSpacing: 1,
-    underscore: {x: 4, y: 22}
-  },
-  40: {
-    radius: 3,
-    text: {x: 5, y: 19},
-    fontSize: '15px',
-    letterSpacing: 1,
-    underscore: {x: 6, y: 28}
-  }
-};
-
-const sizeKeys = Object.keys(Sizes).map(Number);
-
-function extractLetters(name) {
-  const names = name.split(/[\s._]+/).filter(Boolean);
-  if (names.length >= 2) {
-    return names[0][0].toUpperCase() + names[1][0].toUpperCase();
-  } else if (names.length === 1) {
-    if (names[0].length >= 2) {
-      return names[0].slice(0, 2).toUpperCase();
-    } else {
-      return `${names[0][0].toUpperCase()}X`;
-    }
-  } else {
-    return 'XX';
-  }
-}
-
-// https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0#gistcomment-2775538
-const BASE = 32;
-function hashCode(s) {
-  let h = 0;
-  for (let i = 0; i < s.length; i++) {
-    h = Math.imul(BASE - 1, h) + s.charCodeAt(i) | 0;
-  }
-
-  return h;
-}
-
-export default function FallbackAvatar({username, size, round}) {
-  const hash = Math.abs(hashCode(username.toLowerCase()));
-  const [fromColor, toColor] = colorPairs[hash % colorPairs.length];
-  const possibleSizeKeys = sizeKeys.filter(key => key >= size);
-  const sizeKey = possibleSizeKeys.length > 0
-    ? Math.min(...possibleSizeKeys)
-    : Math.max(...sizeKeys);
-  const sizes = Sizes[sizeKey];
-  const radius = round ? '50%' : sizes.radius;
-  const gradientId = useMemo(() => getUID('gradient-'), []);
-  return (
-    <svg viewBox={`0 0 ${sizeKey} ${sizeKey}`} xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-          <stop stopColor={fromColor} offset="0"/>
-          <stop stopColor={toColor} offset="1"/>
-        </linearGradient>
-      </defs>
-      <g>
-        <rect
-          fill={`url(#${gradientId})`}
-          x="0"
-          y="0"
-          width={sizeKey}
-          height={sizeKey}
-          rx={radius}
-          ry={radius}
-        />
-        <text
-          x={sizes.text.x}
-          y={sizes.text.y}
-          fontFamily="Arial, Helvetica, sans-serif"
-          fontSize={sizes.fontSize}
-          letterSpacing={sizes.letterSpacing}
-          fill="#FFFFFF"
-          textAnchor={sizes.textAnchor}
-        >
-          <tspan>{extractLetters(username)}</tspan>
-          {sizes.underscore && <tspan x={sizes.underscore.x} y={sizes.underscore.y}>{'_'}</tspan>}
-        </text>
-      </g>
-    </svg>
-  );
-}
-
-FallbackAvatar.propTypes = {
-  username: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  round: PropTypes.bool
-};

package/components/badge/badge.examples.js

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Group from '@jetbrains/ring-ui/components/group/group';
-
-import Badge from '@jetbrains/ring-ui/components/badge/badge';
-
-export default {
-  title: 'Components/Badge',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a badge.'
-  }
-};
-
-export const badge = () => (
-  <Group>
-    <Badge>simple</Badge>
-    <Badge gray>gray</Badge>
-    <Badge valid>valid</Badge>
-    <Badge invalid>invalid</Badge>
-    <Badge disabled>disabled</Badge>
-  </Group>
-);

package/components/badge/badge.js

@@ -1,59 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import dataTests from '../global/data-tests';
-
-import style from './badge.css';
-
-/**
- * @name Badge
- */
-export default class Badge extends PureComponent {
-  static propTypes = {
-    gray: PropTypes.bool,
-    valid: PropTypes.bool,
-    invalid: PropTypes.bool,
-    disabled: PropTypes.bool,
-    className: PropTypes.string,
-    children: PropTypes.node,
-    'data-test': PropTypes.string
-  };
-
-  render() {
-    const {
-      // Modifiers
-      gray,
-      valid,
-      invalid,
-      disabled,
-
-      // Props
-      className,
-      children,
-      'data-test': dataTest,
-      ...props
-    } = this.props;
-
-    const classes = classNames(
-      style.badge,
-      className,
-      {
-        [style.gray]: gray,
-        [style.valid]: valid,
-        [style.invalid]: invalid,
-        [style.disabled]: disabled
-      }
-    );
-
-    return (
-      <span
-        {...props}
-        data-test={dataTests('ring-badge', dataTest)}
-        className={classes}
-      >
-        {children}
-      </span>
-    );
-  }
-}

package/components/badge/badge.test.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-
-import Badge from './badge';
-import style from './badge.css';
-
-describe('Badge', () => {
-  it('should render span with badge class', () => {
-    render(<Badge/>);
-    const element = screen.getByTestId('ring-badge');
-    element.should.have.tagName('span');
-    element.should.have.class(style.badge);
-  });
-
-  it('should use passed className', () => {
-    render(<Badge className="test-class"/>);
-    screen.getByTestId('ring-badge').should.have.class('test-class');
-  });
-
-  it('should use passed data-test', () => {
-    render(<Badge data-test="foo"/>);
-    screen.getByTestId('foo', {exact: false}).should.exist;
-  });
-
-  it('should render children', () => {
-    render(<Badge>{'foo'}</Badge>);
-    screen.getByText('foo').should.exist;
-  });
-
-  it('should render valid badge', () => {
-    render(<Badge valid/>);
-    screen.getByTestId('ring-badge').should.have.class(style.valid);
-  });
-});

package/components/button/button.examples.js

@@ -1,219 +0,0 @@
-import React, {Component, Fragment} from 'react';
-import pencilIcon from '@jetbrains/icons/pencil';
-import hourglassIcon from '@jetbrains/icons/hourglass';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Loader from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
-
-import Theme, {ThemeContext} from '@jetbrains/ring-ui/components/global/theme';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-export default {
-  title: 'Components/Button',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: Button,
-    framework: 'react'
-  },
-  argTypes: {
-    blue: {
-      table: {disable: true}
-    }
-  }
-};
-
-export const single = args => <Button {...args}/>;
-single.args = {children: 'Label'};
-single.parameters = {hermione: {skip: true}};
-
-export const basic = () => {
-  function renderButtonModifications() {
-    return ['active', 'primary', 'danger', 'delayed', 'disabled', 'dropdown'].map(modifier => (
-      <Button
-        key={modifier}
-        data-test={`button-${modifier}`}
-        {...{[modifier]: true}}
-      >
-        Button {modifier}
-      </Button>
-    ));
-  }
-
-  function renderTextModifications() {
-    return ['primary', 'danger', 'disabled', 'loader'].map(modifier => (
-      <Button text key={modifier} {...{[modifier]: true}}>
-        Text action {modifier}
-      </Button>
-    ));
-  }
-
-  function renderIconWithTextModifications() {
-    return [
-      {label: 'primary', primary: true},
-      {label: 'danger', danger: true},
-      {label: 'disabled', disabled: true},
-      {label: 'primary-disabled', primary: true, disabled: true},
-      {label: 'danger-disabled', danger: true, disabled: true}
-    ].map(modifiers => (
-      <Button key={modifiers.label} icon={pencilIcon} {...modifiers}>
-        Icon action {modifiers.label}
-      </Button>
-    ));
-  }
-
-  function renderIconActionModifications() {
-    return [
-      {label: 'primary', primary: true},
-      {label: 'danger', danger: true},
-      {label: 'disabled', disabled: true},
-      {label: 'primary-disabled', primary: true, disabled: true},
-      {label: 'danger-disabled', danger: true, disabled: true}
-    ].map(modifiers => (
-      <Button
-        key={modifiers.label}
-        title={`Just icon action (${modifiers.label})`}
-        icon={pencilIcon}
-        {...modifiers}
-      />
-    ));
-  }
-
-  return (
-    <div>
-      <div className="buttons">
-        <Button>Button default</Button>
-
-        <Button short>...</Button>
-
-        <Button href="/">Button link</Button>
-
-        <Button loader>Button loader</Button>
-
-        <Button primary loader>
-          Primary loader
-        </Button>
-
-        <Button icon={pencilIcon} loader>
-          Icon loader
-        </Button>
-
-        {renderButtonModifications()}
-
-        <Button text>Text action</Button>
-
-        {renderTextModifications()}
-
-        <Button icon={pencilIcon}>Icon action</Button>
-
-        {renderIconWithTextModifications()}
-
-        <Button icon={pencilIcon} title="Icon action"/>
-
-        {renderIconActionModifications()}
-      </div>
-
-      <div className="buttons dark">
-        <ThemeContext.Provider value={Theme.DARK}>
-          <Button>Button default</Button>
-
-          <Button short>
-            ...
-          </Button>
-
-          <Button href="/">
-            Button link
-          </Button>
-
-          <Button loader>
-            Dark loader
-          </Button>
-
-          {renderButtonModifications()}
-
-          <Button text>
-            Text action
-          </Button>
-
-          {renderTextModifications()}
-
-          <Button icon={pencilIcon}>
-            Icon action
-          </Button>
-
-          {renderIconWithTextModifications()}
-
-          <Button icon={pencilIcon} title="Icon action"/>
-
-          {renderIconActionModifications()}
-        </ThemeContext.Provider>
-      </div>
-    </div>
-  );
-};
-
-basic.storyName = 'basic';
-
-basic.parameters = {
-  hermione: {
-    actions: [
-      {type: 'capture', name: '', selector: '#root'},
-      {type: 'focus', selector: '[data-test=button-active]'},
-      {type: 'capture', name: 'focus active', selector: '#root'}
-    ]
-  },
-  storyStyles: `
-<style>
-  .buttons > button {
-    margin: 8px;
-  }
-
-  .dark {
-    background: #000;
-  }
-</style>`
-};
-
-export const longAction = () => {
-  class Sleeper extends Component {
-    state = {
-      loading: false
-    };
-
-    load = () => {
-      this.setState({loading: true}, () => {
-        setTimeout(this.sleep, 2000);
-      });
-    };
-
-    sleep = () => {
-      const date = new Date();
-      let curDate;
-      do {
-        curDate = new Date();
-      } while (curDate - date < 2000);
-
-      this.setState({loading: false});
-    };
-
-    render() {
-      const {loading} = this.state;
-      return (
-        <Fragment>
-          <Button loader={loading} onClick={this.load}>
-            Sleep
-          </Button>
-          <Button title="Sleep" loader={loading} icon={hourglassIcon} onClick={this.load}/>
-          {loading && <Loader/>}
-        </Fragment>
-      );
-    }
-  }
-
-  return <Sleeper/>;
-};
-
-longAction.storyName = 'long action';
-longAction.parameters = {hermione: {skip: true}};