fix(muiDatePicker): fix migration of mui datePicker from lab to mui-x

package.json

@@ -9,6 +9,7 @@
     "@mui/icons-material": "^5.5.1",
     "@mui/lab": "^5.0.0-alpha.78",
     "@mui/material": "^5.5.3",
+    "@mui/x-date-pickers": "^5.0.0-alpha.1",
     "@reduxjs/toolkit": "^1.8.1",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",

src/app/App.tsx

@@ -1,6 +1,4 @@
 import CloseIcon from '@mui/icons-material/Close';
-import { LocalizationProvider } from '@mui/lab';
-import DateAdapter from '@mui/lab/AdapterDateFns';
 import { Container, IconButton, Paper } from '@mui/material';
 import {
   StyledEngineProvider,
@@ -9,6 +7,8 @@ import {
   responsiveFontSizes,
   styled
 } from '@mui/material/styles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns as DateAdapter } from '@mui/x-date-pickers/AdapterDateFns';
 import frLocale from 'date-fns/locale/fr';
 import { SnackbarKey, SnackbarProvider } from 'notistack';
 import { createRef, useMemo, useState } from 'react';

src/components/Statistics/MonthPanel/MonthPanel.tsx

@@ -1,5 +1,5 @@
-import { DatePicker } from '@mui/lab';
 import { Box, TextField } from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers';
 import { endOfMonth, startOfMonth } from 'date-fns';
 import { FC } from 'react';
 

src/components/Statistics/YearPanel/YearPanel.tsx

@@ -1,5 +1,5 @@
-import { DatePicker } from '@mui/lab';
 import { Box, TextField } from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers';
 import { endOfYear, startOfYear } from 'date-fns';
 import { FC } from 'react';
 

src/components/WeekPicker/WeekPicker.tsx

@@ -1,6 +1,6 @@
-import PickersDay, { PickersDayProps } from '@mui/lab/PickersDay';
-import StaticDatePicker from '@mui/lab/StaticDatePicker';
 import { styled } from '@mui/material/styles';
+import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
+import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
 import { addDays, isBefore, isSameDay, isWithinInterval } from 'date-fns';
 import * as React from 'react';
 import { FC } from 'react';

src/components/WeekPicker/WeekPickerToolbar.tsx

@@ -1,10 +1,10 @@
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import { ToolbarComponentProps } from '@mui/lab/internal/pickers/typings/BasePicker';
 import { Box, IconButton, Typography } from '@mui/material';
+import { BaseToolbarProps } from '@mui/x-date-pickers/internals/models/props/baseToolbarProps';
 import { FC } from 'react';
 
-type Props = ToolbarComponentProps<Date | null>;
+type Props = BaseToolbarProps<Date | null>;
 
 const WeekPickerToolbar: FC<Props> = (props) => {
   const { isMobileKeyboardViewOpen, toggleMobileKeyboardView } = props;

src/components/forms/TrackerForm/TrackerForm.tsx

@@ -1,5 +1,5 @@
-import DatePicker from '@mui/lab/DatePicker';
 import { Box, Button, Stack, TextField } from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { FC } from 'react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { v4 } from 'uuid';