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

package/components/link/link.examples.js

@@ -1,86 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import hubLogo from '@jetbrains/logos/hub/hub.svg';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Icon from '@jetbrains/ring-ui/components/icon/icon';
-import Toggle from '@jetbrains/ring-ui/components/toggle/toggle';
-
-import Link, {linkHOC, setCompatibilityMode} from '@jetbrains/ring-ui/components/link/link';
-
-export default {
-  title: 'Components/Link',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a link.'
-  }
-};
-
-export const allVariants = () => {
-  class CustomComponent extends React.Component {
-    render() {
-      const {active, activeClassName, onPlainLeftClick, className, href, children,
-        ...props} = this.props;
-      const classes = classNames(className, {
-        [activeClassName]: active
-      });
-      return <a href={href} {...props} className={classes}>{children}</a>;
-    }
-  }
-
-  const CustomLink = linkHOC(CustomComponent);
-
-  class LinkDemo extends React.Component {
-    state = {compatibility: false};
-
-    changeCompatibility = () => this.setState(({compatibility}) => {
-      const newCompat = !compatibility;
-      setCompatibilityMode(newCompat);
-      return {compatibility: newCompat};
-    });
-
-    render() {
-      return (
-        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start'}} data-test="lik-example">
-          <Link href="/">Ordinary link</Link>
-
-          <Link href="/" active>
-            Active link (inherits color)
-          </Link>
-
-          <Link href="/" pseudo>
-            Pseudo link (no underline on hover)
-          </Link>
-
-          <Link href="/">Link with a very long text, wrapping over lines</Link>
-
-          <Link href="/">Link with a very long text, wrapping over lines</Link>
-
-          <Link href="/" className="hub-link">
-            {WrapText => [
-              <Icon key="icon" glyph={hubLogo} className="hub-icon"/>,
-              <div key="text">
-                <WrapText>Link with non-text content</WrapText>
-              </div>
-            ]}
-          </Link>
-
-          <CustomLink href="/">Custom link component</CustomLink>
-
-          <CustomLink href="/" active>
-            Active custom link component
-          </CustomLink>
-
-          <Toggle onChange={this.changeCompatibility}>Compatibility mode</Toggle>
-        </div>
-      );
-    }
-  }
-
-  return <LinkDemo/>;
-};
-
-allVariants.storyName = 'Link';
-allVariants.parameters = {hermione: {captureSelector: '*[data-test~=lik-example]'}};

package/components/link/link.js

@@ -1,119 +0,0 @@
-import 'focus-visible';
-import React, {Component, memo} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import memoize from '../global/memoize';
-import dataTests from '../global/data-tests';
-
-import ClickableLink from './clickableLink';
-import styles from './link.css';
-
-/**
- * @name Link
- */
-
-let isCompatibilityMode = false;
-
-export function setCompatibilityMode(isEnabled) {
-  isCompatibilityMode = isEnabled;
-}
-
-const makeWrapText = memoize(innerClassName => {
-  const WrapText = memo(function WrapText({className, children}) {
-    const classes = classNames(styles.inner, className, innerClassName);
-    return <span className={classes}>{children}</span>;
-  });
-
-  WrapText.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  return WrapText;
-});
-
-export function linkHOC(ComposedComponent) {
-  const isCustom = typeof ComposedComponent !== 'string' && ComposedComponent !== ClickableLink;
-
-  return class Link extends Component {
-    static propTypes = {
-      className: PropTypes.string,
-      innerClassName: PropTypes.string,
-      active: PropTypes.bool,
-      inherit: PropTypes.bool,
-      pseudo: PropTypes.bool,
-      hover: PropTypes.bool,
-      children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-      'data-test': PropTypes.string,
-      href: PropTypes.string,
-      onPlainLeftClick: PropTypes.func,
-      onClick: PropTypes.func
-    };
-
-    getChildren() {
-      const {children, innerClassName} = this.props;
-
-      const WrapText = makeWrapText(innerClassName);
-
-      return typeof children === 'function'
-        ? children(WrapText)
-        : <WrapText>{children}</WrapText>;
-    }
-
-    render() {
-      const {
-        active,
-        inherit,
-        pseudo,
-        hover,
-        className,
-        'data-test': dataTest,
-        href,
-        innerClassName, children, onPlainLeftClick, onClick,
-        ...props
-      } = this.props;
-      const useButton = pseudo || !isCustom && href == null;
-
-      const classes = classNames(styles.link, className, {
-        [styles.active]: active,
-        [styles.inherit]: inherit,
-        [styles.hover]: hover,
-        [styles.compatibilityUnderlineMode]: isCompatibilityMode,
-        [styles.pseudo]: useButton,
-        [styles.text]: typeof children !== 'function'
-      });
-
-      if (isCustom && !props.activeClassName) {
-        props.activeClassName = styles.active;
-      }
-
-      if (useButton) {
-        return (
-          <button
-            type="button"
-            {...props}
-            className={classes}
-            onClick={onClick || onPlainLeftClick}
-            data-test={dataTests('ring-link', dataTest)}
-          >{this.getChildren()}</button>
-        );
-      }
-
-      return (
-        <ComposedComponent
-          {...props}
-          href={href}
-          className={classes}
-          onClick={onClick}
-          onPlainLeftClick={onPlainLeftClick}
-          data-test={dataTests('ring-link', dataTest)}
-        >
-          {this.getChildren()}
-        </ComposedComponent>
-      );
-    }
-  };
-}
-
-export default linkHOC(ClickableLink);

