@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/hub-source/hub-source__users-groups.test.js

@@ -1,91 +0,0 @@
-import HubSourceUsersGroups from './hub-source__users-groups';
-
-const SEARCH_THRESHOLD = 123;
-
-describe('Hub Users Groups Source', () => {
-  let httpMock;
-  let fakeAuth;
-
-  beforeEach(() => {
-    httpMock = {
-      get: sandbox.stub().returns(Promise.resolve({}))
-    };
-    fakeAuth = {
-      requestToken: sandbox.stub().returns(Promise.resolve('testToken')),
-      http: httpMock
-    };
-  });
-
-  it('Should pass searchSideThreshold to HubSource', () => {
-    const source = new HubSourceUsersGroups(fakeAuth, {searchSideThreshold: SEARCH_THRESHOLD});
-    source.usersSource.options.searchSideThreshold.should.equal(SEARCH_THRESHOLD);
-    source.groupsSource.options.searchSideThreshold.should.equal(SEARCH_THRESHOLD);
-  });
-
-  it('Should make request for users', async () => {
-    const source = new HubSourceUsersGroups(fakeAuth);
-    sandbox.stub(source.usersSource, 'get').returns(Promise.resolve([]));
-
-    await source.getUsers();
-    source.usersSource.get.should.have.been.calledWith('', {
-      fields: 'id,name,login,total,profile/avatar/url',
-      orderBy: 'name'
-    });
-  });
-
-  it('Should pass query for users', async () => {
-    const source = new HubSourceUsersGroups(fakeAuth);
-    sandbox.stub(source.usersSource, 'get').returns(Promise.resolve([]));
-
-    await source.getUsers('nam');
-    source.usersSource.get.should.have.been.calledWith('nam', {
-      fields: sinon.match.string,
-      orderBy: sinon.match.string
-    });
-  });
-
-  it('Should construct multi-word query for users', () => {
-    const source = new HubSourceUsersGroups(fakeAuth);
-
-    const formatted = source.usersSource.options.queryFormatter('two words');
-    formatted.should.equal('nameStartsWith: {two words} or loginStartsWith: {two words}');
-  });
-
-  it('Should filter user by login on the client side', async () => {
-    const source = new HubSourceUsersGroups(fakeAuth);
-    const user1 = {name: 'some-name1', login: 'login1'};
-    sandbox.stub(source.usersSource, 'makeRequest').returns(Promise.resolve({
-      total: 2,
-      users: [
-        user1,
-        {name: 'some-name2', login: 'login2'}
-      ]
-    }));
-
-    const res = await source.getUsers('login1');
-    res.length.should.equal(1);
-    res[0].should.equal(user1);
-  });
-
-  it('Should make request for groups', async () => {
-    const source = new HubSourceUsersGroups(fakeAuth);
-    sandbox.stub(source.groupsSource, 'get').returns(Promise.resolve([]));
-
-    await source.getGroups();
-    source.groupsSource.get.should.have.been.calledWith('', {
-      fields: 'id,name,total,userCount,iconUrl',
-      orderBy: 'name'
-    });
-  });
-
-  it('Should cache request for groups', async () => {
-    httpMock.get = sandbox.stub().
-      returns(Promise.resolve({total: 1, usergroups: []}));
-
-    const source = new HubSourceUsersGroups(fakeAuth);
-    await source.getGroups();
-    source.getGroups();
-    source.getGroups();
-    httpMock.get.should.have.been.calledOnce;
-  });
-});

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.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/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.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/island.examples.js

