@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

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

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