@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/auth-dialog/auth-dialog.jsx

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Content } from '../island/island';
+import Dialog from '../dialog/dialog';
+import Button from '../button/button';
+import { H2 } from '../heading/heading';
+import styles from './auth-dialog.css';
+export default class AuthDialog extends Component {
+    static propTypes = {
+        className: PropTypes.string,
+        title: PropTypes.string,
+        errorMessage: PropTypes.string,
+        serviceImage: PropTypes.string,
+        serviceName: PropTypes.string,
+        loginCaption: PropTypes.string,
+        loginToCaption: PropTypes.string,
+        show: PropTypes.bool,
+        cancelOnEsc: PropTypes.bool,
+        confirmLabel: PropTypes.string,
+        cancelLabel: PropTypes.string,
+        onConfirm: PropTypes.func,
+        onCancel: PropTypes.func
+    };
+    static defaultProps = {
+        loginCaption: 'Log in',
+        loginToCaption: 'Log in to %serviceName%',
+        show: false,
+        cancelOnEsc: true,
+        confirmLabel: 'Log in',
+        cancelLabel: 'Remain a guest',
+        onConfirm: () => { },
+        onCancel: () => { }
+    };
+    onEscPress = () => {
+        if (this.props.cancelOnEsc) {
+            this.props.onCancel();
+        }
+    };
+    render() {
+        const { show, className, errorMessage, serviceImage, serviceName, loginCaption, loginToCaption, confirmLabel, cancelLabel, onConfirm, onCancel } = this.props;
+        const defaultTitle = serviceName ? loginToCaption : loginCaption;
+        const title = (this.props.title || defaultTitle).replace('%serviceName%', serviceName ?? '');
+        return (<Dialog label={title} data-test="ring-auth-dialog" className={className} contentClassName={classNames(className, styles.dialog)} onEscPress={this.onEscPress} show={show} trapFocus>
+        <Content>
+          <div className={styles.content}>
+            {serviceImage && (<img alt={`${serviceName} logo`} className={styles.logo} src={serviceImage}/>)}
+            <H2 className={styles.title}>{title}</H2>
+            {errorMessage && (<div className={styles.error}>{errorMessage}</div>)}
+            <Button primary className={styles.firstButton} data-test="auth-dialog-confirm-button" onClick={onConfirm}>
+              {confirmLabel}
+            </Button>
+            <Button className={styles.button} data-test="auth-dialog-cancel-button" onClick={onCancel}>
+              {cancelLabel}
+            </Button>
+          </div>
+        </Content>
+      </Dialog>);
+    }
+}

package/components/auth-dialog-service/auth-dialog-service.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import AuthDialog, { AuthDialogProps } from '../auth-dialog/auth-dialog';
+declare type AuthDialogAttributes = JSX.LibraryManagedAttributes<typeof AuthDialog, AuthDialogProps>;
+export default function showAuthDialog(props?: AuthDialogAttributes): () => void;
+export {};

package/components/auth-dialog-service/{auth-dialog-service.js → auth-dialog-service.jsx}

@@ -1,28 +1,22 @@
 import React from 'react';
-import {render} from 'react-dom';
-
+import { render } from 'react-dom';
 import AuthDialog from '../auth-dialog/auth-dialog';
-
 /**
  * @name Auth Dialog Service
  */
-
 const containerElement = document.createElement('div');
-
 /**
  * Renders AuthDialog into virtual node to skip maintaining container
  */
 function renderAuthDialog(props) {
-  render(<AuthDialog {...props}/>, containerElement);
+    render(<AuthDialog {...props}/>, containerElement);
 }
-
 export default function showAuthDialog(props = {}) {
-  renderAuthDialog({
-    ...props,
-    show: true
-  });
-
-  return () => {
-    renderAuthDialog({show: false});
-  };
+    renderAuthDialog({
+        ...props,
+        show: true
+    });
+    return () => {
+        renderAuthDialog({ show: false });
+    };
 }

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

@@ -3,7 +3,7 @@ import angular from 'angular';
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 import hubConfig from '../../.storybook/hub-config';
 
