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

package/components/caret/caret.examples.js

@@ -1,39 +0,0 @@
-import '@jetbrains/ring-ui/components/link/link__legacy.css';
-import Caret from '@jetbrains/ring-ui/components/caret/caret';
-
-export default {
-  title: 'Utilities/Caret',
-
-  parameters: {
-    notes:
-      'Allows manipulation of the caret position in a text box or a contenteditable element. Ported from [jquery-caret](https://github.com/accursoft/caret/).',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  const node = document.createElement('div');
-
-  node.innerHTML = `
-<label>
-  Textarea
-  <textarea id="test-input" class="ring-input">
-  Lorem ipsum
-  dolor sit amet
-  </textarea>
-</label>
-<div><a href="" id="cursor-action" class="ring-link">Set caret position</a></div>
-    `;
-
-  const caret = new Caret(node.querySelector('#test-input'));
-
-  node.querySelector('#cursor-action').addEventListener('click', event => {
-    caret.focus();
-    caret.setPosition(4);
-    event.preventDefault();
-  });
-
-  return node;
-};
-
-basic.storyName = 'Caret';

package/components/caret/caret.test.js

@@ -1,137 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-import Caret from './caret';
-
-describe('Caret', () => {
-  let target;
-  let caret;
-  beforeEach(() => {
-    target = document.createElement('div');
-    target.innerHTML = 'target = document.createElement(textarea)';
-    target.style.font = '12px/14px Arial';
-    target.contentEditable = true;
-
-    document.body.appendChild(target);
-
-    caret = new Caret(target);
-  });
-
-  afterEach(() => {
-    window.getSelection().removeAllRanges();
-    // document.body.removeChild(target);
-    target = null;
-  });
-
-  describe('getPosition', () => {
-    it('Default position should be 0', () => {
-      window.getSelection().removeAllRanges();
-
-      caret.getPosition().should.equal(0);
-    });
-
-    it('Should get correct positions', () => {
-      window.getSelection().collapse(target.firstChild, 10);
-
-      caret.getPosition().should.equal(10);
-    });
-
-    it('Should focus on get by default', () => {
-      caret.getPosition();
-
-      target.should.equal(document.activeElement);
-    });
-
-    it('Shouldn\'t focus on get when prohibited', () => {
-      caret.getPosition({avoidFocus: true});
-
-      target.should.not.equal(document.activeElement);
-    });
-
-    it('Should get correct position with simple deep markup', () => {
-      target.innerHTML = '<span>foo<span>test<span>hello</span></span><span>123</span></span>';
-      window.getSelection().collapse(target.children[0].children[0].children[0].firstChild,
-        2);
-      caret.getPosition().should.equal(9);
-    });
-
-    it('Should get correct position with difficult deep markup 2', () => {
-      target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
-        '</span><span>span3</span>';
-      window.getSelection().collapse(target.children[1].children[0].firstChild, 4);
-      caret.getPosition().should.equal(20);
-    });
-
-    it('Should get correct positions for the same node selection - second node', () => {
-      target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
-        '</span><span>span3</span>';
-      const range = new Range();
-      range.setStart(target.children[1].children[0].firstChild, 1);
-      range.setEnd(target.children[1].children[0].firstChild, 4);
-      window.getSelection().removeAllRanges();
-      window.getSelection().addRange(range);
-      caret.getPosition().should.deep.equal({startOffset: 17, endOffset: 20, position: 20});
-    });
-
-    it('Should get correct positions for the same node selection - first node', () => {
-      target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
-        '</span><span>span3</span>';
-      const range = new Range();
-      range.setStart(target.children[0].childNodes[0], 0);
-      range.setEnd(target.children[0].childNodes[0], 5);
-      window.getSelection().removeAllRanges();
-      window.getSelection().addRange(range);
-      caret.getPosition().should.deep.equal({startOffset: 0, endOffset: 5, position: 5});
-    });
-
-    it('Should get correct positions for different nodes selection', () => {
-      target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
-        '</span><span>span3</span>';
-      const range = new Range();
-      range.setStart(target.children[0].children[0].firstChild, 1);
-      range.setEnd(target.children[1].children[0].firstChild, 4);
-      window.getSelection().removeAllRanges();
-      window.getSelection().addRange(range);
-      caret.getPosition().should.deep.equal({startOffset: 6, endOffset: 20, position: 20});
-    });
-
-    it('Should get correct positions for different nodes selection - whole text', () => {
-      target.innerHTML = '<span>span1<span>span11</span></span><span>span2<span>span21</span>' +
-        '</span><span>span3</span>';
-      const range = new Range();
-      range.setStart(target.children[0].childNodes[0], 0);
-      range.setEnd(target.children[2].firstChild, 5);
-      window.getSelection().removeAllRanges();
-      window.getSelection().addRange(range);
-      caret.getPosition().should.deep.equal({startOffset: 0, endOffset: 27, position: 27});
-    });
-  });
-
-  describe('setPosition', () => {
-    it('Shouldn\'t change caret position if we don\'t position', () => {
-      should.not.exist(caret.setPosition());
-
-      caret.getPosition().should.equal(0);
-    });
-
-    it('Should change caret position if we position', () => {
-      caret.setPosition(15);
-
-      caret.getPosition().should.equal(15);
-    });
-  });
-
-  describe('getOffset', () => {
-    it('Should get correct zero offset', () => {
-      window.getSelection().collapse(target.firstChild, 0);
-
-      caret.getOffset().should.equal(0);
-    });
-
-    it('Should get correct offset', () => {
-      window.getSelection().collapse(target.firstChild, 10);
-
-      // Test caret offset should be about 50px (browsers have some small differences)
-      caret.getOffset().should.be.closeTo(50, 15);
-    });
-  });
-});

package/components/checkbox/checkbox.examples.js

@@ -1,67 +0,0 @@
-import React, {Fragment} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Checkbox from '@jetbrains/ring-ui/components/checkbox/checkbox';
-
-export default {
-  title: 'Components/Checkbox',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: Checkbox,
-    framework: 'react'
-  }
-};
-
-export const controls = args => <Checkbox {...args}/>;
-controls.args = {label: 'label'};
-controls.parameters = {hermione: {skip: true}};
-
-export const basic = () => (
-  <Fragment>
-    <h1>Base Examples</h1>
-    <div id="checkbox-base">
-      <Checkbox label="One"/>
-      <br/>
-      <Checkbox label="Two" defaultChecked/>
-      <br/>
-      <Checkbox label="Indeterminate" indeterminate/>
-      <br/>
-      <Checkbox label="Indeterminate checked" indeterminate defaultChecked/>
-    </div>
-
-    <h1>Disabled checkboxes</h1>
-    <div id="checkbox-disabled">
-      <Checkbox label="One" disabled/>
-      <br/>
-      <Checkbox label="Two" disabled defaultChecked/>
-      <br/>
-      <Checkbox label="Indeterminate" disabled indeterminate/>
-      <br/>
-      <Checkbox label="Indeterminate checked" disabled indeterminate defaultChecked/>
-    </div>
-
-    <h1>Examples with outer styles</h1>
-    <div id="checkbox-additional">
-      <div style={{lineHeight: '60px'}}>
-        <Checkbox defaultChecked>This checkbox is inside a div with large line-height.</Checkbox>
-        <span>This text should be aligned on same line with checkbox label</span>
-      </div>
-      <div style={{lineHeight: '6px'}}>
-        <Checkbox defaultChecked>This checkbox is inside a div with small line-height.</Checkbox>
-        <span>This text should be aligned on same line with checkbox label</span>
-      </div>
-      <div style={{lineHeight: '48px', fontSize: '40px'}}>
-        <Checkbox defaultChecked>This checkbox is inside a div with large font-size.</Checkbox>
-        <span>This text should be aligned on same line with checkbox label</span>
-      </div>
-      <div style={{lineHeight: '6px', fontSize: '4px'}}>
-        <Checkbox defaultChecked>This checkbox is inside a div with small font-size.</Checkbox>
-        <span>This text should be aligned on same line with checkbox label</span>
-      </div>
-    </div>
-  </Fragment>
-);
-
-basic.storyName = 'basic';

