Use TypeScript and controls for DateTimePicker's stories (#40986)

* Use TypeScript and controls for DateTimePicker, DatePicker and TimePicker's stories

* DRY up daysFromNow and isWeekend

* Show control for events param

* Make DateTimePicker stories more interactive

* Pass onChange up to storybook

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,

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
  *     />
  *   );
  * };

packages/components/src/date-time/stories/date.tsx

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DatePicker from '../date';
+import { daysFromNow, isWeekend } from './utils';
+
+const meta: ComponentMeta< typeof DatePicker > = {
+	title: 'Components/DatePicker',
+	component: DatePicker,
+	argTypes: {
+		currentDate: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+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={ ( newDate ) => {
+				setDate( newDate );
+				onChange?.( newDate );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof DatePicker > = Template.bind( {} );
+
+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(),
+	isInvalidDate: isWeekend,
+};

packages/components/src/date-time/stories/index.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DateTimePicker from '..';
+import { daysFromNow, isWeekend } from './utils';
+
+const meta: ComponentMeta< typeof DateTimePicker > = {
+	title: 'Components/DateTimePicker',
+	component: DateTimePicker,
+	argTypes: {
+		currentDate: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof DateTimePicker > = ( {
+	currentDate,
+	onChange,
+	...args
+} ) => {
+	const [ date, setDate ] = useState( currentDate );
+	useEffect( () => {
+		setDate( currentDate );
+	}, [ currentDate ] );
+	return (
+		<DateTimePicker
+			{ ...args }
+			currentDate={ date }
+			onChange={ ( newDate ) => {
+				setDate( newDate );
+				onChange?.( newDate );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
+	{}
+);
+
+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(),
+	isInvalidDate: isWeekend,
+};

packages/components/src/date-time/stories/time.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TimePicker from '../time';
+
+const meta: ComponentMeta< typeof TimePicker > = {
+	title: 'Components/TimePicker',
+	component: TimePicker,
+	argTypes: {
+		currentTime: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+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={ ( newTime ) => {
+				setTime( newTime );
+				onChange?.( newTime );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof TimePicker > = Template.bind( {} );

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;
+}