Add a skeleton for the new app

julienw · julienw · commit c501cc5239d0 · 2024-02-15T16:32:05.000+01:00
diff --git a/resources/tentative/todomvc-react-18/.gitignore b/resources/tentative/todomvc-react-18/.gitignore
@@ -8,8 +8,6 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
-dist-ssr
 *.local
 
 # Editor directories and files
diff --git a/resources/tentative/todomvc-react-18/index.html b/resources/tentative/todomvc-react-18/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite + React + TS</title>
+        <title>React 18 + Material UI + Vite</title>
     </head>
     <body>
         <div id="root"></div>
diff --git a/resources/tentative/todomvc-react-18/src/components/App.tsx b/resources/tentative/todomvc-react-18/src/components/App.tsx
@@ -1 +1,5 @@
-export function App() {}
+export function App() {
+    return (
+        <h1>todos</h1>
+    );
+}
diff --git a/resources/tentative/todomvc-react-18/src/index.css b/resources/tentative/todomvc-react-18/src/index.css
@@ -25,7 +25,8 @@ a:hover {
 body {
     margin: 0;
     display: flex;
-    place-items: center;
+    flex-direction: column;
+    align-items: center;
     min-width: 320px;
     min-height: 100vh;
 }
@@ -49,9 +50,10 @@ button {
 button:hover {
     border-color: #646cff;
 }
-button:focus,
+
+a:focus-visible,
 button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
+    outline: 4px auto blue;
 }
 
 @media (prefers-color-scheme: light) {
diff --git a/resources/tentative/todomvc-react-18/src/main.tsx b/resources/tentative/todomvc-react-18/src/main.tsx
@@ -1,16 +1,31 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import CssBaseline from "@mui/material/CssBaseline";
-import App from "./App.tsx";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { App } from "./components/App.tsx";
 import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import "./index.css";
 
+import { createTheme } from "@mui/material";
+
+const theme = createTheme({
+    components: {
+        MuiButtonBase: {
+            defaultProps: {
+                // No more ripple, on the whole application 💣!
+                disableRipple: true,
+            },
+        },
+    },
+});
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <CssBaseline />
-        <App />
+        <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <App />
+        </ThemeProvider>
     </React.StrictMode>
 );
diff --git a/resources/tentative/todomvc-react-18/vite.config.ts b/resources/tentative/todomvc-react-18/vite.config.ts
@@ -3,5 +3,11 @@ import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+    base: "./", // Since this will be loaded from the project root
     plugins: [react()],
+    build: {
+        modulePreload: { polyfill: false },
+        minify: false,
+        sourcemap: true,
+    },
 });
