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

package/components/loader-inline/loader-inline.js

@@ -1,57 +0,0 @@
-import React, {PureComponent} from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import Theme, {withTheme} from '../global/theme';
-import dataTests from '../global/data-tests';
-
-import styles from './loader-inline.css';
-import injectStyles from './inject-styles';
-
-/**
- * @name Loader Inline
- */
-
-class LoaderInline extends PureComponent {
-  static propTypes = {
-    theme: PropTypes.oneOf(Object.values(Theme)),
-    className: PropTypes.string,
-    'data-test': PropTypes.string,
-    children: PropTypes.node
-  };
-
-  componentDidMount() {
-    injectStyles();
-  }
-
-  static Theme = Theme;
-
-  render() {
-    const {className, theme, 'data-test': dataTest, children, ...restProps} = this.props;
-
-    const classes = classNames(
-      styles.loader,
-      className,
-      `${styles.loader}_${theme}`
-    );
-
-    const loader = (
-      <div
-        {...restProps}
-        data-test={dataTests('ring-loader-inline', dataTest)}
-        className={classes}
-      />
-    );
-
-    return children
-      ? (
-        <>
-          {loader}
-          <span className={styles.children}>{children}</span>
-        </>
-      )
-      : loader;
-  }
-}
-
-export default withTheme()(LoaderInline);

package/components/loader-inline/loader-inline.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {mount} from 'enzyme';
-
-import LoaderInline from './loader-inline';
-
-describe('Loader Inline', () => {
-  const mountLoaderInline = props => mount(<LoaderInline {...props}/>);
-  const getLoaderInlineDiv = props => mountLoaderInline(props).find('div');
-
-  it('should create component', () => {
-    mountLoaderInline().type().should.equal(LoaderInline.type);
-  });
-
-  it('should add custom class', () => {
-    const wrapper = getLoaderInlineDiv({
-      className: 'test'
-    });
-
-    wrapper.should.have.className('test');
-  });
-});

package/components/loader-screen/loader-screen.examples.js

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import LoaderScreen from '@jetbrains/ring-ui/components/loader-screen/loader-screen';
-
-export default {
-  title: 'Components/Loader Screen',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes:
-      'Displays a large animated loader with an optional caption. Typical use cases: page loading animation, major action animation.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  class Example extends React.Component {
-    render() {
-      return <LoaderScreen/>;
-    }
-  }
-
-  return <Example/>;
-};
-
-basic.storyName = 'basic';
-
-export const withMessage = () => {
-  class Example extends React.Component {
-    render() {
-      return <LoaderScreen message={'Some message'}/>;
-    }
-  }
-
-  return <Example/>;
-};
-
-withMessage.storyName = 'with message';

package/components/loader-screen/loader-screen.js

@@ -1,38 +0,0 @@
-import React, {PureComponent} from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import Loader from '../loader/loader';
-
-import styles from './loader-screen.css';
-
-/**
- * @name Loader Screen
- */
-export default class LoaderScreen extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    containerClassName: PropTypes.string,
-    message: PropTypes.string
-  };
-
-  render() {
-    const {message, className, containerClassName, ...restProps} = this.props;
-
-    const containerClasses = classNames(containerClassName, styles.loaderScreen);
-
-    const loaderClasses = classNames(className, styles.loader, {
-      [styles.loaderWithoutSpacing]: !message
-    });
-
-    return (
-      <div className={containerClasses}>
-        <Loader
-          {...restProps}
-          message={message}
-          className={loaderClasses}
-        />
-      </div>
-    );
-  }
-}

package/components/login-dialog/login-dialog.js

