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

package/components/confirm-service/confirm-service.test.js

@@ -1,59 +0,0 @@
-import {Simulate} from 'react-dom/test-utils';
-import {unmountComponentAtNode} from 'react-dom';
-
-import islandStyles from '../island/island.css';
-
-import confirm, {containerElement} from './confirm-service';
-
-describe('Confirm Service', () => {
-  const getContainer = () => document.querySelector('[data-test~="ring-dialog"]');
-
-  afterEach(() => {
-    unmountComponentAtNode(containerElement);
-  });
-
-  it('should show confirm', () => {
-    confirm({text: 'foo'});
-    getContainer().should.contain(`.${islandStyles.title}`);
-  });
-
-  it('should show confirm text', () => {
-    confirm({text: 'foo'});
-    getContainer().should.contain.text('foo');
-  });
-
-  it('should show confirm description', () => {
-    confirm({text: 'foo', description: 'descr'});
-    getContainer().should.contain.text('descr');
-  });
-
-  it('should show confirm button text', () => {
-    confirm({text: 'foo', confirmLabel: 'confirm text'});
-    getContainer().should.contain.text('confirm text');
-  });
-
-  it('should show reject button text', () => {
-    confirm({text: 'foo', rejectLabel: 'reject text'});
-    getContainer().should.contain.text('reject text');
-  });
-
-  it('should resolve on confirm', async () => {
-    const spy = sandbox.spy();
-    const promise = confirm({text: 'foo'}).then(spy);
-    const okButton = getContainer().querySelector('*[data-test="confirm-ok-button"]');
-    Simulate.click(okButton);
-
-    await promise;
-    spy.should.have.been.called;
-  });
-
-  it('should reject on reject', async () => {
-    const spy = sandbox.spy();
-    const promise = confirm({text: 'foo'}).catch(spy);
-    const okButton = getContainer().querySelector('*[data-test="confirm-reject-button"]');
-    Simulate.click(okButton);
-
-    await promise;
-    spy.should.have.been.called;
-  });
-});

package/components/content-layout/content-layout.examples.js

@@ -1,188 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import ContentLayout from '@jetbrains/ring-ui/components/content-layout/content-layout';
-import Sidebar from '@jetbrains/ring-ui/components/content-layout/sidebar';
-
-export default {
-  title: 'Components/Content Layout',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'A component for simple content layout.'
-  }
-};
-
-export const basic = () => (
-  <ContentLayout>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </ContentLayout>
-);
-
-basic.storyName = 'basic';
-
-export const withSidebarOnTheLeft = () => (
-  <div>
-    <div>
-      <h4>Some title</h4>
-    </div>
-    <ContentLayout>
-      <Sidebar className="sidebar">
-        This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-        do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is sidebar. Lorem ipsum
-        dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-        dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing
-        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is sidebar.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-        labore et dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur
-        adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      </Sidebar>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
-      sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-      sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-      ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-      qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
-      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-      officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
-      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-      officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
-      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-      officia deserunt mollit anim id est laborum.
-    </ContentLayout>
-    <div>
-      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua.
-    </div>
-    <div>
-      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua.
-    </div>
-    <div>
-      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua.
-    </div>
-  </div>
-);
-
-withSidebarOnTheLeft.storyName = 'with sidebar on the left';
-
-withSidebarOnTheLeft.parameters = {
-  storyStyles: `
-<style>
-    body {
-      margin: 0 !important;
-    }
-
-    .sidebar {
-      background-color: #EEEEEE;
-    }
-</style>`
-};
-
-export const withSidebarOnTheRight = () => (
-  <div>
-    <div>
-      <h4>Some title</h4>
-    </div>
-    <ContentLayout>
-      <Sidebar className="sidebar" right>
-        This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-        do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is sidebar. Lorem ipsum
-        dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-        dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing
-        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is sidebar.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-        labore et dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur
-        adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      </Sidebar>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
-      sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-      sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-      ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-      qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
-      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-      officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
-      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-      officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
-      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-      officia deserunt mollit anim id est laborum.
-    </ContentLayout>
-    <div>
-      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua.
-    </div>
-    <div>
-      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua.
-    </div>
-    <div>
-      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua.
-    </div>
-  </div>
-);
-
-withSidebarOnTheRight.storyName = 'with sidebar on the right';
-
-withSidebarOnTheRight.parameters = {
-  storyStyles: `
-<style>
-    body {
-      margin: 0 !important;
-    }
-
-    .sidebar {
-      background-color: #EEEEEE;
-    }
-</style>
-      `
-};

