StoryBook: Add Story for ResolutionTool

packages/block-editor/src/components/resolution-tool/stories/index.story.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useReducer } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import {
 	Panel,
 	__experimentalToolsPanel as ToolsPanel,
@@ -10,66 +10,114 @@ import {
 /**
  * Internal dependencies
  */
-import ResolutionTool from '..';
+import ResolutionTool from '../';
 
-export default {
-	title: 'BlockEditor (Private APIs)/ResolutionControl',
+const meta = {
+	title: 'BlockEditor/ResolutionTool',
 	component: ResolutionTool,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'A control for selecting image resolution with preset size options.',
+			},
+		},
+	},
 	argTypes: {
-		panelId: { control: false },
-		onChange: { action: 'changed' },
+		value: {
+			control: 'radio',
+			options: [ 'thumbnail', 'medium', 'large', 'full' ],
+			description: 'Currently selected resolution value.',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'thumbnail' },
+			},
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Handles change in resolution selection.',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		options: {
+			control: 'object',
+			description: 'Array of resolution options to display.',
+			table: {
+				type: { summary: 'array' },
+				defaultValue: {
+					summary: JSON.stringify( [
+						{ label: 'Thumbnail', value: 'thumbnail' },
+						{ label: 'Medium', value: 'medium' },
+						{ label: 'Large', value: 'large' },
+						{ label: 'Full Size', value: 'full' },
+					] ),
+				},
+			},
+		},
+		defaultValue: {
+			control: 'radio',
+			options: [ 'thumbnail', 'medium', 'large', 'full' ],
+			description: 'Default resolution value.',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'thumbnail' },
+			},
+		},
+		isShownByDefault: {
+			control: 'boolean',
+			description:
+				'Whether the control is shown by default in the panel.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: true },
+			},
+		},
+		panelId: {
+			control: { type: null },
+			description: 'ID of the parent tools panel.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
 	},
 };
 
-export const Default = ( {
-	label,
-	panelId,
-	onChange: onChangeProp,
-	...props
-} ) => {
-	const [ attributes, setAttributes ] = useReducer(
-		( prevState, nextState ) => ( { ...prevState, ...nextState } ),
-		{}
-	);
-	const { resolution } = attributes;
-	const resetAll = ( resetFilters = [] ) => {
-		let newAttributes = {};
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, defaultValue, value, ...args } ) {
+		const [ resolution, setResolution ] = useState( value ?? defaultValue );
+
+		useEffect( () => {
+			if ( value !== resolution ) {
+				setResolution( value );
+			}
+		}, [ value ] );
 
-		resetFilters.forEach( ( resetFilter ) => {
-			newAttributes = {
-				...newAttributes,
-				...resetFilter( newAttributes ),
-			};
-		} );
+		const handleChange = ( newValue ) => {
+			setResolution( newValue );
+			onChange?.( newValue );
+		};
 
-		setAttributes( newAttributes );
-		onChangeProp( undefined );
-	};
-	return (
-		<Panel>
-			<ToolsPanel
-				label={ label }
-				panelId={ panelId }
-				resetAll={ resetAll }
-			>
-				<ResolutionTool
-					panelId={ panelId }
-					onChange={ ( newValue ) => {
-						setAttributes( { resolution: newValue } );
-						onChangeProp( newValue );
+		return (
+			<Panel>
+				<ToolsPanel
+					resetAll={ () => {
+						setResolution( defaultValue );
+						onChange?.( defaultValue );
 					} }
-					value={ resolution }
-					resetAllFilter={ () => ( {
-						resolution: undefined,
-					} ) }
-					{ ...props }
-				/>
-			</ToolsPanel>
-		</Panel>
-	);
-};
-Default.args = {
-	label: 'Settings',
-	defaultValue: 'full',
-	panelId: 'panel-id',
+				>
+					<ResolutionTool
+						{ ...args }
+						defaultValue={ defaultValue }
+						onChange={ handleChange }
+						value={ resolution }
+					/>
+				</ToolsPanel>
+			</Panel>
+		);
+	},
 };