@jetbrains/ring-ui 4.1.0-beta.13 → 4.1.0-beta.17

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [4.1.0]
+
+### Pre-built version
+
+Ring UI now comes with pre-built version in `@jetbrains/ring-ui/dist` directory. 
+This addresses the following issues:
+
+* does not require using specific bundler (WebPack) anymore
+* does not require dealing with Ring UI building configuration
+* decreases your project build time
+
+See "README.md" for quick start with pre-built version
+
 ## [4.0.0]
 
 ### BREAKING CHANGES

package/README.md

@@ -7,27 +7,28 @@ This collection of UI components aims to provide all the necessary building bloc
 
 ## Installation
 
-There are three ways of installing and using RingUI. Choose **one** that suits your needs best:
+`npm install @jetbrains/ring-ui`
 
 ### Quick start (importing components as ES modules)
 
 The easiest way is to import necessary components as ES modules:
-```javascript
-import Icon from "@jetbrains/ring-ui/dist/icon"
-import Logo from "@jetbrains/ring-ui/dist/logo"
-import Input from "@jetbrains/ring-ui/dist/input"
-import Select from "@jetbrains/ring-ui/dist/select"
-import Toggle from "@jetbrains/ring-ui/dist/toggle"
-import { Tabs, Tab } from "@jetbrains/ring-ui/dist/tabs"
+```js
+// You need to import RingUI styles once
+import '@jetbrains/ring-ui/dist/style.css';
 
-import "@jetbrains/ring-ui/dist/style.css"
+import alertService from '@jetbrains/ring-ui/dist/alert-service/alert-service';
+import Button from '@jetbrains/ring-ui/dist/button/button';
 
 ...
 
-<Select
-  className="select-field"
-  size="FULL"
-/>
+export const Demo = () => {
+  return (
+    <Button onClick={() => alertService.successMessage('Hello world')}>
+      Click me
+    </Button>
+  );
+};
+
 ```
 
 The bundle size will depend on the amount of components you imported.

package/components/alert/container.css

@@ -1,7 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
-@value alert from './alert.css';
+@value alert from "./alert.css";
 
 .alertContainer {
   position: fixed;

package/components/auth/auth.test.js

@@ -203,7 +203,8 @@ describe('Auth', () => {
         redirectUri: 'http://localhost:8080/hub',
         clientId: '1-1-1-1-1',
         scope: ['0-0-0-0-0', 'youtrack'],
-        optionalScopes: ['youtrack']
+        optionalScopes: ['youtrack'],
+        waitForRedirectTimeout: 0
       });
       try {
         await auth.init();
@@ -226,7 +227,8 @@ describe('Auth', () => {
       auth = new Auth({
         serverUri: '',
         redirect: true,
-        cleanHash: true
+        cleanHash: true,
+        waitForRedirectTimeout: 0
       });
 
       try {
@@ -245,7 +247,8 @@ describe('Auth', () => {
         auth = new Auth({
           serverUri: '',
           redirect: true,
-          cleanHash: true
+          cleanHash: true,
+          waitForRedirectTimeout: 0
         });
 
         try {
@@ -265,7 +268,8 @@ describe('Auth', () => {
       auth = new Auth({
         serverUri: '',
         redirect: true,
-        cleanHash: false
+        cleanHash: false,
+        waitForRedirectTimeout: 0
       });
 
       try {
@@ -284,7 +288,8 @@ describe('Auth', () => {
         serverUri: '',
         redirect: true,
         redirectUri: 'http://localhost:8080/hub',
-        requestCredentials: 'skip'
+        requestCredentials: 'skip',
+        waitForRedirectTimeout: 0
       });
       try {
         await auth.init();
@@ -313,7 +318,8 @@ describe('Auth', () => {
         redirectUri: 'http://localhost:8080/hub',
         clientId: '1-1-1-1-1',
         scope: ['0-0-0-0-0', 'youtrack'],
-        optionalScopes: ['youtrack']
+        optionalScopes: ['youtrack'],
+        waitForRedirectTimeout: 0
       });
 
       auth._storage._tokenStorage = auth._storage._stateStorage =
@@ -330,7 +336,8 @@ describe('Auth', () => {
         auth._storage.saveToken({
           accessToken: 'token',
           expires: TokenValidator._epoch() + HOUR,
-          scopes: ['0-0-0-0-0']
+          scopes: ['0-0-0-0-0'],
+          waitForRedirectTimeout: 0
         });
       });
 

package/components/auth/auth__core.js

@@ -14,6 +14,7 @@ export const DEFAULT_EXPIRES_TIMEOUT = 40 * 60;
 export const DEFAULT_BACKGROUND_TIMEOUT = 10 * 1000;
 const DEFAULT_BACKEND_CHECK_TIMEOUT = 10 * 1000;
 const BACKGROUND_REDIRECT_TIMEOUT = 20 * 1000;
+const DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT = 5 * 1000;
 /* eslint-enable no-magic-numbers */
 
 export const USER_CHANGED_EVENT = 'userChange';
@@ -46,6 +47,7 @@ const DEFAULT_CONFIG = {
   onBackendDown: () => {},
 
   defaultExpiresIn: DEFAULT_EXPIRES_TIMEOUT,
+  waitForRedirectTimeout: DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT,
   translations: {
     login: 'Log in',
     loginTo: 'Log in to %serviceName%',
@@ -311,6 +313,11 @@ export default class Auth {
     const authRequest = await this._requestBuilder.prepareAuthRequest();
     this._redirectCurrentPage(authRequest.url);
 
+    // HUB-10867 Since we already redirecting the page, there is no actual need to throw an error
+    // and scare user with flashing error
+    // But let's keep it just in case redirect was not successful
+    await new Promise(resolve => setTimeout(resolve, this.config.waitForRedirectTimeout));
+
     throw error;
   }
 
@@ -615,8 +622,8 @@ export default class Auth {
     try {
       // We've got some error from this list
       // https://www.jetbrains.com/help/youtrack/devportal/OAuth-2.0-Errors.html
-      if (typeof error.code === 'string') {
-        const readableCode = error.code.split('_').join(' ');
+      if (error.code && typeof error.code.code === 'string') {
+        const readableCode = error.code.code.split('_').join(' ');
         return `Authorization error: ${readableCode}`;
       }
     } catch {
@@ -736,11 +743,10 @@ export default class Auth {
   }
 
   async switchUser() {
-    if (this.config.embeddedLogin) {
-      await this._runEmbeddedLogin();
+    if (!this.config.embeddedLogin) {
+      throw new Error('Auth: switchUser only supported for "embeddedLogin" mode');
     }
-
-    throw new Error('Auth: switchUser only supported for "embeddedLogin" mode');
+    await this._runEmbeddedLogin();
   }
 
   /**

package/components/avatar/avatar.css

@@ -1,10 +1,13 @@
 @import "../global/variables.css";
 
 .avatar {
+  display: inline-block;
   object-fit: cover;
   object-position: center;
 
-  border-radius: var(--ring-border-radius); /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
+  /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
+
+  border-radius: var(--ring-border-radius);
 }
 
 .subavatar {

package/components/avatar/avatar.examples.js

@@ -21,7 +21,8 @@ export const avatar = () => {
         {Object.keys(Size).map(size => (
           <div className="avatar-demo" key={size}>
             <Avatar size={Size[size]} url={avatarDataUri}/>
-            <Avatar size={Size[size]} url={avatarDataUri} round/>
+            <Avatar size={Size[size]} username="Jet Brains"/>
+            <Avatar size={Size[size]} username="Jet Brains" round/>
             <Avatar size={Size[size]}/>
           </div>
         ))}
@@ -38,7 +39,7 @@ avatar.parameters = {
   .avatar-demo {
     display: flex;
     justify-content: space-between;
-    width: 200px;
+    width: 240px;
     margin-bottom: 16px;
   }
 </style>`

