Storybook: Add PlainText Storybook stories (#67341)

* Storybook: Add PlainText Storybook stories

- Add Default, LongText, and WithClassName stories
- Configure meta for PlainText component

* Refactor: `PlainText` stories and removed useEffect

* Refactor: Remove comment from story

* Storybook: improve `PlainText` JSDoc and storybook descriptions

- Enhance prop descriptions
- Fix import order in storybook.

* Storybook: Unify value and onChange prop descriptions

Co-authored-by: SainathPoojary <[email protected]>
Co-authored-by: t-hamano <[email protected]>

packages/block-editor/README.md

@@ -713,10 +713,50 @@ Undocumented declaration.
 
 ### PlainText
 
+Render an auto-growing textarea allow users to fill any textual content.
+
 _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/plain-text/README.md>
 
+_Usage_
+
+```jsx
+import { registerBlockType } from '@wordpress/blocks';
+import { PlainText } from '@wordpress/block-editor';
+
+registerBlockType( 'my-plugin/example-block', {
+	// ...
+
+	attributes: {
+		content: {
+			type: 'string',
+		},
+	},
+
+	edit( { className, attributes, setAttributes } ) {
+		return (
+			<PlainText
+				className={ className }
+				value={ attributes.content }
+				onChange={ ( content ) => setAttributes( { content } ) }
+			/>
+		);
+	},
+} );
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component props.
+-   _props.value_ `string`: String value of the textarea.
+-   _props.onChange_ `Function`: Function called when the text value changes.
+-   _props.ref_ `[Object]`: The component forwards the `ref` property to the `TextareaAutosize` component.
+
+_Returns_
+
+-   `Element`: Plain text component
+
 ### privateApis
 
 Private @wordpress/block-editor APIs.

packages/block-editor/src/components/plain-text/README.md

@@ -6,11 +6,11 @@ Render an auto-growing textarea allow users to fill any textual content.
 
 ### `value: string`
 
-_Required._ String value of the textarea
+_Required._ String value of the textarea.
 
 ### `onChange( value: string ): Function`
 
-_Required._ Called when the value changes.
+_Required._ Function called when the text value changes.
 
 You can also pass any extra prop to the textarea rendered by this component.
 

packages/block-editor/src/components/plain-text/index.js

@@ -15,7 +15,41 @@ import { forwardRef } from '@wordpress/element';
 import EditableText from '../editable-text';
 
 /**
+ * Render an auto-growing textarea allow users to fill any textual content.
+ *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/plain-text/README.md
+ *
+ * @example
+ * ```jsx
+ * import { registerBlockType } from '@wordpress/blocks';
+ * import { PlainText } from '@wordpress/block-editor';
+ *
+ * registerBlockType( 'my-plugin/example-block', {
+ *   // ...
+ *
+ *   attributes: {
+ *     content: {
+ *       type: 'string',
+ *     },
+ *   },
+ *
+ *   edit( { className, attributes, setAttributes } ) {
+ *     return (
+ *       <PlainText
+ *         className={ className }
+ *         value={ attributes.content }
+ *         onChange={ ( content ) => setAttributes( { content } ) }
+ *       />
+ *     );
+ *   },
+ * } );
+ * ````
+ *
+ * @param {Object}   props          Component props.
+ * @param {string}   props.value    String value of the textarea.
+ * @param {Function} props.onChange Function called when the text value changes.
+ * @param {Object}   [props.ref]    The component forwards the `ref` property to the `TextareaAutosize` component.
+ * @return {Element} Plain text component
  */
 const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => {
 	if ( __experimentalVersion === 2 ) {

packages/block-editor/src/components/plain-text/stories/index.story.js

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PlainText from '..';
+
+const meta = {
+	title: 'BlockEditor/PlainText',
+	component: PlainText,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'PlainText renders an auto-growing textarea that allows users to enter any textual content.',
+			},
+		},
+	},
+	argTypes: {
+		value: {
+			control: {
+				type: null,
+			},
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+			description: 'String value of the textarea.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: {
+				type: null,
+			},
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+			description: 'Function called when the text value changes.',
+		},
+		className: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+			description: 'Additional class name for the PlainText.',
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<PlainText
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};