@@ -1,125 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-
-import Dialog from '../dialog/dialog';
-import {Content} from '../island/island';
-import LoaderScreen from '../loader-screen/loader-screen';
-import {HUB_AUTH_PAGE_OPENED} from '../auth/background-flow';
-
-import styles from './login-dialog.css';
-
-const HUB_AUTH_PAGE_LOGIN_STARTED = 'HUB_AUTH_PAGE_LOGIN_STARTED';
-const HUB_AUTH_PAGE_LOGIN_DIMENSIONS = 'HUB_AUTH_PAGE_LOGIN_DIMENSIONS';
-
-const DEFAULT_HEIGHT = 517;
-const DEFAULT_WIDTH = 333;
-const DEFAULT_SHOW_FALLBACK_TIMEOUT = 5000;
-/**
- * @name Login Dialog
- */
-
-export default class LoginDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool,
-    className: PropTypes.string,
-    url: PropTypes.string,
-    loader: PropTypes.bool,
-    loadingMessage: PropTypes.string,
-    showFallbackTimeout: PropTypes.number,
-    renderFallbackLink: PropTypes.func,
-    onCancel: PropTypes.func.isRequired
-  };
-
-  static defaultProps = {
-    show: false,
-    url: 'about:blank',
-    renderFallbackLink: () => null,
-    showFallbackTimeout: DEFAULT_SHOW_FALLBACK_TIMEOUT
-  };
-
-  state = {
-    loading: true,
-    loggingIn: false,
-    showFallbackLink: false,
-    height: DEFAULT_HEIGHT,
-    width: DEFAULT_WIDTH
-  };
-
-  componentDidMount() {
-    window.addEventListener('message', this.onMessage);
-    this.startFallbackCountdown();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('message', this.onMessage);
-  }
-
-  startFallbackCountdown() {
-    this.showFallbackTimout = setTimeout(
-      () => this.setState({showFallbackLink: true}),
-      this.props.showFallbackTimeout
-    );
-  }
-
-  onMessage = event => {
-    const {data} = event;
-    if (!data) {
-      return;
-    }
-
-    if (data === HUB_AUTH_PAGE_OPENED) {
-      clearTimeout(this.showFallbackTimout);
-      this.setState({loading: false, loggingIn: false});
-      return;
-    }
-
-    if (data === HUB_AUTH_PAGE_LOGIN_STARTED) {
-      this.setState({loading: true, loggingIn: true});
-      this.startFallbackCountdown();
-      return;
-    }
-
-    if (data.message === HUB_AUTH_PAGE_LOGIN_DIMENSIONS) {
-      this.setState({height: data.height, width: data.width});
-    }
-  };
-
-  render() {
-    const {show, className, url, loadingMessage, renderFallbackLink, onCancel} = this.props;
-    const {loading, height, width, loggingIn, showFallbackLink} = this.state;
-
-    const iFrameStyle = {height, width};
-
-    return (
-      <Dialog
-        data-test="ring-login-dialog"
-        className={className}
-        contentClassName={styles.dialogContent}
-        trapFocus
-        autoFocusFirst={false}
-        show={show}
-        showCloseButton
-        onCloseAttempt={onCancel}
-      >
-        <Content>
-          <iframe
-            title="Login dialog"
-            style={iFrameStyle}
-            src={url}
-            className={styles.iFrame}
-            scrolling="no"
-          />
-        </Content>
-
-        {loading && (
-          <LoaderScreen message={loadingMessage} containerClassName={styles.nonOpaqueLoader}/>
-        )}
-
-        {showFallbackLink && (
-          <div className={styles.fallbackLinkContainer}>{renderFallbackLink(loggingIn)}</div>
-        )}
-      </Dialog>
-    );
-  }
-}
-

package/components/login-dialog/service.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
-
-import LoginDialog from './login-dialog';
-
-const containerElement = document.createElement('div');
-
-/**
- * Renders LoginDialog into virtual node to skip maintaining container
- */
-function renderLoginDialog(props) {
-  render(<LoginDialog {...props}/>, containerElement);
-}
-
-export default function showAuthDialog(props = {}) {
-  renderLoginDialog({
-    ...props,
-    show: true
-  });
-
-  return () => {
-    unmountComponentAtNode(containerElement);
-  };
-}

