@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/confirm/confirm.js

@@ -1,101 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-
-import Dialog from '../dialog/dialog';
-import Button from '../button/button';
-import {Content, Header} from '../island/island';
-import Panel from '../panel/panel';
-
-import styles from './confirm.css';
-
-/**
- * @name Confirm
- */
-
-export default class Confirm extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    text: PropTypes.string,
-    description: PropTypes.node,
-
-    show: PropTypes.bool,
-    rejectOnEsc: PropTypes.bool,
-    inProgress: PropTypes.bool,
-    cancelIsDefault: PropTypes.bool,
-    confirmLabel: PropTypes.string,
-    rejectLabel: PropTypes.string,
-
-    onConfirm: PropTypes.func,
-    onReject: PropTypes.func
-  };
-
-  static defaultProps = {
-    text: null,
-    description: null,
-    show: false,
-    rejectOnEsc: true,
-    inProgress: false,
-    cancelIsDefault: false,
-    confirmLabel: 'OK',
-    rejectLabel: 'Cancel',
-    onConfirm: () => {},
-    onReject: () => {}
-  };
-
-  onEscPress = () => {
-    if (this.props.rejectOnEsc) {
-      this.props.onReject();
-    }
-  };
-
-  render() {
-    const {
-      show,
-      className,
-      inProgress,
-      cancelIsDefault,
-      text,
-      description,
-      confirmLabel,
-      rejectLabel,
-      onConfirm,
-      onReject
-    } = this.props;
-
-    return (
-      <Dialog
-        label={text || description}
-        className={className}
-        onEscPress={this.onEscPress}
-        show={show}
-        trapFocus
-        data-test="ring-confirm"
-      >
-        {text && <Header>{text}</Header>}
-        <Content>
-          {description && <div className={styles.description}>{description}</div>}
-        </Content>
-        <Panel>
-          <Button
-            data-test="confirm-ok-button"
-            primary={!cancelIsDefault}
-            loader={inProgress}
-            disabled={inProgress}
-            onClick={onConfirm}
-          >
-            {confirmLabel}
-          </Button>
-          <Button
-            data-test="confirm-reject-button"
-            onClick={onReject}
-            disabled={inProgress}
-            primary={cancelIsDefault}
-          >
-            {rejectLabel}
-          </Button>
-        </Panel>
-      </Dialog>
-    );
-  }
-}
-

package/components/confirm/confirm.test.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import {mount} from 'enzyme';
-
-import islandStyles from '../island/island.css';
-
-import Confirm from './confirm';
-
-describe('Confirm', () => {
-  const defaultProps = {show: true, text: 'Foo'};
-  let wrapper;
-  const mountConfirm = props => {
-    wrapper = mount(<Confirm {...props}/>);
-    return wrapper;
-  };
-
-  const getContainer = () => document.querySelector('[data-test~="ring-dialog"]');
-
-  afterEach(() => wrapper.unmount());
-
-  it('should create component', () => {
-    mountConfirm(defaultProps).should.have.type(Confirm);
-  });
-
-  it('should render confirm', () => {
-    mountConfirm(defaultProps);
-    getContainer().should.contain(`.${islandStyles.title}`);
-  });
-});

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

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-import confirm, {hideConfirm} from '@jetbrains/ring-ui/components/confirm-service/confirm-service';
-
-export default {
-  title: 'Services/Confirm Service',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes:
-      ' wrapper for the Confirm component. Allows showing the confirmation dialog * without mounting the Confirm component first. Can be used outside React.',
-    hermione: {captureSelector: '*[data-test~=ring-dialog]'},
-    a11y: {element: '*[data-test~=ring-dialog]'}
-  }
-};
-
-export const confirmService = ({onConfirm, onCancel}) => {
-  class ConfirmDemo extends React.Component {
-    componentDidMount() {
-      this.showConfirm();
-    }
-
-    componentWillUnmount() {
-      hideConfirm();
-    }
-
-    showConfirm = () =>
-      confirm({text: 'Do you really wish to proceed?'}).
-        then(onConfirm).
-        catch(onCancel);
-
-    showWithAnotherText = () =>
-      confirm({
-        text: 'There is another confirmation',
-        description: 'Confirmation description',
-        confirmLabel: 'OK',
-        rejectLabel: 'Cancel',
-        cancelIsDefault: true,
-        onBeforeConfirm: () => new Promise(resolve => setTimeout(resolve, 1000))
-      }).
-        then(onConfirm).
-        catch(onCancel);
-
-    render() {
-      return (
-        <div>
-          <Button onClick={this.showConfirm}>Show confirm</Button>
-          <Button onClick={this.showWithAnotherText}>Show another message</Button>
-        </div>
-      );
-    }
-  }
-
-  return <ConfirmDemo/>;
-};
-
-confirmService.argTypes = {onConfirm: {}, onCancel: {}};

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