package/components/checkbox/checkbox.test.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import {Simulate} from 'react-dom/test-utils';
-import {shallow, mount} from 'enzyme';
-
-import Checkbox from './checkbox';
-
-describe('Checkbox', () => {
-  const shallowCheckbox = props => shallow(<Checkbox {...props}/>);
-  const mountCheckbox = props => mount(<Checkbox {...props}/>);
-
-  it('should create component', () => {
-    shallowCheckbox().should.exist;
-  });
-
-  it('should render checkbox', () => {
-    const checkbox = mountCheckbox().instance();
-    checkbox.input.should.have.property('type', 'checkbox');
-  });
-
-  it('should set name', () => {
-    const checkbox = mountCheckbox({name: 'test'}).instance();
-
-    checkbox.input.should.have.property('name', 'test');
-  });
-
-  it('should call handler for click event', () => {
-    const clickHandler = sandbox.stub();
-
-    const checkbox = mountCheckbox({onClick: clickHandler}).instance();
-    Simulate.click(checkbox.input);
-
-    clickHandler.should.have.been.called;
-  });
-
-  it('should not call handler on change event if disabled', () => {
-    const onChange = sandbox.stub();
-
-    const checkbox = shallowCheckbox({
-      disabled: true,
-      onChange
-    });
-
-    checkbox.simulate('click');
-    onChange.should.have.not.been.called;
-  });
-
-  it('should be unchecked by default', () => {
-    const checkbox = shallowCheckbox();
-
-    checkbox.should.not.be.checked();
-  });
-
-  it('should check control', () => {
-    const checkbox = mountCheckbox({defaultChecked: true}).instance();
-
-    checkbox.input.should.be.checked;
-  });
-
-  it('should be disabled', () => {
-    const checkbox = mountCheckbox({
-      disabled: true
-    }).instance();
-
-    checkbox.input.should.be.disabled;
-  });
-
-  it('should check control on change event', () => {
-    const eventMock = {
-      target: {
-        checked: true
-      }
-    };
-    const checkbox = mountCheckbox().instance();
-
-    Simulate.change(checkbox.input, eventMock);
-    checkbox.input.should.be.checked;
-  });
-});