-import AuthNG from '@jetbrains/ring-ui/components/auth-ng/auth-ng';
+import AuthNG from './auth-ng';
 
 export default {
   title: 'Legacy Angular/Auth Ng',

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

@@ -2,10 +2,10 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import InputNg from '@jetbrains/ring-ui/components/input-ng/input-ng';
-import SelectNg from '@jetbrains/ring-ui/components/select-ng/select-ng';
+import InputNg from '../input-ng/input-ng';
+import SelectNg from '../select-ng/select-ng';
 
-import AutofocusNG from '@jetbrains/ring-ui/components/autofocus-ng/autofocus-ng';
+import AutofocusNG from './autofocus-ng';
 
 export default {
   title: 'Legacy Angular/Autofocus Ng',

package/components/avatar/avatar-example-datauri.d.ts

@@ -0,0 +1 @@
+export declare const avatarDataUri: string;

package/components/avatar/{avatar-example-datauri.js → avatar-example-datauri.jsx}

@@ -1,5 +1,4 @@
 // Taken from https://hub.jetbrains.com/api/rest/avatar/default?username=Jet%20Brains&dpr=2&size=56
-
 export const avatarDataUri = `data:image/svg+xml,${encodeURIComponent(`
 <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
     <defs>

package/components/avatar/avatar.d.ts

@@ -0,0 +1,51 @@
+import { PureComponent, ImgHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Avatar
+ */
+export declare enum Size {
+    Size18 = 18,
+    Size20 = 20,
+    Size24 = 24,
+    Size28 = 28,
+    Size32 = 32,
+    Size40 = 40,
+    Size48 = 48,
+    Size56 = 56
+}
+export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
+    dpr: number;
+    size: Size;
+    subavatarSize: number;
+    url?: string | null | undefined;
+    round?: boolean | null | undefined;
+    subavatar?: string | null | undefined;
+    username?: string | null | undefined;
+    skipParams?: boolean | null | undefined;
+}
+export default class Avatar extends PureComponent<AvatarProps> {
+    static propTypes: {
+        dpr: PropTypes.Requireable<number>;
+        className: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<number>;
+        style: PropTypes.Requireable<object>;
+        url: PropTypes.Requireable<string>;
+        round: PropTypes.Requireable<boolean>;
+        subavatar: PropTypes.Requireable<string>;
+        subavatarSize: PropTypes.Requireable<number>;
+        username: PropTypes.Requireable<string>;
+        skipParams: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        dpr: number;
+        size: Size;
+        subavatarSize: number;
+        style: {};
+    };
+    state: {
+        errorUrl: string;
+    };
+    handleError: () => void;
+    handleSuccess: () => void;
+    render(): JSX.Element;
+}

package/components/avatar/avatar.jsx

@@ -0,0 +1,98 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { encodeURL, isDataURI, parseQueryString } from '../global/url';
+import { getPixelRatio } from '../global/dom';
+import styles from './avatar.css';
+import FallbackAvatar from './fallback-avatar';
+/**
+ * @name Avatar
+ */
+export var Size;
+(function (Size) {
+    Size[Size["Size18"] = 18] = "Size18";
+    Size[Size["Size20"] = 20] = "Size20";
+    Size[Size["Size24"] = 24] = "Size24";
+    Size[Size["Size28"] = 28] = "Size28";
+    Size[Size["Size32"] = 32] = "Size32";
+    Size[Size["Size40"] = 40] = "Size40";
+    Size[Size["Size48"] = 48] = "Size48";
+    Size[Size["Size56"] = 56] = "Size56";
+})(Size || (Size = {}));
+export default class Avatar extends PureComponent {
+    static propTypes = {
+        dpr: PropTypes.number,
+        className: PropTypes.string,
+        size: PropTypes.number,
+        style: PropTypes.object,
+        url: PropTypes.string,
+        round: PropTypes.bool,
+        subavatar: PropTypes.string,
+        subavatarSize: PropTypes.number,
+        username: PropTypes.string,
+        skipParams: PropTypes.bool
+    };
+    static defaultProps = {
+        dpr: getPixelRatio(),
+        size: Size.Size20,
+        subavatarSize: Size.Size20 / 2,
+        style: {}
+    };
+    state = {
+        errorUrl: ''
+    };
+    handleError = () => {
+        this.setState({ errorUrl: this.props.url });
+    };
+    handleSuccess = () => {
+        this.setState({ errorUrl: '' });
+    };
+    render() {
+        const { size, url, dpr, style, round, subavatar, subavatarSize, username, skipParams, ...restProps } = this.props;
+        const sizeString = `${size}px`;
+        const subavatarSizeString = `${subavatarSize}px`;
+        const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
+        const styleObj = {
+            borderRadius: round ? '50%' : borderRadius,
+            height: sizeString,
+            width: sizeString,
+            ...style
+        };
+        const styleObjGroup = {
+            borderRadius: '2px',
+            height: subavatarSizeString,
+            width: subavatarSizeString,
+            ...style
+        };
+        if (!url || this.state.errorUrl === url) {
+            return (<span {...restProps} data-test="avatar" className={classNames(styles.avatar, this.props.className, { [styles.empty]: username == null })} style={styleObj}>{username != null && (<FallbackAvatar size={size} round={round} username={username}/>)}</span>);
+        }
+        let src = url;
+        if (!skipParams && !isDataURI(url)) {
+            const [urlStart, query] = url.split('?');
+            const queryParams = {
+                ...parseQueryString(query),
+                dpr,
+                size
+            };
+            src = encodeURL(urlStart, queryParams);
+        }
+        let subavatarSrc = null;
+        if (subavatar && !isDataURI(subavatar)) {
+            const [urlStart, query] = subavatar.split('?');
+            const queryParams = {
+                ...parseQueryString(query),
+                dpr,
+                subavatarSizeString
+            };
+            subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
+            return (<div>
+          <img {...restProps} onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.avatar, this.props.className)} style={styleObj} src={src} alt="User avatar"/>
+          <img {...restProps} data-test="avatar" onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.subavatar)} style={styleObjGroup} src={subavatarSrc} alt="Subavatar"/>
+        </div>);
+        }
+        else {
+            return (<img {...restProps} data-test="avatar" onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.avatar, this.props.className)} style={styleObj} src={src} alt="User avatar"/>);
+        }
+    }
+}