package/components/avatar/avatar.js

@@ -6,6 +6,7 @@ import {encodeURL, isDataURI, parseQueryString} from '../global/url';
 import {getPixelRatio} from '../global/dom';
 
 import styles from './avatar.css';
+import FallbackAvatar from './fallback-avatar';
 
 /**
  * @name Avatar
@@ -15,6 +16,7 @@ export const Size = {
   Size18: 18,
   Size20: 20,
   Size24: 24,
+  Size28: 28,
   Size32: 32,
   Size40: 40,
   Size48: 48,
@@ -30,7 +32,9 @@ export default class Avatar extends PureComponent {
     url: PropTypes.string,
     round: PropTypes.bool,
     subavatar: PropTypes.string,
-    subavatarSize: PropTypes.number
+    subavatarSize: PropTypes.number,
+    username: PropTypes.string,
+    skipParams: PropTypes.bool
   };
 
   static defaultProps = {
@@ -53,7 +57,18 @@ export default class Avatar extends PureComponent {
   };
 
   render() {
-    const {size, url, dpr, style, round, subavatar, subavatarSize, ...restProps} = this.props;
+    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)';
@@ -76,14 +91,24 @@ export default class Avatar extends PureComponent {
         <span
           {...restProps}
           data-test="avatar"
-          className={classNames(styles.avatar, styles.empty, this.props.className)}
+          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 (!isDataURI(url)) {
+    if (!skipParams && !isDataURI(url)) {
       const [urlStart, query] = url.split('?');
       const queryParams = {
         ...parseQueryString(query),
@@ -102,7 +127,7 @@ export default class Avatar extends PureComponent {
         subavatarSizeString
       };
 
-      subavatarSrc = encodeURL(urlStart, queryParams);
+      subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
       return (
         <div>
           <img

package/components/avatar/fallback-avatar.js

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

@@ -19,7 +19,7 @@
     width: 0;
     height: calc(unit * 5);
 
-    content: '';
+    content: "";
     vertical-align: middle;
   }
 }
@@ -49,7 +49,7 @@
     width: 100%;
     height: 100%;
 
-    content: '';
+    content: "";
 
     background-color: rgba(0, 0, 0, 0.8);
   }

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

@@ -6,6 +6,7 @@ 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]);
@@ -26,7 +27,7 @@ function rgAvatarEditor() {
       deleteLabel: '@',
       addMessage: '@'
     },
-    template: require('./avatar-editor-ng.html'),
+    template,
     transclude: true,
     controller: [
       '$scope', '$attrs', 'RingMessageBundle',

package/components/avatar-editor-ng/{avatar-editor-ng.html → avatar-editor-ng__template.js}

@@ -1,4 +1,4 @@
-<div>
+export default `<div>
   <div ng-click="!ngDisabled && controls.select()" class="ring-avatar-editor__frame" ng-class="{
         'ring-avatar-editor_controlled': controlled,
         'ring-avatar-editor': !ngDisabled
@@ -25,4 +25,4 @@
   >
     <span translate>{{ getDeleteLabel() }}</span>
   </rg-button>
-</div>
+</div>`;

package/components/button/button.css

@@ -451,7 +451,7 @@
     width: calc(100% + loaderWidth);
     height: 100%;
 
-    content: '';
+    content: "";
     animation: progress 1s linear infinite;
 
     background-repeat: repeat;
@@ -460,7 +460,7 @@
 }
 
 .delayed .content::after {
-  content: '…';
+  content: "…";
 }
 
 .short {

package/components/button-group/button-group.js

@@ -12,7 +12,7 @@ export default class ButtonGroup extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string
-  }
+  };
 
   render() {
     const {className} = this.props;

package/components/button-group/caption.js

@@ -7,7 +7,7 @@ import styles from './button-group.css';
 export default class Caption extends PureComponent {
   static propTypes = {
     className: PropTypes.node
-  }
+  };
 
   render() {
     const {className} = this.props;

package/components/button-ng/button-ng.js

@@ -166,7 +166,7 @@ class ButtonController extends RingAngularComponent {
     }
 
     $compile(icon)($scope);
-  }
+  };
 }
 
 function changeTheme(element, data) {

package/components/button-set-ng/button-set-ng.js

@@ -3,6 +3,8 @@
  */
 import angular from 'angular';
 
