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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.1.3",
+  "version": "5.0.0-beta.0",
   "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",
   "lint-staged": {
-    "*.js": [
+    "*.{js,ts,tsx}": [
       "npm run lint:js -- --fix"
     ],
     "*.css": [
@@ -29,9 +30,6 @@
   "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",
@@ -42,11 +40,11 @@
     "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",
     "build": "./node_modules/.bin/rollup -c",
     "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 +54,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",
@@ -70,27 +70,38 @@
     "@babel/cli": "^7.16.0",
     "@babel/eslint-parser": "^7.16.3",
     "@jetbrains/eslint-config": "^5.3.1",
-    "@jetbrains/generator-ring-ui": "^4.1.1",
     "@jetbrains/stylelint-config": "^3.0.2",
     "@primer/octicons": "^16.1.1",
     "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-replace": "^3.0.0",
-    "@storybook/addon-a11y": "6.3.12",
-    "@storybook/addon-docs": "6.3.12",
-    "@storybook/addon-essentials": "6.3.12",
-    "@storybook/addon-storyshots": "6.3.2",
-    "@storybook/addon-storyshots-puppeteer": "6.3.2",
-    "@storybook/addon-storysource": "6.3.12",
-    "@storybook/addons": "6.3.12",
-    "@storybook/builder-webpack5": "6.3.12",
-    "@storybook/client-api": "6.3.12",
-    "@storybook/core": "6.3.12",
-    "@storybook/html": "6.3.12",
-    "@storybook/manager-webpack5": "^6.3.12",
-    "@storybook/source-loader": "6.3.12",
-    "@storybook/theming": "6.3.12",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@storybook/addon-a11y": "6.4.4",
+    "@storybook/addon-docs": "6.4.4",
+    "@storybook/addon-essentials": "6.4.3",
+    "@storybook/addon-storyshots": "6.4.3",
+    "@storybook/addon-storyshots-puppeteer": "6.4.3",
+    "@storybook/addon-storysource": "6.4.3",
+    "@storybook/addons": "6.4.3",
+    "@storybook/builder-webpack5": "6.4.4",
+    "@storybook/client-api": "6.4.3",
+    "@storybook/core": "6.4.4",
+    "@storybook/html": "6.4.3",
+    "@storybook/manager-webpack5": "^6.4.3",
+    "@storybook/react": "^6.3.9",
+    "@storybook/source-loader": "6.4.3",
+    "@storybook/theming": "6.4.3",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "@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",
@@ -136,7 +147,7 @@
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
-    "rollup": "^2.60.0",
+    "rollup": "^2.60.2",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-styles": "^3.14.1",
     "sinon": "^12.0.1",
@@ -146,8 +157,9 @@
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.11",
     "terser-webpack-plugin": "^5.2.5",
+    "typescript": "^4.5.2",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.64.2",
+    "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1",
     "xmlappend": "^1.0.4",
     "yo": "^4.3.0"
@@ -156,7 +168,7 @@
     "core-js": ">=3.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "webpack": "^5.64.2"
+    "webpack": "^5.64.4"
   },
   "peerDependenciesMeta": {
     "webpack": {
@@ -165,11 +177,21 @@
   },
   "dependencies": {
     "@babel/core": "^7.16.0",
+    "@babel/preset-typescript": "^7.14.5",
     "@jetbrains/angular-elastic": "^2.5.1",
-    "@jetbrains/babel-preset-jetbrains": "^2.3.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",
@@ -180,7 +202,8 @@
     "compile-code-loader": "^1.0.0",
     "conic-gradient": "^1.0.0",
     "css-loader": "^6.5.1",
-    "date-fns": "^2.26.0",
+    "csstype": "^3.0.9",
+    "date-fns": "^2.27.0",
     "deep-equal": "^2.0.4",
     "element-resize-detector": "^1.2.3",
     "es6-error": "^4.1.1",
@@ -195,11 +218,11 @@
     "interpolate-loader": "^2.0.1",
     "just-debounce-it": "^3.0.1",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.3.11",
+    "postcss": "^8.4.3",
     "postcss-calc": "^8.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
-    "postcss-loader": "^6.2.0",
+    "postcss-loader": "^6.2.1",
     "postcss-modules-values-replace": "^3.4.0",
     "postcss-preset-env": "^7.0.1",
     "prop-types": "^15.7.2",
@@ -221,5 +244,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "f7d26ba7ed53f2fec85b136faccfa7276d069445"
+  "gitHead": "08abb2a13a217fb94a73d687bf1361dcaab9691d"
 }

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

@@ -58,7 +58,7 @@ function createConfig() {
   };
 
   const babelLoader = {
-    test: /\.js$/,
+    test: /\.[jt]sx?$/,
     sideEffects: false,
     include: componentsPath,
     loader: require.resolve('babel-loader'),
@@ -86,6 +86,9 @@ function createConfig() {
     config: {
       module: {
         rules: loadersObjectToArray(loaders)
+      },
+      resolve: {
+        extensions: ['.js', '.ts', '.tsx']
       }
     },
     componentsPath,

package/components/alert/alert.examples.js

@@ -1,143 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Link from '@jetbrains/ring-ui/components/link/link';
-import Button from '@jetbrains/ring-ui/components/button/button';
-import Alert, {Container} from '@jetbrains/ring-ui/components/alert/alert';
-
-export default {
-  title: 'Components/Alert',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: Alert,
-    framework: 'react'
-  }
-};
-
-export const simple = () => {
-  class AlertDemo extends React.Component {
-    state = {
-      show: true,
-      isClosing: false
-    };
-
-    onClose = () => {
-      this.setState({show: false});
-    };
-
-    onCloseRequest = () => {
-      this.setState({isClosing: true});
-    };
-
-    render() {
-      const {show, isClosing} = this.state;
-      if (!show) {
-        return null;
-      }
-
-      return (
-        <Alert
-          type={Alert.Type.SUCCESS}
-          onClose={this.onClose}
-          showWithAnimation={false}
-          onCloseRequest={this.onCloseRequest}
-          isClosing={isClosing}
-        >
-          Sample alert <Link>with link</Link>
-        </Alert>
-      );
-    }
-  }
-
-  return <AlertDemo/>;
-};
-
-simple.storyName = 'simple';
-
-export const alertContainer = () => {
-  class AlertContainerDemo extends React.Component {
-    state = {
-      alerts: [
-        {type: Alert.Type.ERROR, key: 0, message: 'Test error', isClosing: false},
-        {type: Alert.Type.WARNING, key: 1, message: 'Test warning', isClosing: false},
-        {type: Alert.Type.LOADING, key: 2, message: 'Test loading', isClosing: false},
-        {type: Alert.Type.MESSAGE, key: 3, message: 'Test message', isClosing: false},
-        {
-          type: Alert.Type.MESSAGE,
-          key: 4,
-          message: (
-            <span>
-              Message <Link href="#">with link</Link>
-            </span>
-          ),
-          isClosing: false
-        }
-      ]
-    };
-
-    yetAnotherMessage = () => {
-      this.setState(prevState => ({
-        ...prevState,
-        alerts: [
-          {
-            type: Alert.Type.MESSAGE,
-            key: Date.now(),
-            message: `Another message at ${new Date()}`
-          },
-          ...prevState.alerts
-        ]
-      }));
-    };
-
-    onCloseAlert = closedAlert => {
-      this.setState(prevState => ({
-        ...prevState,
-        alerts: prevState.alerts.filter(alert => alert !== closedAlert)
-      }));
-    };
-
-    onCloseAlertClick = alert => {
-      const alertToClose = this.state.alerts.filter(it => alert.key === it.key)[0];
-      alertToClose.isClosing = true;
-      this.setState(prevState => ({
-        ...prevState,
-        alerts: [...prevState.alerts]
-      }));
-    };
-
-    render() {
-      return (
-        <div>
-          <Button onClick={this.yetAnotherMessage}>Create another message</Button>
-
-          <Container>
-            {this.state.alerts.map(alert => {
-              const {message, key, ...rest} = alert;
-              return (
-                <Alert
-                  key={key}
-                  {...rest}
-                  onCloseRequest={() => this.onCloseAlertClick(alert)}
-                  onClose={() => this.onCloseAlert(alert)}
-                >
-                  {message}
-                </Alert>
-              );
-            })}
-          </Container>
-        </div>
-      );
-    }
-  }
-
-  return <AlertContainerDemo/>;
-};
-
-alertContainer.parameters = {
-  hermione: {
-    captureSelector: '*[data-test="alert-container"]'
-  },
-  a11y: {element: '*[data-test="alert-container"]'}
-};

package/components/alert/alert.js

@@ -1,242 +0,0 @@
-import React, {PureComponent} from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import exceptionIcon from '@jetbrains/icons/exception';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
-import warningIcon from '@jetbrains/icons/warning';
-import closeIcon from '@jetbrains/icons/close';
-
-import Icon from '../icon/icon';
-import Loader from '../loader-inline/loader-inline';
-import {getRect} from '../global/dom';
-import dataTests from '../global/data-tests';
-
-import styles from './alert.css';
-
-export const ANIMATION_TIME = 500;
-
-/**
- * @name Alert
- */
-
-/**
- * List of available alert types.
- * @enum {string}
- */
-const Type = {
-  ERROR: 'error',
-  MESSAGE: 'message',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  LOADING: 'loading'
-};
-
-/**
- * Lookup table of alert type to icon modifier.
- * @type {Object.<Type, string>}
- */
-const TypeToIcon = {
-  [Type.ERROR]: exceptionIcon,
-  [Type.SUCCESS]: checkmarkIcon,
-  [Type.WARNING]: warningIcon
-};
-
-/**
- * Lookup table of alert type to icon color.
- * @type {Object.<Type, Icon.Color>}
- */
-const TypeToIconColor = {
-  [Type.ERROR]: Icon.Color.RED,
-  [Type.SUCCESS]: Icon.Color.GREEN,
-  [Type.WARNING]: Icon.Color.WHITE
-};
-
-/**
- * @constructor
- * @name Alert
- * @extends {ReactComponent}
- */
-/**
- * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
- */
-export default class Alert extends PureComponent {
-  static propTypes = {
-    timeout: PropTypes.number,
-    /**
-     * Fires when alert starts closing if timeout is out or user clicks "Close" button
-     */
-    onCloseRequest: PropTypes.func,
-    onClose: PropTypes.func,
-    isShaking: PropTypes.bool,
-    isClosing: PropTypes.bool,
-    /**
-     * Whether an alert is rendered inside an **Alerts** container
-     * or standalone.
-     */
-    inline: PropTypes.bool,
-    showWithAnimation: PropTypes.bool,
-    closeable: PropTypes.bool,
-    type: PropTypes.oneOf(Object.values(Type)),
-
-    children: PropTypes.node,
-    className: PropTypes.string,
-    captionClassName: PropTypes.string,
-    closeButtonClassName: PropTypes.string,
-    'data-test': PropTypes.string
-  };
-
-  /** @override */
-  static defaultProps = {
-    closeable: true,
-    showWithAnimation: true,
-    type: Type.MESSAGE,
-    inline: true,
-    isClosing: false,
-    isShaking: false,
-    timeout: 0,
-    onClose: () => {},
-    onCloseRequest: () => {}
-  };
-
-  state = {
-    height: null
-  };
-
-  componentDidMount() {
-    if (this.props.timeout > 0) {
-      this.hideTimeout = setTimeout(this.closeRequest, this.props.timeout);
-    }
-  }
-
-  componentDidUpdate() {
-    if (this.props.isClosing) {
-      this._close();
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.hideTimeout);
-  }
-
-  static Type = Type;
-
-  closeRequest = (...args) => {
-    this.startCloseAnimation();
-    return this.props.onCloseRequest(...args);
-  };
-
-  startCloseAnimation = () => {
-    const height = getRect(this.node).height;
-    this.setState({height});
-  };
-
-  _close() {
-    this.startCloseAnimation();
-    setTimeout(() => {
-      this.props.onClose();
-    }, ANIMATION_TIME);
-  }
-
-  /**
-   * @param {SyntheticEvent} evt
-   * @private
-   */
-  _handleCaptionsLinksClick = evt => {
-    if (evt.target.matches('a')) {
-      this.closeRequest(evt);
-    }
-  };
-
-  /**
-   * @private
-   */
-  _getCaption() {
-    return (
-      <span
-        className={classNames(styles.caption, this.props.captionClassName, {
-          [styles.withCloseButton]: this.props.closeable
-        })}
-        onClick={this._handleCaptionsLinksClick}
-        // We only process clicks on `a` elements, see above
-        role="presentation"
-      >
-        {this.props.children}
-      </span>
-    );
-  }
-
-  /**
-   * @private
-   * @return {XML|string}
-   */
-  _getIcon() {
-    const glyph = TypeToIcon[this.props.type];
-
-    if (glyph) {
-      return (
-        <Icon
-          glyph={glyph}
-          className={styles.icon}
-          color={TypeToIconColor[this.props.type] || Icon.Color.DEFAULT}
-        />
-      );
-    } else if (this.props.type === Type.LOADING) {
-      return (
-        <Loader className={styles.loader} theme={Loader.Theme.DARK}/>
-      );
-    }
-
-    return '';
-  }
-
-  storeAlertRef = node => {
-    this.node = node;
-  };
-
-  render() {
-    const {type, inline, isClosing, isShaking, closeButtonClassName,
-      showWithAnimation, className, 'data-test': dataTest} = this.props;
-
-    const classes = classNames(className, {
-      [styles.alert]: true,
-      [styles.animationOpen]: showWithAnimation,
-      [styles.error]: type === 'error',
-      [styles.alertInline]: inline,
-      [styles.animationClosing]: isClosing,
-      [styles.animationShaking]: isShaking
-    });
-
-    const style = this.state.height ? {marginBottom: -this.state.height} : null;
-
-    return (
-      <div
-        className={classes}
-        data-test={dataTests('alert', dataTest)}
-        data-test-type={type}
-        style={style}
-        ref={this.storeAlertRef}
-      >
-        {this._getIcon()}
-        {this._getCaption()}
-        {
-          this.props.closeable
-            ? (
-              <button
-                type="button"
-                className={classNames(styles.close, closeButtonClassName)}
-                data-test="alert-close"
-                aria-label="close alert"
-                onClick={this.closeRequest}
-              >
-                <Icon glyph={closeIcon}/>
-              </button>
-            )
-            : ''
-        }
-      </div>
-    );
-  }
-}
-
-export {default as Container} from './container';