package/components/markdown/code.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Code from '../code/code';
-
-const MarkdownCode = ({value, language, inline}) => (
-  <Code
-    language={language}
-    code={value || ''}
-    inline={inline}
-  />
-);
-
-MarkdownCode.propTypes = {
-  language: PropTypes.string,
-  value: PropTypes.string,
-  inline: PropTypes.bool
-};
-
-export default MarkdownCode;

package/components/markdown/heading.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Heading from '../heading/heading';
-
-const MarkdownHeading = ({level, children}) => <Heading level={level}>{children}</Heading>;
-
-MarkdownHeading.propTypes = {
-  level: PropTypes.number,
-  children: PropTypes.node
-};
-
-export default MarkdownHeading;

package/components/markdown/link.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Link from '../link/link';
-
-const MarkdownLink = ({href, title, children}) => <Link {...{href, title}}>{children}</Link>;
-
-MarkdownLink.propTypes = {
-  href: PropTypes.string,
-  title: PropTypes.string,
-  children: PropTypes.node
-};
-
-export default MarkdownLink;

package/components/markdown/markdown.examples.js

@@ -1,110 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Markdown, {md} from '@jetbrains/ring-ui/components/markdown/markdown';
-
-export default {
-  title: 'Components/Markdown',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Renders Markdown.'
-  }
-};
-
-export const basic = () => (
-  <Markdown
-    source={`
-          # Header
-
-          _Various_ types of **highlighting**
-
-          [Link](/)
-
-          [Link with definition][definition]
-
-          [definition]: /
-
-          > Blockquote
-          >
-          > Second line
-
-          Unordered list:
-
-          * List
-          * List
-
-          Ordered list:
-
-          1. One
-          2. Two
-
-          Horizontal line
-
-          | Some | Table |
-          | --- | --- |
-          | One | Two |
-
-          ---
-          Some \`inline(code)\` inside text
-
-          ## Block code
-          \`\`\`js
-          import React, {Component} from 'react';
-          import ChildComponent from './child-component';
-
-          const MyComponent = () => (
-            <div className="class">
-              <ChildComponent prop="value" />
-            </div>
-          );
-          \`\`\`
-        `}
-  />
-);
-
-basic.storyName = 'basic';
-
-export const taggedTemplate = () =>
-  md`
-    # Header
-
-    _Various_ types of **highlighting**
-
-    [Link](/)
-
-    [Link with definition][definition]
-
-    [definition]: /
-
-    > Blockquote
-    >
-    > Second line
-
-    Unordered list:
-
-    * List
-    * List
-
-    Ordered list:
-
-    1. One
-    2. Two
-
-    Horizontal line
-
-    ---
-    Some \`inline(code)\` inside text
-
-    ## Block code
-    \`\`\`js
-    import React from 'react';
-
-    import {md} from '@jetbrains/ring-ui/components/markdown/markdown';
-
-    const MarkdownHeader = ({children}) => md\`#\${children}\`;
-    \`\`\`
-  `;
-
-taggedTemplate.storyName = 'tagged template';

package/components/markdown/markdown.js

@@ -1,58 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import ReactMarkdown from 'react-markdown';
-import classNames from 'classnames';
-import RemarkBreaks from 'remark-breaks';
-import RemarkGFM from 'remark-gfm';
-
-import normalizeIndent from '../global/normalize-indent';
-import trivialTemplateTag from '../global/trivial-template-tag';
-
-import Code from './code';
-import Link from './link';
-import Heading from './heading';
-import styles from './markdown.css';
-
-/**
-  * @name Markdown
-*/
-
-export default class Markdown extends PureComponent {
-  static propTypes = {
-    inline: PropTypes.bool,
-    source: PropTypes.string,
-    className: PropTypes.string,
-    renderers: PropTypes.object,
-    plugins: PropTypes.array
-  };
-
-  render() {
-    const {className, renderers, inline, source, plugins = [], ...restProps} = this.props;
-
-    const classes = classNames(className, {
-      [styles.markdown]: !inline,
-      [styles.inline]: inline
-    });
-
-    return (
-      <ReactMarkdown
-        className={classes}
-        source={normalizeIndent(source)}
-        plugins={[RemarkBreaks, RemarkGFM, ...plugins]}
-        renderers={{
-          link: Link,
-          linkReference: Link,
-          code: Code,
-          inlineCode: Code,
-          heading: Heading,
-          ...renderers
-        }}
-        {...restProps}
-      />
-    );
-  }
-}
-
-const md = trivialTemplateTag(source => <Markdown {...{source}}/>);
-
-export {md};

