Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Storybook: Add and Update Block Editor Components stories #67165

Open
miminari opened this issue Nov 20, 2024 · 16 comments · May be fixed by #67846 or #67822
Open

Storybook: Add and Update Block Editor Components stories #67165

miminari opened this issue Nov 20, 2024 · 16 comments · May be fixed by #67846 or #67822
Labels
Good First Issue An issue that's suitable for someone looking to contribute for the first time Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.

Comments

@miminari
Copy link
Member

miminari commented Nov 20, 2024 •
edited by t-hamano
Loading

What problem does this address?

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

What is your proposed solution?

We can use this issue to track the addition and updating of the stories for Block Editor.
You can add the link to assign yourself to each component.
As I know, Block Editor Components list has never existed, so at first, we can start to be based on the directory name.
The list was made automatically, and we can ignore the component for native only.

If you cannot edit the list, please comment on which you made the PR for which directory's components.

cc @WordPress/gutenberg-components

Best Practices

1. Use CSF 3 format

Write stories as objects, not functions

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

export const Default = Template.bind( {} );

2. Consists of only one component

The purpose of Storybook is to test a single UI component itself. Therefore, unless there is a special reason, we should not include anything other than that component.

3. Don’t create too many stories

While it's tempting to expose as many variations of a component as possible, the behavior of the component can be changed in the Controls section.

Therefore, additional stories should only be included if they involve significant visual or behavioral changes.

4. About meta data

To display the source panel by default, specify 'shown' in the meta.parameters.docs.canvas.sourceState field.

Example 
const meta = {
	// ...
	parameters: {
		docs: {
			canvas: { sourceState: 'shown' },
			// ...
		},
	},
	// ...
};

Define the component description via the meta.parameters.docs.description.component field instead of a comment.

Example 
const meta = {
	// ...
	parameters: {
		docs: {
			// ...
			description: {
				component: 'Component description here...',
			},
		},
	},
	// ...
};

Explicitly define the type of props via the meta.argTypes.{propName}.table.type.summary field.

Example 
const meta = {
	// ...
	argTypes: {
		// ...
		propName: {
			// ...
			table: {
				type: {
					summary: 'string',
				},
			},
		},
		// ...
	},
};

For private components, you may want to define the following fields to display the badge 🔒 (Private APIs README).

Check here to see if the component is exported as private.

Example 
const meta = {
	// ...
	tags: [ 'status-private' ],
	// ...
};

5. Others

If the component you're working on doesn't have a README or JDoc, I'd appreciate it if you could do the following to clarify the component's implementation first:

Block Editor Components directories List

Components List

