From 139fca112bdd6a69c3bcb80d54e806b792f1fbc0 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 11 May 2022 14:48:02 +1000
Subject: [PATCH 1/5] Use TypeScript and controls for DateTimePicker,
 DatePicker and TimePicker's stories

---
 packages/components/src/date-time/date.tsx    | 21 ++++-
 packages/components/src/date-time/index.tsx   |  3 +-
 .../components/src/date-time/stories/date.js  | 17 ----
 .../components/src/date-time/stories/date.tsx | 57 ++++++++++++
 .../components/src/date-time/stories/index.js | 91 -------------------
 .../src/date-time/stories/index.tsx           | 59 ++++++++++++
 .../components/src/date-time/stories/time.js  | 32 -------
 .../components/src/date-time/stories/time.tsx | 28 ++++++
 packages/components/src/date-time/time.tsx    | 20 ++++
 packages/components/src/date-time/types.ts    | 20 ++--
 packages/components/src/date-time/utils.ts    | 13 +--
 11 files changed, 197 insertions(+), 164 deletions(-)
 delete mode 100644 packages/components/src/date-time/stories/date.js
 create mode 100644 packages/components/src/date-time/stories/date.tsx
 delete mode 100644 packages/components/src/date-time/stories/index.js
 create mode 100644 packages/components/src/date-time/stories/index.tsx
 delete mode 100644 packages/components/src/date-time/stories/time.js
 create mode 100644 packages/components/src/date-time/stories/time.tsx

diff --git a/packages/components/src/date-time/date.tsx b/packages/components/src/date-time/date.tsx
index fffba036a3a8c..9399d6afbab4a 100644
--- a/packages/components/src/date-time/date.tsx
+++ b/packages/components/src/date-time/date.tsx
@@ -80,7 +80,26 @@ function DatePickerDay( { day, events = [] }: DatePickerDayProps ) {
 	);
 }
 
