From c8c0ef8c74b26d6d1a1878949aefc2aacb510475 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 26 May 2023 15:27:19 -0700 Subject: [PATCH 1/5] fix: Make DatePicker stories safe. --- .../stories/DatePicker/DatePickerDateBoundaries.stories.tsx | 2 +- scripts/test-ssr/src/commands/main.ts | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx index f9ac1e359a162..65d55cde8cb37 100644 --- a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx +++ b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx @@ -8,7 +8,7 @@ const useStyles = makeStyles({ }, }); -const today = new Date(Date.now()); +const today = new Date('05/24/2023'); const minDate = addMonths(today, -1); const maxDate = addYears(today, 1); diff --git a/scripts/test-ssr/src/commands/main.ts b/scripts/test-ssr/src/commands/main.ts index 9b46c91884f3a..7f2b6acb56127 100644 --- a/scripts/test-ssr/src/commands/main.ts +++ b/scripts/test-ssr/src/commands/main.ts @@ -15,8 +15,6 @@ import { renderToHTML } from '../utils/renderToHTML'; import { visitPage } from '../utils/visitPage'; const EXCLUDED_STORIES = [ - // TODO: https://github.com/microsoft/fluentui/issues/27957 - '**/react-datepicker-compat/**', // TODO: https://github.com/microsoft/fluentui/issues/27956 '**/react-toast/**', // Portals currently do not support hydration From 4d5d64f8a384c9de350ab724176bcaa70966e8bf Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 6 Jun 2023 09:50:33 -0700 Subject: [PATCH 2/5] revert main.ts --- scripts/test-ssr/src/commands/main.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/test-ssr/src/commands/main.ts b/scripts/test-ssr/src/commands/main.ts index 7f2b6acb56127..c76801d159e20 100644 --- a/scripts/test-ssr/src/commands/main.ts +++ b/scripts/test-ssr/src/commands/main.ts @@ -15,8 +15,8 @@ import { renderToHTML } from '../utils/renderToHTML'; import { visitPage } from '../utils/visitPage'; const EXCLUDED_STORIES = [ - // TODO: https://github.com/microsoft/fluentui/issues/27956 - '**/react-toast/**', + // TODO: https://github.com/microsoft/fluentui/issues/27957 + '**/react-datepicker-compat/**', // Portals currently do not support hydration // https://github.com/facebook/react/issues/13097 '**/react-portal/**', From 5f8d6589b8cad05d25326facaa10b91d10356dbb Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 6 Jun 2023 10:01:41 -0700 Subject: [PATCH 3/5] adding back react-datepicker-compat to test-ssr --- scripts/test-ssr/src/commands/main.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/scripts/test-ssr/src/commands/main.ts b/scripts/test-ssr/src/commands/main.ts index c76801d159e20..4107f61e4d457 100644 --- a/scripts/test-ssr/src/commands/main.ts +++ b/scripts/test-ssr/src/commands/main.ts @@ -15,8 +15,6 @@ import { renderToHTML } from '../utils/renderToHTML'; import { visitPage } from '../utils/visitPage'; const EXCLUDED_STORIES = [ - // TODO: https://github.com/microsoft/fluentui/issues/27957 - '**/react-datepicker-compat/**', // Portals currently do not support hydration // https://github.com/facebook/react/issues/13097 '**/react-portal/**', From f0c3ef56240f8eeac37bf1e62d6dcec1371ba559 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 7 Jun 2023 08:25:01 -0700 Subject: [PATCH 4/5] requested changes --- .../DatePicker/DatePickerDateBoundaries.stories.tsx | 7 ++++++- .../stories/DatePicker/DatePickerErrorHandling.stories.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx index 65d55cde8cb37..809124366cb6b 100644 --- a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx +++ b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx @@ -8,10 +8,14 @@ const useStyles = makeStyles({ }, }); -const today = new Date('05/24/2023'); +const today = new Date(); const minDate = addMonths(today, -1); const maxDate = addYears(today, 1); +const onFormatDate = (date?: Date): string => { + return `${date?.getMonth()}/${date?.getDay()}/${date?.getFullYear()}`; +}; + export const DateBoundaries = () => { const styles = useStyles(); @@ -23,6 +27,7 @@ export const DateBoundaries = () => { minDate={minDate} maxDate={maxDate} placeholder="Select a date..." + formatDate={onFormatDate} allowTextInput className={styles.inputControl} /> diff --git a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerErrorHandling.stories.tsx b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerErrorHandling.stories.tsx index 89a807bd72649..451ea7ee1e577 100644 --- a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerErrorHandling.stories.tsx +++ b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerErrorHandling.stories.tsx @@ -9,10 +9,14 @@ const useStyles = makeStyles({ }, }); -const today = new Date('05/24/2023'); +const today = new Date(); const minDate = addMonths(today, -1); const maxDate = addYears(today, 1); +const onFormatDate = (date?: Date): string => { + return `${date?.getMonth()}/${date?.getDay()}/${date?.getFullYear()}`; +}; + export const ErrorHandling = () => { const styles = useStyles(); const [error, setError] = React.useState(undefined); @@ -29,6 +33,7 @@ export const ErrorHandling = () => { setError(data.error)} From 27d23cf2cde3ba0ca59e38815b740856f6bd68e8 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 7 Jun 2023 08:55:09 -0700 Subject: [PATCH 5/5] changing to toDateString --- .../stories/DatePicker/DatePickerDateBoundaries.stories.tsx | 6 ++---- .../stories/DatePicker/DatePickerErrorHandling.stories.tsx | 4 ++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx index 809124366cb6b..6c47a29b7b7ee 100644 --- a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx +++ b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerDateBoundaries.stories.tsx @@ -13,16 +13,14 @@ const minDate = addMonths(today, -1); const maxDate = addYears(today, 1); const onFormatDate = (date?: Date): string => { - return `${date?.getMonth()}/${date?.getDay()}/${date?.getFullYear()}`; + return `${date?.getMonth()}/${date?.getDate()}/${date?.getFullYear()}`; }; export const DateBoundaries = () => { const styles = useStyles(); return ( - + { - return `${date?.getMonth()}/${date?.getDay()}/${date?.getFullYear()}`; + return `${date?.getMonth()}/${date?.getDate()}/${date?.getFullYear()}`; }; export const ErrorHandling = () => { @@ -25,7 +25,7 @@ export const ErrorHandling = () => {