feat: typescript infrastructure and few components conversion (#1797)

* feat: typescript * fix: prettier * fix: copy ts migrated .js.flow files to es so that parent projects get tricked * chore(avatar): typescript conversion * feat: typescript support for prettier and eslint BREAKING CHANGE: Peer deps have been updated and added. * chore: upgrading to new @box/frontend * fix: merge conflicts * fix: tsconfig should list its own path relative to this current project. See microsoft/TypeScript#25430
box · Jan 16, 2020 · d04ce54 · d04ce54
1 parent 8b553db
commit d04ce54
Show file tree

Hide file tree

Showing 75 changed files with 4,403 additions and 1,586 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,7 +5,6 @@ module.exports = {
     rules: {
         camelcase: 'off',
         'class-methods-use-this': 'off',
-        'formatjs/enforce-description': 'error', // fixme
         'jsx-a11y/label-has-associated-control': 'off',
         'import/no-extraneous-dependencies': 'off', // fixme
         'react/default-props-match-prop-types': 'off', // fixme
@@ -18,18 +17,24 @@ module.exports = {
         'react/no-access-state-in-setstate': 'off', // fixme
         'react/no-array-index-key': 'off', // fixme
         'react/no-this-in-sfc': 'off',
+        'import/no-unresolved': 'off', // fixme
     },
-    plugins: ['formatjs'],
     overrides: [
         {
-            files: ['*.test.js'],
+            files: ['*.test.js', '*.test.tsx'],
             globals: {
                 shallow: true,
                 mount: true,
                 takeModalScreenshot: true,
                 takeScreenshot: true,
                 takeScreenshotAfterInput: true,
             },
+        },
+        {
+            files: ['*.ts', '*.tsx'],
+            rules: {
+                '@typescript-eslint/explicit-function-return-type': 'off', // fixme
+            }
         }
     ]
 };
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -14,4 +14,4 @@ addParameters({
     },
 });
 
-configure([require.context('../src', true, /\.stories\.js$/)], module);
+configure([require.context('../src', true, /\.stories\.(js|tsx)$/)], module);
diff --git a/.storybook/typings.d.ts b/.storybook/typings.d.ts
@@ -0,0 +1,6 @@
+declare module '*.md' {
+    const content: string;
+    export = content;
+}
+
+declare function takeScreenshot(id: string): void;
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -6,16 +6,27 @@ const language = process.env.LANGUAGE;
 const webpackConfig = Array.isArray(webpackConf) ? webpackConf[0] : webpackConf;
 const locale = language ? language.substr(0, language.indexOf('-')) : 'en';
 
-module.exports = async ({ config, mode }) => {
+module.exports = async ({ config }) => {
     config.plugins = [...webpackConfig.plugins, ...config.plugins];
+    config.resolve.extensions = [...config.resolve.extensions, ...webpackConfig.resolve.extensions];
     config.resolve.alias = {
         ...config.resolve.alias,
         'react-intl-locale-data': path.resolve(`node_modules/react-intl/locale-data/${locale}`),
         'box-ui-elements-locale-data': path.resolve(`i18n/${language}`),
     };
-    config.module.rules.push({
-        test: /\.scss$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
-    });
+    config.module.rules.push(
+        {
+            test: /\.scss$/,
+            use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
+        },
+        {
+            test: /\.(ts|tsx)$/,
+            exclude: /node_modules/,
+            use: [
+                { loader: 'babel-loader' },
+                { loader: 'react-docgen-typescript-loader' }
+            ]
+        },
+    );
     return config;
 };
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,11 +1,10 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-    "typescript.validate.enable": false,
-    "typescript.format.enable": false,
     "flow.useNPMPackagedFlow": true,
     "flow.enabled": true,
     "javascript.validate.enable": false,
-    "prettier.printWidth": 120,
-    "prettier.tabWidth": 4,
-    "prettier.singleQuote": true
+    "typescript.validate.enable": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    }
 }
diff --git a/babel.config.js b/babel.config.js
@@ -9,6 +9,27 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-flow',
     ],
