Add typescript support to issue-tracker

issue-tracker/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-proposal-optional-chaining"]
+}

issue-tracker/.eslintrc

@@ -1,9 +1,26 @@
 {
+  "env": {
+    "browser": true,
+    "es6": true
+  },
   "extends": "react-app",
-  "plugins": [
-    "prettier"
-  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint/eslint-plugin"],
   "rules": {
-    "prettier/prettier": "error"
+    "indent": ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"]
   }
-}
+}

issue-tracker/.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vscode

issue-tracker/.prettierrc

@@ -1,4 +1,4 @@
 {
   "singleQuote": true,
   "trailingComma": "all"
-}
+}

issue-tracker/README.md

@@ -2,39 +2,39 @@
 
 This is an example app that implements a (partial) clone of GitHub's issue feature. The focus is on demonstrating experimental React and Relay features in the context of a real app, including Concurrent Mode, Suspense, and Relay Hooks, which are fully compatible with Concurrent Mode and Suspense out of the box. Key features include:
 
-* Implementing the "render-as-you-fetch" pattern discussed in our [React Conf 2019 talk](https://youtu.be/JDDxR1a15Yo?t=3647) about Suspense for Data-Fetching as well as the [React Suspense docs](https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense). During route transitions the app is configured to load the code and data for new routes *in parallel*, rendering whatever is available.
-* Using Concurrent Mode and Suspense to improve the loading sequence, including [`useTransition()`](https://reactjs.org/docs/concurrent-mode-reference.html#usetransition) for route transitions in order to continue showing the previous route for a brief period while the next route is prepared/rendered.
-* Uses Relay Hooks - `useFragment()` and friends - to colocate data-dependencies of components within the components themselves. 
-* Integrates with React Router primitives to allow preloading of code/data: this is currently a custom integration but we're working with the React Router team to implement support for preloading directly in the framework.
+- Implementing the "render-as-you-fetch" pattern discussed in our [React Conf 2019 talk](https://youtu.be/JDDxR1a15Yo?t=3647) about Suspense for Data-Fetching as well as the [React Suspense docs](https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense). During route transitions the app is configured to load the code and data for new routes _in parallel_, rendering whatever is available.
+- Using Concurrent Mode and Suspense to improve the loading sequence, including [`useTransition()`](https://reactjs.org/docs/concurrent-mode-reference.html#usetransition) for route transitions in order to continue showing the previous route for a brief period while the next route is prepared/rendered.
+- Uses Relay Hooks - `useFragment()` and friends - to colocate data-dependencies of components within the components themselves.
+- Integrates with React Router primitives to allow preloading of code/data: this is currently a custom integration but we're working with the React Router team to implement support for preloading directly in the framework.
 
 ## Setup
 
 This app is meant for experimentation; we recommend cloning and running locally, hacking on the source code, trying to change things and see how it affects the user experience.
 
-1. First, clone the app:
+1.  First, clone the app:
 
         git clone [email protected]:relayjs/relay-examples.git
 
-2. Change into the app's directory:
+2.  Change into the app's directory:
 
         cd relay-examples/issue-tracker
 
-3. Install the app's dependencies:
+3.  Install the app's dependencies:
 
         # npm users:
         npm install
 
         # yarn users:
         yarn
 
-3. Get your GitHub authentication token in order to let the app query GitHub's public GraphQL API:
-  a. Open https://github.com/settings/tokens.
-  b. Ensure that at least the `repo` scope is selected.
-  c. Generate the token
-  d. Create a file `./relay-examples/issue-tracker/.env.local` and add the following contents (substiture <TOKEN> for your authentication token):
+4.  Get your GitHub authentication token in order to let the app query GitHub's public GraphQL API:
+    a. Open https://github.com/settings/tokens.
+    b. Ensure that at least the `repo` scope is selected.
+    c. Generate the token
+    d. Create a file `./relay-examples/issue-tracker/.env.local` and add the following contents (substiture <TOKEN> for your authentication token):
 
-          # issue-tracker/.env.local
-          REACT_APP_GITHUB_AUTH_TOKEN=<TOKEN>
+            # issue-tracker/.env.local
+            REACT_APP_GITHUB_AUTH_TOKEN=<TOKEN>
 
 Now you're ready to run the app!
 
@@ -54,12 +54,12 @@ This will start the development server (including Relay Compiler) and open a bro
 
 This app uses a number of technologies including (among others):
 
-- [Create React App](https://github.com/facebook/create-react-app): The app has only a few additions to the default Create React App (CRA) setup - note that these all follow the CRA documentation - the app is *not* ejected:
+- [Create React App](https://github.com/facebook/create-react-app): The app has only a few additions to the default Create React App (CRA) setup - note that these all follow the CRA documentation - the app is _not_ ejected:
   - The app follows the steps in https://create-react-app.dev/docs/adding-relay/ to use CRA's built-in support for Relay GraphQL queries.
   - The app uses CRA's support for environment variables - https://create-react-app.dev/docs/adding-custom-environment-variables - to allow configuring the GitHub authentication token.
   - The app enables [prettier](https://prettier.io) for code formatting, as discussed in https://create-react-app.dev/docs/setting-up-your-editor#formatting-code-automatically.
   - Note that Create React App itself builds upon many great technologies, see the docs for more details!
-- React's [experimental release with Concurrent Mode and Suspense](https://reactjs.org/docs/concurrent-mode-intro.html). 
+- React's [experimental release with Concurrent Mode and Suspense](https://reactjs.org/docs/concurrent-mode-intro.html).
 - Relay's [experimental release with Hooks and Concurrent Mode/Suspense compatibility](https://relay.dev/docs/en/experimental/a-guided-tour-of-relay).
 - [React Router](https://github.com/ReactTraining/react-router) does not yet support preloading data for routes (the React Router team is working on this), so the app uses React Router's primitives instead, specifically the [`history` package](https://github.com/ReactTraining/history/) and [`react-router-config` package](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config).
 

issue-tracker/config-overrides.js

@@ -0,0 +1,2 @@
+const { useBabelRc, override } = require('customize-cra')
+module.exports = override(useBabelRc())

issue-tracker/package.json

@@ -2,29 +2,57 @@
   "name": "issue-tracker",
   "version": "0.1.0",
   "private": true,
+  "scripts": {
+    "start": "yarn run relay; concurrently --kill-others --names \"react-app-rewired,relay\" \"react-app-rewired start\" \"yarn run relay --watch\"",
+    "build": "yarn run relay && react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject",
+    "lint": "eslint --fix --ext .js,.ts,.tsx",
+    "update-schema": "yarn get-graphql-schema -h \"Authorization=bearer $REACT_APP_GITHUB_AUTH_TOKEN\" https://api.github.com/graphql > schema/schema.graphql",
+    "relay": "yarn run relay-compiler --schema schema/schema.graphql --src ./src/ $@ --language typescript"
+  },
   "dependencies": {
     "history": "^4.10.1",
-    "husky": "^3.0.9",
-    "lint-staged": "^9.4.2",
-    "react": "^0.0.0-experimental-f6b8d31a7",
-    "react-dom": "^0.0.0-experimental-f6b8d31a7",
+    "react": "0.0.0-experimental-38dd17ab9",
+    "react-dom": "0.0.0-experimental-38dd17ab9",
     "react-markdown": "^4.2.2",
     "react-relay": "0.0.0-experimental-a1a40b68",
     "react-router": "^5.1.2",
     "react-router-config": "^5.1.1",
-    "react-scripts": "3.2.0",
-    "relay-runtime": "^7.0.0"
+    "relay-runtime": "7.0.0"
   },
-  "scripts": {
-    "start": "yarn run relay; concurrently --kill-others --names \"react-scripts,relay\" \"react-scripts start\" \"yarn run relay --watch\"",
-    "build": "yarn run relay && react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "update-schema": "get-graphql-schema -h \"Authorization=bearer $REACT_APP_GITHUB_AUTH_TOKEN\" https://api.github.com/graphql > schema/schema.graphql",
-    "relay": "yarn run relay-compiler --schema schema/schema.graphql --src ./src/ $@"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
+    "@types/history": "^4.7.3",
+    "@types/jest": "24.0.21",
+    "@types/node": "12.12.5",
+    "@types/react": "16.9.11",
+    "@types/react-dom": "16.9.3",
+    "@types/react-relay": "^7.0.0",
+    "@types/react-router-config": "^5.0.1",
+    "@types/relay-runtime": "^6.0.9",
+    "@typescript-eslint/eslint-plugin": "^2.6.1",
+    "@typescript-eslint/parser": "^2.6.1",
+    "babel-plugin-relay": "7.0.0",
+    "concurrently": "^5.0.0",
+    "customize-cra": "^0.8.0",
+    "eslint": "^6.6.0",
+    "eslint-config-react-app": "^5.0.2",
+    "eslint-plugin-flowtype": "^4.3.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.2.0",
+    "get-graphql-schema": "^2.1.2",
+    "graphql": "^14.5.8",
+    "husky": "^3.0.9",
+    "lint-staged": "^9.4.2",
+    "prettier": "^1.19.1",
+    "react-app-rewired": "^2.1.5",
+    "react-scripts": "3.2.0",
+    "relay-compiler": "7.0.0",
+    "relay-compiler-language-typescript": "^10.1.0",
+    "typescript": "^3.7.2"
   },
   "browserslist": {
     "production": [
@@ -38,24 +66,16 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {
-    "babel-plugin-relay": "^7.0.0",
-    "concurrently": "^5.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "get-graphql-schema": "^2.1.2",
-    "graphql": "^14.5.8",
-    "prettier": "^1.18.2",
-    "relay-compiler": "^7.0.0"
-  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {
-    "src/**/*.{js,jsx,json,css,md}": [
-      "prettier --write",
+    "src/**/*.{js,ts,jsx,tsx}": [
+      "yarn prettier --write",
+      "yarn lint",
       "git add"
     ]
   }
-}
+}