@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "5.1.1",
+  "version": "6.0.2-beta.0",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -34,6 +34,7 @@
   "scripts": {
     "apply-resolutions": "npx npm-force-resolutions@0.0.10",
     "_postinstall": "husky install",
+    "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
     "a11y-audit": "jest a11y-audit.test.js",
     "a11y-audit-ci": "jest a11y-audit.test.js --reporters=jest-teamcity; node report-metadata.js",
     "console-errors": "jest console-errors.test.js --watchAll",
@@ -43,12 +44,12 @@
     "hermione-test": "npm --prefix packages/hermione run test",
     "hermione-test-ci": "npm --prefix packages/hermione run test-ci",
     "hermione-gather": "npm --prefix packages/hermione run gather",
-    "build-examples": "./node_modules/@storybook/html/bin/build.js --quiet -c .storybook -o storybook-dist",
+    "build-examples": "storybook build --quiet -c .storybook -o storybook-dist",
     "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy '**/*' '!**/*.ts' '!**/*.tsx' ../components --parents --cwd=src/",
     "build": "./node_modules/.bin/rollup -c --bundleConfigAsCjs",
     "postbuild": "cpy '**/*.d.ts' ../dist --parents --cwd=components/",
     "serve": "npm --prefix packages/hermione run serve",
-    "start": "./node_modules/@storybook/html/bin/index.js -p 9999",
+    "start": "storybook dev -p 9999",
     "storybook-debug": "node --inspect-brk node_modules/@storybook/html/bin -p 9999",
     "lint:js": "eslint",
     "lint": "npm run lint:js . && npm run stylelint",
@@ -74,106 +75,107 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/cli": "^7.22.10",
+    "@babel/eslint-parser": "^7.22.11",
+    "@csstools/stylelint-no-at-nest-rule": "^1.0.0",
     "@jetbrains/eslint-config": "^5.4.1",
-    "@jetbrains/stylelint-config": "^3.0.2",
-    "@primer/octicons": "^17.11.1",
+    "@jetbrains/stylelint-config": "^4.0.1",
+    "@primer/octicons": "^19.6.0",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-replace": "^5.0.2",
-    "@storybook/addon-a11y": "6.5.15",
-    "@storybook/addon-docs": "6.5.15",
-    "@storybook/addon-essentials": "6.5.15",
-    "@storybook/addon-storyshots": "6.5.15",
-    "@storybook/addon-storyshots-puppeteer": "6.5.15",
-    "@storybook/addon-storysource": "6.5.15",
-    "@storybook/addons": "6.5.15",
-    "@storybook/builder-webpack5": "6.5.15",
-    "@storybook/client-api": "6.5.15",
-    "@storybook/core": "6.5.15",
-    "@storybook/html": "6.5.15",
-    "@storybook/manager-webpack5": "6.5.15",
-    "@storybook/react": "6.5.15",
-    "@storybook/source-loader": "6.5.15",
-    "@storybook/theming": "6.5.15",
-    "@testing-library/react": "^13.4.0",
+    "@storybook/addon-a11y": "7.3.2",
+    "@storybook/addon-docs": "7.3.2",
+    "@storybook/addon-essentials": "7.3.2",
+    "@storybook/addon-storyshots": "7.2.0",
+    "@storybook/addon-storyshots-puppeteer": "7.3.2",
+    "@storybook/addon-storysource": "7.3.2",
+    "@storybook/addons": "7.3.2",
+    "@storybook/html": "7.2.0",
+    "@storybook/html-webpack5": "^7.3.2",
+    "@storybook/preview-api": "7.2.0",
+    "@storybook/react": "7.3.2",
+    "@storybook/source-loader": "7.3.2",
+    "@storybook/theming": "7.3.2",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/chai": "^4.3.4",
+    "@types/chai": "^4.3.5",
     "@types/chai-as-promised": "^7.1.5",
     "@types/chai-dom": "0.0.10",
-    "@types/chai-enzyme": "^0.6.8",
-    "@types/enzyme": "^3.10.12",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@types/sinon": "^10.0.13",
+    "@types/chai-enzyme": "^0.6.10",
+    "@types/enzyme": "^3.10.13",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@types/sinon": "^10.0.16",
     "@types/sinon-chai": "^3.2.9",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
-    "angular": "^1.8.3",
-    "angular-mocks": "^1.8.3",
-    "angular-route": "^1.8.3",
+    "acorn": "^8.10.0",
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "chai": "^4.3.7",
+    "caniuse-lite": "^1.0.30001524",
+    "chai": "^4.3.8",
     "chai-as-promised": "^7.1.1",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
-    "core-js": "^3.27.2",
+    "core-js": "^3.32.1",
     "cpy-cli": "^3.1.1",
     "enzyme": "^3.11.0",
-    "eslint": "^8.32.0",
-    "eslint-import-resolver-webpack": "^0.13.2",
-    "eslint-plugin-angular": "^4.1.0",
+    "eslint": "^8.47.0",
+    "eslint-import-resolver-webpack": "^0.13.7",
     "eslint-plugin-bdd": "^2.1.1",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-storybook": "^0.6.13",
     "events": "^3.3.0",
-    "glob": "^8.1.0",
-    "html-webpack-plugin": "^5.5.0",
+    "glob": "^10.3.3",
+    "html-webpack-plugin": "^5.5.3",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^4.0.1",
-    "jest": "~29.4.0",
-    "jest-environment-jsdom": "^29.4.0",
+    "jest": "~29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
     "jest-teamcity": "^1.10.0",
-    "karma": "^6.4.1",
-    "karma-chrome-launcher": "3.1.1",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "3.2.0",
     "karma-mocha": "^2.0.1",
-    "karma-sourcemap-loader": "^0.3.8",
+    "karma-sourcemap-loader": "^0.4.0",
     "karma-teamcity-reporter": "^2.0.0",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^14.0.1",
     "merge-options": "^3.0.4",
     "mocha": "^10.2.0",
     "pinst": "^3.0.0",
-    "puppeteer": "^19.6.1",
+    "prettier": "^3.0.2",
+    "puppeteer": "^21.1.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "regenerator-runtime": "^0.13.11",
-    "rimraf": "^4.1.2",
-    "rollup": "^3.10.1",
+    "regenerator-runtime": "^0.14.0",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.28.1",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-styles": "^4.0.0",
-    "sinon": "^15.0.1",
+    "sinon": "^15.2.0",
     "sinon-chai": "^3.7.0",
     "storage-mock": "^2.1.0",
+    "storybook": "^7.2.3",
     "storybook-addon-themes": "^6.1.0",
-    "stylelint": "^14.16.1",
+    "storybook-zeplin": "^2.0.2",
+    "stylelint": "^15.10.3",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
-    "terser-webpack-plugin": "^5.3.6",
-    "typescript": "~4.9.4",
+    "terser-webpack-plugin": "^5.3.9",
+    "typescript": "~5.2.2",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1",
-    "xmlappend": "^1.0.4",
-    "yo": "^4.3.1"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "xmlappend": "^1.0.4"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0",
@@ -195,64 +197,62 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/core": "^7.22.11",
+    "@babel/preset-typescript": "^7.22.11",
     "@jetbrains/babel-preset-jetbrains": "^2.3.2",
-    "@jetbrains/icons": "^3.20.3",
-    "@jetbrains/logos": "^2.2.10",
+    "@jetbrains/icons": "^3.21.0",
+    "@jetbrains/logos": "^2.2.16",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@types/combokeys": "^2.4.6",
     "@types/deep-equal": "^1.0.1",
     "@types/element-resize-detector": "^1.1.3",
     "@types/google.analytics": "0.0.42",
     "@types/prop-types": "^15.7.5",
-    "@types/react-virtualized": "9.21.20",
+    "@types/react-virtualized": "9.21.22",
     "@types/util-deprecate": "^1.0.0",
     "@ungap/url-search-params": "^0.2.2",
-    "babel-loader": "9.1.2",
-    "babel-plugin-transform-define": "^2.1.0",
-    "browserslist": "^4.21.4",
+    "babel-loader": "9.1.3",
+    "babel-plugin-transform-define": "^2.1.3",
+    "browserslist": "^4.21.10",
     "change-case": "^4.1.1",
     "classnames": "^2.3.2",
     "combokeys": "^3.0.1",
     "compile-code-loader": "^1.0.0",
-    "css-loader": "^6.7.3",
-    "csstype": "^3.1.1",
-    "date-fns": "^2.29.3",
-    "deep-equal": "^2.2.0",
+    "css-loader": "^6.8.1",
+    "csstype": "^3.1.2",
+    "date-fns": "^2.30.0",
+    "deep-equal": "^2.2.2",
     "element-resize-detector": "^1.2.4",
     "es6-error": "^4.1.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "extricate-loader": "^3.0.0",
     "fastdom": "^1.0.11",
     "file-loader": "^6.2.0",
-    "focus-trap": "^7.2.0",
-    "focus-visible": "^5.2.0",
+    "focus-trap": "^7.5.2",
     "highlight.js": "^10.7.2",
     "html-loader": "^4.2.0",
     "interpolate-loader": "^2.0.1",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.4.21",
-    "postcss-calc": "^8.2.4",
+    "postcss": "^8.4.28",
+    "postcss-calc": "^9.0.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
-    "postcss-loader": "^7.0.2",
-    "postcss-modules-values-replace": "^3.4.0",
-    "postcss-preset-env": "^7.8.2",
+    "postcss-loader": "^7.3.3",
+    "postcss-modules-values-replace": "^4.1.0",
+    "postcss-preset-env": "^9.1.1",
     "prop-types": "^15.8.1",
-    "react-markdown": "^8.0.5",
+    "react-markdown": "^8.0.7",
     "react-movable": "^3.0.4",
-    "react-virtualized": "^9.22.3",
+    "react-virtualized": "^9.22.5",
     "react-waypoint": "^10.3.0",
-    "remark-breaks": "^3.0.2",
+    "remark-breaks": "^3.0.3",
     "remark-gfm": "^3.0.1",
     "scrollbar-width": "^3.1.1",
     "simply-uuid": "^1.0.1",
     "sniffr": "^1.2.0",
-    "storybook-zeplin": "^1.7.3",
     "style-inject": "^0.3.0",
-    "style-loader": "~3.3.1",
+    "style-loader": "~3.3.3",
     "url-loader": "^4.1.1",
     "util-deprecate": "^1.0.2"
   },

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

