Eject react-script config from jbrowse-web and jbrowse-desktop

.eslintignore

@@ -22,3 +22,4 @@ packages/core/util/QuickLRU.d.ts
 packages/core/util/nanoid.js
 packages/core/util/nanoid.d.ts
 **/umd_plugin.js
+component_tests

.eslintrc.json

@@ -1,13 +1,17 @@
 {
   "env": {
-    "browser": true
+    "browser": true,
+    "node": true,
+    "jest": true
   },
   "extends": [
     "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
     "plugin:prettier/recommended",
     "plugin:unicorn/recommended",
-    "react-app"
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -16,22 +20,32 @@
     },
     "project": "./tsconfig.json"
   },
-  "plugins": ["@typescript-eslint", "eslint-plugin-tsdoc", "unicorn"],
+  "plugins": ["eslint-plugin-tsdoc"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "rules": {
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/camelcase": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/no-base-to-string": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-unused-vars": ["warn"],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_", "ignoreRestSiblings": true }
+    ],
     "@typescript-eslint/no-floating-promises": "error",
-    "@typescript-eslint/restrict-template-expressions": 0,
-    "@typescript-eslint/restrict-plus-operands": 0,
-    "@typescript-eslint/no-misused-promises": 0,
-    "@typescript-eslint/require-await": 0,
-    "@typescript-eslint/unbound-method": 0,
+    "@typescript-eslint/restrict-template-expressions": "off",
+    "@typescript-eslint/restrict-plus-operands": "off",
+    "@typescript-eslint/no-misused-promises": "off",
+    "@typescript-eslint/require-await": "off",
+    "@typescript-eslint/unbound-method": "off",
     "@typescript-eslint/no-unused-expressions": "off",
     "@typescript-eslint/no-var-requires": "off",
     "@typescript-eslint/no-unsafe-member-access": "off",
@@ -40,49 +54,49 @@
     "@typescript-eslint/no-unsafe-call": "off",
     "@typescript-eslint/no-unsafe-return": "off",
 
-    "testing-library/render-result-naming-convention": 0,
-    "testing-library/prefer-screen-queries": 0,
+    "testing-library/render-result-naming-convention": "off",
+    "testing-library/prefer-screen-queries": "off",
 
-    "unicorn/no-new-array": 0,
-    "unicorn/no-empty-file": 0,
-    "unicorn/prefer-type-error": 0,
-    "unicorn/prefer-modern-math-apis": 0,
-    "unicorn/prefer-node-protocol": 0,
-    "unicorn/no-unreadable-array-destructuring": 0,
-    "unicorn/no-abusive-eslint-disable": 0,
-    "unicorn/no-array-callback-reference": 0,
-    "unicorn/number-literal-case": 0,
-    "unicorn/prefer-add-event-listener": 0,
-    "unicorn/prefer-top-level-await": 0,
-    "unicorn/consistent-function-scoping": 0,
-    "unicorn/no-await-expression-member": 0,
-    "unicorn/no-lonely-if": 0,
-    "unicorn/consistent-destructuring": 0,
-    "unicorn/prefer-module": 0,
-    "unicorn/prefer-optional-catch-binding": 0,
-    "unicorn/no-useless-undefined": 0,
-    "unicorn/no-null": 0,
-    "unicorn/no-nested-ternary": 0,
-    "unicorn/filename-case": 0,
-    "unicorn/catch-error-name": 0,
-    "unicorn/prevent-abbreviations": 0,
-    "unicorn/prefer-code-point": 0,
-    "unicorn/numeric-separators-style": 0,
-    "unicorn/no-array-for-each": 0,
-    "unicorn/prefer-spread": 0,
-    "unicorn/explicit-length-check": 0,
-    "unicorn/prefer-regexp-test": 0,
-    "unicorn/relative-url-style": 0,
-    "unicorn/prefer-math-trunc": 0,
-    "unicorn/prefer-query-selector": 0,
-    "unicorn/no-negated-condition": 0,
-    "unicorn/switch-case-braces": 0,
-    "unicorn/prefer-switch": 0,
-    "unicorn/better-regex": 0,
-    "unicorn/no-for-loop": 0,
-    "unicorn/escape-case": 0,
-    "unicorn/prefer-number-properties": 0,
-    "unicorn/no-process-exit": 0,
+    "unicorn/no-new-array": "off",
+    "unicorn/no-empty-file": "off",
+    "unicorn/prefer-type-error": "off",
+    "unicorn/prefer-modern-math-apis": "off",
+    "unicorn/prefer-node-protocol": "off",
+    "unicorn/no-unreadable-array-destructuring": "off",
+    "unicorn/no-abusive-eslint-disable": "off",
+    "unicorn/no-array-callback-reference": "off",
+    "unicorn/number-literal-case": "off",
+    "unicorn/prefer-add-event-listener": "off",
+    "unicorn/prefer-top-level-await": "off",
+    "unicorn/consistent-function-scoping": "off",
+    "unicorn/no-await-expression-member": "off",
+    "unicorn/no-lonely-if": "off",
+    "unicorn/consistent-destructuring": "off",
+    "unicorn/prefer-module": "off",
+    "unicorn/prefer-optional-catch-binding": "off",
+    "unicorn/no-useless-undefined": "off",
+    "unicorn/no-null": "off",
+    "unicorn/no-nested-ternary": "off",
+    "unicorn/filename-case": "off",
+    "unicorn/catch-error-name": "off",
+    "unicorn/prevent-abbreviations": "off",
+    "unicorn/prefer-code-point": "off",
+    "unicorn/numeric-separators-style": "off",
+    "unicorn/no-array-for-each": "off",
+    "unicorn/prefer-spread": "off",
+    "unicorn/explicit-length-check": "off",
+    "unicorn/prefer-regexp-test": "off",
+    "unicorn/relative-url-style": "off",
+    "unicorn/prefer-math-trunc": "off",
+    "unicorn/prefer-query-selector": "off",
+    "unicorn/no-negated-condition": "off",
+    "unicorn/switch-case-braces": "off",
+    "unicorn/prefer-switch": "off",
+    "unicorn/better-regex": "off",
+    "unicorn/no-for-loop": "off",
+    "unicorn/escape-case": "off",
+    "unicorn/prefer-number-properties": "off",
+    "unicorn/no-process-exit": "off",
 
     "no-use-before-define": "off",
     "curly": "error",
