ResizableBox: Remove knobs in stories (#46774)

* ResizableBox: Remove knobs in stories

* Show more props from types

* Remove unimportant prop controls

* Always enable `enable` prop

* Remove `parseInt()` from readme code snippet

* Hide control for `children` prop

packages/components/src/resizable-box/README.md

@@ -38,8 +38,8 @@ const Edit = ( props ) => {
 			} }
 			onResizeStop={ ( event, direction, elt, delta ) => {
 				setAttributes( {
-					height: parseInt( height + delta.height, 10 ),
-					width: parseInt( width + delta.width, 10 ),
+					height: height + delta.height,
+					width: width + delta.width,
 				} );
 				toggleSelection( true );
 			} }

packages/components/src/resizable-box/index.tsx

@@ -88,14 +88,13 @@ const HANDLE_STYLES = {
 };
 
 type ResizableBoxProps = ResizableProps & {
-	className: string;
 	children: ReactNode;
-	showHandle: boolean;
-	__experimentalShowTooltip: boolean;
-	__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];
+	showHandle?: boolean;
+	__experimentalShowTooltip?: boolean;
+	__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];
 };
 
-function ResizableBox(
+function UnforwardedResizableBox(
 	{
 		className,
 		children,
@@ -124,4 +123,6 @@ function ResizableBox(
 	);
 }
 
-export default forwardRef( ResizableBox );
+export const ResizableBox = forwardRef( UnforwardedResizableBox );
+
+export default ResizableBox;

packages/components/src/resizable-box/stories/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ResizableBox from '..';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const meta: ComponentMeta< typeof ResizableBox > = {
+	title: 'Components/ResizableBox',
+	component: ResizableBox,
+	argTypes: {
+		children: { control: { type: null } },
+		enable: { control: 'object' },
+		onResizeStop: { action: 'onResizeStop' },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ResizableBox > = ( {
+	onResizeStop,
+	...props
+} ) => {
+	const [ { height, width }, setAttributes ] = useState( {
+		height: 200,
+		width: 400,
+	} );
+
+	return (
+		<ResizableBox
+			{ ...props }
+			size={ {
+				height,
+				width,
+			} }
+			onResizeStop={ ( event, direction, elt, delta ) => {
+				onResizeStop?.( event, direction, elt, delta );
+				setAttributes( {
+					height: height + delta.height,
+					width: width + delta.width,
+				} );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: (
+		<div
+			style={ {
+				background: '#eee',
+				display: 'flex',
+				height: '100%',
+				width: '100%',
+				alignItems: 'center',
+				justifyContent: 'center',
+			} }
+		>
+			Resize
+		</div>
+	),
+};
+
+/**
+ * The `enable` prop can be used to disable resizing in specific directions.
+ */
+export const DisabledDirections = Template.bind( {} );
+DisabledDirections.args = {
+	...Default.args,
+	enable: {
+		top: false,
+		right: true,
+		bottom: true,
+		left: false,
+		topRight: false,
+		bottomRight: true,
+		bottomLeft: false,
+		topLeft: false,
+	},
+};