Note: 🔒 indicates that the component is private.
@miminari miminari added [Type] Developer Documentation Documentation for developers [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. Storybook Storybook and its stories for components labels Nov 20, 2024
@miminari miminari mentioned this issue Nov 21, 2024
Closed
@miminari miminari added the Good First Issue An issue that's suitable for someone looking to contribute for the first time label Nov 21, 2024
@im3dabasia im3dabasia mentioned this issue Nov 21, 2024
Open
@Infinite-Null Infinite-Null mentioned this issue Nov 21, 2024
Merged
@im3dabasia im3dabasia mentioned this issue Nov 22, 2024
Open
@akasunil akasunil mentioned this issue Nov 22, 2024
Open
This was referenced Nov 22, 2024
Merged
Merged
This was referenced Nov 26, 2024
Closed
Merged
@himanshupathak95 himanshupathak95 mentioned this issue Nov 27, 2024
Merged
@SainathPoojary SainathPoojary mentioned this issue Nov 27, 2024
Merged
@Infinite-Null Infinite-Null mentioned this issue Nov 27, 2024
Open
@Sukhendu2002 Sukhendu2002 mentioned this issue Nov 27, 2024
Merged
@im3dabasia im3dabasia mentioned this issue Nov 27, 2024
Open
@miminari
Copy link
Member Author

@imanish003 @Sukhendu2002 @Infinite-Null @SainathPoojary @himanshupathak95 @Sukhendu2002
Thank you all for making PR.
Could you please add links to the list by yourself?
Because it takes time to determine which component is in which directory.
If you cannot edit the list, please comment which you made the PR for which directory's components.

@im3dabasia
Copy link
Contributor

im3dabasia commented Nov 28, 2024 •
edited by t-hamano
Loading

Hey @miminari ,

I have submitted PR for the following components:

@SainathPoojary
Copy link
Contributor

SainathPoojary commented Nov 28, 2024 •
edited by t-hamano
Loading

Hey @miminari,

I have submitted a PR for the following components:

@Infinite-Null
Copy link
Contributor

Infinite-Null commented Nov 28, 2024 •
edited
Loading

Hey @miminari,

I have submitted PR for the following components:

@Sukhendu2002
Copy link
Contributor

Sukhendu2002 commented Nov 28, 2024 •
edited
Loading

Hey @miminari,

I have submitted PR for the following components:

@im3dabasia im3dabasia mentioned this issue Nov 28, 2024
Merged
@himanshupathak95 himanshupathak95 mentioned this issue Nov 28, 2024
Merged
@benazeer-ben benazeer-ben mentioned this issue Nov 28, 2024
Closed
@himanshupathak95
Copy link
Contributor

himanshupathak95 commented Nov 28, 2024 •
edited by t-hamano
Loading

Hey @miminari,

I have submitted a PR for the following components:

@Sukhendu2002 Sukhendu2002 mentioned this issue Nov 28, 2024
Open
@benazeer-ben benazeer-ben mentioned this issue Nov 28, 2024
Open
@youknowriad
Copy link
Contributor

I'm curious about the reasoning here :). I'm not saying we shouldn't be doing this but curious to lean what value you folks will be receiving from this ?

cc @WordPress/gutenberg-core for awareness.

@Sukhendu2002 Sukhendu2002 mentioned this issue Dec 19, 2024
Open
@vipul0425 vipul0425 mentioned this issue Dec 19, 2024
Open
@SohamPatel46 SohamPatel46 mentioned this issue Dec 20, 2024
Open
@vipul0425 vipul0425 mentioned this issue Dec 20, 2024
Open
@himanshupathak95 himanshupathak95 mentioned this issue Dec 24, 2024
Open
@vipul0425 vipul0425 mentioned this issue Dec 24, 2024
Open
@Rishit30G Rishit30G mentioned this issue Dec 24, 2024
Open
@SohamPatel46 SohamPatel46 mentioned this issue Dec 24, 2024
Open
@vipul0425 vipul0425 mentioned this issue Dec 25, 2024
Open
@SainathPoojary SainathPoojary mentioned this issue Dec 25, 2024
Closed
@singhakanshu00 singhakanshu00 mentioned this issue Dec 25, 2024
Open
This was referenced Dec 25, 2024
Draft
Closed
This was referenced Dec 25, 2024
Open
Closed
This was referenced Dec 26, 2024
Open
Open
@Mamaduka
Copy link
Member

Excellent team effort here.

@t-hamano, your tips and suggestions should be included in the issue description. It's helpful information and is currently hidden in GitHub activity. We could use the details element to collapse the component list. It's taking up too much space, in my opinion.

@vipul0425 vipul0425 mentioned this issue Dec 26, 2024
Open
@t-hamano
Copy link
Contributor

@Mamaduka Thanks for the feedback! I've summarized all the tips and suggestions in the description.

@Rishit30G Rishit30G mentioned this issue Dec 26, 2024
Closed
This was referenced Dec 26, 2024
Closed
Draft
@vipul0425 vipul0425 mentioned this issue Dec 27, 2024
Open
@Infinite-Null Infinite-Null mentioned this issue Dec 27, 2024
Draft
@vipul0425 vipul0425 mentioned this issue Dec 27, 2024
Open
@SainathPoojary SainathPoojary mentioned this issue Dec 27, 2024
Draft
@Rishit30G Rishit30G mentioned this issue Dec 27, 2024
Open
@t-hamano
Copy link
Contributor

Update: I would like to propose adding badges (🔒) to private components. Please see the "4. About meta data" section of this issue for more details.

@Rishit30G Rishit30G mentioned this issue Dec 28, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Good First Issue An issue that's suitable for someone looking to contribute for the first time Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
Projects
None yet
Milestone
No milestone
10 participants
@Mamaduka @youknowriad @miminari @mirka @SainathPoojary @t-hamano @himanshupathak95 @im3dabasia @Sukhendu2002 @Infinite-Null