feat: migrate CRA to vite

f-eld-ch · Feb 7, 2024 · 268b2fe · 268b2fe
1 parent cb4a961
commit 268b2fe
Show file tree

Hide file tree

Showing 29 changed files with 2,742 additions and 5,792 deletions.
diff --git a/.env b/.env
diff --git a/.env.production b/.env.production
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Oauth2_PROXY clients can be created using Auth0....
 ```
 OAUTH2_PROXY_CLIENT_ID=...
 OAUTH2_PROXY_CLIENT_SECRET=...
-OAUTH2_PROXY_OIDC_ISSUER_URL=https://${TENANT.eu.auth0.com/
+OAUTH2_PROXY_OIDC_ISSUER_URL=https://${TENANT}.eu.auth0.com/
 HASURA_GRAPHQL_JWT_SECRET='{"type":"RS256","key":"-----BEGIN CERTIFICATE-----\n
 ...
 }\n-----END CERTIFICATE-----\n","header":{"type":"Authorization"},"claims_map":{"x-hasura-user-id":{"path":"$.sub"},"x-hasura-email":{"path":"$.email"},"x-hasura-allowed-roles":["user","editor"],"x-hasura-default-role":"user"}}'

diff --git a/ui/.env b/ui/.env
@@ -0,0 +1,4 @@
+VITE_API_URL="/v1/graphql"
+VITE_API_WS_URL="ws://localhost:4180/v1/graphql"
+VITE_VERSION=${VERSION}
+VITE_SHA_VERSION=${GIT_SHA}
diff --git a/ui/.env.production b/ui/.env.production
@@ -0,0 +1 @@
+VITE_API_URL="/v1/graphql"
diff --git a/ui/public/index.html → ui/index.html b/ui/public/index.html → ui/index.html
@@ -3,19 +3,19 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="Content-Security-Policy"
     content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; style-src-attr 'self'; child-src 'none'; worker-src 'self' blob:; script-src-elem 'self' https://api.mapbox.com; connect-src 'self' ws://* wss://* https://*;" />
   <meta name="description" content="SitRep" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="apple-touch-icon" href="/logo192.png" />
+  <link rel="manifest" href="/manifest.json" />
   <title>Sitrep</title>
 </head>
 
 <body class="has-navbar-fixed-top">
-  <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
 </body>
 
 </html>
diff --git a/ui/package.json b/ui/package.json
@@ -2,14 +2,14 @@
   "name": "sitrep",
   "version": "24.2.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@apollo/client": "^3.8.10",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mapbox/mapbox-gl-draw": "^1.3.0",
-    "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^9.3.4",
     "@turf/bearing": "^6.5.0",
     "@turf/center": "^6.5.0",
@@ -18,7 +18,6 @@
     "bulma": "^0.9.4",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.10",
-    "eslint": "^8.56.0",
     "graphql": "^16.8.1",
     "hat": "^0.0.3",
     "i18next": "^23.7.19",
@@ -35,14 +34,17 @@
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.21.3",
     "usehooks-ts": "^2.10.0",
-    "web-vitals": "^3.5.1"
+    "web-vitals": "^3.5.1",
+    "workbox-core": "^7.0.0",
+    "workbox-expiration": "^7.0.0",
+    "workbox-precaching": "^7.0.0"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "VERSION=dev GIT_SHA=HEAD react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "VERSION=dev GIT_SHA=HEAD vite",
+    "build": "tsc && vite build",
+    "test": "vitest",
+    "preview": "vite preview"
   },
   "eslintConfig": {
     "extends": [
@@ -71,11 +73,11 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.3.0",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/hat": "^0.0.4",
-    "@types/jest": "^29.5.11",
+    "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.202",
     "@types/mapbox-gl": "^2.7.19",
     "@types/mapbox__mapbox-gl-draw": "~1.3.3",
@@ -84,16 +86,30 @@
     "@types/react-color": "^3.0.11",
     "@types/react-dom": "^18.2.18",
     "@types/react-router-dom": "^5.3.3",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "@vitest/coverage-v8": "^1.2.2",
+    "eslint": "^8.56.0",
+    "eslint-config-react-app": "^7.0.1",
     "husky": "^8.0.3",
+    "jest": "^29.7.0",
+    "jsdom": "^24.0.0",
     "lint-staged": "^15.2.0",
     "prettier": "^3.2.4",
-    "react-scripts": "5.0.1",
     "sass": "^1.70.0",
     "source-map-explorer": "^2.5.3",
-    "typescript": "^4.9.5"
+    "ts-jest": "^29.1.2",
+    "typescript": "^4.9.5",
+    "vite": "^5.0.12",
+    "vite-plugin-checker": "^0.6.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.1",
+    "vitest": "^1.2.2"
   },
   "resolutions": {
-    "@svgr/webpack": "^6.5.1",
     "json5": "^2.2.3",
     "semver": "^5.7.2",
     "@types/react": "^18.2.0",

diff --git a/ui/src/App.scss b/ui/src/App.scss
@@ -1,6 +1,6 @@
 @charset "utf-8";
 
-@import "~bulma/sass/utilities/initial-variables.sass";
+@import "bulma/sass/utilities/initial-variables.sass";
 
 // Import the fonts
 @import url("assets/b612-mono/b612-mono.css");

diff --git a/ui/src/client.tsx b/ui/src/client.tsx
@@ -3,7 +3,7 @@ import { ApolloClient, InMemoryCache } from "@apollo/client";
 import { HttpLink } from "@apollo/client";
 
 const httpLink = new HttpLink({
-  uri: process.env.REACT_APP_API_URL,
+  uri: import.meta.env.VITE_API_URL,
   credentials: "include",
 });
 

diff --git a/ui/src/components/Navbar.tsx b/ui/src/components/Navbar.tsx
@@ -143,7 +143,7 @@ function VersionNavBar() {
         <span className="icon">
           <FontAwesomeIcon icon={faCodeBranch} />
         </span>
-        <span><a href={`https://github.com/RedGecko/sitrep/commit/${process.env.REACT_APP_SHA_VERSION}`} target="_blank" rel="noopener noreferrer">{process.env.REACT_APP_VERSION}</a></span>
+        <span><a href={`https://github.com/RedGecko/sitrep/commit/${import.meta.env.VITE_SHA_VERSION}`} target="_blank" rel="noopener noreferrer">{import.meta.env.VITE_VERSION}</a></span>
       </span>
     </div >
   );

