feat: replace deprecated

brocoders · Dec 28, 2024 · c82b2d3 · c82b2d3
1 parent 6e60ca1
commit c82b2d3
Show file tree

Hide file tree

Showing 20 changed files with 156 additions and 147 deletions.
diff --git a/.hygen/generate/resource/create/page-content.ejs.t b/.hygen/generate/resource/create/page-content.ejs.t
@@ -6,7 +6,7 @@ to: src/app/[language]/admin-panel/<%= h.inflection.transform(name, ['pluralize'
 import Button from "@mui/material/Button";
 import { useForm, FormProvider, useFormState } from "react-hook-form";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import * as yup from "yup";

diff --git a/.hygen/generate/resource/page-content.ejs.t b/.hygen/generate/resource/page-content.ejs.t
@@ -7,7 +7,7 @@ import { RoleEnum } from "@/services/api/types/role";
 import withPageRequiredAuth from "@/services/auth/with-page-required-auth";
 import { useTranslation } from "@/services/i18n/client";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useGet<%= h.inflection.transform(name, ['pluralize']) %>Query, <%= h.inflection.camelize(h.inflection.pluralize(name), true) %>QueryKeys } from "./queries/queries";
@@ -190,12 +190,12 @@ function <%= h.inflection.transform(name, ['pluralize']) %>() {
   return (
     <Container maxWidth="xl">
       <Grid container spacing={3} pt={3}>
-        <Grid container item spacing={3} xs={12}>
-          <Grid item xs>
+        <Grid container size={{ xs: 12 }} spacing={3}>
+          <Grid size="grow">
             <Typography variant="h3">{t("title")}</Typography>
           </Grid>
-          <Grid container item xs="auto" wrap="nowrap" spacing={2}>
-            <Grid item xs="auto">
+          <Grid container size="auto" wrap="nowrap" spacing={2}>
+            <Grid size="auto">
               <Button
                 variant="contained"
                 LinkComponent={Link}
@@ -208,7 +208,7 @@ function <%= h.inflection.transform(name, ['pluralize']) %>() {
           </Grid>
         </Grid>
 
-        <Grid item xs={12} mb={2}>
+        <Grid size={{ xs: 12 }} mb={2}>
           <TableVirtuoso
             useWindowScroll
             data={tableData}

diff --git a/src/app/[language]/admin-panel/page-content.tsx b/src/app/[language]/admin-panel/page-content.tsx
@@ -4,7 +4,7 @@ import { RoleEnum } from "@/services/api/types/role";
 import withPageRequiredAuth from "@/services/auth/with-page-required-auth";
 import { useTranslation } from "@/services/i18n/client";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 
 function AdminPanel() {
@@ -13,7 +13,7 @@ function AdminPanel() {
   return (
     <Container maxWidth="md">
       <Grid container spacing={3} wrap="nowrap" pt={3}>
-        <Grid item>
+        <Grid>
           <Typography variant="h3" gutterBottom>
             {t("title")}
           </Typography>

diff --git a/src/app/[language]/admin-panel/users/create/page-content.tsx b/src/app/[language]/admin-panel/users/create/page-content.tsx
@@ -3,7 +3,7 @@
 import Button from "@mui/material/Button";
 import { useForm, FormProvider, useFormState } from "react-hook-form";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import * as yup from "yup";
@@ -151,19 +151,19 @@ function FormCreateUser() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit} autoComplete="create-new-user">
           <Grid container spacing={2} mb={3} mt={3}>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Typography variant="h6">
                 {t("admin-panel-users-create:title")}
               </Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormAvatarInput<CreateUserFormData>
                 name="photo"
                 testId="photo"
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<CreateUserFormData>
                 name="email"
                 testId="new-user-email"
@@ -172,7 +172,7 @@ function FormCreateUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<CreateUserFormData>
                 name="password"
                 type="password"
@@ -182,7 +182,7 @@ function FormCreateUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<CreateUserFormData>
                 name="passwordConfirmation"
                 testId="new-user-password-confirmation"
@@ -193,23 +193,23 @@ function FormCreateUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<CreateUserFormData>
                 name="firstName"
                 testId="first-name"
                 label={t("admin-panel-users-create:inputs.firstName.label")}
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<CreateUserFormData>
                 name="lastName"
                 testId="last-name"
                 label={t("admin-panel-users-create:inputs.lastName.label")}
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormSelectInput<CreateUserFormData, Pick<Role, "id">>
                 name="role"
                 testId="role"
@@ -229,7 +229,7 @@ function FormCreateUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <CreateUserFormActions />
               <Box ml={1} component="span">
                 <Button

diff --git a/src/app/[language]/admin-panel/users/edit/[id]/page-content.tsx b/src/app/[language]/admin-panel/users/edit/[id]/page-content.tsx
@@ -3,7 +3,7 @@
 import Button from "@mui/material/Button";
 import { useForm, FormProvider, useFormState } from "react-hook-form";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import * as yup from "yup";
@@ -204,40 +204,40 @@ function FormEditUser() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={3} mt={3}>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Typography variant="h6">
                 {t("admin-panel-users-edit:title1")}
               </Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormAvatarInput<EditUserFormData> name="photo" testId="photo" />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditUserFormData>
                 name="email"
                 testId="email"
                 label={t("admin-panel-users-edit:inputs.email.label")}
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditUserFormData>
                 name="firstName"
                 testId="first-name"
                 label={t("admin-panel-users-edit:inputs.firstName.label")}
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditUserFormData>
                 name="lastName"
                 testId="last-name"
                 label={t("admin-panel-users-edit:inputs.lastName.label")}
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormSelectInput<EditUserFormData, Pick<Role, "id">>
                 name="role"
                 testId="role"
@@ -257,7 +257,7 @@ function FormEditUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <EditUserFormActions />
               <Box ml={1} component="span">
                 <Button
@@ -326,21 +326,21 @@ function FormChangePasswordUser() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={3} mt={3}>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Typography variant="h6">
                 {t("admin-panel-users-edit:title2")}
               </Typography>
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<ChangeUserPasswordFormData>
                 name="password"
                 type="password"
                 label={t("admin-panel-users-edit:inputs.password.label")}
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<ChangeUserPasswordFormData>
                 name="passwordConfirmation"
                 label={t(
@@ -350,7 +350,7 @@ function FormChangePasswordUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <ChangePasswordUserFormActions />
               <Box ml={1} component="span">
                 <Button

diff --git a/src/app/[language]/admin-panel/users/page-content.tsx b/src/app/[language]/admin-panel/users/page-content.tsx
@@ -4,7 +4,7 @@ import { RoleEnum } from "@/services/api/types/role";
 import withPageRequiredAuth from "@/services/auth/with-page-required-auth";
 import { useTranslation } from "@/services/i18n/client";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import {
   PropsWithChildren,
@@ -297,17 +297,17 @@ function Users() {
   return (
     <Container maxWidth="xl">
       <Grid container spacing={3} pt={3}>
-        <Grid container item spacing={3} xs={12}>
-          <Grid item xs>
+        <Grid container spacing={3} size={{ xs: 12 }}>
+          <Grid size="grow">
             <Typography variant="h3">
               {tUsers("admin-panel-users:title")}
             </Typography>
           </Grid>
-          <Grid container item xs="auto" wrap="nowrap" spacing={2}>
-            <Grid item xs="auto">
+          <Grid container size="auto" wrap="nowrap" spacing={2}>
+            <Grid size="auto">
               <UserFilter />
             </Grid>
-            <Grid item xs="auto">
+            <Grid size="auto">
               <Button
                 variant="contained"
                 LinkComponent={Link}
@@ -320,7 +320,7 @@ function Users() {
           </Grid>
         </Grid>
 
-        <Grid item xs={12} mb={2}>
+        <Grid size={{ xs: 12 }} mb={2}>
           <TableVirtuoso
             style={{ height: 500 }}
             data={result}

diff --git a/src/app/[language]/admin-panel/users/user-filter.tsx b/src/app/[language]/admin-panel/users/user-filter.tsx
@@ -5,7 +5,7 @@ import { Role, RoleEnum } from "@/services/api/types/role";
 import { useTranslation } from "@/services/i18n/client";
 import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Popover from "@mui/material/Popover";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -76,7 +76,7 @@ function UserFilter() {
             })}
           >
             <Grid container spacing={2} mb={3} mt={3}>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <FormMultipleSelectInput<UserFilterFormData, Pick<Role, "id">>
                   name="roles"
                   testId="roles"
@@ -106,7 +106,7 @@ function UserFilter() {
                   }
                 />
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <Button variant="contained" type="submit">
                   {t("admin-panel-users:filter.actions.apply")}
                 </Button>

diff --git a/src/app/[language]/confirm-email/page-content.tsx b/src/app/[language]/confirm-email/page-content.tsx
@@ -7,7 +7,7 @@ import { useAuthConfirmEmailService } from "@/services/api/services/auth";
 import { useRouter } from "next/navigation";
 import { useSnackbar } from "notistack";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import HTTP_CODES_ENUM from "@/services/api/types/http-codes";
 import { useTranslation } from "@/services/i18n/client";
 
@@ -47,7 +47,7 @@ export default function ConfirmEmail() {
   return (
     <Container maxWidth="sm">
       <Grid container>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <Box
             sx={{
               display: "flex",

diff --git a/src/app/[language]/confirm-new-email/page-content.tsx b/src/app/[language]/confirm-new-email/page-content.tsx
@@ -10,7 +10,7 @@ import {
 import { useRouter } from "next/navigation";
 import { useSnackbar } from "notistack";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import HTTP_CODES_ENUM from "@/services/api/types/http-codes";
 import { useTranslation } from "@/services/i18n/client";
 import useAuthActions from "@/services/auth/use-auth-actions";
@@ -76,7 +76,7 @@ export default function ConfirmNewEmail() {
   return (
     <Container maxWidth="sm">
       <Grid container>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <Box
             sx={{
               display: "flex",

diff --git a/src/app/[language]/forgot-password/page-content.tsx b/src/app/[language]/forgot-password/page-content.tsx
@@ -4,7 +4,7 @@ import withPageRequiredGuest from "@/services/auth/with-page-required-guest";
 import { useForm, FormProvider, useFormState } from "react-hook-form";
 import { useAuthForgotPasswordService } from "@/services/api/services/auth";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import * as yup from "yup";
@@ -90,10 +90,10 @@ function Form() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={2}>
-            <Grid item xs={12} mt={3}>
+            <Grid size={{ xs: 12 }} mt={3}>
               <Typography variant="h6">{t("forgot-password:title")}</Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<ForgotPasswordFormData>
                 name="email"
                 label={t("forgot-password:inputs.email.label")}
@@ -102,7 +102,7 @@ function Form() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormActions />
             </Grid>
           </Grid>