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

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

@@ -0,0 +1,91 @@
+import {Simulate} from 'react-dom/test-utils';
+
+import styles from '../auth-dialog/auth-dialog.css';
+
+import authDialog from './auth-dialog-service';
+
+describe('Auth Dialog Service', () => {
+  const getContainer = () => document.querySelector('*[data-test~="ring-auth-dialog"]');
+  let hideAuthDialog: () => void;
+
+  afterEach(() => {
+    hideAuthDialog();
+  });
+
+  it('should show auth dialog', () => {
+    hideAuthDialog = authDialog();
+    const container = getContainer()?.
+      querySelector(`.${styles.content.split(' ').join('.')}`);
+    should.exist(container);
+  });
+
+  it('should show auth dialog text', () => {
+    hideAuthDialog = authDialog({title: 'foo'});
+    const title = getContainer()?.querySelector(`.${styles.title}`);
+    should.exist(title);
+    title?.should.contain.text('foo');
+  });
+
+  it('should show auth dialog error message', () => {
+    hideAuthDialog = authDialog({title: 'foo', errorMessage: 'error mess'});
+    const container = getContainer();
+    should.exist(container);
+    container?.should.contain.text('error mess');
+  });
+
+  it('should show auth dialog serviceName', () => {
+    hideAuthDialog = authDialog({serviceName: 'My service'});
+    const title = getContainer()?.querySelector(`.${styles.title}`);
+    should.exist(title);
+    title?.should.contain.text('Log in to My service');
+  });
+
+  it('should replace serviceName in in title', () => {
+    hideAuthDialog = authDialog({title: '==%serviceName%==', serviceName: 'My service'});
+    const title = getContainer()?.querySelector(`.${styles.title}`);
+    should.exist(title);
+    title?.should.contain.text('==My service==');
+  });
+
+  it('should show auth dialog image', () => {
+    hideAuthDialog = authDialog({serviceImage: 'image://url'});
+    const container = getContainer();
+    should.exist(container);
+    container?.should.contain('img[src="image://url"]');
+  });
+
+  it('should show auth dialog button text', () => {
+    hideAuthDialog = authDialog({title: 'foo', confirmLabel: 'confirm text'});
+    const container = getContainer();
+    should.exist(container);
+    container?.should.contain.text('confirm text');
+  });
+
+  it('should show reject button text', () => {
+    hideAuthDialog = authDialog({title: 'foo', cancelLabel: 'reject text'});
+    const container = getContainer();
+    should.exist(container);
+    container?.should.contain.text('reject text');
+  });
+
+  it('should call onConfirm on confirm click', () => {
+    const onConfirm = sandbox.spy();
+    hideAuthDialog = authDialog({onConfirm});
+    const okButton = getContainer()?.querySelector('*[data-test="auth-dialog-confirm-button"]');
+    should.exist(okButton);
+    Simulate.click(okButton as Element);
+
+
+    onConfirm.should.have.been.called;
+  });
+
+  it('should call onCancel on cancel click', () => {
+    const onCancel = sandbox.spy();
+    hideAuthDialog = authDialog({onCancel});
+    const cancelButton = getContainer()?.querySelector('*[data-test="auth-dialog-cancel-button"]');
+    should.exist(cancelButton);
+    Simulate.click(cancelButton as Element);
+
+    onCancel.should.have.been.called;
+  });
+});

package/components/auth-dialog-service/auth-dialog-service.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {render} from 'react-dom';
+
+import AuthDialog, {AuthDialogProps} from '../auth-dialog/auth-dialog';
+
+/**
+ * @name Auth Dialog Service
+ */
+
+const containerElement = document.createElement('div');
+
+type AuthDialogAttributes = JSX.LibraryManagedAttributes<typeof AuthDialog, AuthDialogProps>
+
+/**
+ * Renders AuthDialog into virtual node to skip maintaining container
+ */
+function renderAuthDialog(props: AuthDialogAttributes) {
+  render(<AuthDialog {...props}/>, containerElement);
+}
+
+export default function showAuthDialog(props: AuthDialogAttributes = {}) {
+  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.examples.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Avatar, {Size} from './avatar';
+import {avatarDataUri} from './avatar-example-datauri';
+
+export default {
+  title: 'Components/Avatar',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Displays an avatar. In case of a loading error an empty square is displayed.'
+  }
+};
+
+export const avatar = () => {
+  function Example() {
+    return (
+      <div>
+        {Object.entries(Size).map(([key, size]) => (typeof size === 'number'
+          ? (
+            <div className="avatar-demo" key={key}>
+              <Avatar size={size} url={avatarDataUri}/>
+              <Avatar size={size} username="Jet Brains"/>
+              <Avatar size={size} username="Jet Brains" round/>
+              <Avatar size={size}/>
+            </div>
+          )
+          : null))}
+      </div>
+    );
+  }
+
+  return <Example/>;
+};
+
+avatar.parameters = {
+  storyStyles: `
+<style>
+  .avatar-demo {
+    display: flex;
+    justify-content: space-between;
+    width: 240px;
+    margin-bottom: 16px;
+  }
+</style>`
+};

