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

package/components/icon/icon.examples.js

@@ -1,146 +0,0 @@
-import React from 'react';
-import searchIcon from '@jetbrains/icons/search';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
-import pencilIcon from '@jetbrains/icons/pencil';
-import add10pxIcon from '@jetbrains/icons/add-10px';
-import add20pxIcon from '@jetbrains/icons/add-20px';
-import chevronDownIcon from '@jetbrains/icons/chevron-down';
-import starFilledIcon from '@jetbrains/icons/star-filled';
-import okIcon from '@jetbrains/icons/ok';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Icon from '@jetbrains/ring-ui/components/icon/icon';
-
-const allIcons = require.context('../../node_modules/@jetbrains/icons', false, /\.js$/);
-const allLogos = require.context('../../node_modules/@jetbrains/logos', true, /\.svg$/);
-
-export default {
-  title: 'Components/Icon',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays an icon.'
-  }
-};
-
-export const basic = () => (
-  <div>
-    <Icon
-      glyph={checkmarkIcon}
-      className="additional-class ring-icon"
-      color={Icon.Color.MAGENTA}
-    />
-    <Icon glyph={searchIcon} className="ring-icon"/>
-    <Icon glyph={pencilIcon} className="ring-icon"/>
-  </div>
-);
-
-basic.storyName = 'basic';
-
-basic.parameters = {
-  storyStyles: `
-<style>
-  .ring-icon {
-    display: inline-block;
-    margin: 8px;
-    padding: 8px;
-  }
-</style>`
-};
-
-export const inText = () => (
-  <div className="icons">
-    {'Some text '}
-    <Icon glyph={chevronDownIcon}/>
-    {' Text '}
-    <Icon glyph={add10pxIcon}/>
-    {' text '}
-    <Icon glyph={starFilledIcon}/>
-    {' text '}
-    <Icon glyph={okIcon}/>
-    {' Text '}
-    <Icon glyph={add20pxIcon}/>
-    <div className="underline"/>
-  </div>
-);
-
-inText.storyName = 'in text';
-
-inText.parameters = {
-  storyStyles: `
-<style>
-  .icons {
-    position: relative;
-  }
-
-  .icons svg {
-    background-color: #eeea;
-  }
-
-  .underline {
-    position: absolute;
-    width: 100%;
-    left: 0;
-    border-bottom: 0.1em solid rgba(0, 255, 0, 0.4);
-    bottom: 0.3em;
-  }
-</style>`
-};
-
-export const allIconsList = () => (
-  <div className="icon-example__container">
-    {allIcons.keys().filter(key => !key.includes('index.js')).map(key => {
-      const iconName = key.replace('./', '').replace('.js', '');
-
-      return (
-        <Icon glyph={allIcons(key)} key={key} title={iconName} className="ring-icon"/>
-      );
-    })}
-  </div>
-);
-
-allIconsList.storyName = 'all icons list';
-
-allIconsList.parameters = {
-  storyStyles: `
-<style>
-  .icon-example__container {
-    margin-left: -16px;
-  }
-
-  .ring-icon {
-    display: inline-block;
-    margin: 8px;
-    padding: 8px;
-    color: var(--ring-link-color);
-  }
-
-  .secondary {
-    fill: var(--ring-link-hover-color);
-  }
-</style>`
-};
-
-export const jetBrainsProductLogosList = () => (
-  <div>
-    {allLogos.keys().map(key => (
-      <Icon glyph={allLogos(key)} key={key} title={key.slice(2)} className="ring-icon"/>
-    ))}
-  </div>
-);
-
-jetBrainsProductLogosList.storyName = 'JetBrains product logos list';
-
-jetBrainsProductLogosList.parameters = {
-  hermione: {skip: true}, // Logos example is too big and have no much sense to test
-  storyStyles: `
-<style>
-  .ring-icon {
-    display: inline-block;
-    color: black;
-    margin: 8px;
-    padding: 8px;
-  }
-</style>`
-};

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