@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/dist/user-card/smart-user-card-tooltip.d.ts

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { UserCardTooltipAttrs } from './tooltip';
+import { UserCardUser } from './card';
+export interface SmartUserCardTooltipProps extends UserCardTooltipAttrs {
+    userDataSource: () => Promise<UserCardUser | null | undefined> | UserCardUser | null | undefined;
+}
+export default class SmartUserCardTooltip extends Component<SmartUserCardTooltipProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        userDataSource: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    state: {
+        user: null;
+        loading: boolean;
+    };
+    loadUser: () => Promise<void>;
+    renderNoUser: () => JSX.Element | "";
+    render(): JSX.Element;
+}

package/dist/user-card/smart-user-card-tooltip.js

@@ -5,17 +5,10 @@ import LoaderInline from '../loader-inline/loader-inline.js';
 import UserCardTooltip from './tooltip.js';
 import { m as modules_a4196c17 } from '../_helpers/card.js';
 import 'classnames';
-import '../global/theme.js';
 import '../global/data-tests.js';
-import '../_helpers/inject-styles.js';
-import '../global/conic-gradient.js';
-import 'conic-gradient';
-import '../global/memoize.js';
-import '../global/supports-css.js';
-import '../global/inject-styles.js';
-import '../global/radial-gradient-mask.js';
-import '../global/get-uid.js';
+import '../_helpers/loader-inline.js';
 import '../dropdown/dropdown.js';
+import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
@@ -23,12 +16,15 @@ import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import '../global/memoize.js';
 import '../button/button.js';
 import 'focus-visible';
 import '../link/clickableLink.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../popup/popup.js';
 import 'react-dom';
+import '../global/get-uid.js';
 import '../global/schedule-raf.js';
 import '../global/dom.js';
 import '../shortcuts/shortcuts.js';

package/dist/user-card/tooltip.d.ts

@@ -0,0 +1,31 @@
+import { Component, ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { DropdownAttrs } from '../dropdown/dropdown';
+import { UserCardAttrs, UserCardUser } from './card';
+export interface UserCardTooltipProps extends Omit<UserCardAttrs, 'user'> {
+    user?: UserCardUser | null | undefined;
+    children: ReactElement | readonly ReactElement[] | string;
+    dropdownProps: Partial<DropdownAttrs>;
+    renderUserCard: (props: UserCardTooltipProps) => ReactNode;
+    renderNoUser: () => ReactNode;
+}
+export default class UserCardTooltip extends Component<UserCardTooltipProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        dropdownProps: PropTypes.Requireable<object>;
+        user: PropTypes.Requireable<object>;
+        renderUserCard: PropTypes.Requireable<(...args: any[]) => any>;
+        renderNoUser: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        renderUserCard: (props: UserCardTooltipProps) => JSX.Element | null | undefined;
+        renderNoUser: () => string;
+        dropdownProps: {
+            hoverShowTimeOut: number;
+            hoverHideTimeOut: number;
+        };
+    };
+    render(): JSX.Element;
+}
+export declare type UserCardTooltipAttrs = JSX.LibraryManagedAttributes<typeof UserCardTooltip, UserCardTooltipProps>;

package/dist/user-card/tooltip.js

@@ -6,6 +6,7 @@ import Dropdown from '../dropdown/dropdown.js';
 import Popup from '../popup/popup.js';
 import { U as UserCard, m as modules_a4196c17 } from '../_helpers/card.js';
 import '../global/data-tests.js';
+import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
@@ -16,8 +17,8 @@ import '../icon/icon__svg.js';
 import '../global/memoize.js';
 import '../button/button.js';
 import 'focus-visible';
-import '../global/theme.js';
 import '../link/clickableLink.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import 'react-dom';
 import '../global/get-uid.js';
