fix : bump packages versions

2024-12-29 12:29:51 +01:00
parent 0b8d0ad780
commit c651a08000
37 changed files with 865 additions and 824 deletions
--- a/src/sections/analysis/panelBody/analysisTab/accuracies.tsx
+++ b/src/sections/analysis/panelBody/analysisTab/accuracies.tsx
@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { gameEvalAtom } from "../../states";

@@ -9,12 +9,11 @@ export default function Accuracies() {

  return (
    <Grid
-      item
      container
-      xs={12}
      justifyContent="center"
      alignItems="center"
      columnGap={{ xs: "8vw", md: 10 }}
+      size={12}
    >
      <Typography
        align="center"
--- a/src/sections/analysis/panelBody/analysisTab/index.tsx
+++ b/src/sections/analysis/panelBody/analysisTab/index.tsx
@@ -1,4 +1,9 @@
-import { Grid, GridProps, List, Typography } from "@mui/material";
+import {
+  Grid2 as Grid,
+  Grid2Props as GridProps,
+  List,
+  Typography,
+} from "@mui/material";
 import { useAtomValue } from "jotai";
 import {
  boardAtom,
@@ -39,9 +44,8 @@ export default function AnalysisTab(props: GridProps) {

  return (
    <Grid
-      item
      container
-      xs={12}
+      size={12}
      justifyContent="center"
      alignItems="start"
      height="100%"
@@ -60,14 +64,14 @@ export default function AnalysisTab(props: GridProps) {
      <Opening />

      {isGameOver && (
-        <Grid item xs={12}>
+        <Grid size={12}>
          <Typography align="center" fontSize="0.9rem">
            Game is over
          </Typography>
        </Grid>
      )}

-      <Grid item container xs={12} justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size={12}>
        <List sx={{ maxWidth: "95%", padding: 0 }}>
          {!board.isCheckmate() &&
            engineLines.map((line) => (
--- a/src/sections/analysis/panelBody/analysisTab/moveInfo.tsx
+++ b/src/sections/analysis/panelBody/analysisTab/moveInfo.tsx
@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, currentPositionAtom } from "../../states";
 import { useMemo } from "react";
@@ -36,7 +36,7 @@ export default function MoveInfo() {
      : `${bestMoveSan} was the best move`;

  return (
-    <Grid item container columnGap={5} xs={12} justifyContent="center">
+    <Grid container columnGap={5} justifyContent="center" size={12}>
      {moveLabel && (
        <Typography align="center" fontSize="0.9rem">
          {moveLabel}
--- a/src/sections/analysis/panelBody/analysisTab/opening.tsx
+++ b/src/sections/analysis/panelBody/analysisTab/opening.tsx
@@ -1,5 +1,5 @@
 import { useCurrentPosition } from "../../hooks/useCurrentPosition";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";

 export default function Opening() {
  const position = useCurrentPosition();
@@ -8,7 +8,7 @@ export default function Opening() {
  if (!opening) return null;

  return (
-    <Grid item xs={12}>
+    <Grid size={12}>
      <Typography align="center" fontSize="0.9rem">
        {opening}
      </Typography>
--- a/src/sections/analysis/panelBody/classificationTab/index.tsx
+++ b/src/sections/analysis/panelBody/classificationTab/index.tsx
@@ -1,4 +1,4 @@
-import { Grid, GridProps } from "@mui/material";
+import { Grid2 as Grid, Grid2Props as GridProps } from "@mui/material";
 import MovesPanel from "./movesPanel";
 import MovesClassificationsRecap from "./movesClassificationsRecap";

@@ -6,7 +6,6 @@ export default function ClassificationTab(props: GridProps) {
  return (
    <Grid
      container
-      item
      justifyContent="center"
      alignItems="start"
      height="100%"
--- a/src/sections/analysis/panelBody/classificationTab/movesClassificationsRecap/classificationRow.tsx
+++ b/src/sections/analysis/panelBody/classificationTab/movesClassificationsRecap/classificationRow.tsx
@@ -1,5 +1,5 @@
 import { Color, MoveClassification } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom, gameEvalAtom } from "../../../states";
 import { useMemo } from "react";
@@ -71,16 +71,14 @@ export default function ClassificationRow({ classification }: Props) {
  return (
    <Grid
      container
-      item
      justifyContent="space-evenly"
      alignItems="center"
-      xs={12}
      wrap="nowrap"
      color={moveClassificationColors[classification]}
+      size={12}
    >
      <Grid
        container
-        item
        justifyContent="center"
        alignItems="center"
        width={"3rem"}
@@ -93,7 +91,6 @@ export default function ClassificationRow({ classification }: Props) {

      <Grid
        container
-        item
        justifyContent="start"
        alignItems="center"
        width={"7rem"}
@@ -118,7 +115,6 @@ export default function ClassificationRow({ classification }: Props) {

      <Grid
        container
-        item
        justifyContent="center"
        alignItems="center"
        width={"3rem"}
--- a/src/sections/analysis/panelBody/classificationTab/movesClassificationsRecap/index.tsx
+++ b/src/sections/analysis/panelBody/classificationTab/movesClassificationsRecap/index.tsx
@@ -1,5 +1,5 @@
 import { usePlayersNames } from "@/hooks/usePlayerNames";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { gameAtom, gameEvalAtom } from "../../../states";
 import { MoveClassification } from "@/types/enums";
 import ClassificationRow from "./classificationRow";
@@ -14,21 +14,19 @@ export default function MovesClassificationsRecap() {
  return (
    <Grid
      container
-      item
      justifyContent="center"
      alignItems="center"
      rowGap={1}
-      xs={6}
      sx={{ scrollbarWidth: "thin", overflowY: "auto" }}
      maxHeight="100%"
+      size={6}
    >
      <Grid
-        item
        container
        alignItems="center"
        justifyContent="space-evenly"
        wrap="nowrap"
-        xs={12}
+        size={12}
      >
        <Typography width="12rem" align="center" noWrap fontSize="0.9rem">
          {whiteName}
--- a/src/sections/analysis/panelBody/classificationTab/movesPanel/index.tsx
+++ b/src/sections/analysis/panelBody/classificationTab/movesPanel/index.tsx
@@ -1,4 +1,4 @@
-import { Grid } from "@mui/material";
+import { Grid2 as Grid } from "@mui/material";
 import MovesLine from "./movesLine";
 import { useMemo } from "react";
 import { useAtomValue } from "jotai";
@@ -40,13 +40,12 @@ export default function MovesPanel() {
  return (
    <Grid
      container
-      item
      justifyContent="center"
      alignItems="start"
      gap={0.8}
      sx={{ scrollbarWidth: "thin", overflowY: "auto" }}
      maxHeight="100%"
-      xs={6}
+      size={6}
      id="moves-panel"
    >
      {gameMoves?.map((moves, idx) => (
--- a/src/sections/analysis/panelBody/classificationTab/movesPanel/moveItem.tsx
+++ b/src/sections/analysis/panelBody/classificationTab/movesPanel/moveItem.tsx
@@ -1,5 +1,5 @@
 import { MoveClassification } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import Image from "next/image";
 import { useAtomValue } from "jotai";
 import { boardAtom, currentPositionAtom, gameAtom } from "../../../states";
@@ -40,7 +40,6 @@ export default function MoveItem({ san, moveClassification, moveIdx }: Props) {

  return (
    <Grid
-      item
      container
      justifyContent="center"
      alignItems="center"
--- a/src/sections/analysis/panelBody/classificationTab/movesPanel/movesLine.tsx
+++ b/src/sections/analysis/panelBody/classificationTab/movesPanel/movesLine.tsx
@@ -1,5 +1,5 @@
 import { MoveClassification } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import MoveItem from "./moveItem";

 interface Props {
@@ -11,11 +11,10 @@ export default function MovesLine({ moves, moveNb }: Props) {
  return (
    <Grid
      container
-      item
      justifyContent="space-evenly"
      alignItems="center"
-      xs={12}
      wrap="nowrap"
+      size={12}
    >
      <Typography width="2rem" fontSize="0.9rem">
        {moveNb}.
--- a/src/sections/analysis/panelBody/graphTab/index.tsx
+++ b/src/sections/analysis/panelBody/graphTab/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid, GridProps } from "@mui/material";
+import { Box, Grid2 as Grid, Grid2Props as GridProps } from "@mui/material";
 import { useAtomValue } from "jotai";
 import {
  Area,
@@ -35,7 +35,6 @@ export default function GraphTab(props: GridProps) {
  return (
    <Grid
      container
-      item
      justifyContent="center"
      alignItems="start"
      height="100%"
--- a/src/sections/analysis/panelHeader/gamePanel.tsx
+++ b/src/sections/analysis/panelHeader/gamePanel.tsx
@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { useAtomValue } from "jotai";
 import { gameAtom } from "../states";
@@ -20,27 +20,26 @@ export default function GamePanel() {

  return (
    <Grid
-      item
      container
-      xs={11}
      justifyContent="space-evenly"
      alignItems="center"
      rowGap={1}
      columnGap={3}
+      size={11}
    >
-      <Grid item container xs justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size="grow">
        <Typography noWrap fontSize="0.9rem">
          Site : {gameFromUrl?.site || game.header().Site || "?"}
        </Typography>
      </Grid>

-      <Grid item container xs justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size="grow">
        <Typography noWrap fontSize="0.9rem">
          Date : {gameFromUrl?.date || game.header().Date || "?"}
        </Typography>
      </Grid>

-      <Grid item container xs justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size="grow">
        <Typography noWrap fontSize="0.9rem">
          Result : {result}
        </Typography>
--- a/src/sections/analysis/panelHeader/index.tsx
+++ b/src/sections/analysis/panelHeader/index.tsx
@@ -1,5 +1,5 @@
 import { Icon } from "@iconify/react";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import GamePanel from "./gamePanel";
 import LoadGame from "./loadGame";
 import AnalyzeButton from "./analyzeButton";
@@ -12,20 +12,18 @@ export default function PanelHeader() {

  return (
    <Grid
-      item
      container
      justifyContent="center"
      alignItems="center"
-      xs={12}
      rowGap={2}
+      size={12}
    >
      <Grid
-        item
        container
-        xs={12}
        justifyContent="center"
        alignItems="center"
        columnGap={1}
+        size={12}
      >
        <Icon icon="streamline:clipboard-check" height={24} />

@@ -35,13 +33,12 @@ export default function PanelHeader() {
      </Grid>

      <Grid
-        item
        container
-        xs={12}
        justifyContent="center"
        alignItems="center"
        rowGap={2}
        columnGap={12}
+        size={12}
      >
        <GamePanel />
        <LoadGame />
--- a/src/sections/analysis/panelToolbar/goToLastPositionButton.tsx
+++ b/src/sections/analysis/panelToolbar/goToLastPositionButton.tsx
@@ -1,5 +1,5 @@
 import { Icon } from "@iconify/react";
-import { Grid, IconButton, Tooltip } from "@mui/material";
+import { Grid2 as Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
 import { useChessActions } from "@/hooks/useChessActions";
--- a/src/sections/analysis/panelToolbar/index.tsx
+++ b/src/sections/analysis/panelToolbar/index.tsx
@@ -1,4 +1,4 @@
-import { Grid, IconButton, Tooltip } from "@mui/material";
+import { Grid2 as Grid, IconButton, Tooltip } from "@mui/material";
 import { Icon } from "@iconify/react";
 import { useAtomValue } from "jotai";
 import { boardAtom } from "../states";
@@ -35,7 +35,7 @@ export default function PanelToolBar() {
  }, [undoBoardMove, boardHistory, resetBoard, board]);

  return (
-    <Grid container item justifyContent="center" alignItems="center" xs={12}>
+    <Grid container justifyContent="center" alignItems="center" size={12}>
      <FlipBoardButton />

      <Tooltip title="Reset board">
--- a/src/sections/analysis/panelToolbar/nextMoveButton.tsx
+++ b/src/sections/analysis/panelToolbar/nextMoveButton.tsx
@@ -1,5 +1,5 @@
 import { Icon } from "@iconify/react";
-import { Grid, IconButton, Tooltip } from "@mui/material";
+import { Grid2 as Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
 import { useChessActions } from "@/hooks/useChessActions";
--- a/src/sections/analysis/panelToolbar/saveButton.tsx
+++ b/src/sections/analysis/panelToolbar/saveButton.tsx
@@ -1,6 +1,6 @@
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { Icon } from "@iconify/react";
-import { Grid, IconButton, Tooltip } from "@mui/material";
+import { Grid2 as Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { useRouter } from "next/router";
 import { boardAtom, gameAtom, gameEvalAtom } from "../states";
--- a/src/sections/engineSettings/arrowOptions.tsx
+++ b/src/sections/engineSettings/arrowOptions.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, FormControlLabel, Grid } from "@mui/material";
+import { Checkbox, FormControlLabel, Grid2 as Grid } from "@mui/material";
 import {
  showBestMoveArrowAtom,
  showPlayerMoveIconAtom,
@@ -18,10 +18,9 @@ export default function ArrowOptions() {
  return (
    <Grid
      container
-      item
      justifyContent="space-evenly"
      alignItems="center"
-      xs={12}
+      size={12}
      gap={3}
    >
      <FormControlLabel
--- a/src/sections/engineSettings/engineSettingsDialog.tsx
+++ b/src/sections/engineSettings/engineSettingsDialog.tsx
@@ -12,7 +12,7 @@ import {
  OutlinedInput,
  DialogActions,
  Typography,
-  Grid,
+  Grid2 as Grid,
 } from "@mui/material";
 import {
  engineNameAtom,
@@ -62,14 +62,13 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
        </Typography>
        <Grid
          marginTop={4}
-          item
          container
          justifyContent="center"
          alignItems="center"
-          xs={12}
          rowGap={3}
+          size={12}
        >
-          <Grid item container xs={12} justifyContent="center">
+          <Grid container justifyContent="center" size={12}>
            <FormControl variant="outlined">
              <InputLabel id="dialog-select-label">Engine</InputLabel>
              <Select
@@ -111,7 +110,7 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
            setValue={setMultiPv}
            min={2}
            max={6}
-            xs={6}
+            size={6}
          />

          <ArrowOptions />
--- a/src/sections/loadGame/chessComInput.tsx
+++ b/src/sections/loadGame/chessComInput.tsx
@@ -5,7 +5,7 @@ import { ChessComGame } from "@/types/chessCom";
 import {
  CircularProgress,
  FormControl,
-  Grid,
+  Grid2 as Grid,
  ListItemButton,
  ListItemText,
  TextField,
@@ -60,12 +60,11 @@ export default function ChessComInput({ pgn, setPgn }: Props) {
      {chessComUsername && (
        <Grid
          container
-          item
-          xs={12}
          gap={2}
          justifyContent="center"
          alignContent="center"
          minHeight={100}
+          size={12}
        >
          {games.map((game) => (
            <ListItemButton
@@ -85,8 +84,10 @@ export default function ChessComInput({ pgn, setPgn }: Props) {
                )
                  .toLocaleString()
                  .slice(0, -3)}`}
-                primaryTypographyProps={{ noWrap: true }}
-                secondaryTypographyProps={{ noWrap: true }}
+                slotProps={{
+                  primary: { noWrap: true },
+                  secondary: { noWrap: true },
+                }}
              />
            </ListItemButton>
          ))}
--- a/src/sections/loadGame/lichessInput.tsx
+++ b/src/sections/loadGame/lichessInput.tsx
@@ -5,7 +5,7 @@ import { LichessGame } from "@/types/lichess";
 import {
  CircularProgress,
  FormControl,
-  Grid,
+  Grid2 as Grid,
  ListItemButton,
  ListItemText,
  TextField,
@@ -60,12 +60,11 @@ export default function LichessInput({ pgn, setPgn }: Props) {
      {lichessUsername && (
        <Grid
          container
-          item
-          xs={12}
          gap={2}
          justifyContent="center"
          alignContent="center"
          minHeight={100}
+          size={12}
        >
          {games.map((game) => (
            <ListItemButton
@@ -87,8 +86,10 @@ export default function LichessInput({ pgn, setPgn }: Props) {
                )
                  .toLocaleString()
                  .slice(0, -3)}`}
-                primaryTypographyProps={{ noWrap: true }}
-                secondaryTypographyProps={{ noWrap: true }}
+                slotProps={{
+                  primary: { noWrap: true },
+                  secondary: { noWrap: true },
+                }}
              />
            </ListItemButton>
          ))}
--- a/src/sections/loadGame/loadGameDialog.tsx
+++ b/src/sections/loadGame/loadGameDialog.tsx
@@ -13,7 +13,7 @@ import {
  OutlinedInput,
  DialogActions,
  Typography,
-  Grid,
+  Grid2 as Grid,
 } from "@mui/material";
 import { Chess } from "chess.js";
 import { useState } from "react";
--- a/src/sections/play/gameInProgress.tsx
+++ b/src/sections/play/gameInProgress.tsx
@@ -1,4 +1,9 @@
-import { Button, CircularProgress, Grid, Typography } from "@mui/material";
+import {
+  Button,
+  CircularProgress,
+  Grid2 as Grid,
+  Typography,
+} from "@mui/material";
 import { useAtom, useAtomValue } from "jotai";
 import { gameAtom, isGameInProgressAtom } from "./states";
 import { useEffect } from "react";
@@ -22,30 +27,28 @@ export default function GameInProgress() {

  return (
    <Grid
-      item
      container
-      xs={12}
      justifyContent="center"
      alignItems="center"
      gap={2}
+      size={12}
    >
      <Grid
        container
-        item
        justifyContent="center"
        alignItems="center"
-        xs={12}
        gap={2}
+        size={12}
      >
        <Typography>Game in progress</Typography>
        <CircularProgress size={20} color="info" />
      </Grid>

-      <Grid item container justifyContent="center" alignItems="center" xs={12}>
+      <Grid container justifyContent="center" alignItems="center" size={12}>
        <UndoMoveButton />
      </Grid>

-      <Grid item container justifyContent="center" alignItems="center" xs={12}>
+      <Grid container justifyContent="center" alignItems="center" size={12}>
        <Button variant="outlined" onClick={handleResign}>
          Resign
        </Button>
--- a/src/sections/play/gameRecap.tsx
+++ b/src/sections/play/gameRecap.tsx
@@ -1,6 +1,6 @@
 import { useAtomValue } from "jotai";
 import { gameAtom, isGameInProgressAtom, playerColorAtom } from "./states";
-import { Button, Grid, Typography } from "@mui/material";
+import { Button, Grid2 as Grid, Typography } from "@mui/material";
 import { Color } from "@/types/enums";
 import { setGameHeaders } from "@/lib/chess";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
@@ -40,14 +40,13 @@ export default function GameRecap() {

  return (
    <Grid
-      item
      container
-      xs={12}
      justifyContent="center"
      alignItems="center"
      gap={2}
+      size={12}
    >
-      <Grid item container xs={12} justifyContent="center">
+      <Grid container justifyContent="center" size={12}>
        <Typography>{getResultLabel()}</Typography>
      </Grid>

--- a/src/sections/play/gameSettings/gameSettingsDialog.tsx
+++ b/src/sections/play/gameSettings/gameSettingsDialog.tsx
@@ -12,7 +12,7 @@ import {
  OutlinedInput,
  DialogActions,
  Typography,
-  Grid,
+  Grid2 as Grid,
  FormGroup,
  FormControlLabel,
  Switch,
@@ -87,14 +87,13 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
        </Typography>
        <Grid
          marginTop={4}
-          item
          container
          justifyContent="center"
          alignItems="center"
-          xs={12}
          rowGap={3}
+          size={12}
        >
-          <Grid item container xs={12} justifyContent="center">
+          <Grid container justifyContent="center" size={12}>
            <FormControl variant="outlined">
              <InputLabel id="dialog-select-label">Bot's engine</InputLabel>
              <Select