@jetbrains/ring-ui 5.1.23 → 5.1.25

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

@@ -0,0 +1,30 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import LoaderScreen from './loader-screen-ng';
+
+export default {
+  title: 'Legacy Angular/Loader Screen Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for Loader Screen.',
+    hermione: {skip: true}
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [LoaderScreen]).run(loaderScreen => {
+    loaderScreen.setVisible(true);
+    loaderScreen.startInitialLoading();
+  });
+
+  return `
+      <div>
+        <div rg-loader-screen="Loading..."></div>
+      </div>
+    `;
+};
+
+basic.storyName = 'Loader Screen Ng';

package/components/login-dialog/login-dialog.css

@@ -0,0 +1,25 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+.iFrame {
+  overflow: hidden;
+
+  border: none;
+}
+
+.dialogContent {
+  width: auto;
+}
+
+.nonOpaqueLoader {
+  background-color: var(--ring-content-background-color);
+}
+
+.fallbackLinkContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  padding: unit;
+}

package/components/login-dialog/login-dialog.d.ts

@@ -0,0 +1,47 @@
+import React, { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+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.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        url: PropTypes.Requireable<string>;
+        loader: PropTypes.Requireable<boolean>;
+        loadingMessage: PropTypes.Requireable<string>;
+        showFallbackTimeout: PropTypes.Requireable<number>;
+        renderFallbackLink: PropTypes.Requireable<(...args: any[]) => any>;
+        onCancel: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        show: boolean;
+        url: string;
+        renderFallbackLink: () => null;
+        showFallbackTimeout: number;
+    };
+    state: {
+        loading: boolean;
+        loggingIn: boolean;
+        showFallbackLink: boolean;
+        height: number;
+        width: number;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    showFallbackTimout?: number;
+    startFallbackCountdown(): void;
+    onMessage: (event: MessageEvent) => void;
+    render(): React.JSX.Element;
+}
+export type LoginDialogAttrs = JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>;

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

@@ -0,0 +1,84 @@
+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);
+    }
+    showFallbackTimout;
+    startFallbackCountdown() {
+        this.showFallbackTimout = window.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.d.ts

@@ -0,0 +1,2 @@
+import { LoginDialogAttrs } from './login-dialog';
+export default function showAuthDialog(props?: LoginDialogAttrs): () => void;

package/components/login-dialog/service.js

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

package/components/markdown/code.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CodeProps } from 'react-markdown/lib/ast-to-react';
+export interface MarkdownCodeProps extends CodeProps {
+    language?: string;
+}
+declare const MarkdownCode: ({ children, language, inline, className }: MarkdownCodeProps) => React.JSX.Element;
+export default MarkdownCode;

package/components/markdown/code.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Code from '../code/code';
+const MarkdownCode = ({ children, language, inline, className }) => {
+    // Hack for updated react-markdown RG-2193
+    const lang = language ?? (className?.
+        split(' ').
+        find(name => name.startsWith('language-'))?.
+        replace('language-', ''));
+    return (<Code language={lang} className={className} code={children?.join('') || ''} inline={inline}/>);
+};
+MarkdownCode.propTypes = {
+    language: PropTypes.string,
+    children: PropTypes.array.isRequired,
+    inline: PropTypes.bool
+};
+export default MarkdownCode;

package/components/markdown/heading.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { HeadingProps } from 'react-markdown/lib/ast-to-react';
+declare const MarkdownHeading: {
+    ({ level, children }: HeadingProps): React.JSX.Element;
+    propTypes: {
+        level: PropTypes.Validator<number>;
+        children: PropTypes.Validator<any[]>;
+    };
+};
+export default MarkdownHeading;

package/components/markdown/heading.js

@@ -0,0 +1,9 @@
+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.isRequired,
+    children: PropTypes.array.isRequired
+};
+export default MarkdownHeading;

package/components/markdown/link.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ReactMarkdownProps } from 'react-markdown/lib/complex-types';
+declare const MarkdownLink: {
+    ({ href, title, children }: JSX.IntrinsicElements['a'] & ReactMarkdownProps): React.JSX.Element;
+    propTypes: {
+        href: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        children: PropTypes.Validator<any[]>;
+    };
+};
+export default MarkdownLink;

