update packages

ibastawisi · Aug 28, 2024 · dbfeec6 · dbfeec6
1 parent ab47cd2
commit dbfeec6
Show file tree

Hide file tree

Showing 17 changed files with 1,321 additions and 3,208 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.github/workflows/oci.yaml b/.github/workflows/oci.yaml
@@ -28,7 +28,7 @@ jobs:
           git fetch
           git reset --hard origin/master
           echo "Installing dependencies..."
-          npm ci
+          npm ci -f
           npx prisma migrate deploy
           echo "Building to temp directory..."
           BUILD_DIR=temp npm run build || exit

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,38 +10,36 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^0.0.50",
+    "@ai-sdk/openai": "^0.0.54",
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@excalidraw/excalidraw": "^0.17.6",
     "@fontsource/roboto": "^5.0.14",
-    "@lexical/headless": "^0.17.0",
-    "@lexical/react": "^0.17.0",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/material": "^5.16.7",
-    "@mui/material-nextjs": "^5.16.6",
-    "@mui/x-charts": "^7.13.0",
+    "@lexical/headless": "^0.17.1",
+    "@lexical/react": "^0.17.1",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
+    "@mui/material-nextjs": "^6.0.0",
+    "@mui/x-charts": "^7.14.0",
     "@next-auth/prisma-adapter": "^1.0.7",
-    "@next/bundle-analyzer": "14.2.5",
-    "@next/third-parties": "14.2.5",
-    "@prisma/client": "^5.18.0",
+    "@next/bundle-analyzer": "14.2.7",
+    "@next/third-parties": "14.2.7",
+    "@prisma/client": "^5.19.0",
     "@reduxjs/toolkit": "^2.2.7",
-    "@types/node": "22.4.2",
+    "@types/node": "22.5.1",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.0",
-    "ai": "^3.3.13",
-    "eslint": "8.57.0",
-    "eslint-config-next": "14.2.5",
+    "ai": "^3.3.19",
     "htmr": "^1.0.2",
-    "lexical": "^0.17.0",
+    "lexical": "^0.17.1",
     "linkedom": "^0.18.4",
     "mathlive": "^0.101.0",
-    "next": "14.2.5",
+    "next": "14.2.7",
     "next-auth": "^4.24.7",
     "nprogress": "^0.2.0",
-    "openai": "^4.56.0",
-    "puppeteer": "^23.1.0",
+    "openai": "^4.56.1",
+    "puppeteer": "^23.2.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-redux": "^9.1.2",
@@ -56,7 +54,7 @@
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
     "fast-glob": "^3.3.2",
-    "prisma": "^5.18.0",
+    "prisma": "^5.19.0",
     "terser-webpack-plugin": "^5.3.10",
     "workbox-webpack-plugin": "^7.1.0",
     "workbox-window": "^7.1.0"

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -97,12 +97,10 @@ header {
   z-index: 15000;
 }
 
