diff --git a/package-lock.json b/package-lock.json index 628b85e7..2c6700d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,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", @@ -3368,6 +3369,52 @@ } } }, + "node_modules/@mui/lab/node_modules/@mui/x-date-pickers": { + "version": "5.0.0-alpha.0", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.0.tgz", + "integrity": "sha512-JTzTaNSWbxNi8KDUJjHCH6im0YlIEv88gPoKhGm7s6xCGT1q6FtMp/oQ40nhfwrJ73nkM5G1JXRIzI/yfsHXQQ==", + "dependencies": { + "@date-io/date-fns": "^2.11.0", + "@date-io/dayjs": "^2.11.0", + "@date-io/luxon": "^2.11.1", + "@date-io/moment": "^2.11.0", + "@mui/utils": "^5.2.3", + "clsx": "^1.1.1", + "prop-types": "^15.7.2", + "react-transition-group": "^4.4.2", + "rifm": "^0.12.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@mui/material": "^5.2.3", + "@mui/system": "^5.2.3", + "date-fns": "^2.25.0", + "dayjs": "^1.10.7", + "luxon": "^1.28.0 || ^2.0.0", + "moment": "^2.29.1", + "react": "^17.0.2" + }, + "peerDependenciesMeta": { + "date-fns": { + "optional": true + }, + "dayjs": { + "optional": true + }, + "luxon": { + "optional": true + }, + "moment": { + "optional": true + } + } + }, "node_modules/@mui/material": { "version": "5.5.3", "license": "MIT", @@ -3573,15 +3620,15 @@ } }, "node_modules/@mui/x-date-pickers": { - "version": "5.0.0-alpha.0", - "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.0.tgz", - "integrity": "sha512-JTzTaNSWbxNi8KDUJjHCH6im0YlIEv88gPoKhGm7s6xCGT1q6FtMp/oQ40nhfwrJ73nkM5G1JXRIzI/yfsHXQQ==", + "version": "5.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.1.tgz", + "integrity": "sha512-dLPkRiIn2Gr0momblxiOnIwrxn4SijVix+8e08mwAGWhiWcmWep1O9XTRDpZsjB0kjHYCf+kZjlRX4dxnj2acg==", "dependencies": { "@date-io/date-fns": "^2.11.0", "@date-io/dayjs": "^2.11.0", "@date-io/luxon": "^2.11.1", "@date-io/moment": "^2.11.0", - "@mui/utils": "^5.2.3", + "@mui/utils": "^5.6.0", "clsx": "^1.1.1", "prop-types": "^15.7.2", "react-transition-group": "^4.4.2", @@ -3601,7 +3648,8 @@ "dayjs": "^1.10.7", "luxon": "^1.28.0 || ^2.0.0", "moment": "^2.29.1", - "react": "^17.0.2" + "react": "^17.0.2 || ^18.0.0", + "react-dom": "^17.0.2 || ^18.0.0" }, "peerDependenciesMeta": { "date-fns": { @@ -20304,6 +20352,24 @@ "react-is": "^17.0.2", "react-transition-group": "^4.4.2", "rifm": "^0.12.1" + }, + "dependencies": { + "@mui/x-date-pickers": { + "version": "5.0.0-alpha.0", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.0.tgz", + "integrity": "sha512-JTzTaNSWbxNi8KDUJjHCH6im0YlIEv88gPoKhGm7s6xCGT1q6FtMp/oQ40nhfwrJ73nkM5G1JXRIzI/yfsHXQQ==", + "requires": { + "@date-io/date-fns": "^2.11.0", + "@date-io/dayjs": "^2.11.0", + "@date-io/luxon": "^2.11.1", + "@date-io/moment": "^2.11.0", + "@mui/utils": "^5.2.3", + "clsx": "^1.1.1", + "prop-types": "^15.7.2", + "react-transition-group": "^4.4.2", + "rifm": "^0.12.1" + } + } } }, "@mui/material": { @@ -20392,15 +20458,15 @@ } }, "@mui/x-date-pickers": { - "version": "5.0.0-alpha.0", - "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.0.tgz", - "integrity": "sha512-JTzTaNSWbxNi8KDUJjHCH6im0YlIEv88gPoKhGm7s6xCGT1q6FtMp/oQ40nhfwrJ73nkM5G1JXRIzI/yfsHXQQ==", + "version": "5.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.1.tgz", + "integrity": "sha512-dLPkRiIn2Gr0momblxiOnIwrxn4SijVix+8e08mwAGWhiWcmWep1O9XTRDpZsjB0kjHYCf+kZjlRX4dxnj2acg==", "requires": { "@date-io/date-fns": "^2.11.0", "@date-io/dayjs": "^2.11.0", "@date-io/luxon": "^2.11.1", "@date-io/moment": "^2.11.0", - "@mui/utils": "^5.2.3", + "@mui/utils": "^5.6.0", "clsx": "^1.1.1", "prop-types": "^15.7.2", "react-transition-group": "^4.4.2", diff --git a/package.json b/package.json index 37cbcd39..6dbbc1fe 100644 --- a/package.json +++ b/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", diff --git a/src/app/App.tsx b/src/app/App.tsx index bc5c1857..4d740739 100644 --- a/src/app/App.tsx +++ b/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'; diff --git a/src/components/Statistics/MonthPanel/MonthPanel.tsx b/src/components/Statistics/MonthPanel/MonthPanel.tsx index 98b6aba9..3fba36e6 100644 --- a/src/components/Statistics/MonthPanel/MonthPanel.tsx +++ b/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'; diff --git a/src/components/Statistics/YearPanel/YearPanel.tsx b/src/components/Statistics/YearPanel/YearPanel.tsx index aca276ae..92f6e916 100644 --- a/src/components/Statistics/YearPanel/YearPanel.tsx +++ b/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'; diff --git a/src/components/WeekPicker/WeekPicker.tsx b/src/components/WeekPicker/WeekPicker.tsx index 45b384b4..e06cdd48 100644 --- a/src/components/WeekPicker/WeekPicker.tsx +++ b/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'; diff --git a/src/components/WeekPicker/WeekPickerToolbar.tsx b/src/components/WeekPicker/WeekPickerToolbar.tsx index ceff9d52..2d02a2e2 100644 --- a/src/components/WeekPicker/WeekPickerToolbar.tsx +++ b/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; +type Props = BaseToolbarProps; const WeekPickerToolbar: FC = (props) => { const { isMobileKeyboardViewOpen, toggleMobileKeyboardView } = props; diff --git a/src/components/forms/TrackerForm/TrackerForm.tsx b/src/components/forms/TrackerForm/TrackerForm.tsx index a55b7d7e..02d35e4f 100644 --- a/src/components/forms/TrackerForm/TrackerForm.tsx +++ b/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';