Upgrade dependencies, switch to pnpm (#145)

.eslintrc

@@ -1,15 +1,37 @@
 {
-  "extends": ["react-app", "react-app/jest"],
-  "plugins": ["testing-library"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
+  ],
+  "plugins": ["react", "@typescript-eslint"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+    },
+    "sourceType": "module",
+    "ecmaVersion": 2022,
+  },
+  "settings": {
+    "react": {
+      "version": "detect",
+    },
+  },
   "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
+    "no-constant-condition": "off",
     // use @emotion/styled and @emotion/react without macro
     //
     // Use "lodash/component" instead of "lodash" for tree shaking
     "no-restricted-imports": [
       "warn",
       {
-        "paths": ["@emotion/styled/macro", "@emotion/react/macro", "lodash"]
-      }
-    ]
-  }
+        "paths": ["@emotion/styled/macro", "@emotion/react/macro", "lodash"],
+      },
+    ],
+  },
 }

.github/workflows/test.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.15]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -24,11 +24,11 @@ jobs:
       - run: |
           npm config set '@fortawesome:registry' '${{ secrets.FONTAWESOME_REGISTRY }}'
           npm config set '//harding.dev:23435/:_authToken' '${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}'
-          yarn --frozen-lockfile
+          pnpm install
 
       # TODO: code coverage, reporting, break these steps up
-      - run: yarn format
-      - run: yarn lint
-      - run: yarn test
-      - run: yarn typecheck
-      - run: yarn build
+      - run: pnpm format
+      - run: pnpm lint
+      - run: pnpm test
+      - run: pnpm typecheck
+      - run: pnpm build

.gitignore

@@ -18,9 +18,5 @@
 .env.test.local
 .env.production.local
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
 .npmrc
 .secrets

README.md

@@ -22,19 +22,19 @@ Weather report tailored for paramotor pilots. Consolidates data from multiple so
 
 In the project directory, you can run:
 
-### `yarn start`
+### `pnpm start`
 
 Runs the app in the development mode.
 Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `yarn test`
+### `pnpm test`
 
 Launches the test runner in the interactive watch mode.
 
-### `yarn build`
+### `pnpm build`
 
 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.

package.json

@@ -3,66 +3,69 @@
   "version": "4.1.2",
   "license": "MIT",
   "private": true,
