Storybook: remove toFormField

WordPress · Nov 19, 2024 · a813725 · a813725
1 parent 3f709f9
commit a813725
Showing 1 changed file with 38 additions and 79 deletions.
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -8,8 +8,7 @@ import { ToggleControl } from '@wordpress/components';
  * Internal dependencies
  */
 import DataForm from '../index';
-import type { Field, Form, FormField } from '../../../types';
-import { isCombinedField } from '../../../dataforms-layouts/is-combined-field';
+import type { Field, Form } from '../../../types';
 
 type SamplePost = {
 	title: string;
@@ -30,12 +29,12 @@ const meta = {
 			control: { type: 'select' },
 			description:
 				'Chooses the default layout of each field. "regular" is the default layout.',
-			options: [ 'regular', 'panel' ],
+			options: [ 'default', 'regular', 'panel' ],
 		},
 		labelPosition: {
 			control: { type: 'select' },
 			description: 'Chooses the label position of the layout.',
-			options: [ 'default', 'top', 'side' ],
+			options: [ 'default', 'top', 'side', 'none' ],
 		},
 	},
 };
@@ -124,39 +123,12 @@ const fields = [
 	},
 ] as Field< SamplePost >[];
 
-function toFormField(
-	formFields: Array< string | FormField >,
-	labelPosition: 'default' | 'top' | 'side',
-	type: 'panel' | 'regular'
-): FormField[] {
-	return formFields.map( ( field ) => {
-		if ( typeof field === 'string' ) {
-			return {
-				id: field,
-				layout: type,
-				labelPosition:
-					labelPosition === 'default' ? undefined : labelPosition,
-			};
-		} else if (
-			typeof field !== 'string' &&
-			isCombinedField( field ) &&
-			type !== 'panel'
-		) {
-			return {
-				...field,
-				children: toFormField( field.children, labelPosition, type ),
-			};
-		}
-		return field;
-	} );
-}
-
 export const Default = ( {
 	type,
 	labelPosition,
 }: {
-	type: 'panel' | 'regular';
-	labelPosition: 'default' | 'top' | 'side';
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
 } ) => {
 	const [ post, setPost ] = useState( {
 		title: 'Hello, World!',
@@ -171,27 +143,22 @@ export const Default = ( {
 
 	const form = useMemo(
 		() => ( {
-			fields: toFormField(
-				[
-					'title',
-					'order',
-					{
-						id: 'sticky',
-						layout: 'regular',
-						labelPosition:
-							type === 'regular' && labelPosition !== 'default'
-								? labelPosition
-								: 'side',
-					},
-					'author',
-					'reviewer',
-					'password',
-					'date',
-					'birthdate',
-				],
-				labelPosition,
-				type
-			),
+			type,
+			labelPosition,
+			fields: [
+				'title',
+				'order',
+				{
+					id: 'sticky',
+					layout: 'regular',
+					labelPosition: 'side',
+				},
+				'author',
+				'reviewer',
+				'password',
+				'date',
+				'birthdate',
+			],
 		} ),
 		[ type, labelPosition ]
 	) as Form;
@@ -200,10 +167,7 @@ export const Default = ( {
 		<DataForm< SamplePost >
 			data={ post }
 			fields={ fields }
-			form={ {
-				...form,
-				type,
-			} }
+			form={ form }
 			onChange={ ( edits ) =>
 				setPost( ( prev ) => ( {
 					...prev,
@@ -215,11 +179,11 @@ export const Default = ( {
 };
 
 const CombinedFieldsComponent = ( {
-	type = 'regular',
+	type,
 	labelPosition,
 }: {
-	type: 'panel' | 'regular';
-	labelPosition: 'default' | 'top' | 'side';
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
 } ) => {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
@@ -233,20 +197,18 @@ const CombinedFieldsComponent = ( {
 
 	const form = useMemo(
 		() => ( {
-			fields: toFormField(
-				[
-					'title',
-					{
-						id: 'status',
-						label: 'Status & Visibility',
-						children: [ 'status', 'password' ],
-					},
-					'order',
-					'author',
-				],
-				labelPosition,
-				type
-			),
+			type,
+			labelPosition,
+			fields: [
+				'title',
+				{
+					id: 'status',
+					label: 'Status & Visibility',
+					children: [ 'status', 'password' ],
+				},
+				'order',
+				'author',
+			],
 		} ),
 		[ type, labelPosition ]
 	) as Form;
@@ -255,10 +217,7 @@ const CombinedFieldsComponent = ( {
 		<DataForm< SamplePost >
 			data={ post }
 			fields={ fields }
-			form={ {
-				...form,
-				type,
-			} }
+			form={ form }
 			onChange={ ( edits ) =>
 				setPost( ( prev ) => ( {
 					...prev,