diff --git a/notes/SQFormDatePicker.md b/notes/SQFormDatePicker.md index 559a6dcd..b24072e7 100644 --- a/notes/SQFormDatePicker.md +++ b/notes/SQFormDatePicker.md @@ -4,15 +4,15 @@ This is a date time field used inside our forms. ## First time setup -`> npm install @material-ui/pickers@next` +`> npm install @mui/x-date-pickers@next` From the top of your client code add the LocalizationProvider. The same place the Material-UI theme providers are used. Then pass the MomentAdapter into the `dateAdapter` prop. ```js -import {LocalizationProvider} from '@material-ui/pickers'; -import MomentAdapter from '@material-ui/pickers/adapter/moment'; +import {LocalizationProvider} from '@mui/x-date-pickers'; +import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment'; - + ; ``` diff --git a/src/components/SQForm/SQFormDatePicker.tsx b/src/components/SQForm/SQFormDatePicker.tsx index 94005df7..3db4d0ab 100644 --- a/src/components/SQForm/SQFormDatePicker.tsx +++ b/src/components/SQForm/SQFormDatePicker.tsx @@ -1,38 +1,16 @@ import React from 'react'; -import { - ClickAwayListener, - Grid, - makeStyles, - TextField, -} from '@material-ui/core'; -import {DatePicker} from '@material-ui/pickers'; +import {ClickAwayListener, Grid, TextField} from '@mui/material'; +import {DatePicker} from '@mui/x-date-pickers/DatePicker'; import {useForm} from './useForm'; import type {Moment} from 'moment'; -import type {InputBaseComponentProps} from '@material-ui/core'; -import type { - BasePickerProps, - BaseDatePickerProps, - DatePickerProps, -} from '@material-ui/pickers'; -import type {ParsableDate} from '@material-ui/pickers/constants/prop-types'; +import type {InputBaseComponentProps} from '@mui/material'; +import type {DatePickerProps} from '@mui/x-date-pickers/DatePicker'; +import type {BasePickerProps} from '@mui/x-date-pickers/internals'; +import type {BaseDatePickerProps} from '@mui/x-date-pickers/DatePicker/shared'; import type {BaseFieldProps} from '../../types'; -const useStyles = makeStyles(() => ({ - root: { - '& .MuiInputBase-root.Mui-focused, & .MuiInputBase-root:hover:not(.Mui-disabled)': - { - '& .MuiIconButton-root': { - color: 'var(--color-teal)', - }, - }, - }, -})); - -type MuiFieldProps = BaseDatePickerProps & - Omit< - BasePickerProps, TDate | null>, - 'value' | 'onChange' - >; +type MuiFieldProps = BaseDatePickerProps & + Omit, 'value' | 'onChange'>; export type SQFormDatePickerProps = BaseFieldProps & { /** Disabled property to disable the input if true */ @@ -53,9 +31,9 @@ export type SQFormDatePickerProps = BaseFieldProps & { /** Any valid prop for MUI input field - https://material-ui.com/api/text-field/ & https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes */ muiTextInputProps?: InputBaseComponentProps; /** Props provided to the Input component. Most commonly used for adornments. */ - InputProps?: DatePickerProps['InputProps']; + InputProps?: DatePickerProps['InputProps']; /** Props provided to the input adornments. */ - InputAdornmentProps?: DatePickerProps['InputAdornmentProps']; + InputAdornmentProps?: DatePickerProps['InputAdornmentProps']; /** A Boolean flag used when using calendar only; disabled text filed input */ isCalendarOnly?: boolean; }; @@ -98,14 +76,12 @@ function SQFormDatePicker({ } }; - const classes = useStyles(); - // An empty string will not reset the DatePicker so we have to pass null const value = field.value || null; return ( - + ); }} diff --git a/src/components/SQForm/SQFormDatePickerWithDateFNS.tsx b/src/components/SQForm/SQFormDatePickerWithDateFNS.tsx index 5a324222..29c97ab3 100644 --- a/src/components/SQForm/SQFormDatePickerWithDateFNS.tsx +++ b/src/components/SQForm/SQFormDatePickerWithDateFNS.tsx @@ -1,32 +1,13 @@ import React from 'react'; -import { - ClickAwayListener, - Grid, - makeStyles, - TextField, -} from '@material-ui/core'; -import {DatePicker} from '@material-ui/pickers'; +import {ClickAwayListener, Grid, TextField} from '@mui/material'; +import {DatePicker} from '@mui/x-date-pickers/DatePicker'; import {useForm} from './useForm'; -import type {BasePickerProps, BaseDatePickerProps} from '@material-ui/pickers'; -import type {ParsableDate} from '@material-ui/pickers/constants/prop-types'; +import type {BasePickerProps} from '@mui/x-date-pickers/internals'; +import type {BaseDatePickerProps} from '@mui/x-date-pickers/DatePicker/shared'; import type {SQFormDatePickerProps} from 'index'; -const useStyles = makeStyles(() => ({ - root: { - '& .MuiInputBase-root.Mui-focused, & .MuiInputBase-root:hover:not(.Mui-disabled)': - { - '& .MuiIconButton-root': { - color: 'var(--color-teal)', - }, - }, - }, -})); - -type MuiFieldProps = BaseDatePickerProps & - Omit< - BasePickerProps, TDate | null>, - 'value' | 'onChange' - >; +type MuiFieldProps = BaseDatePickerProps & + Omit, 'value' | 'onChange'>; export type SQFormDatePickerDateFNSProps = Omit< SQFormDatePickerProps, @@ -74,14 +55,12 @@ function SQFormDatePickerWithDateFNS({ } }; - const classes = useStyles(); - // An empty string will not reset the DatePicker so we have to pass null const value = field.value || null; return ( - + ); }} diff --git a/old_stories/SQFormDatePicker.stories.tsx b/stories/SQFormDatePicker.stories.tsx similarity index 89% rename from old_stories/SQFormDatePicker.stories.tsx rename to stories/SQFormDatePicker.stories.tsx index e802c1f7..e76c7898 100644 --- a/old_stories/SQFormDatePicker.stories.tsx +++ b/stories/SQFormDatePicker.stories.tsx @@ -2,11 +2,11 @@ import * as Yup from 'yup'; import React from 'react'; import * as markdown from '../notes/SQFormDatePicker.md'; import {SQFormDatePicker as SQFormDatePickerComponent} from '../src'; -import {createDocsPage} from './utils/createDocsPage'; -import {SQFormStoryWrapper} from './components/SQFormStoryWrapper'; +import {createDocsPage} from '../old_stories/utils/createDocsPage'; +import {SQFormStoryWrapper} from '../old_stories/components/SQFormStoryWrapper'; import type {Story, Meta} from '@storybook/react'; import type {SQFormDatePickerProps} from 'components/SQForm/SQFormDatePicker'; -import type {SQFormStoryWrapperProps} from './components/SQFormStoryWrapper'; +import type {SQFormStoryWrapperProps} from '../old_stories/components/SQFormStoryWrapper'; export type FormProps = { initialValues?: SQFormStoryWrapperProps['initialValues']; @@ -81,9 +81,6 @@ DatePickerBefore2024.args = { .max(new Date('2024-01-01'), 'Date must be before 2024') .typeError('Invalid date'), }), - muiFieldProps: { - allowSameDateSelection: true, - }, }; export default meta; diff --git a/old_stories/SQFormDatePickerWithDateFNS.stories.tsx b/stories/SQFormDatePickerWithDateFNS.stories.tsx similarity index 89% rename from old_stories/SQFormDatePickerWithDateFNS.stories.tsx rename to stories/SQFormDatePickerWithDateFNS.stories.tsx index 976de31b..55686a1e 100644 --- a/old_stories/SQFormDatePickerWithDateFNS.stories.tsx +++ b/stories/SQFormDatePickerWithDateFNS.stories.tsx @@ -2,11 +2,11 @@ import * as Yup from 'yup'; import React from 'react'; import * as markdown from '../notes/SQFormDatePicker.md'; import {SQFormDatePickerWithDateFNS as SQFormDatePickerComponent} from '../src'; -import {createDocsPage} from './utils/createDocsPage'; -import {SQFormStoryWrapper} from './components/SQFormStoryWrapper'; +import {createDocsPage} from '../old_stories/utils/createDocsPage'; +import {SQFormStoryWrapper} from '../old_stories/components/SQFormStoryWrapper'; import type {Story, Meta} from '@storybook/react'; import type {SQFormDatePickerDateFNSProps} from 'components/SQForm/SQFormDatePickerWithDateFNS'; -import type {SQFormStoryWrapperProps} from './components/SQFormStoryWrapper'; +import type {SQFormStoryWrapperProps} from '../old_stories/components/SQFormStoryWrapper'; export type FormProps = { initialValues?: SQFormStoryWrapperProps['initialValues']; @@ -81,9 +81,6 @@ DatePickerBefore2024.args = { .max(new Date('2024-01-01'), 'Date must be before 2024') .typeError('Invalid date'), }), - muiFieldProps: { - allowSameDateSelection: true, - }, }; export default meta; diff --git a/old_stories/__tests__/SQFormDatePicker.stories.test.tsx b/stories/__tests__/SQFormDatePicker.stories.test.tsx similarity index 93% rename from old_stories/__tests__/SQFormDatePicker.stories.test.tsx rename to stories/__tests__/SQFormDatePicker.stories.test.tsx index 92308e1a..3f20ed60 100644 --- a/old_stories/__tests__/SQFormDatePicker.stories.test.tsx +++ b/stories/__tests__/SQFormDatePicker.stories.test.tsx @@ -1,9 +1,9 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; -import MomentAdapter from '@material-ui/pickers/adapter/moment'; import {composeStories} from '@storybook/testing-react'; import {render, screen, within, waitFor} from '@testing-library/react'; -import {LocalizationProvider} from '@material-ui/pickers'; +import {LocalizationProvider} from '@mui/x-date-pickers'; +import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment'; import * as stories from '../SQFormDatePicker.stories'; import type {SQFormDatePickerProps} from 'components/SQForm/SQFormDatePicker'; import type {FormProps} from '../SQFormDatePicker.stories'; @@ -20,7 +20,7 @@ const renderDatePicker = ( > ) => { render( - + ); @@ -96,8 +96,8 @@ describe('SQFormDatePicker Tests', () => { expect(calendarDialog).toBeInTheDocument(); expect(calendarDialog).toBeVisible(); - const dateOptions = within(calendarDialog).getAllByRole('cell'); - const selectedDate = dateOptions[0]; + const dateOptions = within(calendarDialog).getAllByRole('button'); + const selectedDate = dateOptions[4]; userEvent.click(selectedDate); diff --git a/old_stories/__tests__/SQFormDatePickerWithDateFNS.stories.test.tsx b/stories/__tests__/SQFormDatePickerWithDateFNS.stories.test.tsx similarity index 93% rename from old_stories/__tests__/SQFormDatePickerWithDateFNS.stories.test.tsx rename to stories/__tests__/SQFormDatePickerWithDateFNS.stories.test.tsx index 04e75d93..d96dfd49 100644 --- a/old_stories/__tests__/SQFormDatePickerWithDateFNS.stories.test.tsx +++ b/stories/__tests__/SQFormDatePickerWithDateFNS.stories.test.tsx @@ -1,10 +1,10 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; -import dateFnsAdapter from '@material-ui/pickers/adapter/date-fns'; import enLocale from 'date-fns/locale/en-US'; import {composeStories} from '@storybook/testing-react'; import {render, screen, within, waitFor} from '@testing-library/react'; -import {LocalizationProvider} from '@material-ui/pickers'; +import {LocalizationProvider} from '@mui/x-date-pickers'; +import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns'; import * as stories from '../SQFormDatePickerWithDateFNS.stories'; import type {SQFormDatePickerDateFNSProps} from 'components/SQForm/SQFormDatePickerWithDateFNS'; import type {FormProps} from '../SQFormDatePicker.stories'; @@ -21,7 +21,7 @@ const renderDatePicker = ( > ) => { render( - + ); @@ -97,8 +97,8 @@ describe('SQFormDatePickerWithDateFNS Tests', () => { expect(calendarDialog).toBeInTheDocument(); expect(calendarDialog).toBeVisible(); - const dateOptions = within(calendarDialog).getAllByRole('cell'); - const selectedDate = dateOptions[0]; + const dateOptions = within(calendarDialog).getAllByRole('button'); + const selectedDate = dateOptions[4]; userEvent.click(selectedDate);