Storybook: Add Story for Block Patterns List

packages/block-editor/src/components/block-patterns-list/stories/index.story.js

@@ -6,59 +6,147 @@ import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build-
 /**
  * Internal dependencies
  */
-import BlockPatternsList from '../';
-import { ExperimentalBlockEditorProvider } from '../../provider';
+import BlockPatternsList from '..';
 import patterns from './fixtures';
+import { ExperimentalBlockEditorProvider } from '../../provider';
+
+/**
+ * WordPress dependencies
+ */
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { __ } from '@wordpress/i18n';
+registerCoreBlocks();
 
 const blockEditorSettings = {
 	styles: [ { css: blockLibraryStyles } ],
 };
 
-export default {
-	component: BlockPatternsList,
+/**
+ * Storybook metadata
+ */
+const meta = {
 	title: 'BlockEditor/BlockPatternsList',
-};
-
-export const Default = {
-	render: function Template( props ) {
-		return (
-			<ExperimentalBlockEditorProvider settings={ blockEditorSettings }>
-				<BlockPatternsList { ...props } />
-			</ExperimentalBlockEditorProvider>
-		);
-	},
-	args: {
-		blockPatterns: patterns,
-		isDraggable: false,
-		label: 'Block patterns story',
-		showTitlesAsTooltip: false,
+	component: BlockPatternsList,
+	parameters: {
+		docs: {
+			canvas: {
+				sourceState: 'shown',
+			},
+			description: {
+				component:
+					'The `BlockPatternsList` component renders a list of block patterns.',
+			},
+		},
 	},
 	argTypes: {
-		blockPatterns: { description: 'The patterns to render.' },
+		blockPatterns: {
+			control: {
+				type: 'object',
+			},
+			description: 'The patterns to render.',
+			table: {
+				type: {
+					summary: 'object',
+				},
+			},
+		},
 		shownPatterns: {
+			contorl: { type: null },
 			description:
-				'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns`.',
+				'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns.`',
+			table: {
+				type: {
+					summary: 'object',
+				},
+			},
+		},
+		onClickPattern: {
+			control: { type: null },
+			description:
+				'Callback function to handle the click event on a pattern.',
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+		},
+		onHover: {
+			control: {
+				type: null,
+			},
+			description:
+				'Callback function to handle the hover event on a pattern.',
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
 		},
-		onClickPattern: { type: 'function' },
-		onHover: { type: 'function' },
 		showTitlesAsTooltip: {
+			control: {
+				type: 'boolean',
+			},
 			description:
 				'Whether to render the title of each pattern as a tooltip. If enabled',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
 		},
 		orientation: {
+			control: {
+				type: 'string',
+			},
 			description: 'Orientation for the underlying composite widget.',
 			table: {
-				defaultValue: { summary: 'both' },
-				type: { summary: 'string' },
+				defaultValue: {
+					summary: 'both',
+				},
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		category: {
+			control: {
+				type: 'string',
+			},
+			description: 'The currently selected pattern category.',
+			table: {
+				type: {
+					summary: 'string',
+				},
 			},
 		},
-		category: { description: 'The currently selected pattern category.' },
 		isDraggable: {
+			control: {
+				type: 'boolean',
+			},
 			description: 'Whether the pattern list item should be draggable.',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
 		},
 	},
-	parameters: {
-		actions: { argTypesRegex: '^on.*' },
-		controls: { expanded: true },
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		blockPatterns: patterns,
+		isDraggable: false,
+		label: __( 'Block patterns story' ),
+		showTitlesAsTooltip: false,
+	},
+	render: function Template( args ) {
+		return (
+			<ExperimentalBlockEditorProvider settings={ blockEditorSettings }>
+				<BlockPatternsList { ...args } />
+			</ExperimentalBlockEditorProvider>
+		);
 	},
 };