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

package/components/icon/icon.js

@@ -1,97 +0,0 @@
-/**
- * @name Icon
- */
-
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import deprecate from 'util-deprecate';
-
-import {Color, Size} from './icon__constants';
-import styles from './icon.css';
-import IconSVG from './icon__svg';
-
-const warnSize = deprecate(
-  () => {},
-  `\`size\`, \`width\` and \`height\` props are not recommended to use in Ring UI \`Icon\` component. The intrinsic sizes of SVG icon (\`width\` and \`height\` SVG attributes) are used instead.
-
-We strongly recommend to use icons handcrafted for particular sizes. If your icon doesn't exist in the desired size, please ask your designer to draw one. "Responsive" checkmark should be unchecked when exporting icon.'`
-);
-
-export default class Icon extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    color: PropTypes.string,
-    glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
-    height: PropTypes.number,
-    size: PropTypes.number,
-    width: PropTypes.number,
-    loading: PropTypes.bool,
-    suppressSizeWarning: PropTypes.bool
-  };
-
-  static defaultProps = ({
-    className: '',
-    color: Color.DEFAULT,
-    glyph: ''
-  });
-
-  static Color = Color;
-  static Size = Size;
-
-  warnSize() {
-    if (this.props.suppressSizeWarning) {
-      return;
-    }
-    warnSize();
-  }
-
-  getStyle() {
-    const {size, width, height} = this.props;
-    if (width || height) {
-      this.warnSize();
-      return {width, height};
-    }
-    if (size) {
-      this.warnSize();
-      return {
-        width: size,
-        height: size
-      };
-    }
-    return null;
-  }
-
-  render() {
-    const {
-      className, size, color, loading, glyph: Glyph, width, height, suppressSizeWarning,
-      ...restProps
-    } = this.props;
-
-    if (!Glyph) {
-      return null;
-    }
-
-    const classes = classNames(styles.icon,
-      {
-        [styles[color]]: !!color,
-        [styles.loading]: loading
-      },
-      className
-    );
-
-    return (
-      <span
-        {...restProps}
-        className={classes}
-      >
-        {typeof Glyph === 'string'
-          ? <IconSVG src={Glyph} style={this.getStyle()}/>
-          : <Glyph className={styles.glyph} style={this.getStyle()}/>
-        }
-      </span>
-    );
-  }
-}
-
-export {Size};