-  "packageManager": "[email protected]",
+  "type": "module",
+  "packageManager": "[email protected]+sha256.0624e30eff866cdeb363b15061bdb7fd9425b17bc1bb42c22f5f4efdea21f6b3",
   "dependencies": {
     "@color-spaces/convert": "^1.3.1",
     "@emotion/css": "^11.7.1",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
-    "@floating-ui/react": "^0.24.1",
+    "@floating-ui/react": "^0.26.13",
+    "@floating-ui/react-dom": "^2.0.9",
     "@fortawesome/fontawesome-pro": "^5.15.4",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/fontawesome-svg-core": "~1.2.36",
     "@fortawesome/pro-duotone-svg-icons": "^5.15.4",
     "@fortawesome/pro-light-svg-icons": "^5.15.4",
     "@fortawesome/pro-regular-svg-icons": "^5.15.4",
     "@fortawesome/pro-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.15",
-    "@reduxjs/toolkit": "^1.7.2",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "@reduxjs/toolkit": "^2.2.3",
     "@vitejs/plugin-react": "^4.0.0",
     "axios": "^1.3.4",
-    "axios-retry": "^3.2.5",
+    "axios-retry": "^4.1.0",
     "chroma-js": "^2.4.2",
-    "date-fns": "^2.28.0",
-    "date-fns-tz": "^2.0.0",
+    "date-fns": "^3.6.0",
+    "date-fns-tz": "^3.1.3",
     "detect-browser": "^5.3.0",
     "emotion": "^11.0.0",
     "fast-xml-parser": "^4.0.7",
     "geolib": "^3.3.3",
     "gsl-parser": "^3.0.0",
-    "i18next": "^22.5.0",
+    "i18next": "^23.11.3",
     "i18next-browser-languagedetector": "^7.0.1",
     "iso8601-duration": "^2.1.1",
     "leaflet": "^1.8.0",
     "linkify-html": "^4.1.1",
     "linkify-react": "^4.0.0",
     "linkifyjs": "^4.1.1",
     "lodash": "^4.17.21",
-    "metar-taf-parser": "^8.0.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-i18next": "^12.3.1",
+    "metar-taf-parser": "^9.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^14.1.1",
     "react-intersection-observer": "^9.4.0",
     "react-leaflet": "^4.0.1",
     "react-page-visibility": "^7.0.0",
-    "react-redux": "^8.0.1",
-    "react-router-dom": "^6.2.1",
+    "react-redux": "^9.1.2",
+    "react-router": "^6.23.0",
+    "react-router-dom": "^6.23.0",
     "react-spring-bottom-sheet": "^3.4.1",
     "react-string-replace": "^1.1.0",
     "react-transition-group": "^4.4.2",
     "suncalc": "^1.9.0",
     "typescript": "^5.0.2",
     "velitherm": "^1.2.0",
-    "workbox-background-sync": "^6.5.0",
-    "workbox-broadcast-update": "^6.5.0",
-    "workbox-cacheable-response": "^6.5.0",
-    "workbox-core": "^6.5.0",
-    "workbox-expiration": "^6.5.0",
-    "workbox-navigation-preload": "^6.5.0",
-    "workbox-precaching": "^6.5.0",
-    "workbox-range-requests": "^6.5.0",
-    "workbox-routing": "^6.5.0",
-    "workbox-strategies": "^6.5.0",
-    "workbox-streams": "^6.5.0"
+    "workbox-background-sync": "^7.1.0",
+    "workbox-broadcast-update": "^7.1.0",
+    "workbox-cacheable-response": "^7.1.0",
+    "workbox-core": "^7.1.0",
+    "workbox-expiration": "^7.1.0",
+    "workbox-navigation-preload": "^7.1.0",
+    "workbox-precaching": "^7.1.0",
+    "workbox-range-requests": "^7.1.0",
+    "workbox-routing": "^7.1.0",
+    "workbox-strategies": "^7.1.0",
+    "workbox-streams": "^7.1.0"
   },
   "scripts": {
     "start": "vite",
@@ -76,7 +79,8 @@
     "format": "prettier --check src/",
     "lint": "eslint --max-warnings=0 src/",
     "splash": "pwa-asset-generator --type png --index public/index.html --splash-only --path-override '%PUBLIC_URL%/splash' public/splash.png ./public/splash --padding '30vh 20vw 50vh' -b 'linear-gradient(0deg, #0e0e0e, #001931)' && prettier -w public/index.html",
-    "icon": "pwa-asset-generator --type png --index public/index.html --manifest public/site.webmanifest --icon-only --favicon --opaque false --path-override '%PUBLIC_URL%' public/favicon-rounded.html ./public && pwa-asset-generator --type png --index public/index.html --manifest public/site.webmanifest --icon-only --path-override '' public/favicon.html ./public && prettier -w public/index.html"
+    "icon": "pwa-asset-generator --type png --index public/index.html --manifest public/site.webmanifest --icon-only --favicon --opaque false --path-override '%PUBLIC_URL%' public/favicon-rounded.html ./public && pwa-asset-generator --type png --index public/index.html --manifest public/site.webmanifest --icon-only --path-override '' public/favicon.html ./public && prettier -w public/index.html",
+    "upgrade:packageManager": "corepack use pnpm@latest"
   },
   "browserslist": {
     "production": [
@@ -92,31 +96,34 @@
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.11.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.6",
     "@testing-library/user-event": "^14.1.1",
     "@types/chroma-js": "^2.1.3",
+    "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.7.11",
     "@types/lodash": "^4.14.178",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-page-visibility": "^6.4.1",
-    "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.4",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "@types/suncalc": "^1.8.1",
-    "eslint": "^8.14.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-testing-library": "^5.11.0",
-    "happy-dom": "^9.17.0",
-    "prettier": "^2.5.1",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "happy-dom": "^14.7.1",
+    "prettier": "^3.2.5",
     "pwa-asset-generator": "^6.0.6",
     "source-map-explorer": "^2.5.2",
-    "vite": "^4.3.5",
+    "vite": "^5.2.11",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-pwa": "^0.14.7",
-    "vite-plugin-rewrite-all": "^1.0.1",
-    "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^0.31.0"
+    "vite-plugin-pwa": "^0.20.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^1.6.0"
   }
 }