+import buttonSetStyles from '../button-set/button-set.css';
+
 const angularModule = angular.module('Ring.button-set', []);
 
 function rgButtonSet() {
@@ -11,7 +13,7 @@ function rgButtonSet() {
     replace: true,
     scope: false,
     transclude: true,
-    template: require('./button-set-ng.html')
+    template: `<div class="${buttonSetStyles.buttonSet}" ng-transclude></div>`
   };
 }
 

package/components/checkbox/checkbox.css

@@ -89,7 +89,7 @@
   /* stylelint-disable-next-line selector-max-specificity */
   &:checked + .cell,
   &:indeterminate[checked] + .cell,
-  &:indeterminate[data-checked=true] + .cell {
+  &:indeterminate[data-checked="true"] + .cell {
     border-color: var(--ring-border-hover-color);
     background-color: var(--ring-selected-background-color);
   }

package/components/code/code.js

@@ -14,7 +14,7 @@ function noop() {}
 
 const registerLanguage = memoize(async language => {
   const languageExports = await import(
-    /* webpackChunkName: "highlight-[request]", webpackPrefetch: true */
+    /* webpackChunkName: "highlight-[request]" */
     `highlight.js/lib/languages/${language}`
   );
   highlight.registerLanguage(language, languageExports.default);

package/components/content-layout/content-layout.css

@@ -1,6 +1,6 @@
 @import "../global/variables.css";
 
-@value unit, extra-small-screen-media, small-screen-media from '../global/global.css';
+@value unit, extra-small-screen-media, small-screen-media from "../global/global.css";
 @value sidebarWidth: calc(unit * 30);
 
 .contentLayout {

package/components/data-list/data-list.css

@@ -1,7 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
-@value height, compensate from '../table/table.css';
+@value height, compensate from "../table/table.css";
 
 .dataListWrapper {
   position: relative;

package/components/date-picker/date-input.js

@@ -25,7 +25,8 @@ export default class DateInput extends React.PureComponent {
     onInput: PropTypes.func,
     onActivate: PropTypes.func,
     onConfirm: PropTypes.func,
-    onClear: PropTypes.func
+    onClear: PropTypes.func,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -78,16 +79,16 @@ export default class DateInput extends React.PureComponent {
       time, name, hoverDate,
       date, displayFormat, translations,
       onActivate, onClear,
-      fromPlaceholder, toPlaceholder, timePlaceholder
+      fromPlaceholder, toPlaceholder, timePlaceholder, locale
     } = this.props;
 
     let displayText = '';
     if (active && hoverDate) {
-      displayText = displayFormat(hoverDate);
+      displayText = displayFormat(hoverDate, locale);
     } else if (active && text != null) {
       displayText = text;
     } else if (date) {
-      displayText = displayFormat(date);
+      displayText = displayFormat(date, locale);
     } else if (name === 'time') {
       displayText = time || '';
     }