chore: update chakra & next

package.json

@@ -17,66 +17,64 @@
     "node": ">=20"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^1.0.13",
-    "@chakra-ui/react": "^1.6.3",
+    "@chakra-ui/react": "^3.30.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@fontsource/josefin-sans": "^4.4.5",
     "@hookform/resolvers": "^2.9.6",
-    "@mdx-js/loader": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
     "@next-auth/prisma-adapter": "^1.0.7",
-    "@next/mdx": "^10.2.3",
+    "@next/mdx": "^15.1.3",
     "@prisma/adapter-pg": "^7.1.0",
     "@prisma/client": "^7.0.0",
     "@react-hook/throttle": "^2.2.0",
     "@react-hook/window-size": "^3.0.7",
-    "@sentry/cli": "^1.68.0",
-    "@sentry/nextjs": "^6.11.0",
-    "@sentry/node": "^6.11.0",
+    "@sentry/cli": "^2.39.1",
+    "@sentry/nextjs": "^8.44.0",
+    "@sentry/node": "^8.44.0",
     "@types/express": "^4.17.13",
-    "@types/mdx-js__react": "^1.5.3",
+    "@types/mdx": "^2.0.13",
     "@types/mermaid": "^8.2.7",
     "@uiw/react-md-editor": "^3.6.0",
-    "chakra-paginator": "^0.7.2",
     "express": "^4.17.1",
     "focus-visible": "^5.2.0",
-    "framer-motion": "^4",
+    "framer-motion": "^11.15.0",
     "lz-string": "^1.5.0",
     "mermaid": "^8.12.0",
-    "next": "14.2.4",
+    "next": "^15.1.3",
     "next-auth": "^4.24.7",
-    "next-mdx-remote": "^3.0.2",
+    "next-mdx-remote": "^5.0.0",
     "next-remove-imports": "^1.0.6",
     "nodemailer": "^6.9.14",
     "nodemon": "^2.0.12",
     "pg": "^8.16.3",
     "prettier": "^2.3.2",
-    "prism-react-renderer": "^1.2.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "prism-react-renderer": "^2.4.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-full-screen": "^1.0.2",
     "react-hook-form": "^7.33.1",
-    "react-icons": "4.2.0",
+    "react-icons": "^5.3.0",
     "react-swipeable": "^6.1.2",
     "react-syntax-highlighter": "^15.4.3",
     "slugify": "^1.6.0",
     "socket.io": "^4.1.3",
     "socket.io-client": "^4.1.3",
     "superjson": "^1.7.5",
-    "swr": "^1.3.0",
+    "swr": "^2.2.5",
     "use-timer": "^2.0.1",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",
     "@types/pg": "^8.16.0",
     "@types/prismjs": "^1.16.5",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "babel-plugin-superjson-next": "^0.4.0",
-    "eslint": "7.32.0",
-    "eslint-config-next": "12.2.5",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "^15.1.3",
     "prisma": "^7.0.0",
     "puppeteer": "^10.0.0",
     "ts-node": "^10.9.2",

src/components/CourseCard.tsx

@@ -1,6 +1,4 @@
-import { Box, Stack, HStack } from "@chakra-ui/react";
-import { Text } from "@chakra-ui/layout";
-import { Image } from "@chakra-ui/react";
+import { Box, Stack, HStack, Text, Image } from "@chakra-ui/react";
 import { getCourseCover } from "src/utils/courses";
 import { CourseType } from "src/pages";
 