-.MuiFab-root.MuiFab-extended {
-  color: var(--mui-palette-primary-contrastText);
-}
-
-html:not([theme=dark]) .MuiFab-root.MuiFab-extended {
-  color: var(--mui-palette-text-primary);
+@media screen and (prefers-color-scheme: dark) {
+  .MuiFab-root.MuiFab-extended {
+    color: var(--mui-palette-primary-contrastText);
+  }
 }
 
 .editor-container [id] {
@@ -156,8 +154,8 @@ body.fullscreen {
   display: none;
 }
 
-@media screen {
-  [theme=dark] .editor-input {
+@media screen and (prefers-color-scheme: dark) {
+  .editor-input {
     caret-color: #eee;
   }
 }

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
@@ -1,7 +1,8 @@
 "use client"
 import { useSelector } from '@/store';
 import UserCard from "./User/UserCard";
-import { Box, CircularProgress, Grid, Paper, Typography } from "@mui/material";
+import Grid from '@mui/material/Grid2';
+import { Box, CircularProgress, Paper, Typography } from "@mui/material";
 import { useEffect, useState } from 'react';
 import { PieChart } from '@mui/x-charts/PieChart';
 import { CloudDocument, LocalDocument } from '@/types';
@@ -86,7 +87,7 @@ const StorageChart: React.FC = () => {
 
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12} sm={6}>
+      <Grid size={{ xs: 12, sm: 6 }}>
         <Paper sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 2 }}>
           <Typography variant='overline' gutterBottom sx={{ alignSelf: 'start', userSelect: 'none' }}>Local Storage</Typography>
           {isLoading && <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: 300, gap: 2 }}>
@@ -120,7 +121,7 @@ const StorageChart: React.FC = () => {
           />}
         </Paper>
       </Grid>
-      <Grid item xs={12} sm={6}>
+      <Grid size={{ xs: 12, sm: 6 }}>
         <Paper sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 2 }}>
           <Typography variant='overline' gutterBottom sx={{ alignSelf: 'start', userSelect: 'none' }}>Cloud Storage</Typography>
           {isLoading && <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: 300, gap: 2 }}>

diff --git a/src/components/DocumentFilterControl.tsx b/src/components/DocumentFilterControl.tsx
@@ -113,7 +113,7 @@ const DocumentFilterControl: FC<{
           '& .MuiTab-label': {
             display: { xs: value === 0 ? "block" : "none", sm: "block" }
           },
-          '& .MuiTab-iconWrapper': {
+          "& .MuiTab-icon": {
             marginRight: { xs: value === 0 ? 1 : 0, sm: 1 }
           }
         }}
@@ -132,7 +132,7 @@ const DocumentFilterControl: FC<{
               '& .MuiTab-label': {
                 display: { xs: value & (1 << option.key) ? "block" : "none", sm: "block" }
               },
-              '& .MuiTab-iconWrapper': {
+              "& .MuiTab-icon": {
                 marginRight: { xs: value & (1 << option.key) ? 1 : 0, sm: 1 }
               }
             }}

diff --git a/src/components/Documents.tsx b/src/components/Documents.tsx
@@ -8,7 +8,8 @@ import { BackupDocument, User, UserDocument } from '@/types';
 import { validate } from "uuid";
 import UserCard from "./User/UserCard";
 import documentDB, { revisionDB } from '@/indexeddb';
-import { Box, Avatar, Button, Typography, Grid, Card, CardActionArea, CardHeader, Collapse, Pagination } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { Box, Avatar, Button, Typography, Card, CardActionArea, CardHeader, Collapse, Pagination } from '@mui/material';
 import { PostAdd, UploadFile, Help, Storage, Science, Pageview } from '@mui/icons-material';
 import DocumentSortControl, { sortDocuments } from './DocumentSortControl';
 import DocumentFilterControl, { filterDocuments } from './DocumentFilterControl';