@@ -1,74 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Island, {AdaptiveIsland, Header, Content} from '@jetbrains/ring-ui/components/island/island';
-
-export default {
-  title: 'Components/Island',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays an island.',
-    hermione: {captureSelector: '*[data-test~=ring-island]'}
-  }
-};
-
-export const basic = () => (
-  <Island>
-    <Header border>Title</Header>
-    <Content>Content</Content>
-  </Island>
-);
-
-basic.storyName = 'basic';
-
-export const withScroll = () => (
-  <Island className="limited-island" narrow>
-    <Header border>Title</Header>
-    <Content fade>
-      {`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-      been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
-      galley of type and scrambled it to make a type specimen book. It has survived not only five
-      centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`}
-    </Content>
-  </Island>
-);
-
-withScroll.storyName = 'with scroll';
-
-withScroll.parameters = {
-  storyStyles: `
-<style>
-  .limited-island {
-    height: 200px;
-    width: 200px;
-  }
-</style>
-      `
-};
-
-export const withResizeableHeader = () => (
-  <AdaptiveIsland className="limited-island" narrow>
-    <Header>Title</Header>
-    <Content fade>
-      {`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-      been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
-      galley of type and scrambled it to make a type specimen book. It has survived not only five
-      centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`}
-    </Content>
-  </AdaptiveIsland>
-);
-
-withResizeableHeader.storyName = 'with resizeable header';
-
-withResizeableHeader.parameters = {
-  storyStyles: `
-<style>
-  .limited-island {
-    height: 200px;
-    width: 200px;
-  }
-</style>
-      `
-};

package/components/island/island.test.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Island, {AdaptiveIsland, Content, Header} from './island';
-
-const LINE_HEIGHT = '28px';
-
-describe('Island', () => {
-  const shallowIsland = params => shallow(<Island {...params}/>);
-  const mountIsland = params => mount(<Island {...params}/>);
-
-  it('should create Island component', () => {
-    mountIsland().should.have.type(Island);
-  });
-
-  it('should wrap children with div', () => {
-    shallowIsland().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowIsland({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should join with passed data-test', () => {
-    shallowIsland({['data-test']: 'foobar'}).should.have.attr('data-test', 'ring-island foobar');
-  });
-
-  describe('AdaptiveIsland', () => {
-    it('should render AdaptiveIsland', () => {
-      mount(<AdaptiveIsland/>).should.have.type(AdaptiveIsland);
-    });
-
-    it('should change header size if content is scrolled', () => {
-      const wrapper = mount(
-        <AdaptiveIsland>
-          <Header/>
-          <Content/>
-        </AdaptiveIsland>
-      );
-
-      const headerNode = wrapper.find('[data-test="ring-island-header"]');
-
-      wrapper.instance().onContentScroll({scrollTop: 10});
-      headerNode.should.have.style('line-height', LINE_HEIGHT);
-    });
-  });
-
-  describe('Header', () => {
-    it('should render header', () => {
-      mount(<Header/>).should.have.type(Header);
-    });
-
-    it('should change header size', () => {
-      const phase = 0.75;
-      const wrapper = shallow(<Header phase={phase}/>);
-      wrapper.should.have.style('line-height', LINE_HEIGHT);
-    });
-  });
-});

package/components/island-legacy/island-legacy.examples.js

@@ -1,33 +0,0 @@
-import '@jetbrains/ring-ui/components/island-legacy/island-legacy.css';
-
-export default {
-  title: 'Style-only/Island',
-
-  parameters: {
-    notes: 'Displays an island.'
-  }
-};
-
-export const basic = () => `
-    <div class="ring-island">
-      <div class="ring-island__header">
-        <span class="ring-island__title">Title</span>
-      </div>
-      <div class="ring-island__content">Content</div>
-    </div>
-    `;
-
-basic.storyName = 'basic';
-
-export const withAHeaderAndButtons = () => `
-    <div class="ring-island">
-      <div class="ring-island__header">
-        <span class="ring-island__title">Title</span>
-        <span class="ring-island__header-button">Button1</span>
-        <span class="ring-island__header-button">Button2</span>
-      </div>
-      <div class="ring-island__content">Content</div>
-    </div>
-  `;
-
-withAHeaderAndButtons.storyName = 'with a header and buttons';

package/components/island-legacy/island-legacy.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Island from './island-legacy';
-
-describe('Island Legacy', () => {
-  const shallowIsland = params => shallow(<Island {...params}/>);
-  const mountIsland = params => mount(<Island {...params}/>);
-
-  it('should create component', () => {
-    mountIsland().should.have.type(Island);
-  });
-
-  it('should wrap children with div', () => {
-    shallowIsland().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowIsland({className: 'test-class'}).should.have.className('test-class');
-  });
-});