@jetbrains/ring-ui 5.1.21 → 5.1.23

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

@@ -1,49 +0,0 @@
-/* global inject */
-
-import 'angular';
-import 'angular-mocks';
-
-import RingSelect from '../select-ng/select-ng';
-
-import AutoFocus from './autofocus-ng';
-
-describe('Autofocus Ng', () => {
-  let element;
-  let $compile;
-  let $scope;
-
-  beforeEach(window.module(AutoFocus));
-  beforeEach(window.module(RingSelect));
-
-  beforeEach(inject((_$compile_, $rootScope) => {
-    $compile = _$compile_;
-    $scope = $rootScope.$new();
-    $scope.vm = {
-      focus: false
-    };
-    element = $compile('<input rg-autofocus="vm.focus"/>')($scope);
-
-  }));
-
-  it('Should focus when flag changed', () => {
-
-    sandbox.spy(element[0], 'focus');
-
-    $scope.vm.focus = true;
-    $scope.$digest();
-
-    element[0].focus.should.have.been.called;
-  });
-
-  it('Should focus on select button', () => {
-    element = $compile('<rg-select rg-autofocus="vm.focus" options="item in []"/>')($scope);
-    const selectButton = element[0].querySelector('[data-test*=ring-select__focus]');
-
-    sandbox.spy(selectButton, 'focus');
-
-    $scope.vm.focus = true;
-    $scope.$digest();
-
-    selectButton.focus.should.have.been.called;
-  });
-});

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

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

package/components/avatar/avatar-example-datauri.js

@@ -1,24 +0,0 @@
-// 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>
-        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
-            <stop stop-color="#D50F6B" offset="0"/>
-            <stop stop-color="#E73AE8" offset="1"/>
-        </linearGradient>
-    </defs>
-    <g>
-        <rect fill="url(#gradient)"
-              x="0" y="0" width="40" height="40"
-              rx="3" ry="3"/>
-        <text x="5" y="19"
-              font-family="Arial, Helvetica, sans-serif"
-              font-size="15px"
-              letter-spacing="1"
-              fill="#FFFFFF">
-            <tspan>JB</tspan>
-            <tspan x="6" y="28">_</tspan>
-        </text>
-    </g>
-</svg>
-`)}`;

package/components/avatar/avatar.css

@@ -1,27 +0,0 @@
-@import "../global/variables.css";
-
-.avatar {
-  display: inline-block;
-  object-fit: cover;
-  object-position: center;
-
-  /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
-
-  border-radius: var(--ring-border-radius);
-}
-
-.subavatar {
-  position: absolute;
-  top: 15px;
-  left: 27px;
-
-  border: 1px var(--ring-content-background-color) solid;
-}
-
-.empty {
-  display: inline-block;
-
-  box-sizing: border-box;
-
-  border: 1px solid var(--ring-borders-color);
-}

package/components/avatar/avatar.d.ts

@@ -1,52 +0,0 @@
-import React, { 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 | number;
-    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(): React.JSX.Element;
-}
-export type AvatarAttrs = JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;

package/components/avatar/avatar.js

@@ -1,98 +0,0 @@
-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

@@ -1,17 +0,0 @@
-import React from '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): React.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.js

@@ -1,113 +0,0 @@
-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).map(word => Array.from(word));
-    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).join('').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} cursor="default">
-          <tspan>{extractLetters(username)}</tspan>
-          {sizes.underscore && <tspan x={sizes.underscore.x} y={sizes.underscore.y}>{'_'}</tspan>}
-        </text>
-        <title>{username}</title>
-      </g>
-    </svg>);
-}
-FallbackAvatar.propTypes = {
-    username: PropTypes.string.isRequired,
-    size: PropTypes.number.isRequired,
-    round: PropTypes.bool
-};

package/components/avatar-editor-ng/avatar-editor-ng.css

@@ -1,104 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-/* stylelint-disable selector-max-specificity */
-
-:global(.ring-avatar-editor) {
-  position: relative;
-
-  width: calc(unit * 5);
-  height: calc(unit * 5);
-  padding: 1px;
-
-  text-align: center;
-
-  &::after {
-    display: inline-block;
-
-    width: 0;
-    height: calc(unit * 5);
-
-    content: "";
-    vertical-align: middle;
-  }
-}
-
-:global(.ring-avatar-editor_right) {
-  float: right;
-}
-
-:global(.ring-avatar-editor:hover:not(:disabled, .ring-avatar-editor_controlled)) {
-  padding: 0;
-
-  border: 1px solid var(--ring-link-hover-color);
-
-  & :global(.ring-avatar-editor__icon) {
-    visibility: visible;
-  }
-
-  & :global(.ring-avatar-editor__img) {
-    outline: 0;
-  }
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-
-    content: "";
-
-    background-color: rgba(0, 0, 0, 0.8);
-  }
-}
-
-:global(.ring-avatar-editor__img) {
-  max-width: calc(unit * 5);
-  max-height: calc(unit * 5);
-
-  cursor: pointer;
-  vertical-align: middle;
-}
-
-:global(.ring-avatar-editor__file-input) {
-  position: absolute;
-  left: -10000px;
-
-  visibility: hidden;
-}
-
-:global(.ring-avatar-editor__icon) {
-  position: absolute;
-  top: 10px;
-  left: 0;
-
-  visibility: hidden;
-
-  width: 100%;
-
-  color: var(--ring-content-background-color);
-
-  line-height: 14px;
-}
-
-:global(.ring-avatar-editor__frame) {
-  display: inline-block;
-
-  padding: 0;
-
-  cursor: pointer;
-  vertical-align: top;
-
-  border: 1px solid var(--ring-disabled-color);
-}
-
-:global(.ring-avatar-editor__remove) {
-  display: inline-block;
-
-  margin-left: calc(unit * 2);
-
-  vertical-align: top;
-}

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

