From 287d6534f59ea95de5499569f49996e7fa320a7c Mon Sep 17 00:00:00 2001
From: Sainath Poojary <53347682+SainathPoojary@users.noreply.github.com>
Date: Wed, 18 Dec 2024 13:40:03 +0530
Subject: [PATCH] Storybook: Add stories for DateFormatPicker Component
 (#67290)

* Storybook: Add DateFormatPicker Stories

* Refactor: Simplify `DateFormatPicker` stories

- Removed `useEffect` and streamlined state handling.
- Improved parameter descriptions and documentation.
- Removed unused story variants for clarity.

* Refactor: Remove comment from story

* DateFormatPicker: Swap import order and update prop type in DateFormatPicker story

Co-authored-by: SainathPoojary <sainathpoojary@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../date-format-picker/stories/index.story.js | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 packages/block-editor/src/components/date-format-picker/stories/index.story.js

diff --git a/packages/block-editor/src/components/date-format-picker/stories/index.story.js b/packages/block-editor/src/components/date-format-picker/stories/index.story.js
new file mode 100644
index 0000000000000..12d7e07105494
--- /dev/null
+++ b/packages/block-editor/src/components/date-format-picker/stories/index.story.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DateFormatPicker from '../';
+
+export default {
+	title: 'BlockEditor/DateFormatPicker',
+	component: DateFormatPicker,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'The `DateFormatPicker` component enables users to configure their preferred *date format*. This determines how dates are displayed.',
+			},
+		},
+	},
+	argTypes: {
+		defaultFormat: {
+			control: 'text',
+			description:
+				'The date format that will be used if the user selects "Default".',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		format: {
+			control: { type: null },
+			description:
+				'The selected date format. If `null`, _Default_ is selected.',
+			table: {
+				type: { summary: 'string | null' },
+			},
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description:
+				'Called when a selection is made. If `null`, _Default_ is selected.',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+	},
+};
+
+export const Default = {
+	args: {
+		defaultFormat: 'M j, Y',
+	},
+	render: function Template( { onChange, ...args } ) {
+		const [ format, setFormat ] = useState();
+		return (
+			<DateFormatPicker
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setFormat( ...changeArgs );
+				} }
+				format={ format }
+			/>
+		);
+	},
+};