Setup TypeScript things (#3408)

* Setup TypeScript things

* more things

* Remove babel-eslint

* Prettier things

* Formatting

* Fix things

.changeset/hungry-ants-live.md

@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': patch
+---
+
+Support resolving and compiling TypeScript files

.eslintrc.js

@@ -1,13 +1,13 @@
 module.exports = {
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   env: {
     browser: true,
     es6: true,
     node: true,
     jest: true,
     'cypress/globals': true,
   },
-  plugins: ['react', 'react-hooks', 'jest', 'cypress', 'import', 'emotion'],
+  plugins: ['react', 'react-hooks', 'jest', 'cypress', 'import', 'emotion', '@typescript-eslint'],
   settings: {
     react: {
       version: 'detect',
@@ -20,7 +20,7 @@ module.exports = {
     'no-undef': 'error',
     'no-unused-expressions': 'error',
     'react-hooks/rules-of-hooks': 'error',
-    'no-unused-vars': [
+    '@typescript-eslint/no-unused-vars': [
       'error',
       {
         args: 'after-used',
@@ -32,13 +32,13 @@ module.exports = {
       'error',
       {
         devDependencies: [
-          '**/__tests__/**/*.js',
-          '**/*test.js',
-          '**/tests/**/*.js',
-          '**/examples/**/*.js',
-          '**/build/**/*.js',
-          `packages/fields/src/**/filterTests.js`,
-          '**/test-fixtures.js',
+          '**/__tests__/**/*',
+          '**/*test.*',
+          '**/tests/**/*',
+          '**/examples/**/*',
+          '**/build/**/*',
+          `packages/fields/src/**/filterTests.*`,
+          '**/test-fixtures.*',
         ],
       },
     ],
@@ -64,6 +64,30 @@ module.exports = {
     'emotion/no-vanilla': 'error',
     'emotion/import-from-emotion': 'error',
     'emotion/styled-import': 'error',
+    'no-restricted-syntax': [
+      'error',
+      {
+        // Curious why we have this rule?
+        // - Enums only work for a subset of use cases that unions of string literals + objects work for and learning one language feature is easier than learning two language features
+        // - Enums are a new language feature which have runtime semantics which means they change TypeScript from JS + types to JS + types + extra language features which is harder to teach without clear advantages for this specific feature
+        selector: 'TSEnumDeclaration',
+        message: 'Use a union of string literals instead of an enum',
+      },
+    ],
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          Function:
+            '`Function` types are unsafe. Use more specific function types instead. e.g. (arg: number) => string',
+          String: {
+            message:
+              'The `String` type refers to the String object which is probably not what you want, you probably want `string` instead which refers to the string primitive type.',
+            fixWith: 'string',
+          },
+        },
+      },
+    ],
   },
   extends: ['plugin:jest/recommended'],
 
@@ -77,7 +101,7 @@ module.exports = {
       },
     },
     {
-      files: ['packages/fields/src/**/*.js'],
+      files: ['packages/fields/src/**/*.{js,ts,tsx}'],
       rules: {
         'import/no-commonjs': 'error',
       },

.github/workflows/tests.yml

@@ -93,6 +93,8 @@ jobs:
         run: yarn lint:markdown
       - name: Preconstruct
         run: yarn build
+      - name: TypeScript
+        run: yarn lint:types
   cypress:
     name: Cypress tests
     runs-on: ubuntu-latest

babel.config.js

@@ -15,6 +15,7 @@ module.exports = {
       },
     ],
     '@babel/preset-react',
+    '@babel/preset-typescript',
   ],
   plugins: [
     '@babel/plugin-transform-runtime',

docs/api/hooks.md

@@ -161,7 +161,6 @@ The result is passed to [the next function in the execution order](/docs/guides/
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const resolveInput = ({
   operation,
@@ -199,7 +198,6 @@ Return values are ignored.
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const validateInput = ({
   operation,
@@ -237,7 +235,6 @@ Return values are ignored.
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const beforeChange = ({
   operation,
@@ -278,7 +275,6 @@ Return values are ignored.
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const afterChange = ({
   operation,
@@ -313,7 +309,6 @@ Should throw or register errors with `addFieldValidationError(<String>)` if the
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const validateDelete = ({
   operation,
@@ -347,7 +342,6 @@ Return values are ignored.
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const beforeDelete = ({
   operation,
@@ -382,7 +376,6 @@ Return values are ignored.
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const afterDelete = ({
   operation,
@@ -416,7 +409,6 @@ The result is passed to [the next function in the execution order](/docs/guides/
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const resolveAuthInput = ({
   operation,
@@ -452,7 +444,6 @@ Return values are ignored.
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const validateAuthInput = ({
   operation,
@@ -488,7 +479,6 @@ Return values are ignored.
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const beforeAuth = ({
   operation,
@@ -529,7 +519,6 @@ Return values are ignored.
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const afterAuth = ({
   operation,
@@ -566,7 +555,6 @@ Return values are ignored.
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const beforeUnauth = ({
   operation,
@@ -602,7 +590,6 @@ Return values are ignored.
 #### Usage
 
 <!-- prettier-ignore -->
-
 ```js
 const afterAuth = ({
   operation,

docs/guides/production.md

@@ -57,7 +57,7 @@ Add [query limits](/docs/api/create-list.md#querylimits) and [validation](/docs/
 
 ## Using reverse proxies
 
-It's recommended to run production Javascript servers behind a reverse proxy such as [Nginx](https://nginx.org/), [HAProxy](https://www.haproxy.org/), a CDN or a cloud-based application (layer 7) load balancer. Doing that can improve performance and protect against [Slowloris Dos attacks](https://en.wikipedia.org/wiki/Slowloris_(computer_security)). The express application variable [`trust proxy`](https://expressjs.com/en/guide/behind-proxies.html) must be set to support reverse proxying:
+It's recommended to run production Javascript servers behind a reverse proxy such as [Nginx](https://nginx.org/), [HAProxy](https://www.haproxy.org/), a CDN or a cloud-based application (layer 7) load balancer. Doing that can improve performance and protect against [Slowloris Dos attacks](<https://en.wikipedia.org/wiki/Slowloris_(computer_security)>). The express application variable [`trust proxy`](https://expressjs.com/en/guide/behind-proxies.html) must be set to support reverse proxying:
 
 ```javascript title=index.js
 module.exports = {

docs/guides/relationship-migration.md

@@ -130,7 +130,7 @@ keystone upgrade-relationships --migration
 > **Note:** Always be careful when running auto-generated migration code.
 > Be sure to manually verify that the changes are doing what you want, as incorrect migrations can lead to data loss.
 
-# 
+#
 
 > **Important:** While we have taken every effort to ensure the auto-generated migration code is correct, we cannot account for every possible scenario.
 > Again; please verify the changes work as expected to avoid data loss.

package.json

@@ -16,13 +16,14 @@
     "cypress:run": "status=0; yarn workspace @keystonejs/cypress-project-basic run cypress:run || status=$?; yarn workspace @keystonejs/cypress-project-login run cypress:run || status=$?; yarn workspace @keystonejs/cypress-project-twitter-login run cypress:run || status=$?; yarn workspace @keystonejs/cypress-project-access-control run cypress:run || status=$?; yarn workspace @keystonejs/cypress-project-client-validation run cypress:run || status=$?; exit $status",
     "cypress:open": "status=0; yarn workspace @keystonejs/cypress-project-basic run cypress:open || status=$?; yarn workspace @keystonejs/cypress-project-login run cypress:open || status=$?; yarn workspace @keystonejs/cypress-project-twitter-login run cypress:open || status=$?; yarn workspace @keystonejs/cypress-project-access-control run cypress:open || status=$?; yarn workspace @keystonejs/cypress-project-client-validation run cypress:open || status=$?; exit $status",
     "format:file": "prettier --write",
-    "format": "prettier --write \"**/*.js{,on}\" \"**/*.md\" && remark . --output",
+    "format": "prettier --write \"**/*.{js,json,ts,tsx,md}\" && remark . --output",
     "fresh": "yarn clean && yarn",
     "clean": "rimraf \"**/cypress/{screenshots,videos,reports}\" \"**/node_modules\" \"**/yarn-error.log\" \"**/out.log\" \"**/.DS_Store\" \"**/website/.cache\" \"**/dist\"",
-    "lint:eslint": "eslint .",
-    "lint:prettier": "prettier --list-different \"**/*.js\"",
+    "lint:eslint": "eslint . --ext ts,tsx,js",
+    "lint:prettier": "prettier --list-different \"**/*.{js,json,ts,tsx,md}\"",
     "lint:markdown": "remark . --frail --quiet",
-    "lint": "yarn lint:prettier && yarn lint:eslint && yarn lint:markdown",
+    "lint:types": "tsc",
+    "lint": "yarn lint:prettier && yarn lint:eslint && yarn lint:markdown && yarn lint:types",
     "test": "yarn lint && yarn test:unit && yarn cypress:run",
     "test:unit": "cross-env DISABLE_LOGGING=true NODE_ENV=test jest --maxWorkers=1 --logHeapUsage",
     "test:unit:debug": "cross-env NODE_ENV=test node --inspect-brk `which jest` --runInBand",
@@ -49,14 +50,16 @@
     "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.10.4",
     "@changesets/changelog-github": "^0.2.1",
     "@changesets/cli": "^2.5.1",
     "@jest/test-sequencer": "^26.1.0",
     "@manypkg/cli": "^0.11.0",
     "@preconstruct/cli": "1.1.20",
     "@types/jest": "^25.1.2",
+    "@typescript-eslint/eslint-plugin": "^3.9.0",
+    "@typescript-eslint/parser": "^3.9.0",
     "all-contributors-cli": "^6.2.0",
-    "babel-eslint": "^10.0.1",
     "babel-plugin-emotion": "^10.0.27",
     "chalk": "^2.4.2",
     "chalk-cli": "^4.1.0",
@@ -117,6 +120,8 @@
     "tinymce": "^5.2.2",
     "tmp": "^0.2.1",
     "to-pascal-case": "^1.0.0",
+    "ts-morph": "^7.3.0",
+    "typescript": "^3.9.7",
     "underscore.string": "^3.3.5",
     "unist-util-visit": "^2.0.2",
     "unsplash-js": "^6.0.0",
@@ -179,7 +184,8 @@
       "packages/fields"
     ],
     "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
-      "newEntrypoints": true
+      "newEntrypoints": true,
+      "useTSMorphToGenerateTSDeclarations": true
     }
   },
   "jest": {

packages/app-admin-ui/client/components/Nav.js

@@ -1,7 +1,7 @@
 /* global ENABLE_DEV_FEATURES */
 /** @jsx jsx */
 
-import React, { useState, useMemo, forwardRef } from 'react'; // eslint-disable-line no-unused-vars
+import React, { useState, useMemo, forwardRef } from 'react'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import { Link, useRouteMatch } from 'react-router-dom';
 import PropToggle from 'react-prop-toggle';
 import { uid } from 'react-uid';

packages/app-admin-ui/client/pages/List/Filters/AddFilterPopout.js

@@ -90,18 +90,9 @@ function getInitialState() {
   };
 }
 
-type Props = {
-  existingFilters: Array<Object>,
-};
-type State = {
-  field: Object,
-  filter: Object,
-  value: string,
-};
-
 let Render = ({ children }) => children();
 
-export default class AddFilterPopout extends Component<Props, State> {
+export default class AddFilterPopout extends Component {
   state = getInitialState();
 
   // Refs

packages/app-admin-ui/index.js

@@ -239,7 +239,7 @@ class AdminUIApp {
     }
 
     if (dev) {
-      // eslint-disable-next-line no-unused-vars
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       app.use(function(err, req, res, next) {
         console.error(err.stack);
         res.status(500).send('Error');

packages/app-admin-ui/server/getWebpackConfig.js

@@ -21,7 +21,7 @@ module.exports = function({ adminMeta, adminViews, entry, outputPath }) {
 
   const rules = [
     {
-      test: /\.js$/,
+      test: /\.(js|ts|tsx)$/,
       exclude: pathname => {
         return pathname.includes('node_modules') && !pathname.startsWith(clientDirectory);
       },
@@ -80,6 +80,7 @@ module.exports = function({ adminMeta, adminViews, entry, outputPath }) {
       rules,
     },
     resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.json'],
       alias: {
         // we only want to bundle a single version of react
         // but we don't want to assume a consumer has the same version of react

packages/arch/packages/alert/README.md

@@ -145,9 +145,6 @@ An alert that is full width; removes border and border radius.
 MIT © [Thinkmill](https://www.thinkmill.com.au/)
 
 [source]: https://github.com/keystonejs/keystone/tree/master/packages/arch
-
 [npm]: https://www.npmjs.com/package/@arch-ui/alert
-
 [install-npm]: https://docs.npmjs.com/getting-started/installing-node
-
 [theme]: http://npmjs.com/package/@arch-ui/theme

packages/arch/packages/hooks/src/index.js → packages/arch/packages/hooks/src/index.ts

@@ -1,15 +1,17 @@
 import ResizeObserver from 'resize-observer-polyfill';
 
-import { useLayoutEffect, useState } from 'react';
+import { useLayoutEffect, useState, MutableRefObject } from 'react';
 
-export function useMeasure(ref) {
+export function useMeasure(ref: MutableRefObject<any>) {
   let [snapshot, setSnapshot] = useState(() => ({ height: 0, width: 0 }));
 
   useLayoutEffect(() => {
     let element = ref.current;
     if (element !== null) {
       let resizeObserver = new ResizeObserver(([entry]) => {
+        // @ts-ignore
         const height = entry.target.offsetHeight;
+        // @ts-ignore
         const width = entry.target.offsetWidth;
         if (width !== snapshot.width || height !== snapshot.height) {
           setSnapshot({ width, height });

packages/fields-wysiwyg-tinymce/src/views/Field.js

@@ -5,8 +5,7 @@ import { Global, css, jsx } from '@emotion/core';
 import { FieldContainer, FieldLabel } from '@arch-ui/fields';
 
 // MUST IMPORT for TinyMCE to work!
-// eslint-disable-next-line no-unused-vars
-import tinymce from 'tinymce/tinymce';
+import 'tinymce/tinymce';
 
 import { Editor } from '@tinymce/tinymce-react';