feat: migrate ui to mantine

README.md

@@ -88,5 +88,5 @@ that you can visit in your browser.
   - React.js
   - TypeScript
   - Redux / Redux Toolkit
-  - Tailwind CSS
-  - Evergreen UI
+  - Mantine UI / @emotion/react
+  - Framer Motion

go.mod

@@ -1,6 +1,6 @@
 module github.com/evan-buss/openbooks
 
-go 1.18
+go 1.19
 
 require (
 	github.com/brianvoe/gofakeit/v5 v5.11.2

server/app/package.json

@@ -8,29 +8,30 @@
     "prettier": "prettier --write 'src/**/*.{ts,tsx,js,vue}'"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.8.3",
-    "clsx": "^1.2.1",
-    "evergreen-ui": "^6.10.3",
-    "framer-motion": "^7.0.0",
+    "@emotion/react": "^11.10.0",
+    "@mantine/core": "^5.2.4",
+    "@mantine/hooks": "^5.2.4",
+    "@mantine/notifications": "^5.2.4",
+    "@reduxjs/toolkit": "^1.8.5",
+    "@tanstack/react-table": "^8.5.11",
+    "@tanstack/react-virtual": "^3.0.0-alpha.0",
+    "framer-motion": "^7.2.1",
     "lodash": "^4.17.21",
-    "npm": "^8.16.0",
+    "npm": "^8.18.0",
     "phosphor-react": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
-    "react-use": "^17.4.0"
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^18.6.5",
+    "@types/lodash": "^4.14.184",
+    "@types/node": "^18.7.13",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react-refresh": "^1.3.6",
-    "autoprefixer": "^10.4.8",
-    "postcss": "^8.4.16",
+    "@vitejs/plugin-react": "^2.0.1",
     "prettier": "2.7.1",
-    "tailwindcss": "^3.1.8",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.5"
+    "typescript": "^4.8.2",
+    "vite": "^3.0.9"
   }
 }

server/app/src/App.tsx

@@ -1,14 +1,111 @@
-import React from "react";
-import Sidebar from "./components/SideBar/Sidebar";
+import {
+  AppShell,
+  Burger,
+  ColorScheme,
+  ColorSchemeProvider,
+  createEmotionCache,
+  createStyles,
+  MantineProvider,
+  MediaQuery
+} from "@mantine/core";
+import { useLocalStorage } from "@mantine/hooks";
+import { NotificationsProvider } from "@mantine/notifications";
+import { Route, Routes } from "react-router-dom";
+import NotificationDrawer from "./components/drawer/NotificationDrawer";
+import Sidebar from "./components/sidebar/Sidebar";
 import SearchPage from "./pages/SearchPage";
+import { toggleSidebar } from "./state/stateSlice";
+import { useAppDispatch, useAppSelector } from "./state/store";
+
+const emotionCache = createEmotionCache({ key: "openbooks" });
+
+const useStyles = createStyles(() => ({
+  burger: {
+    position: "absolute",
+    bottom: 0,
+    left: 0
+  },
+  wrapper: {
+    boxSizing: "border-box",
+    display: "flex",
+    flexWrap: "nowrap",
+    maxHeight: "100vh",
+    minHeight: "100vh"
+  }
+}));
+
+export default function App() {
+  const { classes } = useStyles();
+  const [colorScheme, setColorScheme] = useLocalStorage({
+    key: "color-scheme",
+    defaultValue: "light" as ColorScheme,
+    getInitialValueInEffect: true
+  });
+
+  const dispatch = useAppDispatch();
+  const open = useAppSelector((state) => state.state.isSidebarOpen);
 
-function App() {
   return (
-    <div className="flex flex-row max-h-screen min-h-screen flex-nowrap bg-tint1">
-      <Sidebar />
-      <SearchPage />
-    </div>
+    <ColorSchemeProvider
+      colorScheme={colorScheme}
+      toggleColorScheme={() =>
+        setColorScheme((color) => (color === "dark" ? "light" : "dark"))
+      }>
+      <MantineProvider
+        emotionCache={emotionCache}
+        withGlobalStyles
+        withNormalizeCSS
+        theme={{
+          colorScheme,
+          activeStyles: { transform: "none" },
+          primaryColor: "brand",
+          primaryShade: { light: 4, dark: 2 },
+          colors: {
+            brand: [
+              "#e0ecff",
+              "#b0c6ff",
+              "#7e9fff",
+              "#4c79ff",
+              // "#1a53ff",
+              "#3366ff",
+              "#0039e6",
+              "#002db4",
+              "#002082",
+              "#001351",
+              "#000621"
+            ]
+          }
+        }}>
+        <NotificationsProvider position="top-center">
+          <AppShell
+            navbar={<Sidebar />}
+            padding={0}
+            styles={(theme) => ({
+              main: {
+                backgroundColor:
+                  theme.colorScheme === "dark"
+                    ? theme.colors.dark[8]
+                    : theme.colors.gray[0]
+              }
+            })}>
+            <div className={classes.wrapper}>
+              <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+                <Burger
+                  className={classes.burger}
+                  opened={open}
+                  onClick={() => dispatch(toggleSidebar())}
+                  size="sm"
+                  mr="xl"
+                />
+              </MediaQuery>
+              <Routes>
+                <Route path="/" element={<SearchPage />} />
+              </Routes>
+              <NotificationDrawer />
+            </div>
+          </AppShell>
+        </NotificationsProvider>
+      </MantineProvider>
+    </ColorSchemeProvider>
   );
 }
-
-export default App;