package/components/icon/icon.test.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import {mount, render} from 'enzyme';
-import defaultIcon from '@jetbrains/icons/umbrella';
-import expandIcon from '@jetbrains/icons/expand';
-
-import Icon from './icon';
-import styles from './icon.css';
-
-describe('Icon', () => {
-  const mountIcon = props => mount(<Icon glyph={defaultIcon} {...props}/>);
-  const renderIcon = props => render(<Icon glyph={defaultIcon} {...props}/>);
-
-  it('should create component', () => {
-    mountIcon().should.have.type(Icon);
-  });
-
-  it('should render passed glyph', () => {
-    const icon = renderIcon({glyph: expandIcon});
-    expandIcon.
-      replace('/>', '></path>').
-      should.include(icon.find('svg').html());
-  });
-
-  it('should set compatibility mode if rendering icon without width/height', () => {
-    const icon = renderIcon({glyph: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d=""/></svg>'});
-    icon.find('svg').should.have.className(styles.compatibilityMode);
-  });
-
-  it('should set custom class', () => {
-    const CUSTOM_CSS_CLASS = 'my-icon';
-    const icon = renderIcon({glyph: expandIcon, className: CUSTOM_CSS_CLASS});
-
-    icon.should.have.className(CUSTOM_CSS_CLASS);
-  });
-
-  describe('fault tolerance', () => {
-    beforeEach(() => {
-      sandbox.stub(console, 'error');
-    });
-
-    it('should render nothing if null is passed as glyph', () => {
-      const icon = renderIcon({glyph: null});
-      icon.find('svg').should.be.empty;
-    });
-
-    it('should render nothing if empty string is passed as glyph', () => {
-      const icon = renderIcon({glyph: ''});
-      icon.find('svg').should.be.empty;
-    });
-  });
-});

package/components/icon/icon__constants.js

@@ -1,31 +0,0 @@
-/**
- * Commonly used icon colors.
- * @enum {string}
- */
-export const Color = {
-  BLUE: 'blue',
-  DEFAULT: '',
-  GRAY: 'gray',
-  GREEN: 'green',
-  MAGENTA: 'magenta',
-  RED: 'red',
-  WHITE: 'white'
-};
-
-/**
- * @enum {number}
- */
-export const Size = {
-  Size12: 12,
-  Size14: 14,
-  Size16: 16,
-  Size18: 18,
-  Size20: 20,
-  Size24: 24,
-  Size32: 32,
-  Size40: 40,
-  Size48: 48,
-  Size64: 64,
-  Size96: 96,
-  Size128: 128
-};

package/components/icon/icon__svg.js

@@ -1,77 +0,0 @@
-// Inspired by https://github.com/sairion/svg-inline-react
-import React, {memo} from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import memoize from '../global/memoize';
-
-import styles from './icon.css';
-
-function convertReactSVGDOMProperty(str) {
-  return str.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());
-}
-
-function serializeAttrs(map) {
-  const res = {};
-  for (let i = 0; i < map.length; i++) {
-    const key = map[i].name;
-    let prop = key;
-    if (key === 'class') {
-      prop = 'className';
-    } else if (!key.startsWith('data-')) {
-      prop = convertReactSVGDOMProperty(key);
-    }
-
-    res[prop] = map[i].value;
-  }
-  return res;
-}
-
-function extractSVGProps(svgNode) {
-  const map = svgNode.attributes;
-  return (map.length > 0) ? serializeAttrs(map) : null;
-}
-
-const getSVGFromSource = memoize(src => {
-  const svgContainer = document.createElement('div');
-  svgContainer.innerHTML = src;
-  const svg = svgContainer.firstElementChild;
-  svg.remove ? svg.remove() : svgContainer.removeChild(svg);
-  return {
-    props: extractSVGProps(svg),
-    html: svg.innerHTML
-  };
-});
-
-function isCompatibilityMode(iconSrc) {
-  const hasWidth = /width="[\d\.]+"/ig.test(iconSrc);
-  const hasHeight = /height="[\d\.]+"/ig.test(iconSrc);
-  return !hasWidth || !hasHeight;
-}
-
-function IconSVG({src, className, ...rest}) {
-  const glyphClasses = classNames(styles.glyph, {
-    [styles.compatibilityMode]: isCompatibilityMode(src)
-  }, className);
-
-  const {props, html} = getSVGFromSource(src);
-
-  return (
-    <svg
-      {...props}
-      {...rest}
-      className={glyphClasses}
-      dangerouslySetInnerHTML={{
-        __html: html
-      }}
-    />
-  );
-}
-
-IconSVG.propTypes = {
-  className: PropTypes.string,
-  src: PropTypes.string.isRequired,
-  style: PropTypes.object
-};
-
-export default memo(IconSVG);

package/components/input/input.examples.js

@@ -1,140 +0,0 @@
-import React, {PureComponent, useRef} from 'react';
-import searchIcon from '@jetbrains/icons/search';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-import Text from '@jetbrains/ring-ui/components/text/text';
-
-import Input, {Size, Theme} from '@jetbrains/ring-ui/components/input/input';
-
-export default {
-  title: 'Components/Input',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Text input fields of varying size.'
-  }
-};
-
-export const basic = () => {
-  class ClearableInput extends PureComponent {
-    state = {
-      text: this.props.defaultValue
-    };
-
-    setText = e => {
-      this.setState({
-        text: e.target.value
-      });
-    };
-
-    clear = () => {
-      this.setState({
-        text: ''
-      });
-    };
-
-    render() {
-      const {defaultValue, ...restProps} = this.props;
-      return (
-        <Input
-          value={this.state.text}
-          onChange={this.setText}
-          onClear={this.clear}
-          {...restProps}
-        />
-      );
-    }
-  }
-
-  return (
-    <form className="inputs">
-      <Input label="Labeled input"/>
-      <Input name="login" label="Label and hint" placeholder="Hint"/>
-      <Input label="Label and value" defaultValue="Default value"/>
-      <ClearableInput label="Clearable input" defaultValue="Default value"/>
-      <ClearableInput
-        placeholder="Hint"
-        label="Disabled clearable input"
-        defaultValue="Default value"
-        disabled
-      />
-      <Input label="Input with icon" icon={searchIcon}/>
-      <ClearableInput placeholder="Hint" defaultValue="Borderless input" borderless/>
-      <ClearableInput placeholder="Hint" defaultValue="Compact input" compact icon={searchIcon}/>
-      <Input label="Disabled input" disabled defaultValue="Default value"/>
-      <Input
-        label="Invalid input"
-        error="Error description that wraps over lines because of being really long"
-      />
-      <Input label="Error without description" error=""/>
-      <Input label="Short input" size={Size.S}/>
-      <Input label="Long input" size={Size.L}/>
-      <Input
-        label="Underline message"
-        renderUnderline={() => <Text info>With custom underline</Text>}
-      />
-      <Input label="Autogrowing textarea" multiline/>
-      <div className="dark">
-        <Input
-          label="Input on dark background"
-          placeholder="Hint on dark background"
-          theme={Theme.DARK}
-        />
-      </div>
-    </form>
-  );
-};
-
-basic.storyName = 'basic';
-
-basic.parameters = {
-  storyStyles: `
-<style>
-  .inputs {
-    display: flex;
-    flex-flow: column wrap;
-    max-height: 100vh;
-    margin-top: 8px;
-  }
-
-  .inputs > div {
-    margin: 0 16px;
-  }
-
-  .dark {
-    background: #000;
-    margin-left: 0;
-    padding-left: 16px;
-  }
-</style>`
-};
-
-function SelectAll() {
-  const ref = useRef();
-
-  function select() {
-    if (ref.current != null) {
-      ref.current.select();
-    }
-  }
-
-  return (
-    <>
-      <Input defaultValue="Value" inputRef={ref} label="Label"/>
-      <Button data-test-select onClick={select}>Select all</Button>
-    </>
-  );
-}
-
-export const selectAll = () => <SelectAll/>;
-
-selectAll.parameters = {
-  hermione: {
-    actions: [
-      {type: 'click', selector: '[data-test-select]'},
-      {type: 'capture', selector: '#root'}
-    ]
-  }
-};