diff --git a/ui/src/i18n/index.ts b/ui/src/i18n/index.ts
@@ -3,23 +3,26 @@ import { initReactI18next } from 'react-i18next';
 
 import LanguageDetector from 'i18next-browser-languagedetector';
 
+import { de, en, fr, it } from './locales';
+
+
 i18n
     .use(LanguageDetector)
     .use(initReactI18next)
     .init({
         fallbackLng: 'de',
         resources: {
             en: {
-                translations: require('./locales/en/translations.json')
+                translations: en,
             },
             de: {
-                translations: require('./locales/de/translations.json')
+                translations: de,
             },
             fr: {
-                translations: require('./locales/fr/translations.json')
+                translations: fr,
             },
             it: {
-                translations: require('./locales/it/translations.json')
+                translations: it,
             }
         },
         ns: ['translations'],

diff --git a/ui/src/i18n/locales/index.ts b/ui/src/i18n/locales/index.ts
@@ -0,0 +1,8 @@
+import de from './de/translations.json';
+import en from './en/translations.json';
+import fr from './fr/translations.json';
+import it from './it/translations.json';
+
+export {
+    de, en, fr, it
+};
diff --git a/ui/src/react-app-env.d.ts b/ui/src/react-app-env.d.ts
diff --git a/ui/src/serviceWorkerRegistration.ts b/ui/src/serviceWorkerRegistration.ts
@@ -26,7 +26,7 @@ type Config = {
 export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    const publicUrl = new URL(import.meta.env.BASE_URL, window.location.href);
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to

diff --git a/ui/src/setupTests.ts b/ui/src/setupTests.ts
@@ -1,5 +1,13 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';
+
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup } from '@testing-library/react';
+import { afterEach, expect } from 'vitest';
+
+// extends Vitest's expect method with methods from react-testing-library
+expect.extend(matchers);
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+    cleanup();
+});
diff --git a/ui/src/views/incident/New.tsx b/ui/src/views/incident/New.tsx
@@ -62,7 +62,7 @@ function IncidentForm(props: { incident: Incident | undefined }) {
   const [updateIncident, { error: errorUpdate }] = useMutation<UpdateIncidentData, UpdateIncidentVars>(
     UpdateIncident,
     {
-      onCompleted(data) {
+      onCompleted() {
         navigate(`../journal/view`);
       },
       refetchQueries: [{ query: GetIncidents }, { query: GetIncidentDetails }],

diff --git a/ui/src/views/journal/Editor.tsx b/ui/src/views/journal/Editor.tsx
@@ -10,10 +10,10 @@ import useDebounce from "utils/useDebounce";
 import { Email, Phone, Radio } from "./EditorForms";
 import { RadioChannelDetailInput } from "./EditorForms/Elements";
 import { Other } from "./EditorForms/Other";
-import { GetJournalMessages, InsertMessage, UpdateMessage } from "./graphql";
 import { default as List } from "./List";
 import { default as JournalMessage } from './Message';
 import TriageModal from "./TriageModal";
+import { GetJournalMessages, InsertMessage, UpdateMessage } from "./graphql";
 
 type State = {
   sender: string;
@@ -66,7 +66,7 @@ type Dispatch = (action: Action) => void
 
 export const EditorContext = React.createContext<
   { state: State; dispatch: Dispatch }
->({ state: initState(), dispatch: (action: Action) => { } })
+>({ state: initState(), dispatch: (action: Action) => { console.log(action) } })
 
 
 function initState(): State {
@@ -94,15 +94,15 @@ function Editor() {
   });
 
   const [insertMessage, { error }] = useMutation(InsertMessage, {
-    onCompleted(data) {
+    onCompleted() {
       // reset the form values
       dispatch({ type: 'clear' })
     },
     refetchQueries: [{ query: GetJournalMessages, variables: { journalId: journalId } }],
   });
 
   const [updateMessage, { error: errorUpdate }] = useMutation(UpdateMessage, {
-    onCompleted(data) {
+    onCompleted() {
       // reset the form values
       dispatch({ type: 'clear' })
     },

diff --git a/ui/src/views/journal/TriageModal.tsx b/ui/src/views/journal/TriageModal.tsx
@@ -13,8 +13,8 @@ import { useParams } from "react-router-dom";
 import { Division, PriorityStatus, TriageMessageData, TriageMessageVars, TriageStatus } from "types";
 import { Message, MessageDivision, SaveMessageTriageData, SaveMessageTriageVars } from "types/journal";
 import { NewForm as TaskNew } from "../measures/tasks";
-import { GetJournalMessages, GetMessageForTriage, SaveMessageTriage } from "./graphql";
 import { default as JournalMessage } from "./Message";
+import { GetJournalMessages, GetMessageForTriage, SaveMessageTriage } from "./graphql";
 
 
 function Triage(props: {
@@ -42,7 +42,7 @@ function Triage(props: {
   const [saveMessageTriage, { error: errorSet }] = useMutation<SaveMessageTriageData, SaveMessageTriageVars>(
     SaveMessageTriage,
     {
-      onCompleted(data) { },
+      onCompleted() { },
       refetchQueries: [
         { query: GetJournalMessages, variables: { journalId: journalId } },
       ],

diff --git a/ui/src/views/map/controls/ExportControl.tsx b/ui/src/views/map/controls/ExportControl.tsx
@@ -11,7 +11,7 @@ export type ExportControlProps = {
 function ExportControl(props: ExportControlProps): null {
     const { position } = props;
     useControl<MaplibreExportControl>(
-        ({ map }) =>
+        () =>
             new MaplibreExportControl({
                 PageSize: Size.A3,
                 PageOrientation: PageOrientation.Landscape,

diff --git a/ui/src/views/map/controls/LayerControl.tsx b/ui/src/views/map/controls/LayerControl.tsx
@@ -1,14 +1,14 @@
 import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import React, { useState } from "react";
+import React from "react";
 import "./LayerControl.scss";
 
 import { } from 'components/BabsIcons';
 
 function LayerPanel() {
-    const [active, setActive] = useState<string>()
-    const [visble, setVisible] = useState<string>()
+    // const [active, setActive] = useState<string>()
+    // const [visble, setVisible] = useState<string>()
 
     return (
         <div className="maplibregl-ctrl-bottom-right mapboxgl-ctrl-bottom-right">

diff --git a/ui/src/views/map/controls/StyleController.tsx b/ui/src/views/map/controls/StyleController.tsx
@@ -52,7 +52,7 @@ function StyleController() {
             <div className='mapboxgl-ctrl mapboxgl-ctrl-group' >
                 <button type="button" className={btnClass} onClick={() => setActive(!active)}><FontAwesomeIcon icon={faMap} size="lg" /></button>
                 <div className={switcherClass}>
-                    {MapStyles.map((s) => { return <button type="button" className={classNames({ "button": true, "active": style.name === s.name })} key={s.name} onClick={(e) => onClick(s)}>{s.name}</button> })}
+                    {MapStyles.map((s) => { return <button type="button" className={classNames({ "button": true, "active": style.name === s.name })} key={s.name} onClick={() => onClick(s)}>{s.name}</button> })}
                 </div >
             </div>
         </div >

diff --git a/ui/src/views/map/controls/StyleSwitcherControl.tsx b/ui/src/views/map/controls/StyleSwitcherControl.tsx
@@ -16,7 +16,7 @@ export type StyleSwitcherControlProps = {
 function StyleSwitcherControl(props: StyleSwitcherControlProps): null {
     const { styles, options } = props;
     useControl<MapboxStyleSwitcherControl>(
-        ({ mapLib }) =>
+        () =>
             new MapboxStyleSwitcherControl(styles, options),
         { position: props.position }
     );

diff --git a/ui/src/views/measures/tasks/List.tsx b/ui/src/views/measures/tasks/List.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 
 function List() {

diff --git a/ui/src/views/measures/tasks/New.tsx b/ui/src/views/measures/tasks/New.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 
 function New() {
@@ -13,4 +12,7 @@ function NewForm() {
 
 export default New;
 
-export { NewForm, New };
+export { New, NewForm };
+
+
+
diff --git a/ui/src/vite-env.d.ts b/ui/src/vite-env.d.ts
@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
+
+import { FC, SVGProps } from 'react';
+
+declare module '*.png';
+declare module '*.jpeg';
+declare module '*.jpg';
+declare module '*.svg' {
+    const content: FC<SVGProps<SVGElement>>;
+    export default content;
+}