@wordpress/dataviews 6.0.0 → 7.0.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 );
@@ -29,47 +37,32 @@ type SamplePost = {
 	password?: string;
 	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' ],
-		},
-		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" },
@@ -79,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' },
@@ -110,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';
 		},
@@ -128,28 +124,57 @@ 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,
 	},
-] as Field< SamplePost >[];
+	{
+		id: 'tags',
+		label: 'Tags',
+		type: 'array',
+		placeholder: 'Enter comma-separated tags',
+		description: 'Add tags separated by commas (e.g., "tag1, tag2, tag3")',
+		elements: [
+			{ value: 'astronomy', label: 'Astronomy' },
+			{ value: 'book-review', label: 'Book review' },
+			{ value: 'event', label: 'Event' },
+			{ value: 'photography', label: 'Photography' },
+			{ value: 'travel', label: 'Travel' },
+		],
+	},
+	{
+		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';
+	type?: 'default' | 'regular' | 'panel' | 'card';
 	labelPosition: 'default' | 'top' | 'side' | 'none';
 } ) => {
 	const [ post, setPost ] = useState( {
@@ -165,12 +190,15 @@ export const Default = ( {
 		can_comment: false,
 		filesize: 1024,
 		dimensions: '1920x1080',
+		tags: [ 'photography' ],
 	} );
 
-	const form = useMemo(
+	const form: Form = useMemo(
 		() => ( {
-			type,
-			labelPosition,
+			layout: getLayoutFromStoryArgs( {
+				type,
+				labelPosition,
+			} ),
 			fields: [
 				'title',
 				'order',
@@ -185,10 +213,11 @@ export const Default = ( {
 				'can_comment',
 				'filesize',
 				'dimensions',
+				'tags',
 			],
 		} ),
 		[ type, labelPosition ]
-	) as Form;
+	);
 
 	return (
 		<DataForm< SamplePost >
@@ -205,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';
+	type: 'default' | 'regular' | 'panel' | 'card';
 	labelPosition: 'default' | 'top' | 'side' | 'none';
+	openAs: 'default' | 'dropdown' | 'modal';
 } ) => {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
@@ -222,12 +298,19 @@ const CombinedFieldsComponent = ( {
 		birthdate: '1950-02-23T12:00:00',
 		filesize: 1024,
 		dimensions: '1920x1080',
+		tags: [ 'photography' ],
+		address1: '123 Main St',
+		address2: 'Apt 4B',
+		city: 'New York',
 	} );
 
-	const form = useMemo(
-		() => ( {
-			type,
-			labelPosition,
+	const form: Form = useMemo( () => {
+		return {
+			layout: getLayoutFromStoryArgs( {
+				type: 'panel',
+				labelPosition,
+				openAs,
+			} ),
 			fields: [
 				'title',
 				{
@@ -239,10 +322,15 @@ const CombinedFieldsComponent = ( {
 				'author',
 				'filesize',
 				'dimensions',
+				'tags',
+				{
+					id: 'address1',
+					label: 'Combined Address',
+					children: [ 'address1', 'address2', 'city' ],
+				},
 			],
-		} ),
-		[ type, labelPosition ]
-	) as Form;
+		};
+	}, [ labelPosition, openAs ] );
 
 	return (
 		<DataForm< SamplePost >
@@ -259,17 +347,6 @@ const CombinedFieldsComponent = ( {
 	);
 };
 
-export const CombinedFields = {
-	title: 'DataViews/CombinedFields',
-	render: CombinedFieldsComponent,
-	argTypes: {
-		...meta.argTypes,
-	},
-	args: {
-		type: 'panel',
-	},
-};
-
 function CustomEditControl< Item >( {
 	data,
 	field,
@@ -302,7 +379,7 @@ function CustomEditControl< Item >( {
 	);
 }
 
-const DataFormValidationComponent = ( { required }: { required: boolean } ) => {
+const ValidationComponent = ( { required }: { required: boolean } ) => {
 	type ValidatedItem = {
 		text: string;
 		email: string;
@@ -324,7 +401,7 @@ const DataFormValidationComponent = ( { required }: { required: boolean } ) => {
 	const _fields: Field< ValidatedItem >[] = [
 		{
 			id: 'text',
-			type: 'text' as const,
+			type: 'text',
 			label: 'Text',
 			isValid: {
 				required,
@@ -332,7 +409,7 @@ const DataFormValidationComponent = ( { required }: { required: boolean } ) => {
 		},
 		{
 			id: 'email',
-			type: 'email' as const,
+			type: 'email',
 			label: 'e-mail',
 			isValid: {
 				required,
@@ -340,7 +417,7 @@ const DataFormValidationComponent = ( { required }: { required: boolean } ) => {
 		},
 		{
 			id: 'integer',
-			type: 'integer' as const,
+			type: 'integer',
 			label: 'Integer',
 			isValid: {
 				required,
@@ -348,7 +425,7 @@ const DataFormValidationComponent = ( { required }: { required: boolean } ) => {
 		},
 		{
 			id: 'boolean',
-			type: 'boolean' as const,
+			type: 'boolean',
 			label: 'Boolean',
 			isValid: {
 				required,
@@ -423,21 +500,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;
@@ -449,7 +512,7 @@ const DataFormVisibilityComponent = () => {
 		isActive: true,
 	} );
 
-	const _fields = [
+	const _fields: Field< Post >[] = [
 		{ id: 'isActive', label: 'Is module active?', type: 'boolean' },
 		{
 			id: 'name',
@@ -463,8 +526,8 @@ const DataFormVisibilityComponent = () => {
 			type: 'email',
 			isVisible: ( post ) => post.isActive === true,
 		},
-	] satisfies Field< Post >[];
-	const form = {
+	];
+	const form: Form = {
 		fields: [ 'isActive', 'name', 'email' ],
 	};
 	return (
@@ -482,7 +545,331 @@ const DataFormVisibilityComponent = () => {
 	);
 };
 
+const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
+	type Customer = {
+		name: string;
+		email: string;
+		phone: string;
+		plan: string;
+		shippingAddress: string;
+		billingAddress: string;
+		displayPayments: boolean;
+		totalOrders: number;
+		totalRevenue: number;
+		averageOrderValue: number;
+		hasVat: boolean;
+		vat: number;
+		commission: number;
+	};
+
+	const customerFields: Field< Customer >[] = [
+		{
+			id: 'name',
+			label: 'Customer Name',
+			type: 'text',
+		},
+		{
+			id: 'phone',
+			label: 'Phone',
+			type: 'text',
+		},
+		{
+			id: 'email',
+			label: 'Email',
+			type: 'email',
+		},
+		{
+			id: 'plan',
+			label: 'Plan',
+			type: 'text',
+			Edit: 'toggleGroup',
+			elements: [
+				{ value: 'basic', label: 'Basic' },
+				{ value: 'business', label: 'Business' },
+				{ value: 'vip', label: 'VIP' },
+			],
+		},
+		{
+			id: 'shippingAddress',
+			label: 'Shipping Address',
+			type: 'text',
+		},
+		{
+			id: 'billingAddress',
+			label: 'Billing Address',
+			type: 'text',
+		},
+		{
+			id: 'displayPayments',
+			label: 'Display Payments?',
+			type: 'boolean',
+		},
+		{
+			id: 'payments',
+			label: 'Payments',
+			type: 'text',
+			readOnly: true, // Triggers using the render method instead of Edit.
+			isVisible: ( item ) => item.displayPayments,
+			render: ( { item } ) => {
+				return (
+					<p>
+						The customer has made a total of { item.totalOrders }{ ' ' }
+						orders, amounting to { item.totalRevenue } dollars. The
+						average order value is { item.averageOrderValue }{ ' ' }
+						dollars.
+					</p>
+				);
+			},
+		},
+		{
+			id: 'vat',
+			label: 'VAT',
+			type: 'integer',
+		},
+		{
+			id: 'commission',
+			label: 'Commission',
+			type: 'integer',
+		},
+	];
+
+	const [ customer, setCustomer ] = useState< Customer >( {
+		name: 'Danyka Romaguera',
+		email: 'aromaguera@example.org',
+		phone: '1-828-352-1250',
+		plan: 'Business',
+		shippingAddress: 'N/A',
+		billingAddress: 'Danyka Romaguera, West Myrtiehaven, 80240-4282, BI',
+		displayPayments: true,
+		totalOrders: 2,
+		totalRevenue: 1430,
+		averageOrderValue: 715,
+		hasVat: true,
+		vat: 10,
+		commission: 5,
+	} );
+
+	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: '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,
+					},
+					children: [ 'vat', 'commission' ],
+				},
+			],
+		} ),
+		[ withHeader ]
+	);
+
+	return (
+		<DataForm
+			data={ customer }
+			fields={ customerFields }
+			form={ form }
+			onChange={ ( edits ) =>
+				setCustomer( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) )
+			}
+		/>
+	);
+};
+
+const LayoutMixedComponent = () => {
+	const [ post, setPost ] = useState< SamplePost >( {
+		title: 'Hello, World!',
+		order: 2,
+		author: 1,
+		status: 'draft',
+		reviewer: 'fulano',
+		date: '2021-01-01T12:00:00',
+		birthdate: '1950-02-23T12:00:00',
+		filesize: 1024,
+		dimensions: '1920x1080',
+	} );
+
+	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 >
+			data={ post }
+			fields={ fields }
+			form={ form }
+			onChange={ ( edits ) =>
+				setPost( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) )
+			}
+		/>
+	);
+};
+
+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 = {
+	render: LayoutMixedComponent,
+};
+
+export const Validation = {
+	render: ValidationComponent,
+	argTypes: {
+		required: {
+			control: { type: 'boolean' },
+			description: 'Whether or not the fields are required.',
+		},
+	},
+	args: {
+		required: true,
+	},
+};
+
 export const Visibility = {
-	title: 'DataForm/Visibility',
-	render: DataFormVisibilityComponent,
+	render: VisibilityComponent,
 };