@@ -97,15 +111,14 @@
     "no-undef": "error",
     "no-underscore-dangle": "warn",
 
-    "import/no-extraneous-dependencies": "error",
-    "import/no-anonymous-default-export": "off",
     "prettier/prettier": "warn",
 
     "react/no-danger": "warn",
     "react/prop-types": "off",
     "react/destructuring-assignment": "error",
     "react/no-unused-prop-types": "error",
     "react/no-unused-state": "error",
+    "react/no-unescaped-entities": "off",
     "react/prefer-stateless-function": "error",
 
     "spaced-comment": [
@@ -155,29 +168,10 @@
         "test": true
       },
       "rules": {
-        "import/no-extraneous-dependencies": "off",
         "@typescript-eslint/no-non-null-assertion": "off"
       }
     },
-    {
-      "files": ["**/component_test/**"],
-      "parserOptions": {
-        "ecmaFeatures": {
-          "jsx": true
-        },
-        "project": "./component_test/tsconfig.json"
-      }
-    },
-    {
-      "files": ["**/component_test/cypress/**"],
-      "extends": ["plugin:cypress/recommended"],
-      "parserOptions": {
-        "ecmaFeatures": {
-          "jsx": true
-        },
-        "project": "./component_test/cypress/tsconfig.json"
-      }
-    },
+
     {
       "files": [
         "./plugin-development-tools/**/*.[t,j]s",

docs/generateConfigDocs.ts

@@ -39,7 +39,7 @@ interface Config {
 
 function generateConfigDocs(files: string[]) {
   const cwd = process.cwd() + '/'
-  const contents = {} as { [key: string]: Config }
+  const contents = {} as Record<string, Config>
   extractWithComment(files, obj => {
     const fn = obj.filename
     const fn2 = fn.replace(cwd, '')

docs/generateStateModelDocs.ts

@@ -46,7 +46,7 @@ interface StateModel {
 
 function generateStateModelDocs(files: string[]) {
   const cwd = process.cwd() + '/'
-  const contents = {} as { [key: string]: StateModel }
+  const contents = {} as Record<string, StateModel>
   extractWithComment(files, obj => {
     const fn = obj.filename
     const fn2 = fn.replace(cwd, '')

docs/util.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import * as ts from 'typescript'
 import { promisify } from 'util'
 import { exec } from 'child_process'
@@ -74,10 +73,10 @@ export function extractWithComment(
       'action',
       'method',
     ]
-    for (let i = 0; i < list.length; i++) {
-      const type = '#' + list[i]
+    for (const entry of list) {
+      const type = '#' + entry
       if (fulltext.includes(type) && r.comment.includes(type)) {
-        cb({ type: list[i], ...r })
+        cb({ type: entry, ...r })
       }
     }
   }

package.json

@@ -36,21 +36,23 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
-    "@craco/craco": "^7.0.0",
     "@electron/notarize": "^2.0.0",
     "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.10.17",
+    "@mui/system": "^5.14.4",
     "@mui/x-data-grid": "^6.0.1",
     "@node-oauth/express-oauth-server": "^3.0.0",
     "@oclif/dev-cli": "^1.26.9",
     "@oclif/test": "^1.2.7",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@storybook/addon-essentials": "^7.0.0",
-    "@storybook/builder-webpack5": "^7.0.0",
     "@storybook/node-logger": "^7.0.0",
     "@storybook/react": "^7.0.0",
     "@storybook/react-webpack5": "^7.0.0",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -92,65 +94,90 @@
     "@types/set-value": "^2.0.0",
     "@types/string-template": "^1.0.2",
     "@types/tmp": "^0.2.1",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
     "babel-loader": "^9.1.0",
+    "babel-preset-react-app": "^10.0.1",
+    "bfj": "^7.0.2",
     "body-parser": "^1.20.2",
+    "browserslist": "^4.18.1",
     "canvas": "^2.9.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "chai": "^4.3.4",
     "cors": "^2.8.5",
     "cross-env": "^7.0.2",
     "cross-spawn": "^7.0.1",
     "crypto-js": "^3.0.0",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.2.0",
     "dependency-graph": "^0.11.0",
+    "dotenv": "^16.3.1",
+    "dotenv-expand": "^10.0.0",
     "electron": "25.5.0",
     "electron-builder": "^24.4.0",
     "electron-mock-ipc": "^0.3.8",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-config-react-app": "^7.0.0",
-    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-tsdoc": "^0.2.4",
     "eslint-plugin-unicorn": "^48.0.0",
     "express": "^4.18.2",
     "express-basic-auth": "^1.2.1",
     "file-loader": "^6.2.0",
     "find-yarn-workspace-root": "^2.0.0",
+    "fs-extra": "^10.0.0",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-image-snapshot": "^6.1.0",
     "jest-localstorage-mock": "^2.4.3",
     "lerna": "^7.1.5",
     "lerna-changelog": "^2.2.0",
+    "mini-css-extract-plugin": "^2.4.5",
     "mobx": "^6.0.0",
     "mobx-react": "^7.0.0",
     "mobx-state-tree": "^5.1.7",
     "nock": "^13.2.1",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
     "prettier": "^3.0.0",
     "prop-types": "^15.0.0",
     "react": "^17.0.0",
+    "react-dev-utils": "^12.0.1",
     "react-dom": "^17.0.0",
-    "react-scripts": "^5.0.1",
+    "react-refresh": "^0.14.0",
     "requestidlecallback-polyfill": "^1.0.2",
+    "resolve-url-loader": "^4.0.0",
     "rimraf": "^5.0.0",
     "rxjs": "^7.0.0",
+    "sass-loader": "^12.3.0",
     "semver": "^7.3.4",
     "slugify": "^1.6.5",
+    "source-map-loader": "^3.0.0",
     "storybook": "^7.0.0",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.2",
+    "terser-webpack-plugin": "^5.2.5",
     "ts-loader": "^9.3.0",
     "ts-node": "^10.4.0",
     "tslib": "^2.0.1",
     "tss-react": "^4.0.0",
     "typescript": "^5.1.3",
     "web-encoding": "^1.1.5",
-    "webpack": "^5.0.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.7.3"
+    "webpack": "^5.64.4",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-manifest-plugin": "^4.0.2"
   },
   "version": "0.0.0",
   "dependencies": {}

packages/app-core/src/ui/App/App.tsx

@@ -39,7 +39,7 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-type Props = {
+interface Props {
   HeaderButtons?: React.ReactElement
   session: SessionWithFocusedViewAndDrawerWidgets & {
     savedSessionNames: string[]

packages/app-core/src/ui/App/ViewMenu.tsx

@@ -15,7 +15,6 @@ import ArrowUpward from '@mui/icons-material/ArrowUpward'
 
 const ViewMenu = observer(function ({
   model,
-  IconButtonProps,
   IconProps,
 }: {
   model: IBaseViewModel

packages/core/BaseFeatureWidget/BaseFeatureDetail/Attributes.tsx

@@ -27,7 +27,7 @@ const globalOmit = [
 export default function Attributes(props: {
   attributes: {
     [key: string]: unknown
-    __jbrowsefmt?: { [key: string]: unknown }
+    __jbrowsefmt?: Record<string, unknown>
   }
   omit?: string[]
   omitSingleLevel?: string[]