package/components/markdown/markdown.test.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Code from '../code/code';
-import Link from '../link/link';
-
-import Markdown from './markdown';
-
-describe('Markdown', () => {
-  const shallowMarkdown = props => shallow(
-    <Markdown
-      source=""
-      {...props}
-    />
-  );
-  const mountMarkdown = props => mount(
-    <Markdown
-      source=""
-      {...props}
-    />
-  );
-
-  it('should wrap children with div', () => {
-    shallowMarkdown().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowMarkdown({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should convert links to ring Links', () => {
-    const wrapper = mountMarkdown({source: '[link](/)'});
-    wrapper.should.have.descendants(Link);
-  });
-
-  it('should convert inline code to ring Code', () => {
-    const wrapper = mountMarkdown({source: '`some(code)`'});
-    wrapper.should.have.descendants(Code);
-  });
-
-  it('should convert block code to ring Code', () => {
-    const wrapper = mountMarkdown({
-      source: `
-        \`\`\`
-        some(code)
-        \`\`\`
-      `
-    });
-    wrapper.should.have.descendants(Code);
-  });
-
-  it('should convert not finished code block to empty ring Code', () => {
-    const wrapper = mountMarkdown({
-      source: `
-        \`\`\`
-      `
-    });
-    wrapper.should.have.descendants(Code);
-  });
-});

package/components/message/message.examples.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import searchIcon from '@jetbrains/icons/search';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Popup from '@jetbrains/ring-ui/components/popup/popup';
-import Icon from '@jetbrains/ring-ui/components/icon/icon';
-
-import Message from '@jetbrains/ring-ui/components/message/message';
-
-const {Directions} = Popup.PopupProps;
-
-export default {
-  title: 'Components/Message',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: Message,
-    framework: 'react'
-  },
-  args: {
-    title: 'This is title',
-    direction: Directions.TOP_RIGHT,
-    children: 'This is long long long long long long long long long long long long long long long long long long description'
-  },
-  argTypes: {
-    onClose: {},
-    onDismiss: {}
-  }
-};
-
-export const basic = args => (
-  <div style={{padding: 200}} id="message-example">
-    <span>
-      Anchor
-      <Message {...args}/>
-    </span>
-  </div>
-);
-
-basic.storyName = 'basic';
-basic.args = {
-  tailOffset: 32
-};
-basic.parameters = {
-  actions: {argTypesRegex: '^onClose$'}
-};
-
-export const withOnDissmiss = args => (
-  <div style={{padding: 200}} id="message-example">
-    <span>
-      Anchor
-      <Message {...args}/>
-    </span>
-  </div>
-);
-
-withOnDissmiss.storyName = 'with onDissmiss';
-withOnDissmiss.args = {
-  tailOffset: 32
-};
-
-export const wishNarrowAnchor = args => (
-  <div style={{padding: 200}}>
-    <span>
-      <Icon glyph={searchIcon}/>
-      <Message {...args}/>
-    </span>
-  </div>
-);
-
-wishNarrowAnchor.storyName = 'with narrow anchor';
-wishNarrowAnchor.args = {
-  popupProps: {left: -8}
-};
-wishNarrowAnchor.parameters = {
-  actions: {argTypesRegex: null}
-};