package/components/avatar/fallback-avatar.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { Size } from './avatar';
+export interface FallbackAvatarProps {
+    username: string;
+    size: Size;
+    round: boolean | null | undefined;
+}
+declare function FallbackAvatar({ username, size, round }: FallbackAvatarProps): JSX.Element;
+declare namespace FallbackAvatar {
+    var propTypes: {
+        username: PropTypes.Validator<string>;
+        size: PropTypes.Validator<number>;
+        round: PropTypes.Requireable<boolean>;
+    };
+}
+export default FallbackAvatar;

package/components/avatar/fallback-avatar.jsx

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import getUID from '../global/get-uid';
+const colorPairs = [
+    ['#60A800', '#D5CA00'],
+    ['#21D370', '#03E9E1'],
+    ['#3BA1FF', '#36E97D'],
+    ['#00C243', '#00FFFF'],
+    ['#4BE098', '#627FFF'],
+    ['#168BFA', '#26F7C7'],
+    ['#9D4CFF', '#39D3C3'],
+    ['#0A81F6', '#0ACFF6'],
+    ['#765AF8', '#5A91F8'],
+    ['#9E54FF', '#0ACFF6'],
+    ['#B345F1', '#669DFF'],
+    ['#765AF8', '#C059EE'],
+    ['#9039D0', '#C239D0'],
+    ['#9F2AFF', '#FD56FD'],
+    ['#AB3AF2', '#E40568'],
+    ['#9F2AFF', '#E9A80B'],
+    ['#D50F6B', '#E73AE8'],
+    ['#ED5502', '#E73AE8'],
+    ['#ED358C', '#DBED18'],
+    ['#ED358C', '#F9902E'],
+    ['#FF7500', '#FFCA00']
+];
+const Sizes = {
+    18: {
+        radius: 2,
+        text: { x: 9, y: 13 },
+        fontSize: '11px',
+        textAnchor: 'middle'
+    },
+    24: {
+        radius: 3,
+        text: { x: 2, y: 13 },
+        fontSize: '11px',
+        underscore: { x: 3, y: 17 }
+    },
+    32: {
+        radius: 3,
+        text: { x: 3, y: 17 },
+        fontSize: '13px',
+        letterSpacing: 1,
+        underscore: { x: 4, y: 22 }
+    },
+    40: {
+        radius: 3,
+        text: { x: 5, y: 19 },
+        fontSize: '15px',
+        letterSpacing: 1,
+        underscore: { x: 6, y: 28 }
+    }
+};
+const sizeKeys = Object.keys(Sizes).map(Number);
+function extractLetters(name) {
+    const names = name.split(/[\s._]+/).filter(Boolean);
+    if (names.length >= 2) {
+        return names[0][0].toUpperCase() + names[1][0].toUpperCase();
+    }
+    else if (names.length === 1) {
+        if (names[0].length >= 2) {
+            return names[0].slice(0, 2).toUpperCase();
+        }
+        else {
+            return `${names[0][0].toUpperCase()}X`;
+        }
+    }
+    else {
+        return 'XX';
+    }
+}
+// https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0#gistcomment-2775538
+const BASE = 32;
+function hashCode(s) {
+    let h = 0;
+    for (let i = 0; i < s.length; i++) {
+        h = Math.imul(BASE - 1, h) + s.charCodeAt(i) | 0;
+    }
+    return h;
+}
+export default function FallbackAvatar({ username, size, round }) {
+    const hash = Math.abs(hashCode(username.toLowerCase()));
+    const [fromColor, toColor] = colorPairs[hash % colorPairs.length];
+    const possibleSizeKeys = sizeKeys.filter(key => key >= size);
+    const sizeKey = possibleSizeKeys.length > 0
+        ? Math.min(...possibleSizeKeys)
+        : Math.max(...sizeKeys);
+    const sizes = Sizes[sizeKey];
+    const radius = round ? '50%' : sizes.radius;
+    const gradientId = useMemo(() => getUID('gradient-'), []);
+    return (<svg viewBox={`0 0 ${sizeKey} ${sizeKey}`} xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop stopColor={fromColor} offset="0"/>
+          <stop stopColor={toColor} offset="1"/>
+        </linearGradient>
+      </defs>
+      <g>
+        <rect fill={`url(#${gradientId})`} x="0" y="0" width={sizeKey} height={sizeKey} rx={radius} ry={radius}/>
+        <text x={sizes.text.x} y={sizes.text.y} fontFamily="Arial, Helvetica, sans-serif" fontSize={sizes.fontSize} letterSpacing={sizes.letterSpacing} fill="#FFFFFF" textAnchor={sizes.textAnchor}>
+          <tspan>{extractLetters(username)}</tspan>
+          {sizes.underscore && <tspan x={sizes.underscore.x} y={sizes.underscore.y}>{'_'}</tspan>}
+        </text>
+      </g>
+    </svg>);
+}
+FallbackAvatar.propTypes = {
+    username: PropTypes.string.isRequired,
+    size: PropTypes.number.isRequired,
+    round: PropTypes.bool
+};

