new react-openapi

package.json

@@ -4,32 +4,36 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc -b && vite build",
     "serve": "vite preview"
   },
   "dependencies": {
     "@apidevtools/swagger-parser": "^12.1.0",
-    "@emotion/react": "latest",
-    "@emotion/styled": "latest",
-    "@mui/icons-material": "latest",
-    "@mui/material": "latest",
-    "@mui/x-data-grid": "^8.28.2",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/x-data-grid": "^7.22.0",
     "@tanstack/react-query": "^5.96.1",
-    "axios": "latest",
+    "axios": "^1.7.7",
     "buffer": "^6.0.3",
+    "js-yaml": "^4.1.0",
     "markdown-to-jsx": "latest",
     "marked": "latest",
     "process": "^0.11.10",
-    "react": "latest",
-    "react-dom": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-markdown": "latest",
-    "react-router-dom": "^7.13.2",
+    "react-router-dom": "^6.28.0",
     "remark-gfm": "latest"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
-    "@vitejs/plugin-react": "latest",
-    "typescript": "^6.0.3",
-    "vite": "latest"
+    "@types/node": "^25.9.3",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.1"
   }
 }

react-openapi/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "react-openapi",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "index.ts",
+  "types": "index.ts",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0",
+    "@mui/material": "^5.16.7",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/x-data-grid": "^7.22.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "axios": "^1.7.7",
+    "js-yaml": "^4.1.0"
+  }
+}

react-openapi/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "index.ts"]
+}

src/Home.tsx

@@ -236,7 +236,7 @@ export default function Home() {
 
         <Grid container spacing={3}>
           {features.map((f) => (
-            <Grid key={f.title} size={{ xs: 12, sm: 6, md: 3 }}>
+            <Grid key={f.title} item xs={12} sm={6} md={3}>
               <FeatureCard {...f} />
             </Grid>
           ))}

src/shared-theme/AppTheme.tsx

@@ -63,8 +63,8 @@ export default function AppTheme({
   );
 
   const theme = React.useMemo(
-    () =>
-      createTheme({
+    () => {
+      const base = createTheme({
         ...getDesignTokens(mode),
         semantic,
 
@@ -75,7 +75,11 @@ export default function AppTheme({
           ...navigationCustomizations,
           ...surfacesCustomizations,
         },
-      }),
+      });
+      (base as any).applyStyles = (m: "light" | "dark", styles: any) =>
+        base.palette.mode === m ? styles : {};
+      return base;
+    },
     [mode, semantic]
   );
 

src/shared-theme/customizations/navigation.tsx

@@ -4,7 +4,6 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
 import { buttonBaseClasses } from '@mui/material/ButtonBase';
 import { dividerClasses } from '@mui/material/Divider';
 import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
 import { tabClasses } from '@mui/material/Tab';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 import { gray, brand } from '../themePrimitives';
@@ -73,7 +72,7 @@ export const navigationCustomizations: Components<Theme> = {
           backgroundColor: (theme.vars || theme).palette.background.paper,
           boxShadow: 'none',
         },
-        [`&.${selectClasses.focused}`]: {
+        '&.Mui-focused': {
           outlineOffset: 0,
           borderColor: gray[400],
         },
@@ -91,7 +90,7 @@ export const navigationCustomizations: Components<Theme> = {
             backgroundColor: (theme.vars || theme).palette.background.paper,
             boxShadow: 'none',
           },
-          [`&.${selectClasses.focused}`]: {
+          '&.Mui-focused': {
             outlineOffset: 0,
             borderColor: 'hsl(210, 55%, 55%)',
           },

src/shared-theme/theme-augment.d.ts

@@ -0,0 +1,11 @@
+import "@mui/material/styles";
+
+declare module "@mui/material/styles" {
+  interface Theme {
+    vars?: Record<string, any>;
+    applyStyles<T>(mode: "light" | "dark", styles: T): T | {};
+  }
+  interface ThemeOptions {
+    vars?: Record<string, any>;
+  }
+}

src/shared-theme/themePrimitives.ts

@@ -1,4 +1,5 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
+import { createTheme, alpha, Shadows } from '@mui/material/styles';
+import type { PaletteMode } from '@mui/material';
 
 declare module '@mui/material/Paper' {
   interface PaperPropsVariantOverrides {