@@ -158,14 +159,14 @@ const Documents: React.FC<{ staticDocuments: UserDocument[] }> = ({ staticDocume
         <DocumentFilterControl value={filter} setValue={setFilter} />
       </Box>
       <Grid container spacing={2} sx={{ mb: 2 }}>
-        <Grid item xs={6}>
+        <Grid size={{ xs: 6 }}>
           <Card variant="outlined">
             <CardActionArea component={RouterLink} prefetch={false} scroll={false} href="/playground">
               <CardHeader title="Playground" avatar={<Avatar sx={{ bgcolor: 'primary.main' }}><Science /></Avatar>} />
             </CardActionArea>
           </Card>
         </Grid>
-        <Grid item xs={6}>
+        <Grid size={{ xs: 6 }}>
           <Card variant="outlined">
             <CardActionArea component={RouterLink} prefetch={false} scroll={false} href="/tutorial">
               <CardHeader title="Tutorial" avatar={<Avatar sx={{ bgcolor: 'primary.main' }}><Help /></Avatar>} />
@@ -193,12 +194,12 @@ const DocumentsGrid: React.FC<{ documents: UserDocument[], user?: User, initiali
   return (
     <Box sx={{ display: 'flex', flexDirection: "column", flex: 1, justifyContent: 'space-between', mb: 2 }}>
       <Grid container spacing={2} sx={{ mb: 2 }}>
-        {showSkeletons && Array.from({ length: 6 }).map((_, i) => <Grid item key={i} xs={12} sm={6} md={4}><DocumentCard /></Grid>)}
-        {showEmpty && <Grid item xs={12} sx={{ display: 'flex', flexDirection: "column", alignItems: "center", my: 5, gap: 2 }}>
+        {showSkeletons && Array.from({ length: 6 }).map((_, i) => <Grid key={i} size={{ xs: 12, sm: 6, md: 4 }}><DocumentCard /></Grid>)}
+        {showEmpty && <Grid size={{ xs: 12 }} sx={{ display: 'flex', flexDirection: "column", alignItems: "center", my: 5, gap: 2 }}>
           <Pageview sx={{ width: 64, height: 64, fontSize: 64 }} />
           <Typography variant="overline" component="p">No documents found</Typography>
         </Grid>}
-        {pageDocuments.map(document => <Grid item key={document.id} xs={12} sm={6} md={4}>
+        {pageDocuments.map(document => <Grid key={document.id} size={{ xs: 12, sm: 6, md: 4 }}>
           <DocumentCard userDocument={document} user={user} />
         </Grid>)}
       </Grid>

diff --git a/src/components/EditDocumentInfo.tsx b/src/components/EditDocumentInfo.tsx
@@ -1,7 +1,8 @@
 import { LocalDocumentRevision, User, UserDocumentRevision } from '@/types';
 import RevisionCard from './EditRevisionCard';
 import { actions, useDispatch, useSelector } from '@/store';
-import { Avatar, Badge, Box, Button, Chip, Grid, IconButton, Portal, Typography } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { Avatar, Badge, Box, Button, Chip, IconButton, Portal, Typography } from '@mui/material';
 import { Close, Compare, History, Print } from '@mui/icons-material';
 import type { LexicalEditor } from '@/editor';
 import { MutableRefObject } from 'react';
@@ -130,14 +131,14 @@ export default function EditDocumentInfo({ editorRef, documentId }: { editorRef:
           </Box>}
         </Box>
         <Grid container spacing={1}>
-          <Grid item xs={12} sx={{ display: 'flex', alignItems: 'center' }}>
+          <Grid size={{ xs: 12 }} sx={{ display: 'flex', alignItems: 'center' }}>
             <History sx={{ mr: 1 }} />
             <Typography variant="h6">Revisions</Typography>
             <Button sx={{ ml: 'auto' }} onClick={toggleDiffView} endIcon={isDiffViewOpen ? <Close /> : <Compare />}>
               {isDiffViewOpen ? "Exit" : "Compare"}
             </Button>
           </Grid>
-          {documentRevisions.map(revision => <Grid item xs={12} key={revision.id}><RevisionCard revision={revision} editorRef={editorRef} /></Grid>)}
+          {documentRevisions.map(revision => <Grid size={{ xs: 12 }} key={revision.id}><RevisionCard revision={revision} editorRef={editorRef} /></Grid>)}
         </Grid>
       </AppDrawer>
       {showRevisionsBadge && <Portal container={document.querySelector('#document-info')}>

diff --git a/src/components/Layout/ThemeProvider.tsx b/src/components/Layout/ThemeProvider.tsx
@@ -1,24 +1,21 @@
 "use client"
 import { CssBaseline } from "@mui/material";
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  experimental_extendTheme as extendTheme,
-} from '@mui/material/styles';
+import { ThemeProvider as MuiThemeProvider, createTheme, extendTheme } from '@mui/material/styles';
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 
 export default function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const theme = extendTheme();
+  const theme = createTheme({
+    colorSchemes: { light: true, dark: true },
+    cssVariables: { colorSchemeSelector: 'media', }
+  });
 
   return (
-    <CssVarsProvider theme={theme} attribute="theme" defaultMode="system">
-      <script dangerouslySetInnerHTML={{
-        __html: `(function(){try {document.documentElement.setAttribute('theme',  window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light');} catch(e){}})();`
-      }} />
+    <MuiThemeProvider theme={theme}>
       <CssBaseline />
       {children}
-    </CssVarsProvider>
+    </MuiThemeProvider>
   );
 }
diff --git a/src/components/User/UserDocuments.tsx b/src/components/User/UserDocuments.tsx
@@ -2,7 +2,8 @@
 import { useState } from "react";
 import type { User as UserDocuments, UserDocument } from '@/types';
 import DocumentCard from "../DocumentCard";
-import { Box, Grid, Pagination, Typography } from "@mui/material";
+import Grid from '@mui/material/Grid2';
+import { Box, Pagination, Typography } from "@mui/material";
 import { Pageview } from "@mui/icons-material";
 import DocumentSortControl, { sortDocuments } from "../DocumentSortControl";
 
@@ -26,7 +27,7 @@ const UserDocuments: React.FC<{ documents?: UserDocument[] }> = ({ documents })
         </Box>
         <Box sx={{ display: 'flex', flexDirection: "column", flex: 1, justifyContent: 'space-between' }}>
           <Grid container spacing={2} sx={{ mb: 2 }}>
-            {pageDocuments.map(document => <Grid item key={document.id} xs={12} sm={6} md={4}>
+            {pageDocuments.map(document => <Grid key={document.id} size={{ xs: 12, sm: 6, md: 4 }}>
               <DocumentCard userDocument={document} />
             </Grid>)}
           </Grid>

diff --git a/src/components/ViewDocumentInfo.tsx b/src/components/ViewDocumentInfo.tsx
@@ -1,6 +1,7 @@
 "use client"
 import { CloudDocument, User } from '@/types';
-import { Avatar, Badge, Box, Chip, Fab, Grid, IconButton, Portal, Typography, useScrollTrigger } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { Avatar, Badge, Box, Chip, Fab, IconButton, Portal, Typography, useScrollTrigger } from '@mui/material';
 import { Edit, FileCopy, Print, History } from '@mui/icons-material';
 import RouterLink from "next/link";
 import ShareDocument from './DocumentActions/Share';
@@ -90,11 +91,11 @@ export default function EditDocumentInfo({ cloudDocument, user }: { cloudDocumen
           </Box>
         </Box>
         <Grid container spacing={1}>
-          <Grid item xs={12} sx={{ display: 'flex', alignItems: 'center' }}>
+          <Grid sx={{ display: 'flex', alignItems: 'center' }} size={{ xs: 12 }}>
             <History sx={{ mr: 1 }} />
             <Typography variant="h6">Revisions</Typography>
           </Grid>
-          {cloudDocument.revisions.map(revision => <Grid item xs={12} key={revision.id}><ViewRevisionCard cloudDocument={cloudDocument} revision={revision} /></Grid>)}
+          {cloudDocument.revisions.map(revision => <Grid size={{ xs: 12 }} key={revision.id}><ViewRevisionCard cloudDocument={cloudDocument} revision={revision} /></Grid>)}
         </Grid>
       </AppDrawer>
       {showFork && <Fab variant="extended" size='medium' component={RouterLink} prefetch={false} href={href}

diff --git a/src/editor/nodes/MathNode/index.css b/src/editor/nodes/MathNode/index.css
@@ -46,8 +46,8 @@ math-field::part(menu-toggle) {
   }
 }
 
-@media screen {
-  [theme=dark] math-field {
+@media screen and (prefers-color-scheme: dark) {
+  math-field {
     --contains-highlight-background-color: rgba(255, 255, 255, 0.1);
     --selection-background-color: rgb(95 183 255 / 50%);
   }