package/components/content-layout/content-layout.test.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import ContentLayout from './content-layout';
-import Sidebar from './sidebar';
-import styles from './content-layout.css';
-
-describe('Content Layout', () => {
-  const shallowContentLayout = params => shallow(<ContentLayout {...params}/>);
-  const mountContentLayout = params => mount(<ContentLayout {...params}/>);
-
-  it('should create component', () => {
-    mountContentLayout().should.have.type(ContentLayout);
-  });
-
-  it('should wrap children with div', () => {
-    shallowContentLayout().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowContentLayout({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should render sidebar', () => {
-    const component = mount(<ContentLayout>
-      <Sidebar>{'In sidebar'}</Sidebar>
-      <div>{'Foo'}</div>
-    </ContentLayout>);
-
-    component.should.have.descendants(`div.${styles.sidebar}`);
-  });
-
-  it('should render sidebar on the right', () => {
-    const component = mount(<ContentLayout>
-      <Sidebar right>{'In sidebar'}</Sidebar>
-      <div>{'Foo'}</div>
-    </ContentLayout>);
-
-    component.should.have.descendants(`div.${styles.sidebarRight}`);
-  });
-});

package/components/contenteditable/contenteditable.examples.js

@@ -1,45 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import ContentEditable from '@jetbrains/ring-ui/components/contenteditable/contenteditable';
-
-export default {
-  title: 'Components/ContentEditable',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Provides a ContentEditable component.'
-  }
-};
-
-export const basic = () => (
-  <div>
-    <ContentEditable className="my-input" aria-label="My input">
-      <span>
-        text <b>bold text</b> text
-      </span>
-    </ContentEditable>
-    <ContentEditable className="my-input" aria-label="My input" disabled>
-      <span>
-        text <b>bold text</b> text
-      </span>
-    </ContentEditable>
-  </div>
-);
-
-basic.storyName = 'ContentEditable';
-
-basic.parameters = {
-  storyStyles: `
-<style>
-    .my-input {
-      padding-left: 4px;
-    }
-
-    .my-input[disabled] {
-      border: 1px solid var(--ring-border-disabled-color);
-      background-color: var(--ring-disabled-color);
-    }
-</style>`
-};

package/components/contenteditable/contenteditable.test.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import ContentEditable from './contenteditable';
-
-describe('ContentEditable', () => {
-  const stub = sandbox.stub();
-
-  afterEach(() => stub.reset());
-
-  const defaultProps = {
-    className: 'test',
-    onComponentUpdate: stub
-  };
-
-  const mountContentEditable = (props = defaultProps) => mount(
-    <ContentEditable {...props}>
-      <b>{'bold'}</b>
-    </ContentEditable>
-  );
-  const shallowContentEditable = (props = defaultProps) => shallow(
-    <ContentEditable {...props}>
-      <b>{'bold'}</b>
-    </ContentEditable>
-  );
-
-  it('should create component', () => {
-    mountContentEditable().should.have.type(ContentEditable);
-  });
-
-  it('should pass other properties', () => {
-    shallowContentEditable().should.have.className('test');
-  });
-
-
-  it('should dangerously set html', () => {
-    mountContentEditable().getDOMNode().innerHTML.should.equal('<b>bold</b>');
-  });
-
-  it('should render only on html / disabled change', () => {
-    const wrapper = mountContentEditable();
-    wrapper.setProps({
-      disabled: true
-    });
-
-    wrapper.setProps({
-      children: <span/>
-    });
-
-    stub.should.have.been.calledTwice;
-  });
-
-  it('should not render on other props change', () => {
-    const wrapper = mountContentEditable();
-    wrapper.setProps({
-      className: 'testtest'
-    });
-
-    stub.should.not.have.been.called;
-  });
-
-  it('should set tabindex equal zero by default', () => {
-    shallowContentEditable().should.have.attr('tabindex', '0');
-  });
-
-  it('should allow pass custom tabindex', () => {
-    const wrapper = shallowContentEditable({
-      tabIndex: -1
-    });
-
-    wrapper.should.have.attr('tabindex', '-1');
-  });
-});

package/components/data-list/data-list.examples.js

@@ -1,116 +0,0 @@
-import React, {PureComponent} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import DataList from '@jetbrains/ring-ui/components/data-list/data-list';
-import Selection from '@jetbrains/ring-ui/components/data-list/selection';
-import {moreLessButtonStates} from '@jetbrains/ring-ui/components/data-list/item';
-import mock, {moreItems} from '@jetbrains/ring-ui/components/data-list/data-list.mock';
-
-export default {
-  title: 'Components/DataList',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'A component for rendering interactive hierarchical tables.'
-  }
-};
-
-export const basic = () => {
-  class DataListDemo extends PureComponent {
-    // state uses getChildren
-    // eslint-disable-next-line react/sort-comp
-    expandedItems = new Set();
-    isItemCollapsible = item => item.collapsible && item.items && item.id > 10;
-    isItemCollapsed = item => !this.expandedItems.has(item.id);
-
-    getChildren = item => {
-      const collapsible = this.isItemCollapsible(item);
-      const collapsed = this.isItemCollapsed(item);
-      return (collapsible && collapsed) || !item.items ? [] : item.items;
-    };
-
-    state = {
-      data: mock,
-      selection: new Selection({
-        data: mock,
-        isItemSelectable: item => item.selectable,
-        getChildren: this.getChildren
-      })
-    };
-
-    moreExpandableItems = new Set([mock[0].id]);
-    moreExpandedItems = new Set();
-
-    itemMoreLessState = item => {
-      if (this.moreExpandableItems.has(item.id)) {
-        return this.moreExpandedItems.has(item.id)
-          ? moreLessButtonStates.LESS
-          : moreLessButtonStates.MORE;
-      } else {
-        return moreLessButtonStates.UNUSED;
-      }
-    };
-
-    onItemMoreLess = (item, more) => {
-      if (more) {
-        this.moreExpandedItems.add(item.id);
-        item.items = item.items.concat([...moreItems]);
-      } else {
-        this.moreExpandedItems.delete(item.id);
-        item.items = item.items.slice(0, item.items.length - moreItems.length);
-      }
-
-      const data = this.state.data;
-      this.setState({data: [...data]});
-    };
-
-    onSelect = selection => {
-      this.setState({selection});
-    };
-
-    itemFormatter = item => {
-      const items = this.getChildren(item);
-      const collapsible = this.isItemCollapsible(item);
-      const collapsed = this.isItemCollapsed(item);
-
-      const onCollapse = () => {
-        this.expandedItems.delete(item.id);
-        const data = this.state.data;
-        this.setState({data: [...data]});
-      };
-
-      const onExpand = () => {
-        this.expandedItems.add(item.id);
-        const data = this.state.data;
-        this.setState({data: [...data]});
-      };
-
-      return {
-        ...item,
-        items,
-        collapsible,
-        collapsed,
-        onCollapse,
-        onExpand
-      };
-    };
-
-    render() {
-      return (
-        <DataList
-          data={this.state.data}
-          selection={this.state.selection}
-          onSelect={this.onSelect}
-          itemFormatter={this.itemFormatter}
-          onItemMoreLess={this.onItemMoreLess}
-          itemMoreLessState={this.itemMoreLessState}
-        />
-      );
-    }
-  }
-
-  return <DataListDemo/>;
-};
-
-basic.storyName = 'DataList';

