@jetbrains/ring-ui 4.1.6 → 5.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.1.6",
+  "version": "5.0.0-beta.3",
   "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",
@@ -70,27 +71,37 @@
     "@babel/cli": "^7.16.0",
     "@babel/eslint-parser": "^7.16.3",
     "@jetbrains/eslint-config": "^5.3.1",
-    "@jetbrains/generator-ring-ui": "^4.1.2",
     "@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.4.8",
-    "@storybook/addon-docs": "6.4.4",
+    "@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.3",
-    "@storybook/addons": "6.4.8",
+    "@storybook/addons": "6.4.9",
     "@storybook/builder-webpack5": "6.4.8",
     "@storybook/client-api": "6.4.8",
     "@storybook/core": "6.4.9",
-    "@storybook/html": "6.4.5",
+    "@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",
+    "@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",
@@ -103,6 +114,7 @@
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^0.22.0",
     "core-js": "^3.19.1",
+    "cpy-cli": "^3.1.1",
     "enzyme": "^3.11.0",
     "eslint": "^8.3.0",
     "eslint-import-resolver-webpack": "^0.13.2",
@@ -117,7 +129,7 @@
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^3.1.1",
-    "jest": "~27.3.1",
+    "jest": "~27.4.4",
     "jest-teamcity": "^1.10.0",
     "karma": "^6.3.9",
     "karma-chrome-launcher": "3.1.0",
@@ -136,6 +148,7 @@
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
+    "rimraf": "^3.0.2",
     "rollup": "^2.60.2",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-styles": "^3.14.1",
@@ -146,6 +159,7 @@
     "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.4",
     "webpack-cli": "^4.9.1",
@@ -165,11 +179,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.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,6 +204,7 @@
     "compile-code-loader": "^1.0.0",
     "conic-gradient": "^1.0.0",
     "css-loader": "^6.5.1",
+    "csstype": "^3.0.9",
     "date-fns": "^2.27.0",
     "deep-equal": "^2.0.4",
     "element-resize-detector": "^1.2.3",
@@ -221,5 +246,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "3923861acd3a5c408e629b728100eaefa4b6aaa6"
+  "gitHead": "90ec989a2f0afb2778aa16172d5600790b56dd47"
 }

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.test.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import Alert from './alert';
-import styles from './alert.css';
-
-const TIMEOUT = 100;
-const TICK = 500;
-
-describe('Alert', () => {
-  it('should render text', () => {
-    render(<Alert type={Alert.Type.MESSAGE}>{'Test message'}</Alert>);
-    screen.getByText('Test message').should.exist;
-  });
-
-  it('should transfer className', () => {
-    render(<Alert className="foo"/>);
-    screen.getByTestId('alert').should.have.class('foo');
-  });
-
-  it('should render component', () => {
-    render(<Alert type={Alert.Type.MESSAGE}><div>{'foo'}</div></Alert>);
-    screen.getByText('foo').should.exist;
-  });
-
-  it('should render an error', () => {
-    render(<Alert type={Alert.Type.ERROR}>{'Test'}</Alert>);
-    screen.getByTestId('alert').should.have.class(styles.error);
-  });
-
-  it('should be closeable if by default', () => {
-    render(<Alert>{'Test element'}</Alert>);
-
-    screen.getByRole('button', {name: 'close alert'}).should.exist;
-  });
-
-  it('should be not closeable if defined', () => {
-    render(<Alert closeable={false}>{'Test element'}</Alert>);
-
-    should.not.exist(screen.queryByRole('button', {name: 'close alert'}));
-  });
-
-  it('should call onCloseRequest on click by close button', () => {
-    const closeSpy = sandbox.spy();
-    render(<Alert onCloseRequest={closeSpy}>{'Test element'}</Alert>);
-    const closeElement = screen.queryByRole('button', {name: 'close alert'});
-    userEvent.click(closeElement);
-    closeSpy.should.have.been.called;
-  });
-
-  it('should call onCloseRequest on timeout', () => {
-    const clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
-    const closeSpy = sandbox.spy();
-    render(<Alert timeout={TIMEOUT} onCloseRequest={closeSpy}>{'Test element'}</Alert>);
-
-    clock.tick(TICK);
-
-    closeSpy.should.have.been.called;
-  });
-});

package/components/alert/container.test.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-
-import Alert from './alert';
-import AlertContainer from './container';
-
-describe('Alert Container', () => {
-  it('should render alert container to body', () => {
-    render(<AlertContainer><Alert>{'Test'}</Alert></AlertContainer>);
-    screen.getByTestId('alert-container').should.exist;
-  });
-});

package/components/alert-service/alert-service.examples.js