@@ -1,133 +0,0 @@
-import angular from 'angular';
-
-import pencilIcon from '@jetbrains/icons/pencil';
-
-import messageBundleNg from '../message-bundle-ng/message-bundle-ng';
-import alertService from '../alert-service/alert-service';
-import IconNG from '../icon-ng/icon-ng';
-
-import template from './avatar-editor-ng__template';
-import './avatar-editor-ng.css';
-
-const angularModule = angular.module('Ring.avatar-editor', [messageBundleNg, IconNG]);
-
-/**
- * @name Avatar Editor Ng
- */
-function rgAvatarEditor() {
-  return {
-    restrict: 'E',
-    scope: {
-      model: '=ngModel',
-      onSelect: '&',
-      default: '@',
-      ngDisabled: '=',
-      showDeleteButton: '=?',
-      showAddButton: '=?',
-      deleteLabel: '@',
-      addMessage: '@'
-    },
-    template,
-    transclude: true,
-    controller: [
-      '$scope', '$attrs', 'RingMessageBundle',
-      function controller($scope, $attrs, RingMessageBundle) {
-        let fileInput;
-        $scope.editIcon = pencilIcon;
-        $scope.showAddButton = 'showAddButton' in $scope ? $scope.showAddButton : true;
-        $scope.showDeleteButton = 'showDeleteButton' in $scope ? $scope.showDeleteButton : true;
-
-        if ('controls' in $attrs) {
-          $scope.controlled = true;
-        }
-
-        function createFileLoadListener(file) {
-          return readEvent => {
-            const data = readEvent.target.result;
-            const result = $scope.onSelect({name: file.name, data});
-            if (result && result.then) {
-              result.then(() => {
-                $scope.model = data;
-              });
-            } else if (result !== false) {
-              $scope.$apply(() => {
-                $scope.model = data;
-              });
-            }
-          };
-        }
-
-        this.registerFileInput = input => {
-          fileInput = input;
-          fileInput.addEventListener('change', e => {
-            let imageFileSelected = false;
-            for (let i = 0; i < e.target.files.length; i++) {
-              const file = e.target.files[i];
-              if (file.type.indexOf('image/') === 0) {
-                imageFileSelected = true;
-                const reader = new FileReader();
-                reader.onload = createFileLoadListener(file);
-                reader.readAsDataURL(file);
-                break;
-              }
-            }
-            if (e.target.files.length && !imageFileSelected) {
-              alertService.error(RingMessageBundle.avatareditor_noselected());
-            }
-          });
-        };
-
-        $scope.controls = {};
-
-        function onClick(e) {
-          e.stopPropagation();
-        }
-
-        $scope.controls.select = () => {
-          if (!FileReader) {
-            alertService.error(RingMessageBundle.avatareditor_nosupport());
-          } else {
-            fileInput.addEventListener('click', onClick);
-            fileInput.dispatchEvent(new MouseEvent('click'));
-            fileInput.removeEventListener('click', onClick);
-          }
-        };
-
-        $scope.controls.remove = () => {
-          const data = '';
-          const result = $scope.onSelect({name: data, data});
-          if (result && result.then) {
-            result.then(() => {
-              $scope.model = data;
-            });
-          } else if (result !== false) {
-            $scope.model = data;
-          }
-        };
-
-        $scope.getDeleteLabel = () => (
-          $scope.deleteLabel || RingMessageBundle.avatareditor_delete()
-        );
-
-        $scope.getAddMessage = () => (
-          $scope.addMessage || RingMessageBundle.avatareditor_add()
-        );
-      }
-    ]
-  };
-}
-
-function rgAvatarEditorFileInput() {
-  return {
-    restrict: 'A',
-    require: '^rgAvatarEditor',
-    link: function link(scope, iElement, iAttrs, avatarEditorCtrl) {
-      avatarEditorCtrl.registerFileInput(iElement[0]);
-    }
-  };
-}
-
-angularModule.directive('rgAvatarEditor', rgAvatarEditor);
-angularModule.directive('rgAvatarEditorFileInput', rgAvatarEditorFileInput);
-
-export default angularModule.name;

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

@@ -1,41 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import AvatarEditorNG from './avatar-editor-ng';
-
-export default {
-  title: 'Legacy Angular/Avatar Editor Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes:
-      'Allows to choose images to be uploaded as Data URI. On-select attribute will receive the * filename as `name` and the file contents as `data`.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [AvatarEditorNG]).controller('testCtrl', function controller() {
-    this.data = `data:image/svg+xml;utf8,
-          <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="60" cy="60" r="50" style="fill: #00cc00"/>
-          </svg>
-        `;
-  });
-
-  return `
-      <div ng-controller="testCtrl as ctrl">
-        <rg-avatar-editor
-          on-select="ctrl.name = name"
-          delete-label="Clear"
-          ng-model="ctrl.data"
-        ></rg-avatar-editor>
-
-        <h3>{{ ctrl.name || 'No file name' }}</h3>
-        <img alt="Avatar" style="max-width: 300px; max-height: 300px;" ng-src="{{ctrl.data}}" />
-      </div>
-    `;
-};
-
-basic.storyName = 'Avatar Editor Ng';