+    overrides: [
+        {
+            test: ['./src/**/*.ts', './src/**/*.tsx'],
+            presets: [
+                [
+                    '@babel/preset-env',
+                    {
+                        modules: false,
+                    },
+                ],
+                '@babel/preset-react',
+                [
+                    '@babel/preset-typescript',
+                    {
+                        isTSX: true,
+                        allExtensions: true,
+                    },
+                ],
+            ],
+        },
+    ],
     plugins: [
         '@babel/plugin-syntax-dynamic-import',
         '@babel/plugin-transform-flow-strip-types',

diff --git a/jest.config.js b/jest.config.js
@@ -11,10 +11,10 @@ module.exports = {
         '\\.(css|less|scss|md)$': '<rootDir>/scripts/jest/mocks/styleMock.js',
     },
     transformIgnorePatterns: ['node_modules/(?!(react-virtualized/dist/es))'],
-    testPathIgnorePatterns: ['/node_modules/', 'stories.test.js$'],
+    testPathIgnorePatterns: ['/node_modules/', 'stories.test.js$', 'stories.test.tsx$'],
     collectCoverage: false,
     coverageDirectory: '<rootDir>/reports',
-    collectCoverageFrom: ['src/**/*.js', '!**/node_modules/**', '!**/__tests__/**'],
+    collectCoverageFrom: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.js', '!**/node_modules/**', '!**/__tests__/**'],
     globalSetup: '<rootDir>/scripts/jest/env-setup.js',
     roots: ['src'],
     rootDir: path.join(__dirname),

diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "main": "es/index.js",
     "module": "es/index.js",
     "jsnext:main": "es/index.js",
+    "types": "es/types.d.ts",
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"
     },
@@ -42,28 +43,29 @@
         "build:ci:es": "yarn build:prod:es",
         "build:ci:dist": "LANGUAGE=en-US ENTRY=explorer REACT=true yarn build:prod:dist",
         "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development webpack --config scripts/webpack.config.js --mode development --progress --colors",
-        "build:dev:es": "BABEL_ENV=development NODE_ENV=development yarn build:es --copy-files --source-maps inline --watch --ignore \"**/__tests__/**,**/__mocks__/**\"",
-        "build:es": "babel src --out-dir es",
+        "build:dev:es": "BABEL_ENV=development NODE_ENV=development yarn build:es --copy-files --source-maps inline --watch --ignore \"**/*.d.ts,**/__tests__/**,**/__mocks__/**\"",
+        "build:es": "babel src --extensions '.js,.tsx,.ts' --out-dir es",
         "build:i18n": "props2es",
         "build:npm": "npm-run-all clean build:i18n build:prod:npm build:prod:es",
         "build:prod:analyze": "BUNDLE_ANALYSIS=true npm-run-all setup build:prod:npm",
-        "build:prod:es": "BABEL_ENV=npm NODE_ENV=production yarn build:es --source-maps --ignore \"**/__tests__/**,**/__mocks__/**\"",
+        "build:prod:es": "BABEL_ENV=npm NODE_ENV=production yarn build:es --source-maps --ignore \"**/*.d.ts,**/__tests__/**,**/__mocks__/**\"",
         "build:prod:dist": "NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
         "build:prod:examples": "LANGUAGE=en-US REACT=true NODE_ENV=production node --max_old_space_size=8192 node_modules/react-styleguidist/bin/styleguidist.js build --config scripts/styleguide.config.js --mode production",
         "build:prod:npm": "BABEL_ENV=production OUTPUT=dist LANGUAGE=en-US REACT=true yarn build:prod:dist",
         "build:prod:storybook": "LANGUAGE=en-US REACT=true BROWSERSLIST_ENV=production BABEL_ENV=development NODE_ENV=development build-storybook -c .storybook -o styleguide/storybook",
         "build:sync": "LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development RSYNC=true webpack --config scripts/webpack.config.js --mode development",
         "build:variables": "cat `find src/styles/constants -name '*.scss'` > src/styles/variables.scss | node ./scripts/build-style-vars.js src/styles/variables.scss && rm src/styles/variables.scss",
         "clean": "rm -rf dist es i18n/json i18n/*.js reports styleguide",
+        "copy:flow": "flow-copy-source --ignore \"**/__tests__/**\" --ignore \"**/__mocks__/**\" --ignore \"**/*.ts\" ./src ./es && copyfiles './src/**/*.js.flow' es --up 1",
         "copy:styles": "copyfiles './src/**/*.scss' es --up 1",
-        "copy:flow": "flow-copy-source --ignore \"**/__tests__/**\" --ignore \"**/__mocks__/**\" ./src ./es",
         "cy:open": "yarn cy:wait; yarn cypress open",
         "cy:run": "yarn cy:wait; yarn cypress run --spec \"test/integration/**/*.test.js\"",
         "cy:wait": "wait-on http-get://localhost:6060/#",
         "lint": "npm-run-all lint:*",
         "lint:js": "eslint --max-warnings=0 .",
+        "lint:ts": "tsc && eslint --ext=.tsx,.ts --max-warnings=0 .",
         "lint:css": "stylelint \"src/**/*.scss\" --syntax scss",
-        "prebuild:es": "npm-run-all build:variables copy:styles copy:flow",
+        "prebuild:es": "npm-run-all build:variables copy:styles ts:defs copy:flow",
         "release": "yarn release:beta",
         "release:beta": "DIST=beta BRANCH=master ./scripts/release.sh",
         "release:hotfix": "DIST=latest HOTFIX=true ./scripts/release.sh",
@@ -83,7 +85,8 @@
         "test:e2e": "BROWSERSLIST_ENV=test npm-run-all -p -r start:examples cy:run",
         "test:e2e:open": "BROWSERSLIST_ENV=test npm-run-all -p -r start:examples cy:open",
         "test:images": "yarn test -c scripts/jest/jest.config.js --maxWorkers=4",
-        "test:visuals": "start-server-and-test start:storybook:ci http-get://localhost:6061 test:images"
+        "test:visuals": "start-server-and-test start:storybook:ci http-get://localhost:6061 test:images",
+        "ts:defs": "tsc --declaration --emitDeclarationOnly --declarationDir es --noEmit false"
     },
     "browserslist": {
         "production": [
@@ -98,6 +101,8 @@
     },
     "lint-staged": {
         "*.js": ["eslint --fix", "git add"],
+        "*.ts": ["eslint --ext=.ts --fix", "git add"],
+        "*.tsx": ["eslint --ext=.tsx --fix", "git add"],
         "*.md": ["prettier --write --parser=markdown", "git add"],
         "*.json": ["prettier --write --parser=json", "git add"],
         "*.html": ["prettier --write --parser=html", "git add"],
@@ -116,36 +121,51 @@
         "yarn": ">=1.10.0"
     },
     "devDependencies": {
-        "@babel/cli": "^7.7.4",
-        "@babel/core": "^7.7.4",
-        "@babel/plugin-proposal-class-properties": "^7.7.4",
-        "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
-        "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-        "@babel/plugin-transform-flow-strip-types": "^7.7.4",
-        "@babel/plugin-transform-object-assign": "^7.7.4",
-        "@babel/polyfill": "^7.7.0",
-        "@babel/preset-env": "^7.7.4",
-        "@babel/preset-flow": "^7.7.4",
-        "@babel/preset-react": "^7.7.4",
-        "@babel/template": "^7.7.4",
-        "@babel/types": "^7.7.4",
-        "@box/frontend": "^5.1.3",
+        "@babel/cli": "^7.7.7",
+        "@babel/core": "^7.7.7",
+        "@babel/helper-create-class-features-plugin": "^7.8.0",
+        "@babel/plugin-proposal-class-properties": "^7.8.0",
+        "@babel/plugin-proposal-object-rest-spread": "^7.7.7",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-flow-strip-types": "^7.8.0",
+        "@babel/plugin-transform-object-assign": "^7.8.0",
+        "@babel/polyfill": "^7.8.0",
+        "@babel/preset-env": "^7.7.7",
+        "@babel/preset-flow": "^7.8.0",
+        "@babel/preset-react": "^7.8.0",
+        "@babel/preset-typescript": "^7.7.7",
+        "@babel/template": "^7.8.0",
+        "@babel/types": "^7.8.0",
+        "@box/frontend": "^6.0.0",
         "@box/languages": "^1.0.0",
         "@commitlint/cli": "^8.2.0",
         "@commitlint/config-conventional": "^8.2.0",
         "@commitlint/travis-cli": "^8.2.0",
         "@hapi/address": "^2.0.0",
         "@sambego/storybook-state": "^1.3.6",
-        "@storybook/addon-actions": "^5.2.6",
-        "@storybook/addon-docs": "^5.2.6",
-        "@storybook/addon-info": "^5.2.6",
-        "@storybook/addon-knobs": "^5.2.6",
-        "@storybook/addon-links": "^5.2.6",
-        "@storybook/addon-notes": "^5.2.6",
-        "@storybook/addon-storyshots": "^5.2.6",
-        "@storybook/addon-viewport": "^5.2.6",
-        "@storybook/addons": "^5.2.6",
-        "@storybook/react": "^5.2.6",
+        "@storybook/addon-actions": "^5.2.8",
+        "@storybook/addon-docs": "^5.2.8",
+        "@storybook/addon-info": "^5.2.8",
+        "@storybook/addon-knobs": "^5.2.8",
+        "@storybook/addon-links": "^5.2.8",
+        "@storybook/addon-notes": "^5.2.8",
+        "@storybook/addon-storyshots": "^5.2.8",
+        "@storybook/addon-viewport": "^5.2.8",
+        "@storybook/addons": "^5.2.8",
+        "@storybook/preset-typescript": "^1.1.0",
+        "@storybook/react": "^5.2.8",
+        "@types/classnames": "^2.2.9",
+        "@types/enzyme": "^3.10.4",
+        "@types/jest": "^24.0.24",
+        "@types/jest-image-snapshot": "^2.11.0",
+        "@types/lodash": "^4.14.149",
+        "@types/node": "^13.1.6",
+        "@types/react": "^16.9.17",
+        "@types/react-dom": "^16.9.4",
+        "@types/sinon": "^7.5.1",
+        "@types/webpack": "^4.41.0",
+        "@typescript-eslint/eslint-plugin": "^2.12.0",
+        "@typescript-eslint/parser": "^2.12.0",
         "autoprefixer": "^9.7.2",
         "axios": "0.18.1",
         "babel-core": "^7.0.0-bridge.0",
@@ -154,10 +174,10 @@
         "babel-loader": "^8.0.6",
         "babel-plugin-dynamic-import-node": "^2.3.0",
         "babel-plugin-flow-react-proptypes": "^25.1.0",
-        "babel-plugin-react-intl": "^5.1.7",
+        "babel-plugin-react-intl": "^5.1.16",
         "babel-plugin-react-remove-properties": "^0.3.0",
         "babel-plugin-rewire": "^1.0.0",
-        "babel-preset-react-app": "^9.0.2",
+        "babel-preset-react-app": "^9.1.0",
         "circular-dependency-plugin": "^5.2.0",
         "classnames": "^2.2.6",
         "color": "^3.0.0",
@@ -175,20 +195,20 @@
         "enzyme": "3.10.0",
         "enzyme-adapter-react-16": "^1.15.1",
         "enzyme-to-json": "^3.4.3",
-        "eslint": "^6.7.1",
+        "eslint": "^6.7.2",
         "eslint-config-airbnb": "^18.0.1",
-        "eslint-config-prettier": "^6.7.0",
+        "eslint-config-prettier": "^6.9.0",
         "eslint-plugin-babel": "^5.3.0",
         "eslint-plugin-cypress": "^2.8.1",
-        "eslint-plugin-flowtype": "^4.5.2",
-        "eslint-plugin-formatjs": "^1.5.0",
-        "eslint-plugin-import": "^2.18.2",
-        "eslint-plugin-jest": "^23.0.4",
+        "eslint-plugin-flowtype": "^4.6.0",
+        "eslint-plugin-formatjs": "^1.5.4",
+        "eslint-plugin-import": "^2.19.1",
+        "eslint-plugin-jest": "^23.1.1",
         "eslint-plugin-jsx-a11y": "^6.2.3",
         "eslint-plugin-lodash": "^6.0.0",
-        "eslint-plugin-prettier": "^3.1.1",
-        "eslint-plugin-react": "^7.16.0",
-        "eslint-plugin-react-hooks": "^1.7.0",
+        "eslint-plugin-prettier": "^3.1.2",
+        "eslint-plugin-react": "^7.17.0",
+        "eslint-plugin-react-hooks": "^2.3.0",
         "filesize": "^4.1.2",
         "flow-bin": "^0.95.1",
         "flow-copy-source": "^2.0.9",
@@ -205,7 +225,7 @@
         "jest-puppeteer": "^4.3.0",
         "jsuri": "^1.3.1",
         "leche": "^2.3.0",
-        "lint-staged": "^9.4.3",
+        "lint-staged": "^9.5.0",
         "lodash": "^4.17.15",
         "message-accumulator": "^2.1.1",
         "mini-css-extract-plugin": "^0.8.0",
@@ -229,6 +249,8 @@
         "react": "^16.9.0",
         "react-animate-height": "^2.0.8",
         "react-beautiful-dnd": "^9.0.2",
+        "react-docgen-typescript": "^1.16.1",
+        "react-docgen-typescript-loader": "^3.6.0",
         "react-dom": "^16.9.0",
         "react-draggable": "^3.3.0",
         "react-immutable-proptypes": "^2.1.0",
@@ -250,13 +272,16 @@
         "semantic-release": "^16.0.0-beta.36",
         "sinon": "^2.3.7",
         "start-server-and-test": "^1.10.6",
+        "storybook": "^5.1.11",
         "string-replace-loader": "^2.2.0",
         "style-loader": "^1.0.0",
         "stylelint": "^12.0.0",
         "stylelint-config-rational-order": "^0.1.2",
         "stylelint-config-standard": "^19.0.0",
         "stylelint-order": "^3.1.1",
         "tabbable": "^1.1.3",
+        "ts-loader": "^6.2.1",
+        "typescript": "^3.7.3",
         "uuid": "^3.3.2",
         "wait-on": "^3.3.0",
         "webpack": "^4.41.2",

diff --git a/scripts/build-style-vars.js b/scripts/build-style-vars.js
@@ -3,13 +3,15 @@ const { promisify } = require('util');
 const { parse } = require('sass-variable-parser');
 const camelCase = require('lodash/camelCase');
 const isEqual = require('lodash/isEqual');
+const { execSync } = require('child_process');
 
 const readFile = promisify(fs.readFile);
 const writeFile = promisify(fs.writeFile);
 
 const inputFile = process.argv[2];
 const moduleName = inputFile.split('.scss')[0];
 const outputJs = process.argv[3] || `${moduleName}.js`;
+const outputTs = process.argv[3] || `${moduleName}.ts`;
 const outputJson = process.argv[4] || `${moduleName}.json`;
 
 const moduleHeader = `
@@ -19,6 +21,9 @@ const moduleHeader = `
 
 `;
 
+const moduleTSHeader = `/* File auto-generated */
+`;
+
 async function main() {
     const scssData = await readFile(inputFile, { encoding: 'utf8' });
     const jsData = parse(scssData, {
@@ -48,7 +53,9 @@ async function main() {
     }
 
     if (!isEqual(priorJson, newJson)) {
-        await writeFile(outputJs, `${moduleHeader}${moduleString}`);
+        await writeFile(outputJs, `${moduleHeader}${moduleString}`); // deprecate eventually
+        await writeFile(outputTs, `${moduleTSHeader}${moduleString}`);
+        execSync(`yarn eslint --fix ${outputTs}`);
         await writeFile(outputJson, jsonString);
     }
 }

diff --git a/scripts/jest/jest.config.js b/scripts/jest/jest.config.js
@@ -11,7 +11,7 @@ module.exports = {
     },
     transformIgnorePatterns: ['node_modules/(?!(react-virtualized/dist/es))'],
     preset: 'jest-puppeteer',
-    testRegex: '(.*)?__tests__\\/.*\\.stories\\.test\\.js$',
+    testRegex: '(.*)?__tests__\\/.*\\.stories\\.test\\.(js|tsx)$',
     setupFilesAfterEnv: [
         '<rootDir>/node_modules/regenerator-runtime/runtime.js',
         '<rootDir>/scripts/jest/visual-adapter.js',
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,4 +14,4 @@ addParameters({ @@
         },
     });
-    configure([require.context('../src', true, /\.stories\.js$/)], module);
+    configure([require.context('../src', true, /\.stories\.(js|tsx)$/)], module);