@wordpress/dataviews 7.0.1-next.0f6f9d12c.0 → 7.0.1-next.f34ab90e9.0

package/src/components/dataform/stories/index.story.tsx

@@ -13,7 +13,15 @@ import {
  */
 import DataForm from '../index';
 import { isItemValid } from '../../../validation';
-import type { Field, Form, DataFormControlProps } from '../../../types';
+import type {
+	Field,
+	Form,
+	DataFormControlProps,
+	Layout,
+	RegularLayout,
+	PanelLayout,
+	CardLayout,
+} from '../../../types';
 import { unlock } from '../../../lock-unlock';
 
 const { ValidatedTextControl } = unlock( privateApis );
@@ -30,47 +38,31 @@ type SamplePost = {
 	filesize?: number;
 	dimensions?: string;
 	tags?: string[];
+	address1?: string;
+	address2?: string;
+	city?: string;
 };
 
-const meta = {
-	title: 'DataViews/DataForm',
-	component: DataForm,
-	argTypes: {
-		type: {
-			control: { type: 'select' },
-			description:
-				'Chooses the default layout of each field. "regular" is the default layout.',
-			options: [ 'default', 'regular', 'panel', 'card' ],
-		},
-		labelPosition: {
-			control: { type: 'select' },
-			description: 'Chooses the label position of the layout.',
-			options: [ 'default', 'top', 'side', 'none' ],
-		},
-	},
-};
-export default meta;
-
-const fields = [
+const fields: Field< SamplePost >[] = [
 	{
 		id: 'title',
 		label: 'Title',
-		type: 'text' as const,
+		type: 'text',
 	},
 	{
 		id: 'order',
 		label: 'Order',
-		type: 'integer' as const,
+		type: 'integer',
 	},
 	{
 		id: 'date',
 		label: 'Date',
-		type: 'datetime' as const,
+		type: 'datetime',
 	},
 	{
 		id: 'birthdate',
 		label: 'Date as options',
-		type: 'datetime' as const,
+		type: 'datetime',
 		elements: [
 			{ value: '', label: 'Select a date' },
 			{ value: '1970-02-23T12:00:00', label: "Jane's birth date" },
@@ -80,28 +72,31 @@ const fields = [
 	{
 		id: 'author',
 		label: 'Author',
-		type: 'integer' as const,
+		type: 'integer',
 		elements: [
 			{ value: 1, label: 'Jane' },
 			{ value: 2, label: 'John' },
+			{ value: 3, label: 'Alice' },
+			{ value: 4, label: 'Bob' },
 		],
 	},
 	{
 		id: 'reviewer',
 		label: 'Reviewer',
-		type: 'text' as const,
-		Edit: 'radio' as const,
+		type: 'text',
+		Edit: 'radio',
 		elements: [
-			{ value: 'fulano', label: 'Fulano' },
-			{ value: 'mengano', label: 'Mengano' },
-			{ value: 'zutano', label: 'Zutano' },
+			{ value: 'jane', label: 'Jane' },
+			{ value: 'john', label: 'John' },
+			{ value: 'alice', label: 'Alice' },
+			{ value: 'bob', label: 'Bob' },
 		],
 	},
 	{
 		id: 'status',
 		label: 'Status',
-		type: 'text' as const,
-		Edit: 'toggleGroup' as const,
+		type: 'text',
+		Edit: 'toggleGroup',
 		elements: [
 			{ value: 'draft', label: 'Draft' },
 			{ value: 'published', label: 'Published' },
@@ -111,12 +106,12 @@ const fields = [
 	{
 		id: 'email',
 		label: 'Email',
-		type: 'email' as const,
+		type: 'email',
 	},
 	{
 		id: 'password',
 		label: 'Password',
-		type: 'text' as const,
+		type: 'text',
 		isVisible: ( item: SamplePost ) => {
 			return item.status !== 'private';
 		},
@@ -129,25 +124,25 @@ const fields = [
 	{
 		id: 'can_comment',
 		label: 'Allow people to leave a comment',
-		type: 'boolean' as const,
+		type: 'boolean',
 		Edit: 'checkbox',
 	},
 	{
 		id: 'filesize',
 		label: 'File Size',
-		type: 'integer' as const,
+		type: 'integer',
 		readOnly: true,
 	},
 	{
 		id: 'dimensions',
 		label: 'Dimensions',
-		type: 'text' as const,
+		type: 'text',
 		readOnly: true,
 	},
 	{
 		id: 'tags',
 		label: 'Tags',
-		type: 'array' as const,
+		type: 'array',
 		placeholder: 'Enter comma-separated tags',
 		description: 'Add tags separated by commas (e.g., "tag1, tag2, tag3")',
 		elements: [
@@ -158,13 +153,28 @@ const fields = [
 			{ value: 'travel', label: 'Travel' },
 		],
 	},
-] as Field< SamplePost >[];
+	{
+		id: 'address1',
+		label: 'Address 1',
+		type: 'text',
+	},
+	{
+		id: 'address2',
+		label: 'Address 2',
+		type: 'text',
+	},
+	{
+		id: 'city',
+		label: 'City',
+		type: 'text',
+	},
+];
 
-export const Default = ( {
-	type,
+const LayoutRegularComponent = ( {
+	type = 'default',
 	labelPosition,
 }: {
-	type: 'default' | 'regular' | 'panel' | 'card';
+	type?: 'default' | 'regular' | 'panel' | 'card';
 	labelPosition: 'default' | 'top' | 'side' | 'none';
 } ) => {
 	const [ post, setPost ] = useState( {
@@ -183,12 +193,12 @@ export const Default = ( {
 		tags: [ 'photography' ],
 	} );
 
-	const form = useMemo(
+	const form: Form = useMemo(
 		() => ( {
-			layout: {
+			layout: getLayoutFromStoryArgs( {
 				type,
 				labelPosition,
-			},
+			} ),
 			fields: [
 				'title',
 				'order',
@@ -207,7 +217,7 @@ export const Default = ( {
 			],
 		} ),
 		[ type, labelPosition ]
-	) as Form;
+	);
 
 	return (
 		<DataForm< SamplePost >
@@ -224,12 +234,59 @@ export const Default = ( {
 	);
 };
 
-const CombinedFieldsComponent = ( {
+const getLayoutFromStoryArgs = ( {
 	type,
 	labelPosition,
+	openAs,
+	withHeader,
+}: {
+	type: 'default' | 'regular' | 'panel' | 'card';
+	labelPosition?: 'default' | 'top' | 'side' | 'none';
+	openAs?: 'default' | 'dropdown' | 'modal';
+	withHeader?: boolean;
+} ): Layout | undefined => {
+	let layout: Layout | undefined;
+
+	if ( type === 'default' || type === 'regular' ) {
+		const regularLayout: RegularLayout = {
+			type: 'regular',
+		};
+		if ( labelPosition !== 'default' ) {
+			regularLayout.labelPosition = labelPosition;
+		}
+		layout = regularLayout;
+	} else if ( type === 'panel' ) {
+		const panelLayout: PanelLayout = {
+			type: 'panel',
+		};
+		if ( labelPosition !== 'default' ) {
+			panelLayout.labelPosition = labelPosition;
+		}
+		if ( openAs !== 'default' ) {
+			panelLayout.openAs = openAs;
+		}
+		layout = panelLayout;
+	} else if ( type === 'card' ) {
+		const cardLayout: CardLayout = {
+			type: 'card',
+		};
+		if ( withHeader !== undefined ) {
+			// @ts-ignore We want to demo the effects of configuring withHeader.
+			cardLayout.withHeader = withHeader;
+		}
+		layout = cardLayout;
+	}
+
+	return layout;
+};
+
+const LayoutPanelComponent = ( {
+	labelPosition,
+	openAs,
 }: {
 	type: 'default' | 'regular' | 'panel' | 'card';
 	labelPosition: 'default' | 'top' | 'side' | 'none';
+	openAs: 'default' | 'dropdown' | 'modal';
 } ) => {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
@@ -242,14 +299,18 @@ const CombinedFieldsComponent = ( {
 		filesize: 1024,
 		dimensions: '1920x1080',
 		tags: [ 'photography' ],
+		address1: '123 Main St',
+		address2: 'Apt 4B',
+		city: 'New York',
 	} );
 
-	const form = useMemo(
-		() => ( {
-			layout: {
-				type,
+	const form: Form = useMemo( () => {
+		return {
+			layout: getLayoutFromStoryArgs( {
+				type: 'panel',
 				labelPosition,
-			},
+				openAs,
+			} ),
 			fields: [
 				'title',
 				{
@@ -262,10 +323,14 @@ const CombinedFieldsComponent = ( {
 				'filesize',
 				'dimensions',
 				'tags',
+				{
+					id: 'address1',
+					label: 'Combined Address',
+					children: [ 'address1', 'address2', 'city' ],
+				},
 			],
-		} ),
-		[ type, labelPosition ]
-	) as Form;
+		};
+	}, [ labelPosition, openAs ] );
 
 	return (
 		<DataForm< SamplePost >
@@ -282,17 +347,6 @@ const CombinedFieldsComponent = ( {
 	);
 };
 
-export const CombinedFields = {
-	title: 'DataViews/CombinedFields',
-	render: CombinedFieldsComponent,
-	argTypes: {
-		...meta.argTypes,
-	},
-	args: {
-		type: 'panel',
-	},
-};
-
 function CustomEditControl< Item >( {
 	data,
 	field,
@@ -325,53 +379,90 @@ function CustomEditControl< Item >( {
 	);
 }
 
-const DataFormValidationComponent = ( { required }: { required: boolean } ) => {
+const ValidationComponent = ( {
+	required,
+	type,
+	custom,
+}: {
+	required: boolean;
+	custom: boolean;
+	type: 'regular' | 'panel';
+} ) => {
 	type ValidatedItem = {
 		text: string;
 		email: string;
 		integer: number;
 		boolean: boolean;
 		customEdit: string;
-		customValidation: string;
 	};
 
 	const [ post, setPost ] = useState< ValidatedItem >( {
-		text: 'Hello, World!',
+		text: 'Can have letters and spaces',
 		email: 'hi@example.com',
 		integer: 2,
 		boolean: true,
 		customEdit: 'custom control',
-		customValidation: 'potato',
 	} );
 
+	const customTextRule = ( value: ValidatedItem ) => {
+		if ( ! /^[a-zA-Z ]+$/.test( value.text ) ) {
+			return 'Value must only contain letters and spaces.';
+		}
+
+		return null;
+	};
+	const customEmailRule = ( value: ValidatedItem ) => {
+		if ( ! /^[a-zA-Z0-9._%+-]+@example\.com$/.test( value.email ) ) {
+			return 'Email address must be from @example.com domain.';
+		}
+
+		return null;
+	};
+	const customIntegerRule = ( value: ValidatedItem ) => {
+		if ( value.integer % 2 !== 0 ) {
+			return 'Integer must be an even number.';
+		}
+
+		return null;
+	};
+
+	const maybeCustomRule = (
+		rule: ( item: ValidatedItem ) => null | string
+	) => {
+		return custom ? rule : undefined;
+	};
+
 	const _fields: Field< ValidatedItem >[] = [
 		{
 			id: 'text',
-			type: 'text' as const,
+			type: 'text',
 			label: 'Text',
 			isValid: {
 				required,
+				custom: maybeCustomRule( customTextRule ),
 			},
 		},
 		{
 			id: 'email',
-			type: 'email' as const,
+			type: 'email',
 			label: 'e-mail',
 			isValid: {
 				required,
+				custom: maybeCustomRule( customEmailRule ),
 			},
 		},
 		{
 			id: 'integer',
-			type: 'integer' as const,
+			type: 'integer',
 			label: 'Integer',
 			isValid: {
 				required,
+				custom: maybeCustomRule( customIntegerRule ),
 			},
 		},
 		{
 			id: 'boolean',
-			type: 'boolean' as const,
+			type: 'boolean',
 			label: 'Boolean',
 			isValid: {
 				required,
@@ -385,36 +476,11 @@ const DataFormValidationComponent = ( { required }: { required: boolean } ) => {
 				required,
 			},
 		},
-		{
-			id: 'customValidation',
-			type: 'text',
-			label: 'Custom validation',
-			isValid: {
-				required,
-				custom: ( value: ValidatedItem ) => {
-					if (
-						! [ 'tomato', 'potato' ].includes(
-							value.customValidation
-						)
-					) {
-						return 'Value must be one of "tomato", "potato"';
-					}
-
-					return null;
-				},
-			},
-		},
 	];
 
 	const form = {
-		fields: [
-			'text',
-			'email',
-			'integer',
-			'boolean',
-			'customEdit',
-			'customValidation',
-		],
+		layout: { type },
+		fields: [ 'text', 'email', 'integer', 'boolean', 'customEdit' ],
 	};
 
 	const canSave = isItemValid( post, _fields, form );
@@ -446,21 +512,7 @@ const DataFormValidationComponent = ( { required }: { required: boolean } ) => {
 	);
 };
 
-export const Validation = {
-	title: 'DataForm/Validation',
-	render: DataFormValidationComponent,
-	argTypes: {
-		required: {
-			control: { type: 'boolean' },
-			description: 'Whether or not the fields are required.',
-		},
-	},
-	args: {
-		required: true,
-	},
-};
-
-const DataFormVisibilityComponent = () => {
+const VisibilityComponent = () => {
 	type Post = {
 		name: string;
 		email: string;
@@ -472,7 +524,7 @@ const DataFormVisibilityComponent = () => {
 		isActive: true,
 	} );
 
-	const _fields = [
+	const _fields: Field< Post >[] = [
 		{ id: 'isActive', label: 'Is module active?', type: 'boolean' },
 		{
 			id: 'name',
@@ -486,8 +538,8 @@ const DataFormVisibilityComponent = () => {
 			type: 'email',
 			isVisible: ( post ) => post.isActive === true,
 		},
-	] satisfies Field< Post >[];
-	const form = {
+	];
+	const form: Form = {
 		fields: [ 'isActive', 'name', 'email' ],
 	};
 	return (
@@ -505,12 +557,7 @@ const DataFormVisibilityComponent = () => {
 	);
 };
 
-export const Visibility = {
-	title: 'DataForm/Visibility',
-	render: DataFormVisibilityComponent,
-};
-
-const LayoutCardComponent = () => {
+const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 	type Customer = {
 		name: string;
 		email: string;
@@ -614,76 +661,79 @@ const LayoutCardComponent = () => {
 		commission: 5,
 	} );
 
-	const form = useMemo(
-		() =>
-			( {
-				layout: {
-					type: 'card',
-				},
-				fields: [
-					{
-						id: 'customerCard',
-						label: 'Customer',
-						children: [
-							{
-								id: 'customerContact',
-								label: 'Contact',
-								layout: { type: 'panel', labelPosition: 'top' },
-								children: [
-									{
-										id: 'name',
-										layout: {
-											type: 'regular',
-											labelPosition: 'top',
-										},
+	const form: Form = useMemo(
+		() => ( {
+			layout: getLayoutFromStoryArgs( {
+				type: 'card',
+				withHeader,
+			} ),
+			fields: [
+				{
+					id: 'customerCard',
+					label: 'Customer',
+					children: [
+						{
+							id: 'customerContact',
+							label: 'Contact',
+							layout: { type: 'panel', labelPosition: 'top' },
+							children: [
+								{
+									id: 'name',
+									layout: {
+										type: 'regular',
+										labelPosition: 'top',
 									},
-									{
-										id: 'phone',
-										layout: {
-											type: 'regular',
-											labelPosition: 'top',
-										},
+								},
+								{
+									id: 'phone',
+									layout: {
+										type: 'regular',
+										labelPosition: 'top',
 									},
-									{
-										id: 'email',
-										layout: {
-											type: 'regular',
-											labelPosition: 'top',
-										},
+								},
+								{
+									id: 'email',
+									layout: {
+										type: 'regular',
+										labelPosition: 'top',
 									},
-								],
-							},
-							{
-								id: 'plan',
-								layout: { type: 'panel', labelPosition: 'top' },
-							},
-							{
-								id: 'shippingAddress',
-								layout: { type: 'panel', labelPosition: 'top' },
-							},
-							{
-								id: 'billingAddress',
-								layout: { type: 'panel', labelPosition: 'top' },
-							},
-							'displayPayments',
-						],
-					},
-					{
-						id: 'payments',
-						layout: { type: 'card', withHeader: false },
-					},
-					{
-						id: 'taxConfiguration',
-						label: 'Taxes',
-						layout: {
-							type: 'card',
-							isOpened: false,
+								},
+							],
+						},
+						{
+							id: 'plan',
+							layout: { type: 'panel', labelPosition: 'top' },
 						},
-						children: [ 'vat', 'commission' ],
+						{
+							id: 'shippingAddress',
+							layout: { type: 'panel', labelPosition: 'top' },
+						},
+						{
+							id: 'billingAddress',
+							layout: { type: 'panel', labelPosition: 'top' },
+						},
+						'displayPayments',
+					],
+				},
+				{
+					id: 'payments',
+					layout: {
+						type: 'card',
+						withHeader: false,
+					},
+				},
+				{
+					id: 'taxConfiguration',
+					label: 'Taxes',
+					layout: {
+						type: 'card',
+						isOpened: false,
 					},
-				],
-			} ) satisfies Form,
-		[]
+					children: [ 'vat', 'commission' ],
+				},
+			],
+		} ),
+		[ withHeader ]
 	);
 
 	return (
@@ -701,11 +751,6 @@ const LayoutCardComponent = () => {
 	);
 };
 
-export const LayoutCard = {
-	title: 'DataForm/LayoutCard',
-	render: LayoutCardComponent,
-};
-
 const LayoutMixedComponent = () => {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
@@ -719,28 +764,34 @@ const LayoutMixedComponent = () => {
 		dimensions: '1920x1080',
 	} );
 
-	const form = useMemo(
-		() =>
-			( {
-				fields: [
-					{
-						id: 'title',
-						layout: { type: 'panel', labelPosition: 'top' },
-					},
-					'status',
-					{ id: 'order', layout: { type: 'card' } },
-					{
-						id: 'authorDateCard',
-						label: 'Author & Date',
-						layout: {
-							type: 'card',
-						},
-						children: [ 'author', 'date' ],
-					},
-				],
-			} ) satisfies Form,
-		[]
-	);
+	const form: Form = {
+		fields: [
+			{
+				id: 'title',
+				layout: {
+					type: 'panel',
+					labelPosition: 'top',
+					openAs: 'dropdown',
+				},
+			},
+			'status',
+			{
+				id: 'order',
+				layout: {
+					type: 'card',
+				},
+				children: [ { id: 'order', layout: { type: 'panel' } } ],
+			},
+			{
+				id: 'authorDateCard',
+				label: 'Author & Date',
+				layout: {
+					type: 'card',
+				},
+				children: [ 'author', 'date' ],
+			},
+		],
+	};
 
 	return (
 		<DataForm< SamplePost >
@@ -757,7 +808,91 @@ const LayoutMixedComponent = () => {
 	);
 };
 
+const meta = {
+	title: 'DataViews/DataForm',
+	component: DataForm,
+};
+export default meta;
+
+export const Default = {
+	render: LayoutRegularComponent,
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			description: 'Chooses the layout type.',
+			options: [ 'default', 'card', 'panel', 'regular' ],
+		},
+	},
+};
+
+export const LayoutCard = {
+	render: LayoutCardComponent,
+	argTypes: {
+		withHeader: {
+			control: { type: 'boolean' },
+			description: 'Whether the card has a header.',
+		},
+	},
+	args: {
+		withHeader: true,
+	},
+};
+
+export const LayoutPanel = {
+	render: LayoutPanelComponent,
+	argTypes: {
+		labelPosition: {
+			control: { type: 'select' },
+			description: 'Chooses the label position.',
+			options: [ 'default', 'top', 'side', 'none' ],
+		},
+		openAs: {
+			control: { type: 'select' },
+			description: 'Chooses how to open the panel.',
+			options: [ 'default', 'dropdown', 'modal' ],
+		},
+	},
+};
+
+export const LayoutRegular = {
+	render: LayoutRegularComponent,
+	argTypes: {
+		labelPosition: {
+			control: { type: 'select' },
+			description: 'Chooses the label position.',
+			options: [ 'default', 'top', 'side', 'none' ],
+		},
+	},
+};
+
 export const LayoutMixed = {
-	title: 'DataForm/LayoutMixed',
 	render: LayoutMixedComponent,
 };
+
+export const Validation = {
+	render: ValidationComponent,
+	argTypes: {
+		required: {
+			control: { type: 'boolean' },
+			description: 'Whether or not the fields are required.',
+		},
+		type: {
+			control: { type: 'select' },
+			description: 'Chooses the validation type.',
+			options: [ 'regular', 'panel' ],
+		},
+		custom: {
+			control: { type: 'boolean' },
+			description: 'Whether or not the fields have custom validation.',
+		},
+	},
+	args: {
+		required: true,
+		type: 'regular',
+		custom: true,
+	},
+};
+
+export const Visibility = {
+	render: VisibilityComponent,
+};