Update to latest docker-mui-theme

Use vite instead of react-scripts Signed-off-by: Hugo Guerrero <[email protected]>
microcks · Nov 4, 2024 · 796c969 · 796c969
1 parent 937e894
commit 796c969
Show file tree

Hide file tree

Showing 13 changed files with 5,165 additions and 34,501 deletions.
diff --git a/client/.browserslistrc b/client/.browserslistrc
@@ -1,12 +1 @@
-# This is automatically converted to a Chromium version
-# See: https://github.com/kilian/electron-to-chromium
-
-# One day, we could distribute a config package from pinata with a Chrome version derived by
-# feeding `require("electron").version` into an up-to-date `electron-to-chromium`.
-# https://github.com/browserslist/browserslist#shareable-configs
-
-Chrome 91
-
-# Ideally we'd do (at time of writing) "Electron 13.1.4", but the version of electron-to-chromium
-# in our dependency tree is a bit outdated
-# See https://github.com/Kilian/electron-to-chromium/blob/master/versions.js for full list
+Electron 17.1.1
diff --git a/client/.env b/client/.env
@@ -1,2 +1,3 @@
 BUILD_PATH=dist
-PUBLIC_URL=.
+PUBLIC_URL=.
+BROWSER=none
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -1,26 +1,32 @@
 {
-  "name": "@docker/react-extension",
-  "version": "0.2.0",
+  "name": "microcks",
+  "version": "0.3.2",
   "private": true,
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test": "jest src"
   },
   "dependencies": {
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@docker/docker-mui-theme": "^0.0.4",
-    "@docker/extension-api-client": "^0.2.2",
+    "@docker/docker-mui-theme": "<0.1.0",
+    "@docker/extension-api-client": "0.3.4",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.4.1",
-    "@mui/material": "^5.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
-    "typescript": "^4.1.2"
+    "@mui/icons-material": "^6.1.6",
+    "@mui/material": "^6.1.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@docker/extension-api-client-types": "^0.2.2"
+    "@docker/extension-api-client-types": "0.3.4",
+    "@types/jest": "^29.1.2",    
+    "@types/node": "^18.7.18",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.1.0",
+    "jest": "^29.1.2",    
+    "typescript": "^4.8.3",
+    "vite": "^3.1.0"    
   }
 }
diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
@@ -15,8 +15,9 @@
  */
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import { PropsWithChildren } from 'react';
 
-const Footer: React.FC = ({ children }) => {
+const Footer: React.FC<PropsWithChildren> = ({ children }) => {
   return (
     <Box textAlign="center" paddingBottom={3} marginTop="auto">
       {children}

diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -13,19 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DockerMuiThemeProvider } from '@docker/docker-mui-theme';
+import { DockerMuiV5ThemeProvider } from '@docker/docker-mui-theme';
 import CssBaseline from '@mui/material/CssBaseline';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <DockerMuiThemeProvider>
+    <DockerMuiV5ThemeProvider>
       <CssBaseline />
       <App />
-    </DockerMuiThemeProvider>
-  </React.StrictMode>,
-  document.getElementById('root'),
+    </DockerMuiV5ThemeProvider>
+  </React.StrictMode>
 );
diff --git a/client/src/react-app-env.d.ts b/client/src/react-app-env.d.ts
diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -1,26 +1,21 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
     "skipLibCheck": true,
-    "esModuleInterop": true,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/client/tsconfig.node.json b/client/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/client/vite.config.ts b/client/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  base: "./",
+  build: {
+    outDir: "build",
+  },
+  server: {
+    port: 3000,
+    strictPort: true,
+  }
+});