package/components/markdown/link.js

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

package/components/markdown/markdown.css

@@ -0,0 +1,76 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+@value p-margin: 10px;
+
+.inline {
+  &,
+  & p {
+    display: inline;
+  }
+}
+
+.markdown {
+  composes: font from  "../global/global.css";
+
+  & ol,
+  & ul {
+    margin: 0;
+  }
+
+  & p,
+  & blockquote,
+  & pre {
+    margin: 0;
+
+    &:not(:first-child) {
+      margin-top: p-margin;
+    }
+  }
+
+  & li {
+    margin-top: p-margin;
+  }
+
+  & li {
+    & p,
+    & blockquote,
+    & pre {
+      &:not(:first-child) {
+        margin-top: 6px;
+      }
+    }
+  }
+
+  & hr {
+    margin: p-margin 0;
+
+    border: none;
+    border-bottom: 1px solid var(--ring-line-color);
+  }
+
+  & blockquote {
+    padding: 0 0 0 calc(2 * unit);
+
+    color: var(--ring-secondary-color);
+    box-shadow: inset 2px 0 0 var(--ring-line-color);
+
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  & ul {
+    padding: 0 0 0 calc(2 * unit);
+  }
+
+  & ol {
+    padding: 0;
+
+    list-style-position: inside;
+    font-variant-numeric: tabular-nums;
+  }
+
+  & ul {
+    list-style-type: none;
+  }
+}

package/components/markdown/markdown.d.ts

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react';
+import { Options } from 'react-markdown';
+export interface BaseMarkdownProps {
+    inline?: boolean | null | undefined;
+    plugins?: Options['remarkPlugins'];
+}
+export type MarkdownProps = Options & BaseMarkdownProps;
+/**
+  * @name Markdown
+*/
+export default class Markdown extends PureComponent<MarkdownProps> {
+    render(): React.JSX.Element;
+}
+declare const md: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
+export { md };

package/components/markdown/markdown.js

@@ -0,0 +1,44 @@
+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 {
+    render() {
+        const { className, components, inline, children, plugins = [], remarkPlugins = [], ...restProps } = this.props;
+        const classes = classNames(className, {
+            [styles.markdown]: !inline,
+            [styles.inline]: inline
+        });
+        return (<ReactMarkdown className={classes} remarkPlugins={[RemarkBreaks, RemarkGFM, ...plugins, ...remarkPlugins]} components={{
+                a: Link,
+                code: Code,
+                h1: Heading,
+                h2: Heading,
+                h3: Heading,
+                h4: Heading,
+                h5: Heading,
+                h6: Heading,
+                ...components
+            }} {...restProps}>{normalizeIndent(children)}</ReactMarkdown>);
+    }
+}
+Markdown.propTypes = {
+    inline: PropTypes.bool,
+    children: PropTypes.string,
+    className: PropTypes.string,
+    components: PropTypes.object,
+    plugins: PropTypes.array
+};
+const md = trivialTemplateTag(source => <Markdown>{source}</Markdown>);
+export { md };

package/components/message/message.css

@@ -0,0 +1,64 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+@value padding: calc(unit * 1.5);
+
+.container {
+  display: inline;
+}
+
+.message {
+  overflow: visible;
+
+  max-width: calc(unit * 40);
+
+  padding: padding padding calc(unit * 2) calc(unit * 5);
+
+  text-align: left;
+
+  color: var(--ring-active-text-color);
+
+  background-color: var(--ring-popup-background-color);
+}
+
+.icon {
+  position: absolute;
+  top: 10px;
+  left: padding;
+}
+
+.title {
+  composes: font-lower from "../global/global.css";
+
+  margin: 0;
+
+  font-weight: normal;
+}
+
+.description {
+  margin: calc(unit / 2) 0 0;
+
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.button {
+  margin-top: padding;
+}
+
+.tail {
+  position: absolute;
+
+  box-sizing: border-box;
+  width: 11px;
+  height: 11px;
+
+  transform-origin: 0 0;
+
+  border: 1px solid;
+  border-color: transparent transparent var(--ring-popup-border-color) var(--ring-popup-border-color);
+
+  background-color: var(--ring-popup-background-color);
+}

package/components/message/message.d.ts

@@ -0,0 +1,55 @@
+import React, { Component, ReactNode } from 'react';
+import Popup, { PopupAttrs } from '../popup/popup';
+import { Directions } from '../popup/popup.consts';
+import { IconType } from '../icon/icon';
+import { ButtonAttrs } from '../button/button';
+import Theme from '../global/theme';
+export interface MessageTranslations {
+    gotIt: string;
+    dismiss: string;
+}
+export interface MessageProps {
+    icon: string | IconType | null;
+    directions: readonly Directions[];
+    translations?: MessageTranslations | null | undefined;
+    theme: Theme;
+    title?: string | null | undefined;
+    children?: ReactNode;
+    className?: string | null | undefined;
+    tailClassName?: string | null | undefined;
+    direction?: Directions | null | undefined;
+    popupProps?: Partial<PopupAttrs> | null | undefined;
+    buttonProps?: ButtonAttrs | null | undefined;
+    tailOffset?: number | null | undefined;
+    onClose?: (() => void) | undefined;
+    onDismiss?: (() => void) | null | undefined;
+}
+interface MessageState {
+    direction?: Directions;
+}
+/**
+ * Displays a popup containing a message.
+ */
+export default class Message extends Component<MessageProps> {
+    static defaultProps: {
+        icon: string;
+        directions: Directions[];
+        theme: Theme;
+    };
+    state: MessageState;
+    static Directions: typeof Directions;
+    static PopupProps: {
+        Directions: typeof Directions;
+        Dimension: typeof import("../popup/popup.consts").Dimension;
+        MinWidth: typeof import("../popup/popup.consts").MinWidth;
+        MaxHeight: typeof import("../popup/popup.consts").MaxHeight;
+    };
+    private _onDirectionChange;
+    popup?: Popup | null;
+    node?: HTMLElement | null;
+    popupRef: (el: Popup | null) => void;
+    getTailOffset(): number;
+    render(): React.JSX.Element;
+}
+export type MessageAttrs = JSX.LibraryManagedAttributes<typeof Message, MessageProps>;
+export {};

package/components/message/message.js

@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import gift from '@jetbrains/icons/gift';
+import Popup from '../popup/popup';
+import { Directions } from '../popup/popup.consts';
+import Icon from '../icon/icon';
+import Button from '../button/button';
+import { I18nContext } from '../i18n/i18n-context';
+import Theme, { ThemeProvider, WithThemeClasses } from '../global/theme';
+import darkStyles from '../global/variables_dark.css';
+import styles from './message.css';
+/**
+  * @name Message
+  */
+const UNIT = 8;
+const TAIL_SIZE = 11;
+const getTailOffsets = (offset) => ({
+    [Directions.BOTTOM_RIGHT]: { top: 0, left: offset + UNIT, transform: 'rotate(135deg)' },
+    [Directions.BOTTOM_LEFT]: {
+        top: 0,
+        right: offset - UNIT - TAIL_SIZE,
+        transform: 'rotate(135deg)'
+    },
+    [Directions.BOTTOM_CENTER]: { top: 0, left: offset + UNIT, transform: 'rotate(135deg)' },
+    [Directions.TOP_RIGHT]: { bottom: -TAIL_SIZE, left: offset - UNIT, transform: 'rotate(-45deg)' },
+    [Directions.TOP_LEFT]: {
+        bottom: -TAIL_SIZE,
+        right: offset + UNIT - TAIL_SIZE,
+        transform: 'rotate(-45deg)'
+    },
+    [Directions.TOP_CENTER]: { bottom: -TAIL_SIZE, left: offset - UNIT, transform: 'rotate(-45deg)' },
+    [Directions.RIGHT_TOP]: { bottom: offset + UNIT - TAIL_SIZE, left: 0, transform: 'rotate(45deg)' },
+    [Directions.RIGHT_BOTTOM]: { top: offset - UNIT, left: 0, transform: 'rotate(45deg)' },
+    [Directions.RIGHT_CENTER]: { top: offset - UNIT, left: 0, transform: 'rotate(45deg)' },
+    [Directions.LEFT_TOP]: {
+        bottom: offset - UNIT - TAIL_SIZE,
+        right: -TAIL_SIZE,
+        transform: 'rotate(-135deg)'
+    },
+    [Directions.LEFT_BOTTOM]: { top: offset + UNIT, right: -TAIL_SIZE, transform: 'rotate(-135deg)' },
+    [Directions.LEFT_CENTER]: { top: offset + UNIT, right: -TAIL_SIZE, transform: 'rotate(-135deg)' }
+});
+/**
+ * Displays a popup containing a message.
+ */
+export default class Message extends Component {
+    static defaultProps = {
+        icon: gift,
+        directions: [
+            Directions.TOP_RIGHT, Directions.TOP_LEFT, Directions.TOP_CENTER,
+            Directions.BOTTOM_RIGHT, Directions.BOTTOM_LEFT, Directions.BOTTOM_CENTER,
+            Directions.RIGHT_TOP, Directions.RIGHT_BOTTOM, Directions.RIGHT_CENTER,
+            Directions.LEFT_TOP, Directions.LEFT_BOTTOM, Directions.LEFT_CENTER
+        ],
+        theme: Theme.DARK
+    };
+    state = {};
+    static Directions = Directions;
+    static PopupProps = Popup.PopupProps;
+    _onDirectionChange = (direction) => this.setState({ direction });
+    popup;
+    node;
+    popupRef = (el) => {
+        this.popup = el;
+        this.node = this.popup?.node;
+    };
+    getTailOffset() {
+        const DEFAULT_OFFSET = 32;
+        const { popupProps } = this.props;
+        if (this.props.tailOffset != null) {
+            return this.props.tailOffset;
+        }
+        const anchor = popupProps?.anchorElement || this.popup?.parent;
+        if (!anchor) {
+            return DEFAULT_OFFSET;
+        }
+        const offset = Math.floor(anchor.offsetWidth / 2);
+        const isOpenedToRight = this.state.direction != null &&
+            [Directions.TOP_RIGHT, Directions.BOTTOM_RIGHT].includes(this.state.direction);
+        if (popupProps?.left && isOpenedToRight) {
+            return offset - popupProps?.left;
+        }
+        return offset;
+    }
+    render() {
+        const { children, className, tailClassName, title, icon, popupProps, buttonProps, onClose, onDismiss, translations, theme } = this.props;
+        const classes = classNames(styles.message, className, {
+            [darkStyles.dark]: theme === Theme.DARK
+        });
+        const tailClasses = classNames(styles.tail, tailClassName);
+        const popupDirections = this.props.direction
+            ? [this.props.direction]
+            : this.props.directions;
+        const { direction } = this.state;
+        return (<I18nContext.Consumer>
+        {({ translate }) => (<WithThemeClasses theme={theme}>
+            {themeClasses => (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classNames(classes, themeClasses)} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
+                <ThemeProvider theme={theme} passToPopups>
+                  {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
+
+                  {icon && <Icon className={styles.icon} glyph={icon}/>}
+                  {title && <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>}
+                  {children && <div className={styles.description}>{children}</div>}
+                  {(onClose || buttonProps) && (<Button className={styles.button} onClick={onClose} primary {...buttonProps}>{translations?.gotIt ?? translate('gotIt')}</Button>)}
+                  {onDismiss && (<Button onClick={onDismiss} text>
+                      {translations?.dismiss ?? translate('dismiss')}
+                    </Button>)}
+                </ThemeProvider>
+              </Popup>)}
+          </WithThemeClasses>)}
+      </I18nContext.Consumer>);
+    }
+}
+Message.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    tailClassName: PropTypes.string,
+    title: PropTypes.string,
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+    directions: PropTypes.arrayOf(PropTypes.string),
+    direction: PropTypes.string,
+    popupProps: PropTypes.object,
+    buttonProps: PropTypes.object,
+    tailOffset: PropTypes.number,
+    onClose: PropTypes.func,
+    onDismiss: PropTypes.func,
+    translations: PropTypes.object
+};