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 <[email protected]>
Co-authored-by: t-hamano <[email protected]>

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