-function DatePicker( {
+/**
+ * DatePicker is a React component that renders a calendar for date selection.
+ *
+ * ```jsx
+ * import { DatePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyDatePicker = () => {
+ *   const [ date, setDate ] = useState( new Date() );
+ *
+ *   return (
+ *     <DatePicker
+ *       currentDate={ date }
+ *       onChange={ ( newDate ) => setDate( newDate ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function DatePicker( {
 	currentDate,
 	onChange,
 	events,
diff --git a/packages/components/src/date-time/index.tsx b/packages/components/src/date-time/index.tsx
index 9801d4c9407fa..85d9bdaf218e4 100644
--- a/packages/components/src/date-time/index.tsx
+++ b/packages/components/src/date-time/index.tsx
@@ -174,7 +174,6 @@ function UnforwardedDateTimePicker(
  * date and time selection. The calendar and clock components can be accessed
  * individually using the `DatePicker` and `TimePicker` components respectively.
  *
- * @example
  * ```jsx
  * import { DateTimePicker } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
@@ -186,7 +185,7 @@ function UnforwardedDateTimePicker(
  *     <DateTimePicker
  *       currentDate={ date }
  *       onChange={ ( newDate ) => setDate( newDate ) }
- *       is12Hour={ true }
+ *       is12Hour
  *     />
  *   );
  * };
diff --git a/packages/components/src/date-time/stories/date.js b/packages/components/src/date-time/stories/date.js
deleted file mode 100644
index 6859eec76bd71..0000000000000
--- a/packages/components/src/date-time/stories/date.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Internal dependencies
- */
-import DatePicker from '../date';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-export default { title: 'Components/DatePicker', component: DatePicker };
-
-export const _default = () => {
-	const [ date, setDate ] = useState();
-
-	return <DatePicker currentDate={ date } onChange={ setDate } />;
-};
diff --git a/packages/components/src/date-time/stories/date.tsx b/packages/components/src/date-time/stories/date.tsx
new file mode 100644
index 0000000000000..97b254bd8f579
--- /dev/null
+++ b/packages/components/src/date-time/stories/date.tsx
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import DatePicker from '../date';
+
+const meta: ComponentMeta< typeof DatePicker > = {
+	title: 'Components/DatePicker',
+	component: DatePicker,
+	argTypes: {
+		currentDate: { control: 'date' },
+		events: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof DatePicker > = ( args ) => (
+	<DatePicker { ...args } />
+);
+
+export const Default: ComponentStory< typeof DatePicker > = Template.bind( {} );
+
+function daysFromNow( days: number ) {
+	const date = new Date();
+	date.setDate( date.getDate() + days );
+	return date;
+}
+
+export const WithEvents: ComponentStory< typeof DatePicker > = Template.bind(
+	{}
+);
+WithEvents.args = {
+	currentDate: new Date(),
+	events: [
+		{ date: daysFromNow( 2 ) },
+		{ date: daysFromNow( 4 ) },
+		{ date: daysFromNow( 6 ) },
+		{ date: daysFromNow( 8 ) },
+	],
+};
+
+export const WithInvalidDates: ComponentStory<
+	typeof DatePicker
+> = Template.bind( {} );
+WithInvalidDates.args = {
+	currentDate: new Date(),
+	// Mark Saturdays and Sundays as invalid.
+	isInvalidDate: ( date ) => date.getDay() === 0 || date.getDay() === 6,
+};
diff --git a/packages/components/src/date-time/stories/index.js b/packages/components/src/date-time/stories/index.js
deleted file mode 100644
index 9c3aa2607764a..0000000000000
--- a/packages/components/src/date-time/stories/index.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, button } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import DateTimePicker from '../';
-
-export default {
-	title: 'Components/DateTimePicker',
-	component: DateTimePicker,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const DateTimePickerWithState = ( { is12Hour } ) => {
-	const [ date, setDate ] = useState();
-
-	return (
-		<DateTimePicker
-			currentDate={ date }
-			onChange={ setDate }
-			is12Hour={ is12Hour }
-		/>
-	);
-};
-
-export const _default = () => {
-	const is12Hour = boolean( 'Is 12 hour (shows AM/PM)', false );
-	return <DateTimePickerWithState is12Hour={ is12Hour } />;
-};
-
-// Date utils, for demo purposes.
-const DAY_IN_MS = 24 * 60 * 60 * 1000;
-const aFewDaysAfter = ( date ) => {
-	// eslint-disable-next-line no-restricted-syntax
-	return new Date( date.getTime() + ( 1 + Math.random() * 5 ) * DAY_IN_MS );
-};
-
-const now = new Date();
-
-export const WithDaysHighlighted = () => {
-	const [ date, setDate ] = useState( now );
-
-	const [ highlights, setHighlights ] = useState( [
-		{ date: aFewDaysAfter( now ) },
-	] );
-
-	button( 'Add random highlight', () => {
-		const lastHighlight = highlights[ highlights.length - 1 ];
-		setHighlights( [
-			...highlights,
-			{ date: aFewDaysAfter( lastHighlight.date ) },
-		] );
-	} );
-
-	return (
-		<DateTimePicker
-			currentDate={ date }
-			onChange={ setDate }
-			events={ highlights }
-		/>
-	);
-};
-
-/**
- * You can mark particular dates as invalid using the `isInvalidDate` prop. This
- * prevents the user from being able to select it.
- */
-export const WithInvalidDates = () => {
-	const [ currentDate, setCurrentDate ] = useState( now );
-
-	return (
-		<DateTimePicker
-			currentDate={ currentDate }
-			onChange={ setCurrentDate }
-			isInvalidDate={ ( date ) =>
-				// Mark Saturdays and Sundays as invalid.
-				date.getDay() === 0 || date.getDay() === 6
-			}
-		/>
-	);
-};
diff --git a/packages/components/src/date-time/stories/index.tsx b/packages/components/src/date-time/stories/index.tsx
new file mode 100644
index 0000000000000..18777a7450d9a
--- /dev/null
+++ b/packages/components/src/date-time/stories/index.tsx
@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import DateTimePicker from '..';
+
+const meta: ComponentMeta< typeof DateTimePicker > = {
+	title: 'Components/DateTimePicker',
+	component: DateTimePicker,
+	argTypes: {
+		currentDate: { control: 'date' },
+		events: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof DateTimePicker > = ( args ) => (
+	<DateTimePicker { ...args } />
+);
+
+export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
+	{}
+);
+
+function daysFromNow( days: number ) {
+	const date = new Date();
+	date.setDate( date.getDate() + days );
+	return date;
+}
+
+export const WithEvents: ComponentStory<
+	typeof DateTimePicker
+> = Template.bind( {} );
+WithEvents.args = {
+	currentDate: new Date(),
+	events: [
+		{ date: daysFromNow( 2 ) },
+		{ date: daysFromNow( 4 ) },
+		{ date: daysFromNow( 6 ) },
+		{ date: daysFromNow( 8 ) },
+	],
+};
+
+export const WithInvalidDates: ComponentStory<
+	typeof DateTimePicker
+> = Template.bind( {} );
+WithInvalidDates.args = {
+	currentDate: new Date(),
+	// Mark Saturdays and Sundays as invalid.
+	isInvalidDate: ( date ) => date.getDay() === 0 || date.getDay() === 6,
+};
diff --git a/packages/components/src/date-time/stories/time.js b/packages/components/src/date-time/stories/time.js
deleted file mode 100644
index 9a184c1940ee9..0000000000000
--- a/packages/components/src/date-time/stories/time.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Internal dependencies
- */
-import TimePicker from '../time';
-
-/**
- * External dependencies
- */
-import { date, boolean } from '@storybook/addon-knobs';
-import { noop } from 'lodash';
-
-export default {
-	title: 'Components/TimePicker',
-	component: TimePicker,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	return (
-		<TimePicker
-			currentTime={
-				new Date(
-					date( 'currentTime', new Date( '1986-10-18T11:00:00' ) )
-				)
-			}
-			is12Hour={ boolean( 'is12Hour', false ) }
-			onChange={ noop }
-		/>
-	);
-};
diff --git a/packages/components/src/date-time/stories/time.tsx b/packages/components/src/date-time/stories/time.tsx
new file mode 100644
index 0000000000000..648e76cecb3b6
--- /dev/null
+++ b/packages/components/src/date-time/stories/time.tsx
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import TimePicker from '../time';
+
+const meta: ComponentMeta< typeof TimePicker > = {
+	title: 'Components/TimePicker',
+	component: TimePicker,
+	argTypes: {
+		currentTime: { control: 'date' },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof TimePicker > = ( args ) => (
+	<TimePicker { ...args } />
+);
+
+export const Default: ComponentStory< typeof TimePicker > = Template.bind( {} );
diff --git a/packages/components/src/date-time/time.tsx b/packages/components/src/date-time/time.tsx
index 10b673b7c83d8..9d0c1cfa4c394 100644
--- a/packages/components/src/date-time/time.tsx
+++ b/packages/components/src/date-time/time.tsx
@@ -80,6 +80,26 @@ function UpdateOnBlurAsIntegerField( {
 	} );
 }
 
+/**
+ * TimePicker is a React component that renders a clock for time selection.
+ *
+ * ```jsx
+ * import { TimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTimePicker = () => {
+ *   const [ time, setTime ] = useState( new Date() );
+ *
+ *   return (
+ *     <TimePicker
+ *       currentTime={ date }
+ *       onChange={ ( newTime ) => setTime( newTime ) }
+ *       is12Hour
+ *     />
+ *   );
+ * };
+ * ```
+ */
 export function TimePicker( {
 	is12Hour,
 	currentTime,
diff --git a/packages/components/src/date-time/types.ts b/packages/components/src/date-time/types.ts
index 7ceddca3e70d2..1293721f3e27d 100644
--- a/packages/components/src/date-time/types.ts
+++ b/packages/components/src/date-time/types.ts
@@ -21,15 +21,11 @@ export type UpdateOnBlurAsIntegerFieldProps = {
 	children?: ReactNode;
 };
 
-export type DateTimeString = string;
-
-export type ValidDateTimeInput = Date | string | number | null;
-
 export type TimePickerProps = {
 	/**
 	 * The initial current time the time picker should render.
 	 */
-	currentTime?: ValidDateTimeInput;
+	currentTime?: Date | string | number | null;
 
 	/**
 	 * Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is
@@ -42,7 +38,7 @@ export type TimePickerProps = {
 	 * The function called when a new time has been selected. It is passed the
 	 * time as an argument.
 	 */
-	onChange?: ( time: DateTimeString ) => void;
+	onChange?: ( time: string ) => void;
 };
 
 export type DatePickerEvent = {
@@ -71,13 +67,13 @@ export type DatePickerProps = {
 	 * The current date and time at initialization. Optionally pass in a `null`
 	 * value to specify no date is currently selected.
 	 */
-	currentDate?: ValidDateTimeInput;
+	currentDate?: Date | string | number | null;
 
 	/**
 	 * The function called when a new date has been selected. It is passed the
 	 * date as an argument.
 	 */
-	onChange?: ( date: DateTimeString ) => void;
+	onChange?: ( date: string ) => void;
 
 	/**
 	 * A callback function which receives a Date object representing a day as an
@@ -91,7 +87,7 @@ export type DatePickerProps = {
 	 * picker. The callback receives the new month date in the ISO format as an
 	 * argument.
 	 */
-	onMonthPreviewed?: ( date: DateTimeString ) => void;
+	onMonthPreviewed?: ( date: string ) => void;
 
 	/**
 	 * List of events to show in the date picker. Each event will appear as a
@@ -100,11 +96,11 @@ export type DatePickerProps = {
 	events?: DatePickerEvent[];
 };
 
-export type DateTimePickerProps = DatePickerProps &
-	TimePickerProps & {
+export type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &
+	Omit< TimePickerProps, 'currentTime' | 'onChange' > & {
 		/**
 		 * The function called when a new date or time has been selected. It is
 		 * passed the date and time as an argument.
 		 */
-		onChange?: ( date: DateTimeString | null ) => void;
+		onChange?: ( date: string | null ) => void;
 	};
diff --git a/packages/components/src/date-time/utils.ts b/packages/components/src/date-time/utils.ts
index 6c4f4fd217cb7..25bb63a84d012 100644
--- a/packages/components/src/date-time/utils.ts
+++ b/packages/components/src/date-time/utils.ts
@@ -3,21 +3,16 @@
  */
 import moment from 'moment';
 
-/**
- * Internal dependencies
- */
-import type { ValidDateTimeInput } from './types';
-
 /**
  * Create a Moment object from a date string. With no date supplied, default to
  * a Moment object representing now. If a null value is passed, return a null
  * value.
  *
- * @param {ValidDateTimeInput} [date] Date representing the currently selected
- *                                    date or null to signify no selection.
- * @return {?moment.Moment} Moment object for selected date or null.
+ * @param  [date] Date representing the currently selected
+ *                date or null to signify no selection.
+ * @return Moment object for selected date or null.
  */
-export const getMomentDate = ( date?: ValidDateTimeInput ) => {
+export const getMomentDate = ( date?: Date | string | number | null ) => {
 	if ( null === date ) {
 		return null;
 	}

From c4af9c84490c6221ecf920f04cd6ced6afb42be6 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 12 May 2022 12:23:22 +1000
Subject: [PATCH 2/5] DRY up daysFromNow and isWeekend

---
 packages/components/src/date-time/stories/date.tsx  | 10 ++--------
 packages/components/src/date-time/stories/index.tsx | 10 ++--------
 packages/components/src/date-time/stories/utils.ts  |  9 +++++++++
 3 files changed, 13 insertions(+), 16 deletions(-)
 create mode 100644 packages/components/src/date-time/stories/utils.ts

diff --git a/packages/components/src/date-time/stories/date.tsx b/packages/components/src/date-time/stories/date.tsx
index 97b254bd8f579..c3b6be97dc321 100644
--- a/packages/components/src/date-time/stories/date.tsx
+++ b/packages/components/src/date-time/stories/date.tsx
@@ -7,6 +7,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
  * Internal dependencies
  */
 import DatePicker from '../date';
+import { daysFromNow, isWeekend } from './utils';
 
 const meta: ComponentMeta< typeof DatePicker > = {
 	title: 'Components/DatePicker',
@@ -28,12 +29,6 @@ const Template: ComponentStory< typeof DatePicker > = ( args ) => (
 
 export const Default: ComponentStory< typeof DatePicker > = Template.bind( {} );
 
-function daysFromNow( days: number ) {
-	const date = new Date();
-	date.setDate( date.getDate() + days );
-	return date;
-}
-
 export const WithEvents: ComponentStory< typeof DatePicker > = Template.bind(
 	{}
 );
@@ -52,6 +47,5 @@ export const WithInvalidDates: ComponentStory<
 > = Template.bind( {} );
 WithInvalidDates.args = {
 	currentDate: new Date(),
-	// Mark Saturdays and Sundays as invalid.
-	isInvalidDate: ( date ) => date.getDay() === 0 || date.getDay() === 6,
+	isInvalidDate: isWeekend,
 };
diff --git a/packages/components/src/date-time/stories/index.tsx b/packages/components/src/date-time/stories/index.tsx
index 18777a7450d9a..6f965188f0cfe 100644
--- a/packages/components/src/date-time/stories/index.tsx
+++ b/packages/components/src/date-time/stories/index.tsx
@@ -7,6 +7,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
  * Internal dependencies
  */
 import DateTimePicker from '..';
+import { daysFromNow, isWeekend } from './utils';
 
 const meta: ComponentMeta< typeof DateTimePicker > = {
 	title: 'Components/DateTimePicker',
@@ -30,12 +31,6 @@ export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
 	{}
 );
 
-function daysFromNow( days: number ) {
-	const date = new Date();
-	date.setDate( date.getDate() + days );
-	return date;
-}
-
 export const WithEvents: ComponentStory<
 	typeof DateTimePicker
 > = Template.bind( {} );
@@ -54,6 +49,5 @@ export const WithInvalidDates: ComponentStory<
 > = Template.bind( {} );
 WithInvalidDates.args = {
 	currentDate: new Date(),
-	// Mark Saturdays and Sundays as invalid.
-	isInvalidDate: ( date ) => date.getDay() === 0 || date.getDay() === 6,
+	isInvalidDate: isWeekend,
 };
diff --git a/packages/components/src/date-time/stories/utils.ts b/packages/components/src/date-time/stories/utils.ts
new file mode 100644
index 0000000000000..ccdac56c38135
--- /dev/null
+++ b/packages/components/src/date-time/stories/utils.ts
@@ -0,0 +1,9 @@
+export function daysFromNow( days: number ) {
+	const date = new Date();
+	date.setDate( date.getDate() + days );
+	return date;
+}
+
+export function isWeekend( date: Date ) {
+	return date.getDay() === 0 || date.getDay() === 6;
+}

From cb7f233494c28911db0c59ac3e97f7d753024b27 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 12 May 2022 12:23:38 +1000
Subject: [PATCH 3/5] Show control for events param

---
 packages/components/src/date-time/stories/date.tsx  | 1 -
 packages/components/src/date-time/stories/index.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/components/src/date-time/stories/date.tsx b/packages/components/src/date-time/stories/date.tsx
index c3b6be97dc321..c770e6ce326be 100644
--- a/packages/components/src/date-time/stories/date.tsx
+++ b/packages/components/src/date-time/stories/date.tsx
@@ -14,7 +14,6 @@ const meta: ComponentMeta< typeof DatePicker > = {
 	component: DatePicker,
 	argTypes: {
 		currentDate: { control: 'date' },
-		events: { control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
diff --git a/packages/components/src/date-time/stories/index.tsx b/packages/components/src/date-time/stories/index.tsx
index 6f965188f0cfe..7983b31701a86 100644
--- a/packages/components/src/date-time/stories/index.tsx
+++ b/packages/components/src/date-time/stories/index.tsx
@@ -14,7 +14,6 @@ const meta: ComponentMeta< typeof DateTimePicker > = {
 	component: DateTimePicker,
 	argTypes: {
 		currentDate: { control: 'date' },
-		events: { control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },

From 493e8ffa7e869d32e2a9302bddc67c490d808d08 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 13 May 2022 14:26:12 +1000
Subject: [PATCH 4/5] Make DateTimePicker stories more interactive

---
 .../components/src/date-time/stories/date.tsx | 18 ++++++++++++++---
 .../src/date-time/stories/index.tsx           | 20 ++++++++++++++++---
 .../components/src/date-time/stories/time.tsx | 18 ++++++++++++++---
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/date-time/stories/date.tsx b/packages/components/src/date-time/stories/date.tsx
index c770e6ce326be..2f077bcace75d 100644
--- a/packages/components/src/date-time/stories/date.tsx
+++ b/packages/components/src/date-time/stories/date.tsx
@@ -3,6 +3,11 @@
  */
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -22,9 +27,16 @@ const meta: ComponentMeta< typeof DatePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DatePicker > = ( args ) => (
-	<DatePicker { ...args } />
-);
+const Template: ComponentStory< typeof DatePicker > = ( {
+	currentDate,
+	...args
+} ) => {
+	const [ date, setDate ] = useState( currentDate );
+	useEffect( () => {
+		setDate( currentDate );
+	}, [ currentDate ] );
+	return <DatePicker { ...args } currentDate={ date } onChange={ setDate } />;
+};
 
 export const Default: ComponentStory< typeof DatePicker > = Template.bind( {} );
 
diff --git a/packages/components/src/date-time/stories/index.tsx b/packages/components/src/date-time/stories/index.tsx
index 7983b31701a86..e10414210ed6a 100644
--- a/packages/components/src/date-time/stories/index.tsx
+++ b/packages/components/src/date-time/stories/index.tsx
@@ -3,6 +3,11 @@
  */
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -22,9 +27,18 @@ const meta: ComponentMeta< typeof DateTimePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DateTimePicker > = ( args ) => (
-	<DateTimePicker { ...args } />
-);
+const Template: ComponentStory< typeof DateTimePicker > = ( {
+	currentDate,
+	...args
+} ) => {
+	const [ date, setDate ] = useState( currentDate );
+	useEffect( () => {
+		setDate( currentDate );
+	}, [ currentDate ] );
+	return (
+		<DateTimePicker { ...args } currentDate={ date } onChange={ setDate } />
+	);
+};
 
 export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
 	{}
diff --git a/packages/components/src/date-time/stories/time.tsx b/packages/components/src/date-time/stories/time.tsx
index 648e76cecb3b6..c27c50792ead1 100644
--- a/packages/components/src/date-time/stories/time.tsx
+++ b/packages/components/src/date-time/stories/time.tsx
@@ -3,6 +3,11 @@
  */
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -21,8 +26,15 @@ const meta: ComponentMeta< typeof TimePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof TimePicker > = ( args ) => (
-	<TimePicker { ...args } />
-);
+const Template: ComponentStory< typeof TimePicker > = ( {
+	currentTime,
+	...args
+} ) => {
+	const [ time, setTime ] = useState( currentTime );
+	useEffect( () => {
+		setTime( currentTime );
+	}, [ currentTime ] );
+	return <TimePicker { ...args } currentTime={ time } onChange={ setTime } />;
+};
 
 export const Default: ComponentStory< typeof TimePicker > = Template.bind( {} );

From 2c98110ee68441ec08b276835c4974c83c2b732a Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 13 May 2022 14:30:49 +1000
Subject: [PATCH 5/5] Pass onChange up to storybook

---
 packages/components/src/date-time/stories/date.tsx  | 13 ++++++++++++-
 packages/components/src/date-time/stories/index.tsx | 11 ++++++++++-
 packages/components/src/date-time/stories/time.tsx  | 13 ++++++++++++-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/date-time/stories/date.tsx b/packages/components/src/date-time/stories/date.tsx
index 2f077bcace75d..b469635fe3e3d 100644
--- a/packages/components/src/date-time/stories/date.tsx
+++ b/packages/components/src/date-time/stories/date.tsx
@@ -19,6 +19,7 @@ const meta: ComponentMeta< typeof DatePicker > = {
 	component: DatePicker,
 	argTypes: {
 		currentDate: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -29,13 +30,23 @@ export default meta;
 
 const Template: ComponentStory< typeof DatePicker > = ( {
 	currentDate,
+	onChange,
 	...args
 } ) => {
 	const [ date, setDate ] = useState( currentDate );
 	useEffect( () => {
 		setDate( currentDate );
 	}, [ currentDate ] );
-	return <DatePicker { ...args } currentDate={ date } onChange={ setDate } />;
+	return (
+		<DatePicker
+			{ ...args }
+			currentDate={ date }
+			onChange={ ( newDate ) => {
+				setDate( newDate );
+				onChange?.( newDate );
+			} }
+		/>
+	);
 };
 
 export const Default: ComponentStory< typeof DatePicker > = Template.bind( {} );
diff --git a/packages/components/src/date-time/stories/index.tsx b/packages/components/src/date-time/stories/index.tsx
index e10414210ed6a..fb126edb81f4e 100644
--- a/packages/components/src/date-time/stories/index.tsx
+++ b/packages/components/src/date-time/stories/index.tsx
@@ -19,6 +19,7 @@ const meta: ComponentMeta< typeof DateTimePicker > = {
 	component: DateTimePicker,
 	argTypes: {
 		currentDate: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -29,6 +30,7 @@ export default meta;
 
 const Template: ComponentStory< typeof DateTimePicker > = ( {
 	currentDate,
+	onChange,
 	...args
 } ) => {
 	const [ date, setDate ] = useState( currentDate );
@@ -36,7 +38,14 @@ const Template: ComponentStory< typeof DateTimePicker > = ( {
 		setDate( currentDate );
 	}, [ currentDate ] );
 	return (
-		<DateTimePicker { ...args } currentDate={ date } onChange={ setDate } />
+		<DateTimePicker
+			{ ...args }
+			currentDate={ date }
+			onChange={ ( newDate ) => {
+				setDate( newDate );
+				onChange?.( newDate );
+			} }
+		/>
 	);
 };
 
diff --git a/packages/components/src/date-time/stories/time.tsx b/packages/components/src/date-time/stories/time.tsx
index c27c50792ead1..9fc72086075f7 100644
--- a/packages/components/src/date-time/stories/time.tsx
+++ b/packages/components/src/date-time/stories/time.tsx
@@ -18,6 +18,7 @@ const meta: ComponentMeta< typeof TimePicker > = {
 	component: TimePicker,
 	argTypes: {
 		currentTime: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -28,13 +29,23 @@ export default meta;
 
 const Template: ComponentStory< typeof TimePicker > = ( {
 	currentTime,
+	onChange,
 	...args
 } ) => {
 	const [ time, setTime ] = useState( currentTime );
 	useEffect( () => {
 		setTime( currentTime );
 	}, [ currentTime ] );
-	return <TimePicker { ...args } currentTime={ time } onChange={ setTime } />;
+	return (
+		<TimePicker
+			{ ...args }
+			currentTime={ time }
+			onChange={ ( newTime ) => {
+				setTime( newTime );
+				onChange?.( newTime );
+			} }
+		/>
+	);
 };
 
 export const Default: ComponentStory< typeof TimePicker > = Template.bind( {} );