chore: configure eslint explicitly (#1243)

We used to rely on `eslint-config-react-app` to configure some aspects of eslint. This is the full-service config used by "Create React App". However it brings in other dependencies such as (an old version of) eslint itself. It also is much less maintained than it used to be, as many projects (including talk!) have moved away from using create-react-app.

Use the react specific plugins directly.

As part of this, eslint-plugin-react doesn't really like the style of declaring react functional components using `React.FC`. This is a bit of an outdated style anyway, and it's usually clearer just to create functions with explicit types. Since this is also how most react documentation sites do it, I've removed all uses of the `React.FC` type.

Co-authored-by: Marshall T. Rose <mrose17@gmail.com>

.eslintrc.js

@@ -1,18 +1,36 @@
 module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+  },
   plugins: ["@typescript-eslint"],
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
     "prettier",
-    "react-app",
   ],
   rules: {
     "@typescript-eslint/no-explicit-any": "off",
+
+    // see https://emotion.sh/docs/eslint-plugin-react
+    "react/no-unknown-property": ["error", { ignore: ["css"] }],
+
+    // make eslint consistent with typescript's rules: prefixing a variable with _
+    // means it's ok to be unreferenced
+    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
   },
   env: {
     browser: "true",
     node: "true",
   },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
 };