package/components/input/input.js

@@ -1,228 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close';
-
-import Theme, {withTheme} from '../global/theme';
-import Button from '../button/button';
-
-import getUID from '../global/get-uid';
-
-import Icon from '../icon/icon';
-
-import styles from './input.css';
-
-function noop() {}
-
-/**
- * @name Input
- */
-
-const Size = {
-  AUTO: 'Auto',
-  S: 'S',
-  M: 'M',
-  L: 'L',
-  FULL: 'FULL'
-};
-
-export class Input extends PureComponent {
-  static propTypes = {
-    value: PropTypes.string,
-    theme: PropTypes.string,
-    className: PropTypes.string,
-    inputClassName: PropTypes.string,
-    size: PropTypes.string,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    active: PropTypes.bool,
-    error: PropTypes.string,
-    multiline: PropTypes.bool,
-    borderless: PropTypes.bool,
-    compact: PropTypes.bool,
-    onChange: PropTypes.func,
-    onClear: PropTypes.func,
-    inputRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({current: PropTypes.instanceOf(HTMLInputElement)})
-    ]),
-    children: PropTypes.string,
-    enableShortcuts: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.string)]),
-    disabled: PropTypes.bool,
-    id: PropTypes.string,
-    placeholder: PropTypes.string,
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
-    renderUnderline: PropTypes.func
-  };
-
-  static defaultProps = {
-    size: Size.M,
-    onChange: noop,
-    inputRef: noop,
-    enableShortcuts: ['esc'],
-    renderUnderline: (underlineRef, errorText) => (
-      <div
-        className={styles.errorText}
-        ref={underlineRef}
-      >{errorText}</div>
-    )
-  };
-
-  state = {
-    empty: true
-  };
-
-  componentDidMount() {
-    this.adapt();
-  }
-
-  componentDidUpdate() {
-    this.adapt();
-  }
-
-  id = getUID('ring-input-');
-  getId() {
-    return this.props.id || this.id;
-  }
-
-  checkValue() {
-    this.setState({
-      empty: !this.input.value
-    });
-
-    if (this.props.multiline && this.input.scrollHeight > this.input.clientHeight) {
-      this.stretch(this.input);
-    }
-  }
-
-  stretch(el) {
-    if (!el || !el.style) {
-      return;
-    }
-    el.style.height = `${el.scrollHeight}px`;
-  }
-
-  adapt() {
-    this.checkValue();
-    this.stretch(this.underlineNode);
-  }
-
-  underlineRef = el => {
-    this.underlineNode = el;
-  };
-
-  inputRef = el => {
-    const {inputRef} = this.props;
-
-    this.input = el;
-    if (typeof inputRef === 'function') {
-      inputRef(el);
-    } else {
-      inputRef.current = el;
-    }
-  };
-
-  clear = e => {
-    this.props.onClear && this.props.onClear(e);
-  };
-
-  handleChange = e => {
-    this.props.onChange(e);
-    this.checkValue(e.target);
-  };
-
-  render() {
-    const {
-      // Modifiers
-      theme,
-      size,
-      active,
-      multiline,
-      borderless,
-      compact,
-
-      // Props
-      label,
-      error,
-      className,
-      inputClassName,
-      children,
-      value,
-      onClear,
-      disabled,
-      inputRef, onChange,
-      enableShortcuts,
-      id,
-      placeholder,
-      icon,
-      renderUnderline,
-      ...restProps
-    } = this.props;
-    const minimizeMargins = compact || borderless;
-    const {empty} = this.state;
-    const clearable = !!onClear;
-    const classes = classNames(
-      styles.container,
-      className,
-      styles[theme],
-      [styles[`size${size}`]],
-      {
-        'ring-js-shortcuts': enableShortcuts === true,
-        [styles.active]: active,
-        [styles.error]: error != null,
-        [styles.empty]: empty,
-        [styles.noLabel]: !this.props.label,
-        [styles.withIcon]: icon != null,
-        [styles.clearable]: clearable,
-        [styles.compact]: minimizeMargins
-      }
-    );
-
-    const inputClasses = classNames(styles.input, inputClassName);
-
-    const TagName = multiline ? 'textarea' : 'input';
-
-    const text = value != null ? value : children;
-
-    return (
-      <div
-        className={classes}
-        data-test="ring-input"
-      >
-        {icon && <Icon glyph={icon} className={styles.icon}/>}
-        <TagName
-          ref={this.inputRef}
-          onChange={this.handleChange}
-          className={inputClasses}
-          value={text}
-          rows={multiline ? 1 : null}
-          disabled={disabled}
-          id={this.getId()}
-          placeholder={placeholder}
-          aria-label={typeof label === 'string' && label ? label : placeholder}
-          data-enabled-shortcuts={Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null}
-          {...restProps}
-        />
-        {clearable && !disabled && (
-          <Button
-            title="Clear input"
-            data-test="ring-input-clear"
-            className={styles.clear}
-            icon={closeIcon}
-            onClick={this.clear}
-          />
-        )}
-
-        {!minimizeMargins && <label htmlFor={this.getId()} className={styles.label}>{label}</label>}
-        {!borderless && <div className={styles.underline}/>}
-        {!borderless && <div className={styles.focusUnderline}/>}
-        {!minimizeMargins && <div className={styles.errorUnderline}/>}
-        {!minimizeMargins && renderUnderline(this.underlineRef, error)}
-      </div>
-    );
-  }
-}
-
-export default withTheme()(Input);
-
-export {Size, Theme};

