Storybook: Add stories for AlignmentToolbar and AlignmentControl components

[miminari]

What?

This PR will add stories for AlignmentToolbar and AlignmentControl components in the Storybook

Why?

Most of Block Editor components don't have stories.
Block Editor components's Storybook should also be added and updated like the Components.
see #66519
related #22891

How?

I have referred to the TextAlignmentControl story.
AlignmentControl and AlignmentToolbar are based on same component, but there are deliberately generated as a component with a different name, so I created in two separate files.

Testing Instructions

npm run storybook:dev and please check the AlignmentControl and AlignmentToolbar stories.

Testing Instructions for Keyboard

Screenshots or screencast

Kapture.2024-11-16.at.13.37.50.mp4

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

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

[miminari]

@t-hamano Thank you for quick reviewing!
I updated codes. Could you please check again?

[mirka]

This is fine, but just as a tip for easier authoring and maintenance, it will be a lot simpler to showcase the component in uncontrolled mode if the component supports it. It will literally be a one-liner 😄

Suggested change

	const Template = ( { onChange, ...args } ) => {
	const [ value, setValue ] = useState();
	return (
	<AlignmentToolbar
	{ ...args }
	onChange={ ( ...changeArgs ) => {
	onChange( ...changeArgs );
	setValue( ...changeArgs );
	} }
	value={ value }
	/>
	);
	};
	export const Default = Template.bind();
	export const Default = {};

[miminari]

Wow, so easy! And more ideal. Thanks for letting me know!

[miminari]

But then we can't reproduce the onChange moving on Storybook, but that's not a problem, right? Or I guess I might miss something...

[mirka]

The onChange should still be observable in the Actions panel as before. Is it not working in your environment? The only reason we need to merge the incoming onChange function is when it's used in controlled mode and you need to call the setValue as well.

[t-hamano]

In my environment, the story of the AlignmentToolbar component does not work properly. The onChange event is fired, but the text alignment is not updated. Does this component not support uncontrolled mode?

d5e018c76f3413012303cbe0189ea76b.mp4

[mirka]

Ah right, my bad! I guess it doesn't support uncontrolled. I'd still recommend using CSF 3 format (instead of the Template.bind()) for new stories though:

export const Default = {
	render: function Template( { onChange, ...args } ) {
		const [ value, setValue ] = useState();
		return (
			<AlignmentToolbar
				{ ...args }
				onChange={ ( ...changeArgs ) => {
					onChange( ...changeArgs );
					setValue( ...changeArgs );
				} }
				value={ value }
			/>
		);
	},
};

[miminari]

Thank you two! I updated as you wrote.

[mirka]

🚀