@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

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

@@ -1,100 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
-import minusIcon from '@jetbrains/icons/remove-10px';
-
-import Icon from '../icon/icon';
-
-import styles from './checkbox.css';
-
-/**
- * @name Checkbox
- */
-/**
- * Displays a checkbox.
- */
-export default class Checkbox extends PureComponent {
-
-  static propTypes = {
-    name: PropTypes.string,
-    label: PropTypes.string,
-    className: PropTypes.string,
-    containerClassName: PropTypes.string,
-    containerStyle: PropTypes.object,
-    cellClassName: PropTypes.string,
-    labelClassName: PropTypes.string,
-    defaultChecked: PropTypes.bool,
-    checked: PropTypes.bool,
-    indeterminate: PropTypes.bool,
-    disabled: PropTypes.bool,
-    onChange: PropTypes.func,
-    children: PropTypes.node
-  };
-
-  componentDidMount() {
-    if (this.input != null) {
-      this.input.indeterminate = this.props.indeterminate;
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const {indeterminate} = this.props;
-    if (this.input != null && indeterminate !== prevProps.indeterminate) {
-      this.input.indeterminate = this.props.indeterminate;
-    }
-  }
-
-  inputRef = el => {
-    if (el != null) {
-      el.indeterminate = this.props.indeterminate;
-    }
-    this.input = el;
-  };
-
-  render() {
-    const {
-      children,
-      label,
-      className,
-      containerClassName,
-      containerStyle,
-      cellClassName,
-      labelClassName,
-      indeterminate,
-      ...restProps
-    } = this.props;
-
-    const classes = classNames(styles.input, className);
-    const containerClasses = classNames(styles.checkbox, containerClassName);
-    const cellClasses = classNames(styles.cell, cellClassName);
-    const labelClasses = classNames(styles.label, labelClassName);
-
-    return (
-      <label
-        className={containerClasses}
-        style={containerStyle}
-        data-test="ring-checkbox"
-      >
-        <input
-          {...restProps}
-          data-checked={restProps.checked}
-          ref={this.inputRef}
-          type="checkbox"
-          className={classes}
-        />
-        <span className={cellClasses}>
-          <Icon
-            glyph={checkmarkIcon}
-            className={styles.check}
-          />
-          <Icon
-            glyph={minusIcon}
-            className={styles.minus}
-          />
-        </span>
-        <span className={labelClasses}>{label || children}</span>
-      </label>
-    );
-  }
-}

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

@@ -1,118 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import highlight from 'highlight.js/lib/core';
-
-import normalizeIndent from '../global/normalize-indent';
-import trivialTemplateTag from '../global/trivial-template-tag';
-import memoize from '../global/memoize';
-
-import styles from './code.css';
-import highlightStyles from './highlight.css';
-
-function noop() {}
-
-const registerLanguage = memoize(async language => {
-  const languageExports = await import(
-    /* webpackChunkName: "highlight-[request]" */
-    `highlight.js/lib/languages/${language}`
-  );
-  highlight.registerLanguage(language, languageExports.default);
-});
-
-/**
- * @name Code
- */
-
-export default class Code extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    code: PropTypes.string.isRequired,
-    inline: PropTypes.bool,
-    softWrap: PropTypes.bool,
-    language: PropTypes.string,
-    replacer: PropTypes.func,
-    codeRef: PropTypes.oneOfType([
-      PropTypes.shape({current: PropTypes.instanceOf(Element)}),
-      PropTypes.func
-    ])
-  };
-
-  static defaultProps = {
-    inline: false,
-    softWrap: false,
-    replacer: noop
-  };
-
-  componentDidMount() {
-    this.highlight();
-  }
-
-  componentDidUpdate() {
-    this.highlight();
-  }
-
-  async highlight() {
-    const codeRef = this.codeRef;
-    if (codeRef == null) {
-      return;
-    }
-    const {language, inline, replacer} = this.props;
-    if (!inline) {
-      if (language != null && highlight.getLanguage(language) == null) {
-        await registerLanguage(language);
-      }
-      highlight.highlightElement(codeRef);
-    }
-    replacer(codeRef);
-  }
-
-  get codeRef() {
-    const {codeRef} = this.props;
-    return !codeRef || this.isFunctionCodeRef ? this.code : codeRef.current;
-  }
-
-  get isFunctionCodeRef() {
-    return typeof (this.props.codeRef) === 'function';
-  }
-
-  get initCodeRef() {
-    const {codeRef} = this.props;
-    if (codeRef && !this.isFunctionCodeRef) {
-      return codeRef;
-    }
-    return ref => {
-      this.code = ref;
-      if (this.isFunctionCodeRef) {
-        codeRef(this.code);
-      }
-    };
-  }
-
-  render() {
-    const {code, className, inline, softWrap, language} = this.props;
-
-    const Tag = inline ? 'span' : 'pre';
-    const classes = classNames(styles.code, className, language, {
-      [styles.inline]: inline,
-      [styles.softWrap]: softWrap
-    });
-
-    return (
-      <Tag className={classes}>
-        <code
-          // should be focusable because it can be scrollable
-          tabIndex={inline ? -1 : 0}
-          ref={this.initCodeRef}
-          className={highlightStyles.highlightContainer}
-        >
-          {normalizeIndent(code)}
-        </code>
-      </Tag>
-    );
-  }
-}
-
-const code = trivialTemplateTag(source => <Code code={source}/>);
-
-export {code, highlight};

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