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

package/components/hub-source/hub-source__users-groups.ts

@@ -0,0 +1,78 @@
+import Auth, {AuthUser} from '../auth/auth';
+
+import HubSource, {Item} from './hub-source';
+
+export interface HubSourceUsersGroupsOptions {
+  searchMax: number
+  searchSideThreshold: number
+}
+
+const defaultOptions: HubSourceUsersGroupsOptions = {
+  searchMax: 20,
+  searchSideThreshold: 200
+};
+
+export interface UserGroup extends Item {
+  id: number,
+  total?: number,
+  userCount: number,
+  iconUrl?: string
+}
+
+export default class HubSourceUsersGroups {
+  auth: Auth;
+  options: HubSourceUsersGroupsOptions;
+  usersSource: HubSource<AuthUser, 'users'>;
+  groupsSource: HubSource<UserGroup, 'usergroups'>;
+  constructor(auth: Auth, options?: Partial<HubSourceUsersGroupsOptions>) {
+    this.auth = auth;
+    this.options = Object.assign({}, defaultOptions, options);
+
+    this.usersSource = new HubSource(auth, 'users', {
+      searchMax: this.options.searchMax,
+      searchSideThreshold: this.options.searchSideThreshold,
+      queryFormatter: query => `nameStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)} or loginStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)}`
+    });
+    this.groupsSource = new HubSource(auth, 'usergroups', {
+      searchMax: this.options.searchMax,
+      searchSideThreshold: this.options.searchSideThreshold
+    });
+  }
+
+  static wrapMultiwordQuery(query?: string) {
+    if (query && query.indexOf(' ') !== -1) {
+      return `{${query}}`;
+    }
+    return query;
+  }
+
+  createUsersFilterFn(query?: string) {
+    if (!query) {
+      return () => true;
+    }
+    const normalizedQuery = query.toLowerCase();
+
+    return (it: AuthUser) => (
+      it.name.toLowerCase().indexOf(normalizedQuery) !== -1 ||
+      it.login.toLowerCase().indexOf(normalizedQuery) !== -1
+    );
+  }
+
+  getUsers(query = '') {
+    return this.usersSource.get(query, {
+      fields: 'id,name,login,total,profile/avatar/url',
+      orderBy: 'name'
+    }, this.createUsersFilterFn(query));
+  }
+
+  getGroups(query = '') {
+    return this.groupsSource.get(query, {
+      fields: 'id,name,total,userCount,iconUrl',
+      orderBy: 'name'
+    });
+  }
+
+  getUserAndGroups(query?: string) {
+    return Promise.all([this.getUsers(query), this.getGroups(query)]);
+  }
+}

package/components/icon/icon.examples.tsx