@@ -1,65 +0,0 @@
-import React from 'react';
-import {render} from 'react-dom';
-
-import Confirm from '../confirm/confirm';
-
-/**
- * @name Confirm Service
- */
-
-export const containerElement = document.createElement('div');
-
-/**
- * Renders Confirm into virtual node to skip maintaining container
- */
-function renderConfirm(props) {
-  render(<Confirm {...props}/>, containerElement);
-}
-
-export default function confirm({
-  text,
-  description,
-  confirmLabel = 'OK',
-  rejectLabel = 'Cancel',
-  cancelIsDefault,
-  onBeforeConfirm
-}) {
-  return new Promise((resolve, reject) => {
-    const props = {
-      text,
-      description,
-      confirmLabel,
-      rejectLabel,
-      cancelIsDefault,
-      show: true,
-
-      onConfirm: () => {
-        if (onBeforeConfirm) {
-          renderConfirm({...props, inProgress: true});
-          return Promise.resolve(onBeforeConfirm()).
-            then(() => {
-              renderConfirm({...props, show: false});
-              resolve();
-            }).
-            catch(err => {
-              renderConfirm({...props, show: false});
-              reject(err);
-            });
-        }
-        renderConfirm({...props, show: false});
-        return resolve();
-      },
-
-      onReject: () => {
-        renderConfirm({...props, show: false});
-        reject(new Error('Confirm(@jetbrains/ring-ui): null exception'));
-      }
-    };
-
-    renderConfirm(props);
-  });
-}
-
-export function hideConfirm() {
-  renderConfirm({text: '', show: false});
-}

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.js

@@ -1,64 +0,0 @@
-import React, {cloneElement, Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Sidebar from './sidebar';
-import styles from './content-layout.css';
-
-/**
- * @name Content Layout
- */
-
-export default class ContentLayout extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    contentClassName: PropTypes.string,
-    responsive: PropTypes.bool
-  };
-
-  static defaultProps = {
-    responsive: true
-  };
-
-  state = {};
-
-  saveContentNode = contentNode => {
-    this.setState({contentNode});
-  };
-
-  render() {
-    const {children, className, contentClassName, responsive, ...restProps} = this.props;
-
-    const classes = classNames(styles.contentLayout, className, {
-      [styles.contentLayoutResponsive]: responsive
-    });
-
-    const contentClasses = classNames(styles.contentLayoutContent, contentClassName);
-
-    const childrenArray = React.Children.toArray(children);
-    const sidebarChild = childrenArray.filter(child => child && child.type === Sidebar)[0];
-
-    const sidebar = sidebarChild && cloneElement(sidebarChild, {
-      contentNode: this.state.contentNode
-    });
-    const contentChildren = childrenArray.filter(child => child !== sidebarChild);
-
-    return (
-      <div
-        {...restProps}
-        className={classes}
-      >
-        {sidebar}
-        <main
-          className={contentClasses}
-          ref={this.saveContentNode}
-        >
-          {contentChildren}
-        </main>
-      </div>
-    );
-  }
-}
-
-export {default as Sidebar} from './sidebar';

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}`);
-  });
-});