@@ -1,91 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import styles from './alert-service.examples.css';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-import ButtonToolbar from '@jetbrains/ring-ui/components/button-toolbar/button-toolbar';
-
-import alert from '@jetbrains/ring-ui/components/alert-service/alert-service';
-
-export default {
-  title: 'Services/Alert Service',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Service for managing a stack of alerts.',
-    hermione: {skip: true}
-  }
-};
-
-export const alertService = () => {
-  const MSG_TIMEOUT = 5000;
-  const MSG_LONG_TIMEOUT = 30000;
-
-  class AlertServiceDemo extends React.Component {
-    componentDidMount() {
-      setTimeout(() => {
-        alert.message('A initial message', MSG_TIMEOUT);
-        alert.error('Error message');
-        this.showCustomMessage();
-      });
-    }
-
-    componentWillUnmount() {
-      alert._getShowingAlerts().forEach(item => alert.removeWithoutAnimation(item.key));
-    }
-
-    showCustomMessage = () => {
-      this.lastKey = alert.addAlert(
-        <div className={styles.customAlert}>
-          <h1>Hello!</h1>
-          <p>{'This is a custom message'}</p>
-        </div>,
-        null,
-        0,
-        {
-          className: styles.customAlert,
-          closeButtonClassName: styles.closeButton
-        }
-      );
-    };
-
-    showError = () => {
-      this.lastKey = alert.error('Something wrong happened');
-    };
-
-    showRandomWarning = () => {
-      this.lastKey = alert.warning(
-        `Warning! Something bad is going to happen (${Math.random()})`,
-        MSG_LONG_TIMEOUT
-      );
-    };
-
-    showMessage = () => {
-      this.lastKey = alert.message('This is just a message', MSG_TIMEOUT);
-    };
-
-    removeLastAlert = () => {
-      alert.remove(this.lastKey);
-    };
-
-    render() {
-      return (
-        <ButtonToolbar>
-          <Button onClick={this.showError}>Show error</Button>
-          <Button onClick={this.showMessage} primary>
-            Show message
-          </Button>
-          <Button onClick={this.showCustomMessage}>
-            Show custom message
-          </Button>
-          <Button onClick={this.showRandomWarning}>Show warning</Button>
-          <Button onClick={this.removeLastAlert}>Remove last alert</Button>
-        </ButtonToolbar>
-      );
-    }
-  }
-
-  return <AlertServiceDemo/>;
-};

package/components/alert-service/alert-service.test.js

@@ -1,88 +0,0 @@
-import Alert from '../alert/alert';
-
-import alert from './alert-service';
-
-const SMALL_TICK = 1000;
-const BIG_TICK = 2000;
-const ALERT_SHOW_TIME = 100;
-
-describe('Alert Service', () => {
-  let alertKey;
-  let clock;
-
-  beforeEach(() => {
-    clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
-  });
-
-  afterEach(() => {
-    alert.setDefaultTimeout(0);
-    alert.removeWithoutAnimation(alertKey);
-  });
-
-  it('Should show alert', () => {
-    alertKey = alert.message('foo');
-    const alertItem = alert._getShowingAlerts()[0];
-
-    alertItem.message.should.equal('foo');
-    alertItem.type.should.equal(Alert.Type.MESSAGE);
-    alertItem.timeout.should.equal(0);
-    alertItem.isClosing.should.be.false;
-  });
-
-  it('Should show message', () => {
-    alertKey = alert.message('foo');
-    alert._getShowingAlerts()[0].type.should.equal(Alert.Type.MESSAGE);
-  });
-
-  it('Should show error', () => {
-    alertKey = alert.error('foo');
-    alert._getShowingAlerts()[0].type.should.equal(Alert.Type.ERROR);
-  });
-
-  it('Should show warning', () => {
-    alertKey = alert.warning('foo');
-    alert._getShowingAlerts()[0].type.should.equal(Alert.Type.WARNING);
-  });
-
-  it('Should join same alerts and shake', () => {
-    alertKey = alert.message('foo');
-    alertKey = alert.message('foo');
-
-    alert._getShowingAlerts().length.should.equal(1);
-    alert._getShowingAlerts()[0].isShaking.should.be.true;
-  });
-
-  it('Should remove alert after timeout', () => {
-    alertKey = alert.message('foo', ALERT_SHOW_TIME);
-    clock.tick(SMALL_TICK);
-    alert._getShowingAlerts().length.should.equal(0);
-  });
-
-  it('Should remove alert after timeout', () => {
-    alertKey = alert.message('foo', ALERT_SHOW_TIME);
-    clock.tick(SMALL_TICK);
-    alert._getShowingAlerts().length.should.equal(0);
-  });
-
-  it('should remove alert without animation', () => {
-    alertKey = alert.message('foo');
-    alert.removeWithoutAnimation(alertKey);
-    alert._getShowingAlerts().length.should.equal(0);
-  });
-
-  it('should remove alert after animation', () => {
-    alertKey = alert.message('foo');
-    alert.remove(alertKey);
-    alert._getShowingAlerts().filter(it => it.key === alertKey)[0].isClosing.should.be.true;
-    clock.tick(SMALL_TICK);
-
-    alert._getShowingAlerts().length.should.equal(0);
-  });
-
-  it('should allow configuring default timeout', () => {
-    alert.setDefaultTimeout(SMALL_TICK);
-    alertKey = alert.message('foo');
-    clock.tick(BIG_TICK);
-    alert._getShowingAlerts().length.should.equal(0);
-  });
-});