@@ -1,41 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-import hubConfig from '../../.storybook/hub-config';
-
-import AuthNG from './auth-ng';
-
-export default {
-  title: 'Legacy Angular/Auth Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Auth.',
-    hermione: {skip: true}
-  }
-};
-
-export const authorization = () => {
-  angular.
-    module(APP_NAME, [AuthNG]).
-    config([
-      'authProvider',
-      function provider(authProvider) {
-        authProvider.config(hubConfig);
-      }
-    ]).
-    controller('testCtrl', function controller(auth, $q) {
-      $q.resolve(auth.requestUser()).then(user => {
-        this.user = user;
-      });
-    });
-
-  return `
-      <div ng-controller="testCtrl as ctrl">
-        <h3>User info</h3>
-        <pre>{{ ctrl.user | json }}</pre>
-      </div>
-    `;
-};
-
-authorization.storyName = 'Auth Ng';

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

@@ -1,143 +0,0 @@
-import angular from 'angular';
-
-import Auth from '../auth/auth';
-
-/**
- * @name Auth Ng
- */
-const angularModule = angular.module('Ring.auth', []);
-
-angularModule.provider('auth', function provider($httpProvider) {
-  /**
-   * @type Auth
-   */
-  let auth;
-  /**
-   * @type {{cleanHash: boolean}} config
-   */
-  const defaultConfig = {
-    cleanHash: false //prevents infinite redirect on angular>1.2.26
-  };
-
-  this.init = authInstance => {
-    auth = authInstance;
-  };
-
-  /**
-   * @param {{
-   *   serverUri: string,
-   *   redirectUri: string?,
-   *   clientId: string?,
-   *   scope: string[]?,
-   *   cleanHash: boolean?
-   * }} config
-   */
-  this.config = config => {
-    const configCopy = angular.extend({}, defaultConfig, config);
-    auth = new Auth(configCopy);
-  };
-
-  $httpProvider.interceptors.push(['$q', '$injector', 'auth', ($q, $injector, authInstance) => {
-    function urlEndsWith(config, suffix) {
-      return config &&
-        config.url &&
-        config.url.indexOf(suffix) === config.url.length - suffix.length;
-    }
-
-    return {
-      request(config) {
-        if (!authInstance || urlEndsWith(config, '.html') || (config && config.noAuthorization)) {
-          // Don't intercept angular template requests
-          return config;
-        }
-        return authInstance.promise.
-          then(() => authInstance.auth.requestToken()).
-          then(accessToken => {
-            if (accessToken) {
-              config.headers.Authorization = `Bearer ${accessToken}`;
-            }
-            return config;
-          });
-      },
-      responseError(rejection) {
-        if (authInstance && !urlEndsWith(rejection.config, '.html') &&
-          rejection.data != null && Auth.shouldRefreshToken(rejection.data.error)) {
-
-          // Use $injector to avoid circular dependency
-          const $http = $injector.get('$http');
-          const {data, method, params, url} = rejection.config;
-
-          return authInstance.auth.
-            forceTokenUpdate().
-            then(() => $http({data, method, params, url}));
-        }
-
-        return $q.reject(rejection);
-      }
-    };
-  }]);
-
-  this.$get = function get($injector, $log, $sniffer) {
-    // Do not try to init anything without config
-    if (!auth) {
-      $log.warn('Auth wasn\'t initialized');
-      return null;
-    }
-
-    if (auth.config.reloadOnUserChange === false) {
-      auth.addListener('userChange', () => {
-        const $route = $injector.get('$route');
-        $route.reload();
-      });
-    }
-
-    /**
-     * @type {Promise.<string>}
-     */
-    const authInitPromise = auth.init();
-
-    /**
-     * @param {string?} restoreLocationURL
-     */
-    function restoreLocation(restoreLocationURL) {
-      if (restoreLocationURL) {
-        const bases = document.getElementsByTagName('base');
-        let baseURI = auth.config.redirectUri;
-
-        if (bases.length > 0) {
-          baseURI = bases[0].href;
-        }
-
-        if (restoreLocationURL.indexOf(baseURI) === 0) {
-          const $location = $injector.get('$location');
-          let relativeURI = restoreLocationURL.substr(baseURI.length);
-
-          // We have to turn url with hash to simple relative url in HashbangInHtml5 mode
-          // And there is no other and documented way to detect that mode
-          // @see http://stackoverflow.com/a/16678065
-          if ($location.$$html5 && !$sniffer.history) { // eslint-disable-line angular/no-private-call
-            relativeURI = relativeURI.replace(/^#\//, '');
-          }
-
-          $location.url(relativeURI).replace();
-        }
-      }
-    }
-
-    authInitPromise.then(restoreLocation, e => {
-      if (!e.authRedirect) {
-        $log.error(e);
-      }
-    });
-
-    return {
-      auth,
-      requestUser: auth.requestUser.bind(auth),
-      clientId: auth.config.clientId,
-      logout: auth.logout.bind(auth),
-      promise: authInitPromise
-    };
-  };
-});
-
-export default angularModule.name;

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

@@ -1,28 +0,0 @@
-/**
- * TODO(maksimrv): Remove this code
- * It is currently required because permissions do not work without auth,
- * but we can't stub the correct auth component and should mock all providers.
- */
-export default function AuthProviderMock() {
-  this.$get = ['$q', function get($q) {
-    const promise = $q.resolve([]);
-
-    return {
-      auth: {
-        addListener() {},
-        getAPIPath() {
-          return '/';
-        },
-        requestToken() {
-          return promise;
-        },
-        http: {
-          get() {
-            return promise;
-          }
-        }
-      },
-      promise
-    };
-  }];
-}

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

@@ -1,41 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import InputNg from '../input-ng/input-ng';
-import SelectNg from '../select-ng/select-ng';
-
-import AutofocusNG from './autofocus-ng';
-
-export default {
-  title: 'Legacy Angular/Autofocus Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes:
-      'Sets focus to the element if the condition is true. Supports standard input elements as well as Select.',
-    hermione: {skip: true}
-  }
-};
-
-export const autofocusOnInput = () => {
-  angular.module(APP_NAME, [AutofocusNG, InputNg]);
-
-  return `
-      <rg-input
-        rg-autofocus="true"
-        size="M"
-        placeholder="Should be focused"
-      ></rg-input>
-    `;
-};
-
-autofocusOnInput.storyName = 'autofocus on input';
-
-export const autofocusOnSelect = () => {
-  angular.module(APP_NAME, [AutofocusNG, SelectNg]);
-
-  return '<rg-select options="item in []" size="M" rg-autofocus="true"></rg-select>';
-};
-
-autofocusOnSelect.storyName = 'autofocus on select';

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

