refactor(frontend): move from Webpack to Vite

Also overhaulds the building and linting for frontend assets.

3 files changed, 71 insertions, 100 deletions

diff --git a/subprojects/frontend/src/theme/EditorTheme.ts b/subprojects/frontend/src/theme/EditorTheme.ts
index 294192fa..a16b4c3b 100644
--- a/subprojects/frontend/src/theme/EditorTheme.ts
+++ b/subprojects/frontend/src/theme/EditorTheme.ts
@@ -1,47 +1,7 @@
-import type { PaletteMode } from '@mui/material';
-
-import cssVariables from '../themeVariables.module.scss';
-
-export enum EditorTheme {
+enum EditorTheme {
   Light,
   Dark,
+  Default = EditorTheme.Dark,
 }
 
-export class EditorThemeData {
-  className: string;
-
-  paletteMode: PaletteMode;
-
-  toggleDarkMode: EditorTheme;
-
-  foreground!: string;
-
-  foregroundHighlight!: string;
-
-  background!: string;
-
-  primary!: string;
-
-  secondary!: string;
-
-  constructor(className: string, paletteMode: PaletteMode, toggleDarkMode: EditorTheme) {
-    this.className = className;
-    this.paletteMode = paletteMode;
-    this.toggleDarkMode = toggleDarkMode;
-    Reflect.ownKeys(this).forEach((key) => {
-      if (!Reflect.get(this, key)) {
-        const cssKey = `${this.className}--${key.toString()}`;
-        if (cssKey in cssVariables) {
-          Reflect.set(this, key, cssVariables[cssKey]);
-        }
-      }
-    });
-  }
-}
-
-export const DEFAULT_THEME = EditorTheme.Dark;
-
-export const EDITOR_THEMES: { [key in EditorTheme]: EditorThemeData } = {
-  [EditorTheme.Light]: new EditorThemeData('light', 'light', EditorTheme.Dark),
-  [EditorTheme.Dark]: new EditorThemeData('dark', 'dark', EditorTheme.Light),
-};
+export default EditorTheme;
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index c6194c69..cf18e21c 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -1,15 +1,62 @@
+import {
+  createTheme,
+  responsiveFontSizes,
+  type ThemeOptions,
+  ThemeProvider as MaterialUiThemeProvider,
+} from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import { ThemeProvider as MaterialUiThemeProvider } from '@mui/material/styles';
 import React, { type ReactNode } from 'react';
 
 import { useRootStore } from '../RootStore';
 
-export const ThemeProvider: React.FC<{ children: ReactNode }> = observer(({ children }) => {
-  const { themeStore } = useRootStore();
+import EditorTheme from './EditorTheme';
+
+function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions {
+  switch (currentTheme) {
+    case EditorTheme.Light:
+      return {
+        palette: {
+          primary: {
+            main: '#56b6c2',
+          },
+        },
+      };
+    case EditorTheme.Dark:
+      return {
+        palette: {
+          primary: {
+            main: '#56b6c2',
+          },
+        },
+      };
+    default:
+      throw new Error(`Unknown theme: ${currentTheme}`);
+  }
+}
+
+function ThemeProvider({ children }: { children?: ReactNode }) {
+  const {
+    themeStore: { currentTheme, darkMode },
+  } = useRootStore();
+
+  const themeOptions = getMUIThemeOptions(currentTheme);
+  const theme = responsiveFontSizes(
+    createTheme({
+      ...themeOptions,
+      palette: {
+        mode: darkMode ? 'dark' : 'light',
+        ...(themeOptions.palette ?? {}),
+      },
+    }),
+  );
 
   return (
-    <MaterialUiThemeProvider theme={themeStore.materialUiTheme}>
-      {children}
-    </MaterialUiThemeProvider>
+    <MaterialUiThemeProvider theme={theme}>{children}</MaterialUiThemeProvider>
   );
-});
+}
+
+ThemeProvider.defaultProps = {
+  children: undefined,
+};
+
+export default observer(ThemeProvider);
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts
index ffaf6dde..ded1f29a 100644
--- a/subprojects/frontend/src/theme/ThemeStore.ts
+++ b/subprojects/frontend/src/theme/ThemeStore.ts
@@ -1,64 +1,28 @@
 import { makeAutoObservable } from 'mobx';
-import {
-  Theme,
-  createTheme,
-  responsiveFontSizes,
-} from '@mui/material/styles';
 
-import {
-  EditorTheme,
-  EditorThemeData,
-  DEFAULT_THEME,
-  EDITOR_THEMES,
-} from './EditorTheme';
+import EditorTheme from './EditorTheme';
 
-export class ThemeStore {
-  currentTheme: EditorTheme = DEFAULT_THEME;
+export default class ThemeStore {
+  currentTheme: EditorTheme = EditorTheme.Default;
 
   constructor() {
     makeAutoObservable(this);
   }
 
   toggleDarkMode(): void {
-    this.currentTheme = this.currentThemeData.toggleDarkMode;
-  }
-
-  private get currentThemeData(): EditorThemeData {
-    return EDITOR_THEMES[this.currentTheme];
-  }
-
-  get materialUiTheme(): Theme {
-    const themeData = this.currentThemeData;
-    const materialUiTheme = createTheme({
-      palette: {
-        mode: themeData.paletteMode,
-        background: {
-          default: themeData.background,
-          paper: themeData.background,
-        },
-        primary: {
-          main: themeData.primary,
-        },
-        secondary: {
-          main: themeData.secondary,
-        },
-        error: {
-          main: themeData.secondary,
-        },
-        text: {
-          primary: themeData.foregroundHighlight,
-          secondary: themeData.foreground,
-        },
-      },
-    });
-    return responsiveFontSizes(materialUiTheme);
+    switch (this.currentTheme) {
+      case EditorTheme.Light:
+        this.currentTheme = EditorTheme.Dark;
+        break;
+      case EditorTheme.Dark:
+        this.currentTheme = EditorTheme.Light;
+        break;
+      default:
+        throw new Error(`Unknown theme: ${this.currentTheme}`);
+    }
   }
 
   get darkMode(): boolean {
-    return this.currentThemeData.paletteMode === 'dark';
-  }
-
-  get className(): string {
-    return this.currentThemeData.className;
+    return this.currentTheme === EditorTheme.Dark;
   }
 }