package/components/link/link.test.js

@@ -1,182 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Link, {linkHOC} from './link';
-import ClickableLink from './clickableLink';
-import styles from './link.css';
-
-function noop() {}
-
-describe('Link', () => {
-  const shallowLink = props => shallow(<Link {...props}/>);
-  const mountLink = props => mount(<Link {...props}/>);
-
-  it('should create component', () => {
-    mountLink().should.have.type(Link);
-  });
-
-  it('should wrap children with ClickableLink', () => {
-    shallowLink({href: '/'}).should.have.type(ClickableLink);
-  });
-
-  it('should wrap children with ClickableLink if href is empty string', () => {
-    shallowLink({href: ''}).should.have.type(ClickableLink);
-  });
-
-  it('should wrap children with button if no href', () => {
-    shallowLink({}).should.have.type('button');
-  });
-
-  it('should use passed className', () => {
-    shallowLink({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should add active className', () => {
-    shallowLink({active: true}).should.have.className(styles.active);
-  });
-
-  it('should render button for pseudo links', () => {
-    shallowLink().should.have.tagName('button');
-    shallowLink({href: '/', pseudo: true}).should.have.tagName('button');
-  });
-
-  describe('linkHOC', () => {
-    it('should wrap with new component', () => {
-      const CustomComponent = () => {};
-
-      linkHOC(CustomComponent).should.not.equal(CustomComponent);
-    });
-
-    it('should pass activeClassName to wrapped component', () => {
-      const CustomComponent = () => <span/>;
-      const CustomLink = linkHOC(CustomComponent);
-      mount(<CustomLink>{noop}</CustomLink>).should.containMatchingElement(
-        <CustomComponent activeClassName={styles.active}/>
-      );
-    });
-
-    it('should pass custom props to wrapped component', () => {
-      const CustomComponent = () => <span/>;
-      const CustomLink = linkHOC(CustomComponent);
-
-      mount(<CustomLink custom="test">{noop}</CustomLink>).should.containMatchingElement(
-        <CustomComponent custom="test"/>
-      );
-    });
-
-    it('should not add activeClassName to tags', () => {
-      const CustomComponent = 'a';
-      const CustomLink = linkHOC(CustomComponent);
-
-      shallow(<CustomLink/>).should.not.have.prop('activeClassName');
-    });
-  });
-
-  describe('ClickableLink', () => {
-    it('should render "a" tag', () => {
-      shallow(<ClickableLink href="/">{'foo'}</ClickableLink>).should.containMatchingElement(<a href="/">{'foo'}</a>);
-    });
-
-    describe('events', () => {
-      const Buttons = {
-        LEFT: 0,
-        MIDDLE: 1,
-        RIGHT: 2
-      };
-
-      let onClick;
-      let onConditionalClick;
-      let onPlainLeftClick;
-      let wrapper;
-
-      const makeEvent = e => ({
-        ...e,
-        preventDefault: sandbox.spy()
-      });
-
-      beforeEach(() => {
-        onClick = sandbox.spy();
-        onConditionalClick = sandbox.spy();
-        onPlainLeftClick = sandbox.spy();
-        wrapper = shallow(
-          <ClickableLink
-            onClick={onClick}
-            onConditionalClick={onConditionalClick}
-            onPlainLeftClick={onPlainLeftClick}
-            href="/"
-          >{'foo'}</ClickableLink>
-        );
-      });
-
-      it('should handle a plain left click', () => {
-        const e = makeEvent({button: Buttons.LEFT});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(true, e);
-        onPlainLeftClick.should.have.been.calledWith(e);
-        e.preventDefault.should.have.been.calledOnce;
-      });
-
-      it('should handle a middle click', () => {
-        const e = makeEvent({button: Buttons.MIDDLE});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-
-      it('should handle a right click', () => {
-        const e = makeEvent({button: Buttons.RIGHT});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-
-      it('should handle alt+click', () => {
-        const e = makeEvent({button: Buttons.LEFT, altKey: true});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-
-      it('should handle ctrl+click', () => {
-        const e = makeEvent({button: Buttons.LEFT, ctrlKey: true});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-
-      it('should handle cmd+click / win+click', () => {
-        const e = makeEvent({button: Buttons.LEFT, metaKey: true});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-
-      it('should handle shift+click', () => {
-        const e = makeEvent({button: Buttons.LEFT, shiftKey: true});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-    });
-  });
-});

package/components/list/consts.js

@@ -1,26 +0,0 @@
-/**
- * @enum {number}
- */
-export const Type = {
-  SEPARATOR: 0,
-  LINK: 1,
-  ITEM: 2,
-  HINT: 3,
-  CUSTOM: 4,
-  TITLE: 5,
-  MARGIN: 6
-};
-
-export const Dimension = {
-  ITEM_PADDING: 16,
-  ITEM_HEIGHT: 32,
-  COMPACT_ITEM_HEIGHT: 24,
-  SEPARATOR_HEIGHT: 25,
-  SEPARATOR_FIRST_HEIGHT: 16,
-  SEPARATOR_TEXT_HEIGHT: 18,
-  TITLE_HEIGHT: 42,
-  INNER_PADDING: 8,
-  MARGIN: 8
-};
-
-export const DEFAULT_ITEM_TYPE = Type.ITEM;

package/components/list/list.examples.js

@@ -1,271 +0,0 @@
-import React from 'react';
-import warningIcon from '@jetbrains/icons/warning';
-
-import hubConfig from '../../.storybook/hub-config';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Loader from '@jetbrains/ring-ui/components/loader/loader';
-import Auth from '@jetbrains/ring-ui/components/auth/auth';
-import Code from '@jetbrains/ring-ui/components/code/code';
-import ContentLayout, {Sidebar} from '@jetbrains/ring-ui/components/content-layout/content-layout';
-
-
-import List from '@jetbrains/ring-ui/components/list/list';
-import Source from '@jetbrains/ring-ui/components/list/list__users-groups-source';
-import styles from '@jetbrains/ring-ui/components/list/list.examples.css';
-
-const FLAG_EN_URL =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAMAAACKYC6uAAAAB3RJTUUH3AIcDR8UFn+EAwAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAAHgUExURf///9LAwLxiY51KVk1Pew0uch0pcImTtOBwdeVzeKasyEZQjDZHfWh3mK2xtq2Dg5NKT3OEqbi9xsWMjLBGS35YcCY8enWCptZkaOFtcaKpx1xsoa24ys++vrlyc5ZcZVJVdFRsoVFnlpqtv8i4ubpiZJ1jcamsvcRTWtFbYtPZ5+Tv9+/Q0Mp9gZqAkU1kjCtDc+vT2NW7wsClrMSnqsGgo8KSlMylpbM5Qr5FTfDOzvnb3O7JzOPCxcazuLafpbCYnddxeNZqcsBOVagsNZ0XIZsRG5wRHKUbJbErNcA8Rs5PWNRdZdFdZcNSWrFDSqg8Q6dFTN12fdFja7lGTqYnMZwTHZoOGJ4THagfKbUvOcRFTtBUXdRcZc5bY8BPV69BSJeCh8CrsOzY3ubFx86ipcmpqsWhoZ8iK6MjLNKnqdyoqurKzfXb3ObM09rAx82zuA4jTkRafrWhseadoefDwsHL05+ot6cuNqcoMKKjtKhwftmDhvTj49Hi8XWLuE5mnCkuSnJASa1sbsjS4lFglW13mbE6P64rMGNtkCA3do9thtNxdvK6u+ns846fxGwrL3pSUpCSlnF/nGp7rldgmoiQrrhHS68vM2hvkAUTXBAwdGRrlcR6huyWmPzp6TUvvy8AAAABdFJOUwBA5thmAAAAtUlEQVR42gGqAFX/AJCRkpOUlZaXmJmam5ydnp8AgYKDfYSFhoeIiYqLjI2OjwBxcnN0dXZ3eHl6e3x9fn+AAGFiY2RlZmdoaWprbG1ub3AAUVJTVFVWV1hZWltcXV5fYABBQkNERUZHSElKS0xNTk9QADEyMzQ1Njc4OTo7PD0+P0AAISIjJCUmJygpKissLS4vMAAREhMUFRYXGBkaGxwdHh8gAAECAwQFBgcICQoLDA0ODxAO4zIu3IgQpAAAAABJRU5ErkJggg==';
-
-export default {
-  title: 'Components/List',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: List,
-    framework: 'react',
-    hermione: {captureSelector: '*[data-test~=ring-list]'}
-  }
-};
-
-export const basic = args => <List {...args}/>;
-
-basic.storyName = 'basic';
-basic.args = {
-  activeIndex: 2,
-  shortcuts: true,
-  renderOptimization: false,
-  data: [
-    {label: 'One', key: 1, href: 'http://example.com', rgItemType: List.ListProps.Type.LINK},
-    {label: <b>foo</b>, key: 2, rgItemType: List.ListProps.Type.ITEM},
-    {label: 'Active as default', key: 3, rgItemType: List.ListProps.Type.ITEM},
-    {label: 'Four', key: 4, rgItemType: List.ListProps.Type.ITEM},
-    {label: 'Five', key: 5, rgItemType: List.ListProps.Type.ITEM}
-  ]
-};
-
-export const withAHintBelow = args => <List {...args}/>;
-
-withAHintBelow.storyName = 'with a hint below';
-withAHintBelow.args = {
-  shortcuts: true,
-  activeIndex: 2,
-  hint: 'Hint about the list',
-  renderOptimization: false,
-  data: [
-    {label: 'One', rgItemType: List.ListProps.Type.ITEM},
-    {label: 'Two', rgItemType: List.ListProps.Type.ITEM},
-    {label: 'Active as default', rgItemType: List.ListProps.Type.ITEM},
-    {label: 'Four', rgItemType: List.ListProps.Type.ITEM},
-    {
-      label: 'Five (disabled)',
-      rgItemType: List.ListProps.Type.ITEM,
-      disabled: true
-    }
-  ]
-};
-
-export const longList = args => <List {...args}/>;
-
-longList.storyName = 'long list';
-longList.parameters = {hermione: {skip: true}};
-longList.args = {
-  maxHeight: 400,
-  compact: true,
-  shortcuts: true,
-  data: Array(1000).fill().map((_, i) => ({
-    label: `Item ${i}`,
-    rgItemType: List.ListProps.Type.ITEM
-  }))
-};
-
-export const list2 = args => <List {...args}/>;
-
-list2.storyName = 'list #2';
-list2.args = {
-  shortcuts: true,
-  renderOptimization: false,
-  data: [
-    {
-      rgItemType: List.ListProps.Type.SEPARATOR,
-      description: 'First separator'
-    },
-    {label: 'Item 1', rgItemType: List.ListProps.Type.ITEM},
-    {
-      rgItemType: List.ListProps.Type.SEPARATOR,
-      description: 'Second sep'
-    },
-    {label: 'Item 2', rgItemType: List.ListProps.Type.ITEM},
-    {
-      rgItemType: List.ListProps.Type.TITLE,
-      label: 'Group title',
-      description: 'With description'
-    },
-    {
-      label: 'Item 3',
-      rgItemType: List.ListProps.Type.ITEM,
-      description: 'Foo bar',
-      hoverClassName: styles.hover
-    },
-    {
-      rgItemType: List.ListProps.Type.SEPARATOR
-    },
-    {
-      label: 'Item 4',
-      rgItemType: List.ListProps.Type.ITEM,
-      description: 'Item description'
-    },
-    {
-      label: 'Item 5',
-      rgItemType: List.ListProps.Type.ITEM,
-      description: 'Item description',
-      details: 'Additional details line'
-    },
-    {
-      label: 'Item 6',
-      rgItemType: List.ListProps.Type.ITEM,
-      description: 'Item description',
-      details:
-        'Additional details line, a long long text. And once again, additional details line, a long long text. And once again, additional details line, a long long text. And once again, additional details line, a long long text. And once again, additional details line, a long long text.'
-    }
-  ]
-};
-
-export const withItemIcons = args => <List {...args}/>;
-
-withItemIcons.storyName = 'with item icons';
-withItemIcons.args = {
-  shortcuts: true,
-  renderOptimization: false,
-  data: [
-    {
-      label: 'Some item',
-      description:
-        'Long long long long long long long long long long long long long long long description',
-      key: '1',
-      rgItemType: List.ListProps.Type.ITEM,
-      glyph: warningIcon,
-      rightGlyph: warningIcon
-    },
-    {
-      label: 'Some item with a long long label, much longer than description',
-      key: '2',
-      rgItemType: List.ListProps.Type.ITEM,
-      description: 'Test item',
-      icon: FLAG_EN_URL
-    },
-    {
-      label: 'Some item with a long long label',
-      key: '3',
-      rgItemType: List.ListProps.Type.ITEM,
-      description:
-        'Long long long long long long long long long long long long long long long description',
-      checkbox: true
-    },
-    //Link doesn't support icons
-    {
-      label: 'Some item',
-      key: '4',
-      rgItemType: List.ListProps.Type.LINK,
-      description: 'Test item',
-      icon: FLAG_EN_URL
-    },
-    {
-      label: 'Some item',
-      key: '5',
-      href: 'http://localhost:9999',
-      description: 'Test item',
-      icon: FLAG_EN_URL
-    }
-  ]
-};
-
-export const withDeprecatedItemTypeParameter = args => <List {...args}/>;
-
-withDeprecatedItemTypeParameter.storyName = 'with deprecated item.type parameter';
-withDeprecatedItemTypeParameter.parameters = {hermione: {skip: true}};
-withDeprecatedItemTypeParameter.args = {
-  shortcuts: true,
-  data: [
-    {label: 'One', type: List.ListProps.Type.ITEM},
-    {label: 'Two', type: List.ListProps.Type.ITEM},
-    {label: 'Three', type: List.ListProps.Type.ITEM},
-    {label: 'Four', type: List.ListProps.Type.ITEM},
-    {label: 'Five', type: List.ListProps.Type.ITEM}
-  ]
-};
-
-export const withCustomItems = args => <List {...args}/>;
-
-withCustomItems.storyName = 'with custom items';
-withCustomItems.args = {
-  shortcuts: true,
-  renderOptimization: false,
-  data: [
-    {
-      key: '1',
-      rgItemType: List.ListProps.Type.CUSTOM,
-      template: React.createElement('span', {}, 'custom item')
-    },
-    {
-      key: '2',
-      rgItemType: List.ListProps.Type.CUSTOM,
-      template: React.createElement('span', {}, 'custom item (disabled)'),
-      disabled: true
-    },
-    {
-      key: '3',
-      rgItemType: List.ListProps.Type.CUSTOM,
-      template: React.createElement('span', {}, 'custom item 3')
-    }
-  ]
-};
-
-class UserList extends React.Component {
-  state = {
-    listData: null,
-    selected: null
-  };
-
-  componentDidMount() {
-    this.loadUsers();
-  }
-
-  auth = new Auth(hubConfig);
-  source = new Source(this.auth);
-
-  async loadUsers() {
-    await this.auth.init();
-    const listData = await this.source.getForList('ring', Source.Filter.USERS);
-    this.setState({listData});
-  }
-
-  handleSelect = selected => this.setState({selected});
-
-  render() {
-    const {listData, selected} = this.state;
-    return listData
-      ? (
-        <ContentLayout>
-          <Sidebar>
-            <List
-              className="list"
-              data={this.state.listData}
-              shortcuts
-              onSelect={this.handleSelect}
-            />
-          </Sidebar>
-          {selected && (
-            <Code className="selected" language="json" code={JSON.stringify(selected, null, 2)}/>
-          )}
-        </ContentLayout>
-      )
-      : <Loader/>;
-  }
-}
-
-export const withUsers = () => <UserList/>;
-
-withUsers.storyName = 'with users';
-withUsers.parameters = {hermione: {skip: true}};