@@ -1,51 +0,0 @@
-/**
- * @name Autofocus Ng
- */
-import angular from 'angular';
-
-import {FOCUSABLE_ELEMENTS} from '../tab-trap/tab-trap';
-
-const angularModule = angular.module('Ring.autofocus', []);
-const RING_SELECT_SELECTOR = '[data-test*=ring-select__focus]';
-const RING_SELECT = 'rg-select';
-
-angularModule.directive('rgAutofocus', function rgAutofocusDirective() {
-
-  /**
-   * Focuses on element itself if it has "focus" method.
-   * Searches and focuses on select's button or input if element is rg-select
-   * @param element
-   */
-  function focusOnElement(element) {
-    if (!element) {
-      return;
-    }
-
-    if (element.hasAttribute(RING_SELECT) || element.tagName.toLowerCase() === RING_SELECT) {
-      focusOnElement(element.querySelector(RING_SELECT_SELECTOR));
-      return;
-    }
-
-    if (element.matches(FOCUSABLE_ELEMENTS) && element.focus) {
-      element.focus();
-      return;
-    }
-
-    const focusableChild = element.querySelector(FOCUSABLE_ELEMENTS);
-
-    if (focusableChild && focusableChild.focus) {
-      focusableChild.focus();
-    }
-  }
-
-  return (scope, iElement, iAttrs) => {
-    const element = iElement[0];
-    scope.$watch(iAttrs.rgAutofocus, newValue => {
-      if (newValue) {
-        scope.$evalAsync(() => focusOnElement(element));
-      }
-    });
-  };
-});
-
-export default angularModule.name;

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;
-  });
-});