package/components/avatar/avatar.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+
+import {getPixelRatio} from '../global/dom';
+
+import Avatar from './avatar';
+
+const dataURI = `data:image/svg+xml,${encodeURIComponent(`
+  <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="60" cy="60" r="50" fill="#00cc00"/>
+  </svg>`
+)}`;
+
+describe('Avatar', () => {
+  it('should create component', () => {
+    render(<Avatar/>);
+    screen.getByTestId('avatar').should.exist;
+  });
+
+  it('should use passed className', () => {
+    render(<Avatar className="test-class"/>);
+    screen.getByTestId('avatar').should.have.class('test-class');
+  });
+
+  it('should use passed className when url is passed', () => {
+    render(<Avatar className="test-class" url={dataURI}/>);
+    screen.getByAltText('User avatar').should.have.class('test-class');
+  });
+
+  it('should render span when no url is passed', () => {
+    render(<Avatar/>);
+    screen.getByTestId('avatar').should.have.tagName('span');
+  });
+
+  it('should render image when url is passed', () => {
+    render(<Avatar url={dataURI}/>);
+    screen.getByAltText('User avatar').should.exist;
+  });
+
+  it('should not append params when data:uri is passed', () => {
+    render(<Avatar url={dataURI}/>);
+    const avatar = screen.getByAltText('User avatar') as HTMLImageElement;
+    avatar.src.should.not.match(/dpr=|size=/);
+  });
+
+  it('should append params when http:uri is passed', () => {
+    render(<Avatar url="http://"/>);
+    const avatar = screen.getByAltText('User avatar') as HTMLImageElement;
+    avatar.src.should.match(/dpr=|size=/);
+  });
+
+  it('should set size 20 as default', () => {
+    render(<Avatar url="http://"/>);
+    const avatar = screen.getByAltText('User avatar') as HTMLImageElement;
+    avatar.src.should.match(/size=20/);
+  });
+
+  it('should set proper dpr', () => {
+    render(<Avatar url="http://"/>);
+    const avatar = screen.getByAltText('User avatar') as HTMLImageElement;
+    avatar.src.should.match(new RegExp(`dpr=${getPixelRatio()}`));
+  });
+});

package/components/avatar/avatar.tsx

@@ -0,0 +1,180 @@
+import React, {PureComponent, HTMLAttributes} 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 enum Size {
+  Size18 = 18,
+  Size20 = 20,
+  Size24 = 24,
+  Size28 = 28,
+  Size32 = 32,
+  Size40 = 40,
+  Size48 = 48,
+  Size56 = 56
+}
+
+export interface AvatarProps extends HTMLAttributes<HTMLElement> {
+  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.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.tsx

@@ -0,0 +1,158 @@
+import React, {useMemo} from 'react';
+import PropTypes from 'prop-types';
+
+import getUID from '../global/get-uid';
+
+import {Size} from './avatar';
+
+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']
+];
+
+interface Position {
+  x: number
+  y: number
+}
+
+interface SizesEntry {
+  radius: number
+  text: Position
+  fontSize: string
+  textAnchor?: string
+  underscore?: Position
+  letterSpacing?: number
+}
+
+const Sizes: Record<number, SizesEntry> = {
+  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: string) {
+  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: string) {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) {
+    h = Math.imul(BASE - 1, h) + s.charCodeAt(i) | 0;
+  }
+
+  return h;
+}
+
+export interface FallbackAvatarProps {
+  username: string
+  size: Size
+  round: boolean | null | undefined
+}
+
+export default function FallbackAvatar({username, size, round}: FallbackAvatarProps) {
+  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.examples.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Group from '../group/group';
+
+import Badge from './badge';
+
+export default {
+  title: 'Components/Badge',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Displays a badge.'
+  }
+};
+
+export const badge = () => (
+  <Group>
+    <Badge>simple</Badge>
+    <Badge gray>gray</Badge>
+    <Badge valid>valid</Badge>
+    <Badge invalid>invalid</Badge>
+    <Badge disabled>disabled</Badge>
+  </Group>
+);