Port over minimal TS configs, deps and port Pane (#1590)

Author: brandongregoryscott

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
   "plugins": [
     "@babel/plugin-transform-runtime",
     "@babel/plugin-proposal-class-properties",

.eslintignore

@@ -2,4 +2,4 @@ docs/**/*.tsx
 docs/**/*.ts
 docs/**/*.js
 tools/**/*
-codemods/**/*
+codemods/**/*

.eslintrc.json

@@ -1,9 +1,17 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
   "env": {
-    "browser": true
+    "browser": true,
+    "jest": true
   },
-  "extends": ["plugin:react/recommended", "plugin:react-hooks/recommended", "standard", "prettier", "prettier/react"],
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "standard",
+    "prettier",
+    "prettier/react",
+    "plugin:@typescript-eslint/eslint-recommended"
+  ],
   "settings": {
     "react": {
       "version": "detect"
@@ -14,12 +22,14 @@
       "jsx": true
     },
     "ecmaVersion": 2015,
+    "project": "tsconfig.json",
     "sourceType": "module"
   },
-  "plugins": ["react", "react-hooks", "sort-destructure-keys"],
+  "plugins": ["@typescript-eslint", "react", "react-hooks", "sort-destructure-keys"],
   "rules": {
     "space-before-function-paren": "off",
-    "no-unused-vars": "error",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
     "react/display-name": "off",
     "sort-destructure-keys/sort-destructure-keys": "error",
     "no-console": [
@@ -45,11 +55,15 @@
           "caseInsensitive": true
         }
       }
-    ]
+    ],
+    "react/prop-types": "off",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["off"],
+    "@typescript-eslint/consistent-type-exports": "error"
   },
   "overrides": [
     {
-      "files": ["*.test.js"],
+      "files": ["*.test.js", "*.test.ts", "*.test.tsx"],
       "env": {
         "jest": true
       }

.github/workflows/ci.yml

@@ -44,7 +44,7 @@ jobs:
         run: yarn run build
 
       - name: Run prettier
-        run: yarn run prettier 'src/**/*.{js,jsx,ts,jsx}' --check
+        run: yarn run prettier 'src/**/*.{js,ts,tsx}' --check
 
       - name: Run test
         run: yarn run test

.gitignore

@@ -13,3 +13,4 @@ coverage
 /storybook-static/
 .eslintcache
 /codemods/dist
+/types/

index.d.ts

@@ -1,18 +1,34 @@
-/* tslint:disable:interface-name max-classes-per-file no-empty-interface */
+// @ts-nocheck Disabling TS checking on this file while definitions are being ported over to src files
 
 import * as React from 'react'
-import {
-  extractStyles as boxExtractStyles,
+import { DownshiftProps } from 'downshift'
+import { TransitionProps, TransitionStatus } from 'react-transition-group/Transition'
+import { extractStyles as boxExtractStyles, BoxProps, BoxComponent, PolymorphicBoxProps } from 'ui-box'
+/**
+ * Generated types that are used for composition in manually written types need to be imported to be resolved
+ */
+import type { PaneOwnProps } from './types'
+
+export type {
   BoxProps,
+  BoxOwnProps,
   BoxComponent,
   PolymorphicBoxProps,
+  EnhancerProps,
   BoxCssProps,
   CssProps
 } from 'ui-box'
-import { DownshiftProps } from 'downshift'
-import { TransitionProps, TransitionStatus } from 'react-transition-group/Transition'
+export { configureSafeHref } from 'ui-box'
 
-export { configureSafeHref, BoxProps, BoxOwnProps, BoxComponent, PolymorphicBoxProps, EnhancerProps } from 'ui-box'
+/**
+ * Re-export generated types through this manually written typedef file until we can point to the generated index.d.ts file
+ */
+export type { PaneProps, PaneOwnProps } from './types'
+
+/**
+ * Re-export generated types through this manually written typedef file until we can point to the generated index.d.ts file
+ */
+export { Pane } from './types'
 
 // Re-exporting these utility types for testing + consumer usage if needed
 export type Pick<T, Properties extends keyof T> = { [Key in Properties]: T[Key] }
@@ -319,13 +335,11 @@ type TokenizableProps = 'elevation' | 'fontWeight' | 'zIndex'
 type PolymorphicBoxPropsOrTokens<T extends Components = Components> = Omit<
   PolymorphicBoxProps<BaseHTMLElement<T>>,
   TokenizableProps
-> &
-  { [key in TokenizableProps]?: string }
+> & { [key in TokenizableProps]?: string }
 
 export type StyleProps<T extends Components = Components> = {
   [key in ComponentPseudoSelectors<T>]: PolymorphicBoxPropsOrTokens<T>
-} &
-  PolymorphicBoxPropsOrTokens<T>
+} & PolymorphicBoxPropsOrTokens<T>
 
 export type ComponentStyle<T extends Components = Components> = {
   baseStyle?: Partial<StyleProps<T>>
@@ -526,9 +540,7 @@ export interface AutocompleteProps extends Omit<DownshiftProps<any>, 'children'>
     toggle: () => void
     getRef: React.Ref<any>
     isShown: NonNullable<PopoverProps['isShown']>
-    getInputProps: <T>(
-      options?: T
-    ) => T & {
+    getInputProps: <T>(options?: T) => T & {
       onChange: (event: React.ChangeEvent) => void
       onKeyDown: (event: React.KeyboardEvent) => void
       onBlur: (event: React.FocusEvent) => void
@@ -1466,21 +1478,6 @@ export declare const Menu: React.FC<MenuProps> & {
   OptionsGroup: typeof MenuOptionsGroup
 }
 
-export interface PaneOwnProps {
-  background?: string
-  border?: boolean | string
-  borderTop?: boolean | string
-  borderRight?: boolean | string
-  borderBottom?: boolean | string
-  borderLeft?: boolean | string
-  elevation?: Elevation
-  hoverElevation?: Elevation
-  activeElevation?: Elevation
-}
-
-export type PaneProps = PolymorphicBoxProps<'div', PaneOwnProps>
-export declare const Pane: BoxComponent<PaneOwnProps, 'div'>
-
 export interface PaginationOwnProps {
   /**
    * The current page that a user is on - defaults to 1.
@@ -2752,9 +2749,7 @@ export function majorScale(x: number): number
 
 export function minorScale(x: number): number
 
-export function extractStyles(options?: {
-  nonce?: React.ScriptHTMLAttributes<'script'>['nonce']
-}): {
+export function extractStyles(options?: { nonce?: React.ScriptHTMLAttributes<'script'>['nonce'] }): {
   css: string
   cache: {
     uiBoxCache: ReturnType<typeof boxExtractStyles>['cache']

package.json

@@ -28,15 +28,17 @@
     "esm",
     "umd",
     "index.d.ts",
-    "codemods/dist"
+    "codemods/dist",
+    "types"
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "yarn generate-icons && concurrently --names 'commonjs,esm,umd,codemods' 'yarn build-commonjs' 'yarn build-esm' 'yarn build-umd' 'yarn build-codemods'",
+    "build": "yarn generate-icons && concurrently --names 'commonjs,esm,umd,codemods,types' 'yarn build-commonjs' 'yarn build-esm' 'yarn build-umd' 'yarn build-codemods' 'yarn build-types'",
     "build-codemods": "cd codemods && yarn build",
-    "build-commonjs": "BABEL_ENV=commonjs babel src --out-dir commonjs --ignore '**/stories','**/test'",
-    "build-esm": "BABEL_ENV=esm babel src --out-dir esm --ignore '**/stories','**/test'",
+    "build-commonjs": "tsc --project tsconfig.commonjs.json",
+    "build-esm": "BABEL_ENV=esm babel src --out-dir esm --ignore '**/stories','**/test','**/__tests__','**/types' --extensions '.js,.ts,.tsx'",
     "build-storybook": "build-storybook",
+    "build-types": "tsc --project tsconfig.types.json",
     "build-umd": "rollup -c",
     "chromatic": "npx chromatic",
     "clean": "git clean -Xdf",
@@ -45,14 +47,16 @@
     "deploy-docs": "cd docs && yarn install && yarn deploy",
     "dev": "start-storybook -p 6006",
     "generate-icons": "./tools/generate-icons.js",
-    "lint": "eslint \"src/**/*.js\" --cache",
+    "lint": "eslint \"src/**/*.{js,ts,tsx}\" --cache",
     "postpublish": "branch=$(git rev-parse --symbolic-full-name --abbrev-ref HEAD); if [[ $branch == \"master\" ]]; then yarn update-docs || yarn deploy-docs; else echo \"not on main branch, skipping docs deploy\"; fi;",
-    "prepublishOnly": "rm -rf esm commonjs umd && yarn build",
+    "prebuild": "yarn typecheck",
+    "prepublishOnly": "rm -rf esm commonjs umd types && yarn build",
     "release": "np",
     "size": "size-limit",
     "storybook": "start-storybook -p 6006",
     "test": "yarn lint && yarn tsd && yarn jest",
     "test:watch": "yarn jest --watch",
+    "typecheck": "tsc --noEmit",
     "update-docs": "cd docs && yarn add evergreen-ui@latest --exact && git add package.json yarn.lock && git show-branch --no-name HEAD | grep -E 'v[0-9]+.[0-9]+.[0-9]+' && git commit --amend --no-edit || git commit -m \"Updated doc site evergreen version\""
   },
   "engines": {
@@ -61,7 +65,6 @@
   "dependencies": {
     "@babel/runtime": "^7.1.2",
     "@segment/react-tiny-virtual-list": "^2.2.1",
-    "@types/react": "^16.9.5",
     "@types/react-transition-group": "^4.4.0",
     "arrify": "^1.0.1",
     "downshift": "^5.2.0",
@@ -92,6 +95,7 @@
     "@babel/plugin-transform-runtime": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.18.6",
     "@babel/register": "^7.0.0",
     "@blueprintjs/icons": "^3.31.0",
     "@faker-js/faker": "^6.1.2",
@@ -100,6 +104,7 @@
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.3.3",
+    "@rollup/plugin-typescript": "^10.0.1",
     "@size-limit/preset-big-lib": "^4.5.4",
     "@storybook/addon-essentials": "^6.0.21",
     "@storybook/addon-options": "^5.3.21",
@@ -109,8 +114,22 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "^13.1.9",
+    "@types/fs-extra": "^9.0.13",
+    "@types/fuzzaldrin-plus": "^0.6.2",
+    "@types/humanize-plus": "1.8.0",
+    "@types/jest": "27.4.0",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.differencewith": "^4.5.6",
+    "@types/lodash.isempty": "^4.4.6",
+    "@types/lodash.merge": "^4.6.6",
+    "@types/lodash.uniqby": "^4.7.6",
+    "@types/node": "^17.0.21",
+    "@types/react-is": "17.0.3",
+    "@types/testing-library__jest-dom": "5.14.3",
+    "@types/tinycolor2": "^1.4.3",
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "camelcase": "^5.0.0",
@@ -132,7 +151,7 @@
     "jest": "^26.4.2",
     "lint-staged": "^10.0.1",
     "np": "^6.3.2",
-    "prettier": "^1.14.3",
+    "prettier": "2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
@@ -142,6 +161,7 @@
     "size-limit": "^4.5.0",
     "starwars-names": "^1.6.0",
     "tsd": "^0.19.1",
+    "typescript": "4.9.4",
     "url-loader": "^1.1.2",
     "webpack": "^4.43.0",
     "yarnhook": "^0.5.1"
@@ -154,14 +174,16 @@
     "singleQuote": true,
     "printWidth": 120,
     "tabWidth": 2,
-    "useTabs": false
+    "useTabs": false,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
   },
   "lint-staged": {
-    "!(codemods|docs)/**/*.js": [
+    "!(codemods|docs)/**/.{js,ts,tsx}": [
       "yarn lint --fix",
       "prettier --write"
     ],
-    "docs/**/*.{ts,tsx,js,jsx}": [
+    "docs/**/*.{js,ts,tsx}": [
       "yarn --cwd ./docs run lint"
     ],
     "*.{json,md}": [
@@ -179,7 +201,7 @@
       "<rootDir>/commonjs/"
     ],
     "collectCoverageFrom": [
-      "src/**/*.{js,jsx}",
+      "src/**/*.{js,ts,tsx}",
       "!**/*.stories.{js,jsx}",
       "!src/{constants,test,themes}/**",
       "!src/icons/generated/**"

rollup.config.js

@@ -2,6 +2,7 @@ import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
 import replace from '@rollup/plugin-replace'
+import typescript from '@rollup/plugin-typescript'
 import { terser } from 'rollup-plugin-terser'
 import pkg from './package.json'
 
@@ -24,7 +25,7 @@ const globals = {
 export default [
   // UMD Development
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     external,
     output: {
       file: 'umd/evergreen.js',
@@ -42,6 +43,7 @@ export default [
         }
       }),
       resolve(),
+      typescript({ compilerOptions: { module: 'esnext', outDir: 'umd' } }),
       commonjs({
         include: 'node_modules/**'
       }),
@@ -53,7 +55,7 @@ export default [
   },
   // UMD Production
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     external,
     output: {
       file: 'umd/evergreen.min.js',
@@ -71,6 +73,7 @@ export default [
         }
       }),
       resolve(),
+      typescript({ compilerOptions: { module: 'esnext', outDir: 'umd' } }),
       commonjs({
         include: 'node_modules/**'
       }),

src/file-uploader/src/utils/rebase-files.js

@@ -11,7 +11,7 @@ import splitFiles from './split-files'
 /**
  * @typedef {object} RebaseFilesResult
  * @property {File[]} accepted
- * @property {FileRejection[]} rejected
+ * @property {import('./get-file-rejections').FileRejection[]} rejected
  */
 
 /**

src/file-uploader/src/utils/split-files.js

@@ -12,7 +12,7 @@ import getFileRejections from './get-file-rejections'
 /**
  * @typedef {object} SplitFilesResult
  * @property {File[]} accepted
- * @property {FileRejection[]} rejected
+ * @property {import('./get-file-rejections').FileRejection[]} rejected
  */
 
 /**