Storybook: Add stories for DateFormatPicker Component

[SainathPoojary]

Part of #67165

What?

This PR adds Storybook stories for the DateFormatPicker component to improve component documentation and testability.

Why?

• To provide clear visual documentation for the DateFormatPicker component.
• To enable interactive testing for various DateFormatPicker scenarios.
• To enhance the development experience for Block Editor components.

Testing Instructions

1. Run npm run storybook:dev
2. Open Storybook at http://localhost:50240/
3. Verify the following stories are present and functioning:
   • Default rendering of the DateFormatPicker.
   • DateFormatPicker with the format set to null.
   • DateFormatPicker with defaultFormat set to empty string.

Screencast

Screen.Recording.2024-11-26.at.9.35.24.AM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: SainathPoojary <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[SainathPoojary]

Hi @t-hamano ,

I have made the necessary changes to the PR based on the general feedback provided. Additionally, I reviewed other similar PRs with requested changes and implemented those adjustments as well. Could you kindly take a look at the PR when you have a moment?

Thank you!

2024-12-11.00-28-15.mp4

[t-hamano]

Thanks for the PR! I only have two small suggestions, but everything works as expected 👍

[SainathPoojary]

Thank you, @t-hamano, for the review! I have implemented the changes as you suggested.

[t-hamano]

LGTM!

P.S. Thanks to your efforts, I was able to find two issues with this component that we will address in a follow-up 👍

• The browser's default border is applied to the fieldset element
• There is no space between the example text and the "Choose a format" control