@@ -0,0 +1,146 @@
+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 './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.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {mount, render} from 'enzyme';
+import defaultIcon from '@jetbrains/icons/umbrella';
+import expandIcon from '@jetbrains/icons/expand';
+
+import Icon, {IconAttrs} from './icon';
+import styles from './icon.css';
+
+describe('Icon', () => {
+  const mountIcon = (props?: IconAttrs) => mount(<Icon glyph={defaultIcon} {...props}/>);
+  const renderIcon = (props?: IconAttrs) => 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.tsx

@@ -0,0 +1,111 @@
+/**
+ * @name Icon
+ */
+
+import React, {PureComponent, ComponentType, SVGAttributes, HTMLAttributes} 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 type IconType = ComponentType<SVGAttributes<SVGSVGElement>>
+
+export interface IconProps extends HTMLAttributes<HTMLElement> {
+  color: Color
+  glyph: string | IconType | null
+  height?: number | undefined
+  size?: Size | null | undefined
+  width?: number | undefined
+  loading?: boolean | null | undefined
+  suppressSizeWarning?: boolean | null | undefined
+}
+
+export default class Icon extends PureComponent<IconProps> {
+  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 undefined;
+  }
+
+  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 type IconAttrs = JSX.LibraryManagedAttributes<typeof Icon, IconProps>
+
+export {Color, Size};

package/components/icon/icon__constants.ts

@@ -0,0 +1,31 @@
+/**
+ * Commonly used icon colors.
+ * @enum {string}
+ */
+export enum Color {
+  BLUE = 'blue',
+  DEFAULT = '',
+  GRAY = 'gray',
+  GREEN = 'green',
+  MAGENTA = 'magenta',
+  RED = 'red',
+  WHITE = 'white'
+}
+
+/**
+ * @enum {number}
+ */
+export enum 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.tsx

@@ -0,0 +1,81 @@
+// Inspired by https://github.com/sairion/svg-inline-react
+import React, {memo, SVGAttributes} from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import memoize from '../global/memoize';
+
+import styles from './icon.css';
+
+function convertReactSVGDOMProperty(str: string) {
+  return str.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());
+}
+
+function serializeAttrs(map: NamedNodeMap) {
+  const res: Record<string, string> = {};
+  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: Element) {
+  const map = svgNode.attributes;
+  return (map.length > 0) ? serializeAttrs(map) : null;
+}
+
+const getSVGFromSource = memoize((src: string) => {
+  const svgContainer = document.createElement('div');
+  svgContainer.innerHTML = src;
+  const svg = svgContainer.firstElementChild as Element;
+  svg.remove ? svg.remove() : svgContainer.removeChild(svg);
+  return {
+    props: extractSVGProps(svg),
+    html: svg.innerHTML
+  };
+});
+
+function isCompatibilityMode(iconSrc: string) {
+  const hasWidth = /width="[\d\.]+"/ig.test(iconSrc);
+  const hasHeight = /height="[\d\.]+"/ig.test(iconSrc);
+  return !hasWidth || !hasHeight;
+}
+
+export interface IconSVGProps extends SVGAttributes<SVGSVGElement> {
+  src: string,
+}
+
+function IconSVG({src, className, ...rest}: IconSVGProps) {
+  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/icon-ng/icon-ng.examples.js

@@ -5,7 +5,7 @@ import warningIcon from '@jetbrains/icons/warning';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import IconNG from '@jetbrains/ring-ui/components/icon-ng/icon-ng';
+import IconNG from './icon-ng';
 
 export default {
   title: 'Legacy Angular/Icon Ng',

package/components/input/input.css

@@ -1,4 +1,5 @@
 @import "../global/variables.css";
+@import "../button/button.css";
 
 @value unit from "../global/global.css";
 @value iconOffset: calc(unit * 3 - 2px);

package/components/input/input.examples.tsx

@@ -0,0 +1,140 @@
+import React, {PureComponent, useRef} from 'react';
+import searchIcon from '@jetbrains/icons/search';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Button from '../button/button';
+import Text from '../text/text';
+
+import Input, {ContainerProps, InputSpecificProps, Size, Theme} from './input';
+
+export default {
+  title: 'Components/Input',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Text input fields of varying size.'
+  }
+};
+
+export const basic = () => {
+  class ClearableInput extends PureComponent<ContainerProps<InputSpecificProps>> {
+    state = {
+      text: this.props.defaultValue
+    };
+
+    setText = (e: React.ChangeEvent<HTMLInputElement>) => {
+      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<HTMLInputElement>(null);
+
+  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.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import Input, {InputAttrs} from './input';
+
+describe('Input', () => {
+  let input: HTMLElement | null;
+  const inputRef = (el: HTMLElement | null) => {
+    input = el;
+  };
+  const shallowInput = (props?: InputAttrs) => shallow(<Input {...props}/>);
+  const mountInput = (props?: InputAttrs) => 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();
+    should.exist(input);
+    input?.should.match('input');
+  });
+
+  it('should create textarea with multiline option', () => {
+    mountInput({multiline: true});
+    should.exist(input);
+    input?.should.match('textarea');
+  });
+
+  it('should use passed className', () => {
+    mountInput({className: 'test-class'}).should.have.className('test-class');
+  });
+});