@@ -40,7 +38,7 @@ const CourseCard = ({
           <Image
             height="200"
             src={getCourseCover(course)}
-            fit="cover"
+            objectFit="cover"
             alt="cover"
           />
         </Box>

src/components/course/CourseDetail.tsx

@@ -37,7 +37,7 @@ const CourseDetail = ({ course }: { course: CourseType }) => {
         height="300"
         width="100%"
         src={getCourseCover(course)}
-        fit="cover"
+        objectFit="cover"
         alt="cover"
       />
       <HStack paddingY={8} justifyContent="center">

src/components/course/CoursesTable.tsx

@@ -1,4 +1,3 @@
-import { CloseIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
 import {
   HStack,
   IconButton,
@@ -14,6 +13,7 @@ import {
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import ConfirmButton from "../ConfirmButton";
+import { MdClose, MdEdit, MdVisibility } from "react-icons/md";
 
 interface ICoursesTableProps {
   courses: any[];
@@ -62,25 +62,27 @@ const CoursesTable = ({ courses }: ICoursesTableProps) => {
                   <IconButton
                     size="sm"
                     aria-label="View"
-                    icon={<ViewIcon />}
                     as={Link}
                     href={`/${course.slug}/0`}
-                  />
+                  >
+                    <MdVisibility />
+                  </IconButton>
                 </Tooltip>
                 <Tooltip label="Éditer les infos">
                   <IconButton
                     size="sm"
                     aria-label="Edit info"
-                    icon={<EditIcon />}
                     as={Link}
                     href={`/admin/courses/${course.slug}`}
-                  />
+                  >
+                    <MdEdit />
+                  </IconButton>
                 </Tooltip>
                 <ConfirmButton
                   label="Supprimer le cours"
                   confirmDetail="Êtes-vous sûrs de vouloir supprimer ce cours?"
                   colorScheme="red"
-                  icon={<CloseIcon />}
+                  icon={<MdClose />}
                   onConfirm={() => {
                     deleteCourse(course?.id);
                   }}

src/components/homes/PublicHome.tsx

@@ -31,7 +31,7 @@ const PublicHome = () => {
             height="500px"
             width="100%"
             src="/Home.png"
-            fit="contain"
+            objectFit="contain"
             alt="home"
           />
         </Box>

src/components/mdx/ChapterHeadingBackground.tsx

@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/layout";
+import { Flex } from "@chakra-ui/react";
 
 const directions = ["to-tl", "to-br", "to-bl", "to-tr"];
 const bgGradientColors = ["blue", "pink", "orange", "purple"];

src/components/mdx/ChaptersMenu.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Heading, Text } from "@chakra-ui/layout";
+import { Box, Flex, Heading, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useSocketContext } from "@/context/SocketContext";
 import { CourseType } from "src/pages";
@@ -42,7 +42,7 @@ const ChaptersMenu: React.FC<ChaptersMenuProps> = ({
         height="100%"
         width="100%"
         overflow="auto"
-        gridGap="xs"
+        gap="xs"
       >
         {chapters.map((chapter: string, i) => {
           const isActive = chapter === currentChapter;

src/components/mdx/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Highlight, { defaultProps, Language, Prism } from "prism-react-renderer";
 import codeTheme from "prism-react-renderer/themes/nightOwl";
-import { Box, Code, Flex, Link } from "@chakra-ui/layout";
+import { Box, Code, Flex, Link } from "@chakra-ui/react";
 import Mermaid from "./Mermaid";
 import { compressToEncodedURIComponent } from "lz-string";
 

src/components/mdx/Controls.tsx

@@ -1,11 +1,10 @@
-import { Button, IconButton, Flex, useBoolean } from "@chakra-ui/react";
-import Icon from "@chakra-ui/icon";
-import { HamburgerIcon, RepeatIcon } from "@chakra-ui/icons";
+import { Button, IconButton, Flex } from "@chakra-ui/react";
+import { useState } from "react";
 import { useEffect } from "react";
 import { FullScreenHandle } from "react-full-screen";
 import { BsFullscreen } from "react-icons/bs";
 import { useSlidesContext } from "@/context/SlidesContext";
-import { MdHome } from "react-icons/md";
+import { MdHome, MdMenu, MdRepeat } from "react-icons/md";
 import { useRouter } from "next/router";
 
 export interface ControlsProps {
@@ -20,17 +19,17 @@ const Controls: React.FC<ControlsProps> = ({
   isAdmin,
 }) => {
   const { toggleFollowMode, currentMode } = useSlidesContext();
-  const [showControls, setShowControls] = useBoolean();
+  const [showControls, setShowControls] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout>;
     const listener = () => {
-      setShowControls.on();
+      setShowControls(true);
 
       clearTimeout(timeout);
       timeout = setTimeout(() => {
-        setShowControls.off();
+        setShowControls(false);
       }, 2000);
     };
     window.addEventListener("mousemove", listener);
@@ -63,19 +62,19 @@ const Controls: React.FC<ControlsProps> = ({
         aria-label="Chapters"
         onClick={toggleSideBar}
         variant="outline"
-        icon={<HamburgerIcon />}
-      />
-      <Flex gridGap="xs">
+      >
+        <MdMenu />
+      </IconButton>
+      <Flex gap="xs">
         {!isAdmin && (
           <Button
             colorScheme="red"
             variant="outline"
             p="sm"
-            leftIcon={<RepeatIcon />}
             onClick={toggleFollowMode}
-            isActive={currentMode === "follow"}
             cursor="pointer"
           >
+            <MdRepeat style={{ marginRight: "0.5rem" }} />
             sync
           </Button>
         )}
@@ -90,7 +89,7 @@ const Controls: React.FC<ControlsProps> = ({
           }
           cursor="pointer"
         >
-          <Icon as={BsFullscreen} strokeWidth="2px" dropShadow="md" />
+          <BsFullscreen />
         </Button>
         <Button
           colorScheme="gray"
@@ -100,7 +99,7 @@ const Controls: React.FC<ControlsProps> = ({
             router.push("/");
           }}
         >
-          <Icon as={MdHome} strokeWidth="2px" dropShadow="md" />
+          <MdHome />
         </Button>
       </Flex>
     </Flex>

src/components/mdx/FollowingFeedbackDot.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from "@chakra-ui/layout";
+import { Box, Flex, Text } from "@chakra-ui/react";
 export interface FollowingFeedbackDotProps {
   isFollowing: Boolean;
 }
@@ -14,7 +14,7 @@ const FollowingFeedbackDot: React.FC<FollowingFeedbackDotProps> = ({
         right="0"
         zIndex="20"
         alignItems="center"
-        gridGap="xs"
+        gap="xs"
         p="xs"
         opacity="0.4"
       >

src/components/mdx/MDXProvider.tsx

@@ -1,5 +1,3 @@
-import Icon from "@chakra-ui/icon";
-import { Image } from "@chakra-ui/image";
 import {
   Box,
   Flex,
@@ -10,8 +8,14 @@ import {
   HStack,
   VStack,
   Text,
-} from "@chakra-ui/layout";
-import { Code, Table, Tbody, Td, Th, Tr } from "@chakra-ui/react";
+  Image,
+  Code,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Tr,
+} from "@chakra-ui/react";
 import { MDXProvider as MDXDefaultProvider } from "@mdx-js/react";
 import React from "react";
 import ChapterHeading from "./ChapterHeading";
@@ -76,7 +80,6 @@ export const mdComponents = {
   Flex,
   HStack: (props: any) => <HStack justifyContent="space-between" {...props} />,
   VStack,
-  Icon,
   // Images
   Image: (props: any) => (
     <Image

src/components/mdx/Mermaid.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/layout";
+import { Box } from "@chakra-ui/react";
 import { useMermaid } from "@/hooks/useMermaid";
 
 export interface MermaidProps {

src/components/mdx/Slide.tsx

@@ -1,6 +1,6 @@
 import { useSlidesContext } from "@/context/SlidesContext";
 import useSlideRatioStyle from "@/hooks/useSlideRatioStyle";
-import { Box, Flex, FlexProps } from "@chakra-ui/layout";
+import { Box, Flex, FlexProps } from "@chakra-ui/react";
 import React from "react";
 import SlideHeader from "./SlideHeader";
 

src/components/mdx/SlideHeader.tsx

@@ -1,4 +1,4 @@
-import { Flex, Heading } from "@chakra-ui/layout";
+import { Flex, Heading } from "@chakra-ui/react";
 
 export interface SlideHeaderProps {
   slideTitle: string;

src/components/mdx/Slides.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, HStack, VStack } from "@chakra-ui/layout";
+import { Box, Flex, HStack, VStack } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import * as React from "react";
 import { useEffect } from "react";
@@ -73,7 +73,7 @@ const Slides: React.FC<SlidesProps> = ({ children, title, course }) => {
           height="100%"
           flexDirection="column"
           alignItems="center"
-          gridGap="md"
+          gap="md"
           m="1px"
         >
           {isPreview && isAdmin ? (

src/components/mdx/SpeakerFooter.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/layout";
+import { Box } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { useSocketContext } from "@/context/SocketContext";
 

src/components/mdx/Timer.tsx

@@ -1,5 +1,4 @@
-import { Button } from "@chakra-ui/button";
-import { Box, Flex } from "@chakra-ui/layout";
+import { Button, Box, Flex } from "@chakra-ui/react";
 import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
 import { useDeckTimer } from "@/context/DeckTimerContext";
 
@@ -30,7 +29,7 @@ const Timer: React.FC<TimerProps> = () => {
       fontFamily="monospace"
       justifyContent="flex-start"
       alignItems="center"
-      gridGap="xs"
+      gap="xs"
       m="xs"
     >
       {status === "RUNNING" ? (