@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/loader/loader__core.js

@@ -0,0 +1,219 @@
+import { getPixelRatio } from '../global/dom';
+import styles from './loader.css';
+const INITIAL_TICKS = 100;
+class Particle {
+    radius;
+    x;
+    y;
+    color;
+    decay;
+    life;
+    constructor({ x, y, radius, color }) {
+        this.radius = radius;
+        this.x = x;
+        this.y = y;
+        this.color = color;
+        this.decay = 0.01;
+        this.life = 1;
+    }
+    step() {
+        this.life -= this.decay;
+    }
+    isAlive() {
+        return this.life >= 0;
+    }
+    draw(ctx) {
+        const alpha = this.life >= 0 ? this.life : 0;
+        ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${alpha})`;
+        ctx.beginPath();
+        ctx.arc(this.x + this.radius, this.y + this.radius, this.radius, 0, Math.PI * 2);
+        ctx.fill();
+    }
+}
+const DETERMINISTIC_VALUE = 0.5;
+function deterministic() {
+    return DETERMINISTIC_VALUE;
+}
+export default class LoaderCore {
+    static defaultProps = {
+        size: 64,
+        stop: false,
+        deterministic: false,
+        colors: [
+            { r: 215, g: 60, b: 234 }, //#D73CEA
+            { r: 145, g: 53, b: 224 }, //#9135E0
+            { r: 88, g: 72, b: 224 }, //#5848F4
+            { r: 37, g: 183, b: 255 }, //#25B7FF
+            { r: 89, g: 189, b: 0 }, //#59BD00
+            { r: 251, g: 172, b: 2 }, //#FBAC02
+            { r: 227, g: 37, b: 129 } //#E32581
+        ]
+    };
+    static calculateGradient(startColor, stopColor, position) {
+        const calculateChannelValue = (a, b) => a + Math.round((b - a) * position);
+        return {
+            r: calculateChannelValue(startColor.r, stopColor.r),
+            g: calculateChannelValue(startColor.g, stopColor.g),
+            b: calculateChannelValue(startColor.b, stopColor.b)
+        };
+    }
+    props;
+    canvas;
+    textNode;
+    ctx;
+    height;
+    width;
+    particles;
+    baseSpeed;
+    colorIndex;
+    maxRadius;
+    minRadius;
+    colorChangeTick;
+    x;
+    y;
+    radius;
+    hSpeed;
+    vSpeed;
+    radiusSpeed;
+    tick;
+    isRunning;
+    constructor(containerNode, props) {
+        this.props = Object.assign({}, LoaderCore.defaultProps, props);
+        this.canvas = document.createElement('canvas');
+        this.canvas.dataset.test = 'ring-loader';
+        this.canvas.classList.add(styles.canvas);
+        this.textNode = document.createElement('div');
+        this.textNode.dataset.test = 'ring-loader-text';
+        this.textNode.classList.add(styles.text);
+        this.textNode.textContent = this.props.message ? this.props.message : '';
+        containerNode.appendChild(this.canvas);
+        containerNode.appendChild(this.textNode);
+        const pixelRatio = LoaderCore.getPixelRatio();
+        const canvasSize = this.props.size * pixelRatio;
+        this.canvas.width = canvasSize;
+        this.canvas.height = canvasSize;
+        //Fixate canvas physical size to avoid real size scaling
+        this.canvas.style.width = `${this.props.size}px`;
+        this.canvas.style.height = `${this.props.size}px`;
+        this.ctx = this.canvas.getContext('2d');
+        this.ctx?.scale(pixelRatio, pixelRatio);
+        this.height = this.props.size;
+        this.width = this.props.size;
+        this.particles = [];
+        //Configuration
+        this.baseSpeed = 1.0;
+        this.colorIndex = 0;
+        this.maxRadius = 10;
+        this.minRadius = 6;
+        this.colorChangeTick = 40;
+        //State
+        this.x = 0;
+        this.y = 0;
+        this.radius = 8;
+        this.hSpeed = 1.5;
+        this.vSpeed = 0.5;
+        this.radiusSpeed = 0.05;
+        this.tick = 0;
+        this.prepareInitialState(INITIAL_TICKS);
+        this.isRunning = !this.props.stop;
+        if (this.isRunning) {
+            this.startAnimation();
+        }
+        else {
+            this.draw();
+        }
+    }
+    static getPixelRatio() {
+        return getPixelRatio();
+    }
+    prepareInitialState(ticks) {
+        for (let i = 0; i < ticks; i++) {
+            this.step();
+        }
+    }
+    handleLimits(coord, radius, speed, limit) {
+        const randomFunc = this.props.deterministic ? deterministic : Math.random;
+        const randomizedSpeedChange = randomFunc() - this.baseSpeed / 2;
+        if (coord + (radius * 2) + this.baseSpeed >= limit) {
+            return -(this.baseSpeed + randomizedSpeedChange);
+        }
+        else if (coord <= this.baseSpeed) {
+            return this.baseSpeed + randomizedSpeedChange;
+        }
+        return speed;
+    }
+    calculateNextCoordinates() {
+        this.x += this.hSpeed;
+        this.y += this.vSpeed;
+        this.hSpeed = this.handleLimits(this.x, this.radius, this.hSpeed, this.width);
+        this.vSpeed = this.handleLimits(this.y, this.radius, this.vSpeed, this.height);
+    }
+    calculateNextRadius() {
+        this.radius += this.radiusSpeed;
+        if (this.radius > this.maxRadius || this.radius < this.minRadius) {
+            this.radiusSpeed = -this.radiusSpeed;
+        }
+    }
+    getNextColor() {
+        const colors = this.props.colors;
+        const currentColor = colors[this.colorIndex];
+        const nextColor = colors[this.colorIndex + 1] || colors[0];
+        return LoaderCore.calculateGradient(currentColor, nextColor, this.tick / this.colorChangeTick);
+    }
+    nextTick() {
+        this.tick++;
+        if (this.tick > this.colorChangeTick) {
+            this.tick = 0;
+            this.colorIndex++;
+            if (this.colorIndex > this.props.colors.length - 1) {
+                this.colorIndex = 0;
+            }
+        }
+    }
+    step() {
+        this.nextTick();
+        this.calculateNextCoordinates();
+        this.calculateNextRadius();
+        this.particles.forEach(particle => particle.step());
+        this.particles.push(new Particle({
+            x: this.x,
+            y: this.y,
+            radius: this.radius,
+            color: this.getNextColor()
+        }));
+    }
+    removeDeadParticles() {
+        this.particles = this.particles.filter(it => it.isAlive());
+    }
+    draw() {
+        const ctx = this.ctx;
+        if (ctx == null) {
+            return;
+        }
+        ctx.clearRect(0, 0, this.width, this.height);
+        this.removeDeadParticles();
+        this.particles.forEach(particle => particle.draw(ctx));
+    }
+    loop() {
+        this.step();
+        this.draw();
+        if (this.isRunning) {
+            window.requestAnimationFrame(() => this.loop());
+        }
+    }
+    updateMessage(text) {
+        this.textNode.textContent = text || '';
+    }
+    stopAnimation() {
+        this.isRunning = false;
+        this.canvas.classList.remove(styles.animate);
+    }
+    startAnimation() {
+        this.isRunning = true;
+        this.canvas.classList.add(styles.animate);
+        this.loop();
+    }
+    destroy() {
+        this.isRunning = false;
+    }
+}

package/components/loader-inline/loader-inline.css

@@ -0,0 +1,73 @@
+@import "../global/variables.css";
+
+@value dark from "../global/variables_dark.css";
+
+:root {
+  /* stylelint-disable-next-line color-no-hex */
+  --ring-loader-inline-stops: #ff00eb, #bd3bff, #008eff, #58ba00, #f48700, #ff00eb;
+}
+
+.dark,
+:global(.ring-ui-theme-dark) {
+  /* stylelint-disable-next-line color-no-hex */
+  --ring-loader-inline-stops: #ff2eef, #d178ff, #289fff, #88d444, #ffe000, #ff2eef;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(calc(17 / 12));
+  }
+}
+
+.loader,
+:global(.ring-loader-inline) {
+  /* needed for better backward-compatibility */
+
+  position: relative;
+
+  display: inline-block;
+
+  overflow: hidden;
+
+  transform: rotate(0);
+  animation: spin 1s linear infinite;
+  vertical-align: -3px;
+
+  border-radius: var(--ring-unit);
+
+  &,
+  &::after {
+    transform-origin: 50% 50%;
+  }
+
+  &::after {
+    display: block;
+
+    width: calc(var(--ring-unit) * 2);
+    height: calc(var(--ring-unit) * 2);
+
+    content: "";
+    animation: pulse 0.85s cubic-bezier(0.68, 0, 0.74, 0.74) infinite alternate;
+
+    background-image: conic-gradient(var(--ring-loader-inline-stops));
+    mask-image: radial-gradient(var(--ring-unit), transparent 71.875%, var(--ring-content-background-color) 71.875%);
+  }
+}
+
+.children {
+  margin-left: calc(var(--ring-unit) / 2);
+}

package/components/loader-inline/loader-inline.d.ts

@@ -0,0 +1,18 @@
+import React, { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+export interface LoaderInlineProps extends HTMLAttributes<HTMLDivElement> {
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Loader Inline
+ */
+declare class LoaderInline extends PureComponent<LoaderInlineProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): React.JSX.Element;
+}
+export type LoaderInlineAtrrs = JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
+export default LoaderInline;

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

@@ -0,0 +1,27 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import dataTests from '../global/data-tests';
+import styles from './loader-inline.css';
+/**
+ * @name Loader Inline
+ */
+class LoaderInline extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        'data-test': PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { className, 'data-test': dataTest, children, ...restProps } = this.props;
+        const classes = classNames(styles.loader, className);
+        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 LoaderInline;

package/components/loader-screen/loader-screen.css

@@ -0,0 +1,29 @@
+@import "../global/variables.css";
+
+.loaderScreen {
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  text-align: center;
+  vertical-align: middle;
+
+  &::before {
+    display: inline-block;
+
+    height: 100%;
+
+    content: "";
+
+    vertical-align: middle;
+  }
+}
+
+.loader {
+  display: inline-block;
+}
+
+.loaderWithoutSpacing canvas {
+  margin: 0;
+}

package/components/loader-screen/loader-screen.d.ts

@@ -0,0 +1,17 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { LoaderProps } from '../loader/loader';
+export interface LoaderScreenProps extends LoaderProps {
+    containerClassName?: string | null | undefined;
+}
+/**
+ * @name Loader Screen
+ */
+export default class LoaderScreen extends PureComponent<LoaderScreenProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        containerClassName: PropTypes.Requireable<string>;
+        message: PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}

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

@@ -0,0 +1,25 @@
+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.css

@@ -0,0 +1,23 @@
+@import "../global/variables.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: var(--ring-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,24 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
+import LoginDialog from './login-dialog';
+const containerElement = document.createElement('div');
+const reactRoot = createRoot(containerElement);
+/**
+ * Renders LoginDialog into virtual node to skip maintaining container
+ */
+function renderLoginDialog(props) {
+    reactRoot.render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+        <LoginDialog {...props}/>
+      </ControlsHeightContext.Provider>));
+}
+function noop() { }
+export default function showAuthDialog(props = { onCancel: noop }) {
+    renderLoginDialog({
+        ...props,
+        show: true
+    });
+    return () => {
+        reactRoot.unmount();
+    };
+}