package/components/avatar-editor-ng/avatar-editor-ng.examples.js

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import AvatarEditorNG from '@jetbrains/ring-ui/components/avatar-editor-ng/avatar-editor-ng';
+import AvatarEditorNG from './avatar-editor-ng';
 
 export default {
   title: 'Legacy Angular/Avatar Editor Ng',

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

@@ -2,11 +2,11 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import {Size as AvatarSize} from '@jetbrains/ring-ui/components/avatar/avatar';
+import {Size as AvatarSize} from '../avatar/avatar';
 
-import {avatarDataUri} from '@jetbrains/ring-ui/components/avatar/avatar-example-datauri';
+import {avatarDataUri} from '../avatar/avatar-example-datauri';
 
-import AvatarNG from '@jetbrains/ring-ui/components/avatar-ng/avatar-ng';
+import AvatarNG from './avatar-ng';
 
 export default {
   title: 'Legacy Angular/Avatar Ng',

package/components/badge/badge.d.ts

@@ -0,0 +1,24 @@
+import { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface BadgeProps extends HTMLAttributes<HTMLElement> {
+    gray?: boolean | null | undefined;
+    valid?: boolean | null | undefined;
+    invalid?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Badge
+ */
+export default class Badge extends PureComponent<BadgeProps> {
+    static propTypes: {
+        gray: PropTypes.Requireable<boolean>;
+        valid: PropTypes.Requireable<boolean>;
+        invalid: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}

package/components/badge/badge.jsx

@@ -0,0 +1,35 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import style from './badge.css';
+/**
+ * @name Badge
+ */
+export default class Badge extends PureComponent {
+    static propTypes = {
+        gray: PropTypes.bool,
+        valid: PropTypes.bool,
+        invalid: PropTypes.bool,
+        disabled: PropTypes.bool,
+        className: PropTypes.string,
+        children: PropTypes.node,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const { 
+        // Modifiers
+        gray, valid, invalid, disabled, 
+        // Props
+        className, children, 'data-test': dataTest, ...props } = this.props;
+        const classes = classNames(style.badge, className, {
+            [style.gray]: gray,
+            [style.valid]: valid,
+            [style.invalid]: invalid,
+            [style.disabled]: disabled
+        });
+        return (<span {...props} data-test={dataTests('ring-badge', dataTest)} className={classes}>
+        {children}
+      </span>);
+    }
+}

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

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import GroupNG from '@jetbrains/ring-ui/components/group-ng/group-ng';
+import GroupNG from '../group-ng/group-ng';
 
-import BadgeNG from '@jetbrains/ring-ui/components/badge-ng/badge-ng';
+import BadgeNG from './badge-ng';
 
 export default {
   title: 'Legacy Angular/Badge Ng',

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

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

package/components/button/button.d.ts

@@ -0,0 +1,68 @@
+import 'focus-visible';
+import React, { PureComponent, ButtonHTMLAttributes, ClassAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { IconType, Size } from '../icon/icon';
+import Theme, { ThemeOuterProps, ThemeProps } from '../global/theme';
+import { ClickableLinkProps } from '../link/clickableLink';
+export interface ButtonBaseProps extends ThemeProps {
+    active?: boolean | null | undefined;
+    danger?: boolean | null | undefined;
+    delayed?: boolean | null | undefined;
+    loader?: boolean | null | undefined;
+    primary?: boolean | null | undefined;
+    short?: boolean | null | undefined;
+    text?: boolean | null | undefined;
+    inline?: boolean | null | undefined;
+    dropdown?: boolean | null | undefined;
+    disabled?: boolean | undefined;
+    icon?: string | IconType | null | undefined;
+    iconSize?: Size | null | undefined;
+    iconClassName?: string | null | undefined;
+    iconSuppressSizeWarning?: boolean | null | undefined;
+}
+export interface ButtonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonBaseProps {
+    href?: undefined;
+}
+export interface ButtonLinkProps extends ClickableLinkProps, ButtonBaseProps {
+    autoFocus?: never;
+    href: string;
+}
+export declare type ButtonProps = ButtonButtonProps | ButtonLinkProps;
+/**
+ * @name Button
+ */
+/**
+ * A component for displaying variously styled buttons.
+ */
+export declare class Button extends PureComponent<ButtonProps> {
+    static propTypes: {
+        theme: PropTypes.Requireable<string>;
+        active: PropTypes.Requireable<boolean>;
+        danger: PropTypes.Requireable<boolean>;
+        delayed: PropTypes.Requireable<boolean>;
+        loader: PropTypes.Requireable<boolean>;
+        primary: PropTypes.Requireable<boolean>;
+        short: PropTypes.Requireable<boolean>;
+        text: PropTypes.Requireable<boolean>;
+        inline: PropTypes.Requireable<boolean>;
+        dropdown: PropTypes.Requireable<boolean>;
+        href: PropTypes.Requireable<string>;
+        target: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        iconSize: PropTypes.Requireable<number>;
+        iconClassName: PropTypes.Requireable<string>;
+        iconSuppressSizeWarning: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static IconSize: typeof Size;
+    static Theme: typeof Theme;
+    buttonRef: React.RefObject<HTMLButtonElement>;
+    render(): JSX.Element;
+}
+export { Size as IconSize };
+export declare type ContainerProps<T> = Omit<T, keyof ThemeProps> & ThemeOuterProps & ClassAttributes<Button>;
+export declare type ButtonAttrs = ContainerProps<ButtonButtonProps> | ContainerProps<ButtonLinkProps>;
+declare const _default: React.ForwardRefExoticComponent<ButtonAttrs> & Pick<typeof Button, "Theme" | "IconSize">;
+export default _default;