@@ -77,9 +78,12 @@ _defineProperty(UserCardTooltip, "defaultProps", {
       renderUserCard,
       renderNoUser,
       dropdownProps,
+      user,
       ...restProps
     } = props;
-    return /*#__PURE__*/React.createElement(UserCard, _extends({}, restProps, {
+    return user && /*#__PURE__*/React.createElement(UserCard, _extends({
+      user: user
+    }, restProps, {
       className: classNames(modules_a4196c17.userCardSpaced, className)
     }));
   },

package/dist/user-card/user-card.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @name User Card
+ * @category Components
+ * @tags Ring UI Language
+ * @framework React
+ * @constructor
+ * @description A component that displays user details.
+ */
+export { default as UserCard } from './card';
+export { default as UserCardTooltip } from './tooltip';
+export { default as SmartUserCardTooltip } from './smart-user-card-tooltip';

package/dist/user-card/user-card.js

@@ -18,6 +18,7 @@ import '../link/clickableLink.js';
 import '../_helpers/link.js';
 import '../_helpers/badge.js';
 import '../dropdown/dropdown.js';
+import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
@@ -26,7 +27,7 @@ import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
 import '../button/button.js';
-import '../global/theme.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../popup/popup.js';
 import 'react-dom';
@@ -41,9 +42,4 @@ import '../popup/position.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import '../loader-inline/loader-inline.js';
-import '../_helpers/inject-styles.js';
-import '../global/conic-gradient.js';
-import 'conic-gradient';
-import '../global/supports-css.js';
-import '../global/inject-styles.js';
-import '../global/radial-gradient-mask.js';
+import '../_helpers/loader-inline.js';

package/dist/user-card-ng/user-card-ng.js

@@ -10,27 +10,22 @@ import '../global/react-dom-renderer.js';
 import 'prop-types';
 import '../loader-inline/loader-inline.js';
 import 'classnames';
-import '../global/theme.js';
 import '../global/data-tests.js';
-import '../_helpers/inject-styles.js';
-import '../global/conic-gradient.js';
-import 'conic-gradient';
-import '../global/memoize.js';
-import '../global/supports-css.js';
-import '../global/inject-styles.js';
-import '../global/radial-gradient-mask.js';
-import '../global/get-uid.js';
+import '../_helpers/loader-inline.js';
 import '../_helpers/card.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import '../global/dom.js';
 import '../avatar/fallback-avatar.js';
+import '../global/get-uid.js';
 import '../link/link.js';
 import 'focus-visible';
+import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';
 import '../_helpers/badge.js';
 import '../dropdown/dropdown.js';
+import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
@@ -39,6 +34,7 @@ import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
 import '../button/button.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../popup/popup.js';
 import '../global/schedule-raf.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.1.12",
+  "version": "5.0.0-beta.11",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -10,11 +10,12 @@
     "dist",
     "postcss.config.js",
     "webpack.config.js",
-    "jslint-xml.js"
+    "jslint-xml.js",
+    "typings.d.ts"
   ],
-  "main": "components/index.js",
+  "main": "src/index.js",
   "lint-staged": {
-    "*.js": [
+    "*.{js,ts,tsx}": [
       "npm run lint:js -- --fix"
     ],
     "*.css": [
@@ -29,24 +30,22 @@
   "scripts": {
     "_postinstall": "husky install",
     "bootstrap": "lerna bootstrap",
-    "component:ng": "yo @jetbrains/ring-ui:ng --path $npm_package_config_components",
-    "component:react": "yo @jetbrains/ring-ui:react --path $npm_package_config_components",
-    "component:es6": "yo @jetbrains/ring-ui:es6 --path $npm_package_config_components",
     "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",
     "console-errors-ci": "jest console-errors.test.js --reporters=jest-teamcity",
     "test": "karma start",
-    "test-generator-e2e": "npm --prefix packages/generator test",
     "hermione-gui": "npm --prefix packages/hermione run gui",
     "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": "build-storybook --quiet -c .storybook -o storybook-dist",
+    "build-examples": "./node_modules/@storybook/html/bin/build.js --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",
+    "postbuild": "cpy '**/*.d.ts' ../dist --parents --cwd=components/",
     "serve": "npm --prefix packages/hermione run serve",
-    "start": "start-storybook -p 9999",
-    "storybook-debug": "node --inspect-brk node_modules/.bin/start-storybook -p 9999",
+    "start": "./node_modules/@storybook/html/bin/index.js -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",
     "prelint-ci": "echo \"##teamcity[importData type='jslint' path='eslint-report.xml']\"",
@@ -56,6 +55,8 @@
     "pretest-ci": "npm run lint-ci",
     "test-ci": "karma start karma-ci.conf.js",
     "test-watch": "karma start karma-watch.conf.js",
+    "typecheck": "tsc",
+    "typecheck-ci": "node tsc-teamcity",
     "prerelease-ci": "git pull",
     "release-ci": "lerna publish --no-verify-access --yes",
     "prepublishOnly": "pinst --disable",
@@ -67,31 +68,41 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/eslint-parser": "^7.16.5",
+    "@babel/cli": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
     "@jetbrains/eslint-config": "^5.3.1",
-    "@jetbrains/generator-ring-ui": "^4.1.4",
     "@jetbrains/stylelint-config": "^3.0.2",
-    "@primer/octicons": "^16.2.0",
+    "@primer/octicons": "^16.1.1",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-replace": "^3.0.1",
-    "@storybook/addon-a11y": "6.4.12",
-    "@storybook/addon-docs": "6.4.10",
-    "@storybook/addon-essentials": "6.4.12",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-replace": "^3.0.0",
+    "@storybook/addon-a11y": "6.4.8",
+    "@storybook/addon-docs": "6.4.9",
+    "@storybook/addon-essentials": "6.4.8",
     "@storybook/addon-storyshots": "6.4.3",
     "@storybook/addon-storyshots-puppeteer": "6.4.3",
-    "@storybook/addon-storysource": "6.4.9",
+    "@storybook/addon-storysource": "6.4.3",
     "@storybook/addons": "6.4.9",
-    "@storybook/builder-webpack5": "6.4.10",
-    "@storybook/client-api": "6.4.12",
+    "@storybook/builder-webpack5": "6.4.8",
+    "@storybook/client-api": "6.4.8",
     "@storybook/core": "6.4.9",
-    "@storybook/html": "6.4.10",
-    "@storybook/manager-webpack5": "^6.4.10",
-    "@storybook/source-loader": "6.4.10",
-    "@storybook/theming": "6.4.12",
+    "@storybook/html": "6.4.9",
+    "@storybook/manager-webpack5": "^6.4.9",
+    "@storybook/react": "^6.3.9",
+    "@storybook/source-loader": "6.4.9",
+    "@storybook/theming": "6.4.9",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
+    "@types/chai": "^4.2.21",
+    "@types/chai-as-promised": "^7.1.4",
+    "@types/chai-dom": "0.0.10",
+    "@types/chai-enzyme": "^0.6.8",
+    "@types/enzyme": "^3.10.10",
+    "@types/sinon": "^10.0.2",
+    "@types/sinon-chai": "^3.2.5",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
     "angular": "^1.8.2",
     "angular-mocks": "^1.8.2",
     "angular-route": "^1.8.2",
@@ -102,22 +113,23 @@
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^0.22.0",
-    "core-js": "^3.20.2",
+    "core-js": "^3.19.1",
+    "cpy-cli": "^3.1.1",
     "enzyme": "^3.11.0",
-    "eslint": "^8.6.0",
+    "eslint": "^8.3.0",
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-angular": "^4.1.0",
     "eslint-plugin-bdd": "^2.1.1",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "^7.27.1",
     "events": "^3.3.0",
     "glob": "^7.2.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^3.1.1",
-    "jest": "~27.4.7",
+    "jest": "~27.4.4",
     "jest-teamcity": "^1.10.0",
     "karma": "^6.3.9",
     "karma-chrome-launcher": "3.1.0",
@@ -126,7 +138,7 @@
     "karma-teamcity-reporter": "^2.0.0",
     "karma-webpack": "^5.0.0",
     "lerna": "^4.0.0",
-    "lint-staged": "^12.1.7",
+    "lint-staged": "^12.1.2",
     "merge-options": "^3.0.4",
     "mocha": "^9.1.3",
     "pinst": "^2.1.6",
@@ -136,18 +148,20 @@
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
-    "rollup": "^2.63.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.60.2",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-styles": "^3.14.1",
     "sinon": "^12.0.1",
     "sinon-chai": "^3.7.0",
     "storage-mock": "^2.1.0",
-    "stylelint": "^14.2.0",
+    "stylelint": "^14.1.0",
     "svg-inline-loader": "^0.8.2",
-    "teamcity-service-messages": "^0.1.12",
-    "terser-webpack-plugin": "^5.3.0",
+    "teamcity-service-messages": "^0.1.11",
+    "terser-webpack-plugin": "^5.2.5",
+    "typescript": "^4.5.2",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.65.0",
+    "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1",
     "xmlappend": "^1.0.4",
     "yo": "^4.3.0"
@@ -156,7 +170,7 @@
     "core-js": ">=3.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "webpack": "^5.65.0"
+    "webpack": "^5.64.4"
   },
   "peerDependenciesMeta": {
     "webpack": {
@@ -164,12 +178,22 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.16.7",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-typescript": "^7.14.5",
     "@jetbrains/angular-elastic": "^2.5.1",
     "@jetbrains/babel-preset-jetbrains": "^2.3.2",
     "@jetbrains/icons": "^3.18.0",
     "@jetbrains/logos": "^1.4.27",
     "@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.4",
+    "@types/react": "^17.0.21",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-virtualized": "^9.21.13",
+    "@types/util-deprecate": "^1.0.0",
     "@ungap/url-search-params": "^0.2.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-define": "^2.0.1",
@@ -178,40 +202,41 @@
     "classnames": "^2.3.1",
     "combokeys": "^3.0.1",
     "compile-code-loader": "^1.0.0",
-    "conic-gradient": "^1.0.0",
     "css-loader": "^6.5.1",
-    "date-fns": "^2.28.0",
+    "csstype": "^3.0.9",
+    "date-fns": "^2.27.0",
     "deep-equal": "^2.0.4",
-    "element-resize-detector": "^1.2.4",
+    "element-resize-detector": "^1.2.3",
     "es6-error": "^4.1.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "extricate-loader": "^3.0.0",
     "fastdom": "^1.0.10",
     "file-loader": "^6.2.0",
-    "focus-trap": "^6.7.2",
+    "focus-trap": "^6.7.1",
     "focus-visible": "^5.2.0",
     "highlight.js": "^10.7.2",
-    "html-loader": "^3.1.0",
+    "html-loader": "^3.0.1",
     "interpolate-loader": "^2.0.1",
     "just-debounce-it": "^3.0.1",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.4.5",
-    "postcss-calc": "^8.1.0",
+    "postcss": "^8.4.4",
+    "postcss-calc": "^8.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^6.2.1",
     "postcss-modules-values-replace": "^3.4.0",
-    "postcss-preset-env": "^7.2.0",
-    "prop-types": "^15.8.1",
-    "react-markdown": "^5.0.3",
+    "postcss-preset-env": "^7.0.1",
+    "prop-types": "^15.7.2",
+    "react-markdown": "^7.1.1",
     "react-movable": "^3.0.2",
     "react-virtualized": "^9.22.3",
     "react-waypoint": "^10.1.0",
     "remark-breaks": "^3.0.2",
-    "remark-gfm": "^1.0.0",
+    "remark-gfm": "^3.0.1",
     "scrollbar-width": "^3.1.1",
     "simply-uuid": "^1.0.1",
     "sniffr": "^1.2.0",
+    "storybook-zeplin": "^1.7.0",
     "style-inject": "^0.3.0",
     "style-loader": "~3.3.1",
     "url-loader": "^4.1.1",
@@ -221,5 +246,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "48dc9eeda100d347581148a0453ea2d8aa6b88e7"
+  "gitHead": "cb97bd70bd5c57f8564d61a33d49f1561ca54e1a"
 }

package/typings.d.ts

@@ -0,0 +1,97 @@
+declare module '*.css' {
+  const styles: Record<string, string>;
+  export default styles;
+}
+
+declare module '*.svg' {
+  const source: string;
+  export default source;
+}
+declare module '*.md' {
+  const source: string;
+  export default source;
+}
+declare module '*.txt' {
+  const source: string;
+  export default source;
+}
+
+declare module 'simply-uuid' {
+  export function generate(): string;
+}
+
+declare module 'highlight.js/lib/core.js' {
+  import hljs from 'highlight.js';
+
+  export default hljs;
+}
+
+declare module 'combokeys/test/lib/key-event' {
+  export function simulate(
+    charCode: number,
+    keyCode: number,
+    modifiers?: ('shift' | 'ctrl' | 'alt' | 'meta')[],
+    element?: Element,
+    repeat?: number
+  ): void;
+}
+
+declare module 'scrollbar-width' {
+  export default function getScrollbarWidth(
+    recalculate?: boolean
+  ): number | null;
+}
+
+declare module 'sniffr' {
+  enum Browser {
+    FIREFOX = 'firefox',
+    CHROME = 'chrome',
+    IE = 'ie',
+    SAFARI = 'safari',
+    EDGE = 'edge',
+    ANDROID = 'com.android.browser',
+    OPERA = 'opera',
+    OPERA_MINI = 'opera.mini',
+    BLACKBERRY = 'blackberry',
+    ICEWEASEL = 'iceweasel',
+  }
+
+  enum OS {
+    LINUX = 'linux',
+    MACOS = 'macos',
+    WINDOWS = 'windows',
+    IOS = 'ios',
+    OPENBSD = 'openbsd',
+    ANDROID = 'android',
+    FIREFOXOS = 'firefoxos',
+    WINDOWS_PHONE = 'windows.phone',
+    WINDOWS_MOBILE = 'windows.mobile',
+    BLACKBERRYOS = 'blackberryos',
+  }
+
+  enum Device {
+    IPAD = 'ipad',
+    IPHONE = 'iphone',
+    LUMIA = 'lumia',
+    HTC = 'htc',
+    NEXUS = 'nexus',
+    GALAXY_NEXUS = 'galaxy.nexus',
+    NOKIA = 'nokia',
+    GALAXY = 'galaxy',
+    XBOX = 'xbox',
+    BLACKBERRY = 'blackberry',
+  }
+
+  export interface SnifferProperty<T extends string> {
+    name: T | 'Unknown'
+    version: number[]
+    versionString: string
+  }
+
+  export default class Sniffer {
+    os: SnifferProperty<OS>;
+    device: SnifferProperty<Device>;
+    browser: SnifferProperty<Browser>;
+    sniff(userAgentString?: string): this
+  }
+}

package/webpack.config.js

@@ -1,16 +1,5 @@
 const path = require('path');
 
-const deprecate = require('util-deprecate');
-
-(function checkWebpack() {
-  const webpackVersion = require('webpack').version;
-  const isObsoleteWebpack = webpackVersion.startsWith('4');
-  if (isObsoleteWebpack) {
-    // TODO remove in 5.0
-    deprecate(() => null, `[WARN]: RingUI is used with Webpack@"${webpackVersion}". Ring UI requires Webpack@>=5`)();
-  }
-}());
-
 function loadersObjectToArray(loaders) {
   return Object.keys(loaders).map(name => loaders[name]);
 }
@@ -58,7 +47,7 @@ function createConfig() {
   };
 
   const babelLoader = {
-    test: /\.js$/,
+    test: /\.[jt]sx?$/,
     sideEffects: false,
     include: componentsPath,
     loader: require.resolve('babel-loader'),
@@ -86,6 +75,9 @@ function createConfig() {
     config: {
       module: {
         rules: loadersObjectToArray(loaders)
+      },
+      resolve: {
+        extensions: ['.js', '.ts', '.tsx']
       }
     },
     componentsPath,