package/components/input/input.test.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Input from './input';
-
-describe('Input', () => {
-  let input;
-  const inputRef = el => {
-    input = el;
-  };
-  const shallowInput = props => shallow(<Input {...props}/>);
-  const mountInput = props => mount(
-    <Input
-      inputRef={inputRef}
-      {...props}
-    />
-  );
-
-  it('should create component', () => {
-    mountInput().type().should.equal(Input.type);
-  });
-
-  it('should wrap children with div', () => {
-    shallowInput().should.have.tagName('div');
-  });
-
-  it('should create input by default', () => {
-    mountInput();
-    input.should.match('input');
-  });
-
-  it('should create textarea with multiline option', () => {
-    mountInput({multiline: true});
-    input.should.match('textarea');
-  });
-
-  it('should use passed className', () => {
-    mountInput({className: 'test-class'}).should.have.className('test-class');
-  });
-});

package/components/island/adaptive-island-hoc.js

@@ -1,38 +0,0 @@
-import React, {Component, createContext} from 'react';
-
-import {interpolateLinear} from '../global/linear-function';
-
-const TITLE_RESIZE_END = 20;
-const TITLE_RESIZE_THRESHOLD = 36;
-
-export const PhaseContext = createContext();
-export const ScrollHandlerContext = createContext();
-
-export default function adaptiveIslandHOC(ComposedComponent) {
-
-  return class AdaptiveIsland extends Component {
-    static propTypes = ComposedComponent.propTypes;
-
-    state = {
-      phase: 0
-    };
-
-    onContentScroll = ({scrollTop, scrollHeight, clientHeight}) => {
-      if (scrollHeight - clientHeight >=
-        interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, this.state.phase)) {
-        const phase = Math.min(1, scrollTop / TITLE_RESIZE_END);
-        this.setState({phase});
-      }
-    };
-
-    render() {
-      return (
-        <PhaseContext.Provider value={this.state.phase}>
-          <ScrollHandlerContext.Provider value={this.onContentScroll}>
-            <ComposedComponent {...this.props}/>
-          </ScrollHandlerContext.Provider>
-        </PhaseContext.Provider>
-      );
-    }
-  };
-}