package/components/code/code.examples.js

@@ -1,92 +0,0 @@
-import React from 'react';
-import javascript from 'highlight.js/lib/languages/javascript';
-import xml from 'highlight.js/lib/languages/xml';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Code, {code, highlight} from '@jetbrains/ring-ui/components/code/code';
-
-highlight.registerLanguage('javascript', javascript);
-highlight.registerLanguage('xml', xml);
-
-export default {
-  title: 'Components/Code',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: `
-Displays a block of code. Syntax highlighting is loaded lazily using [dynamic imports](https://webpack.js.org/api/module-methods/#import-1).
-
-You can also preload the languages you need:
-
-\`import {highlight} from '@jetbrains/ring-ui/components/code/code'\`
-
-\`import 1c from 'highlight.js/lib/languages/1c';\`
-
-\`highlight.registerLanguage('1c', 1c);\`
-    `
-  }
-};
-
-export const basic = () => (
-  <Code
-    code={`
-          import React, {Component} from 'react';
-          import ChildComponent from './child-component';
-
-          const MyComponent = () => (
-            <div className="class">
-              <ChildComponent prop="value" />
-            </div>
-          );
-        `}
-  />
-);
-
-basic.storyName = 'basic';
-
-export const lazy = () => (
-  <Code
-    language="actionscript"
-    code={`
-      package org.example.dummy {
-          import org.dummy.*;
-
-          /*define package inline interface*/
-          public interface IFooBarzable {
-              public function foo(... pairs):Array;
-          }
-
-          public class FooBar implements IFooBarzable {
-              static private var cnt:uint = 0;
-              private var bar:String;
-
-              //constructor
-              public function TestBar(bar:String):void {
-                  bar = bar;
-                  ++cnt;
-              }
-
-              public function foo(... pairs):Array {
-                  pairs.push(bar);
-                  return pairs;
-              }
-          }
-      }
-    `}
-  />
-);
-
-export const taggedTemplate = () =>
-  code`
-      import React from 'react';
-      import {code} from '@jetbrains/ring-ui/components/code/code';
-
-      const el = code\`some('js')\`;
-    `;
-
-taggedTemplate.storyName = 'tagged template';
-
-taggedTemplate.parameters = {
-  hermione: {skip: true}
-};

package/components/code/code.test.js

