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

package/components/loader-inline/inject-styles.ts

@@ -0,0 +1,28 @@
+import {conicGradientWithMask} from '../global/conic-gradient';
+import {injectRuleSet} from '../global/inject-styles';
+import memoize from '../global/memoize';
+import radialGradientMask from '../global/radial-gradient-mask';
+import Theme from '../global/theme';
+
+import styles from './loader-inline.css';
+
+const IMAGE_SIZE = 32;
+
+export default memoize(() => {
+  const mask = radialGradientMask(styles.unit, {
+    /* eslint-disable @typescript-eslint/no-magic-numbers */
+    transparent: `${23 / 32 * 100}%`,
+    white: `${25 / 32 * 100}%`
+    /* eslint-enable */
+  });
+
+  injectRuleSet(
+    `.${styles.loader}_${[Theme.LIGHT]}::after, .ring-loader-inline::after`,
+    conicGradientWithMask(mask, '#ff00eb,#bd3bff,#008eff, #58ba00,#f48700,#ff00eb', IMAGE_SIZE)
+  );
+
+  injectRuleSet(
+    `.${styles.loader}_${[Theme.DARK]}::after, .ring-loader-inline_dark::after`,
+    conicGradientWithMask(mask, '#ff2eef,#d178ff,#289fff,#88d444,#ffe000,#ff2eef', IMAGE_SIZE)
+  );
+});

package/components/loader-inline/loader-inline.examples.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import LoaderInline from './loader-inline';
+import injectStyles from './inject-styles';
+
+export default {
+  title: 'Components/Inline Loader',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes:
+      'Displays a small animated loader, shown inline with text. Use case: contextual loading animation.'
+  }
+};
+
+export const basic = () => {
+  class Example extends React.Component {
+    render() {
+      return (
+        <div>
+          <span>some text on top</span>
+          <div>
+            before <LoaderInline/> Some text after
+          </div>
+          <div>some text under loader</div>
+        </div>
+      );
+    }
+  }
+
+  return <Example/>;
+};
+
+basic.storyName = 'basic';
+
+export const withChildren = () => {
+  class Example extends React.Component {
+    render() {
+      return <LoaderInline>Loading...</LoaderInline>;
+    }
+  }
+
+  return <Example/>;
+};
+
+withChildren.storyName = 'with children';
+
+export const onBlackBackground = () => {
+  class Example extends React.Component {
+    render() {
+      return (
+        <div style={{backgroundColor: 'black', color: '#ccc'}}>
+          <span>some text on top</span>
+          <div>
+            before <LoaderInline/> Some text after
+          </div>
+          <div>some text under loader</div>
+        </div>
+      );
+    }
+  }
+
+  return <Example/>;
+};
+
+onBlackBackground.storyName = 'on black background';
+
+export const onCustomBackground = () => {
+  class Example extends React.Component {
+    render() {
+      return (
+        <div style={{backgroundColor: '#E5F4FF'}}>
+          <span>some text on top</span>
+          <div>
+            before <LoaderInline/> Some text after
+          </div>
+          <div>some text under loader</div>
+        </div>
+      );
+    }
+  }
+
+  return <Example/>;
+};
+
+onCustomBackground.storyName = 'on custom background';
+
+export const withoutReact = () => {
+  class Example extends React.Component {
+    render() {
+      return (
+        <div>
+          <div className="ring-loader-inline"/>
+        </div>
+      );
+    }
+  }
+
+  injectStyles();
+
+  return <Example/>;
+};
+
+withoutReact.storyName = 'without React';

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import {mount} from 'enzyme';
+
+import LoaderInline, {LoaderInlineAtrrs} from './loader-inline';
+
+describe('Loader Inline', () => {
+  const mountLoaderInline = (props?: LoaderInlineAtrrs) => mount(<LoaderInline {...props}/>);
+  const getLoaderInlineDiv = (props?: LoaderInlineAtrrs) => 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-inline/loader-inline.tsx

@@ -0,0 +1,63 @@
+import React, {ComponentPropsWithRef, HTMLAttributes, PureComponent} from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import Theme, {ThemeProps, withTheme} from '../global/theme';
+import dataTests from '../global/data-tests';
+
+import styles from './loader-inline.css';
+import injectStyles from './inject-styles';
+
+export interface LoaderInlineProps extends ThemeProps, HTMLAttributes<HTMLDivElement> {
+  'data-test'?: string | null | undefined
+}
+
+/**
+ * @name Loader Inline
+ */
+
+class LoaderInline extends PureComponent<LoaderInlineProps> {
+  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;
+  }
+}
+
+const ThemedLoaderInline = withTheme()(LoaderInline);
+export type LoaderInlineAtrrs = ComponentPropsWithRef<typeof ThemedLoaderInline>;
+export default ThemedLoaderInline;

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import LoaderInlineNg from '@jetbrains/ring-ui/components/loader-inline-ng/loader-inline-ng';
+import LoaderInlineNg from './loader-inline-ng';
 
 export default {
   title: 'Legacy Angular/Loader Inline Ng',

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import LoaderNg from '@jetbrains/ring-ui/components/loader-ng/loader-ng';
+import LoaderNg from './loader-ng';
 
 export default {
   title: 'Legacy Angular/Loader Ng',

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

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import LoaderScreen from './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.tsx

@@ -0,0 +1,42 @@
+import React, {PureComponent} from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import Loader, {LoaderProps} from '../loader/loader';
+
+import styles from './loader-screen.css';
+
+export interface LoaderScreenProps extends LoaderProps {
+  containerClassName?: string | null | undefined
+}
+
+/**
+ * @name Loader Screen
+ */
+export default class LoaderScreen extends PureComponent<LoaderScreenProps> {
+  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/loader-screen-ng/loader-screen-ng.examples.js

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import LoaderScreen from '@jetbrains/ring-ui/components/loader-screen-ng/loader-screen-ng';
+import LoaderScreen from './loader-screen-ng';
 
 export default {
   title: 'Legacy Angular/Loader Screen Ng',

package/components/login-dialog/login-dialog.tsx

@@ -0,0 +1,139 @@
+import React, {Component, ReactNode} 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;
+
+export interface LoginDialogProps {
+  onCancel: () => void
+  show: boolean,
+  url: string,
+  renderFallbackLink: (loggingIn: boolean) => ReactNode,
+  showFallbackTimeout: number,
+  className?: string | undefined,
+  loader?: boolean | null | undefined,
+  loadingMessage?: string | null | undefined,
+}
+
+/**
+ * @name Login Dialog
+ */
+
+export default class LoginDialog extends Component<LoginDialogProps> {
+  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);
+  }
+
+  showFallbackTimout?: number;
+  startFallbackCountdown() {
+    this.showFallbackTimout = window.setTimeout(
+      () => this.setState({showFallbackLink: true}),
+      this.props.showFallbackTimeout
+    );
+  }
+
+  onMessage = (event: MessageEvent) => {
+    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>
+    );
+  }
+}
+
+export type LoginDialogAttrs = JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>

package/components/login-dialog/service.tsx

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

package/components/markdown/code.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Code from '../code/code';
+
+interface MarkdownCodeProps {
+  language?: string | null | undefined
+  value?: string | null | undefined
+  inline?: boolean | undefined
+}
+
+const MarkdownCode = ({value, language, inline}: MarkdownCodeProps) => (
+  <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.tsx

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

package/components/markdown/link.tsx

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

package/components/markdown/markdown.examples.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Markdown, {md} from './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';