package/components/data-list/data-list.test.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import {shallow, mount, render} from 'enzyme';
-
-import DataList from './data-list';
-import Selection from './selection';
-
-describe('Data List', () => {
-  const shallowDataList = (props = {}) => {
-    const data = props.data || [];
-    const selection = new Selection({data, isItemSelectable: item => item.selectable});
-    const itemFormatter = () => {};
-    return shallow(<DataList {...{...{data, selection, itemFormatter}, ...props}}/>);
-  };
-
-  const mountDataList = (props = {}) => {
-    const data = props.data || [];
-    const selection = new Selection({data, isItemSelectable: item => item.selectable});
-    const itemFormatter = () => {};
-    return mount(<DataList {...{...{data, selection, itemFormatter}, ...props}}/>);
-  };
-
-  const renderDataList = (props = {}) => {
-    const data = props.data || [];
-    const selection = new Selection({data, isItemSelectable: item => item.selectable});
-    const itemFormatter = () => {};
-    return render(<DataList {...{...{data, selection, itemFormatter}, ...props}}/>);
-  };
-
-  it('should create component', () => {
-    mountDataList().should.have.type(DataList);
-  });
-
-  it('should wrap children with div', () => {
-    shallowDataList().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    renderDataList({className: 'test-class'}).find('ul').should.have.className('test-class');
-  });
-});