@@ -1,100 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-import css from 'highlight.js/lib/languages/css';
-import javascript from 'highlight.js/lib/languages/javascript';
-import xml from 'highlight.js/lib/languages/xml';
-
-import Code, {highlight} from './code';
-
-highlight.registerLanguage('css', css);
-highlight.registerLanguage('javascript', javascript);
-highlight.registerLanguage('xml', xml);
-
-describe('Code', () => {
-  const shallowCode = props => shallow(
-    <Code
-      code=""
-      {...props}
-    />,
-    {disableLifecycleMethods: true}
-  );
-  const mountCode = props => mount(
-    <Code
-      code=""
-      {...props}
-    />
-  );
-
-  it('should wrap children with pre', () => {
-    shallowCode().should.have.tagName('pre');
-  });
-
-  it('should use passed className', () => {
-    shallowCode({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should add passed language to class attribute', () => {
-    shallowCode({language: 'js'}).should.have.className('js');
-  });
-
-  it('should detect javascript/JSX', () => {
-    const wrapper = mountCode({
-      code: `
-        import React, {Component} from 'react';
-        import ChildComponent from './child-component';
-
-        const MyComponent = () => (
-          <div className="class">
-            <ChildComponent prop="value" />
-          </div>
-        );
-      `
-    });
-
-    // child tree is rendered with highlight.js, so it's unaccessible by enzyme
-    wrapper.getDOMNode().should.contain('.javascript');
-    wrapper.getDOMNode().should.contain('.xml');
-  });
-
-  it('should detect CSS', () => {
-    const wrapper = mountCode({
-      code: `
-        .className {
-          display: inline-block;
-          font-size: 18px;
-        }
-      `
-    });
-    wrapper.getDOMNode().should.contain('.css');
-  });
-
-  it('should detect HTML', () => {
-    const wrapper = mountCode({
-      code: `
-        <body>
-          <div id="app"></div>
-        </body>
-      `
-    });
-    wrapper.getDOMNode().should.contain('.xml');
-  });
-
-  it('should parse and highlight the code', () => {
-    const wrapper = mountCode({
-      code: '"foo"'
-    });
-    const token = wrapper.getDOMNode().querySelector('.hljs-string');
-    token.textContent.should.equal('"foo"');
-  });
-
-  it('should parse and highlight the code after props update', () => {
-    const wrapper = mountCode({
-      code: '"foo"'
-    });
-    wrapper.setProps({
-      code: '"bar"'
-    });
-    const token = wrapper.getDOMNode().querySelector('.hljs-string');
-    token.textContent.should.equal('"bar"');
-  });
-});

package/components/confirm/confirm.examples.js

@@ -1,93 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-import Confirm from '@jetbrains/ring-ui/components/confirm/confirm';
-
-export default {
-  title: 'Components/Confirm',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'A component that shows a confirmation dialog.',
-    hermione: {captureSelector: '*[data-test~=ring-dialog]'},
-    a11y: {element: '*[data-test~=ring-dialog]'}
-  }
-};
-
-export const confirm = ({onConfirm, onCancel}) => {
-  class ConfirmDemo extends React.Component {
-    state = {
-      confirm: {
-        show: true,
-        text: 'Do you really wish to proceed?',
-        description: 'A description of an action that is about to take place.',
-        inProgress: false,
-        onConfirm: () => {},
-        onReject: () => {}
-      }
-    };
-
-    componentDidMount() {
-      this.showConfirm();
-    }
-
-    hideConfirm = () => {
-      this.setState({confirm: {show: false}});
-    };
-
-    showConfirm = () =>
-      new Promise((resolve, reject) => {
-        this.setState({
-          confirm: {
-            show: true,
-            text: 'Do you really wish to proceed?',
-            description: 'A description of an action that is about to take place.',
-            onConfirm: () => this.hideConfirm() || resolve(),
-            onReject: () => this.hideConfirm() || reject()
-          }
-        });
-      }).
-        then(onConfirm).
-        catch(onCancel);
-
-    showWithAnotherText = () =>
-      new Promise((resolve, reject) => {
-        this.setState({
-          confirm: {
-            show: true,
-            text: 'There is another question',
-            onConfirm: () => this.hideConfirm() || resolve(),
-            onReject: () => this.hideConfirm() || reject()
-          }
-        });
-      }).
-        then(onConfirm).
-        catch(onCancel);
-
-    render() {
-      return (
-        <div>
-          <Button onClick={this.showConfirm}>Show confirm</Button>
-          <Button onClick={this.showWithAnotherText}>Show another message</Button>
-          <Confirm
-            show={this.state.confirm.show}
-            text={this.state.confirm.text}
-            description={this.state.confirm.description}
-            inProgress={this.state.inProgress}
-            confirmLabel="OK"
-            rejectLabel="Cancel"
-            onConfirm={this.state.confirm.onConfirm}
-            onReject={this.state.confirm.onReject}
-          />
-        </div>
-      );
-    }
-  }
-
-  return <ConfirmDemo/>;
-};
-
-confirm.argTypes = {onConfirm: {}, onCancel: {}};

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: {}};