@wordpress/fields 0.23.0 → 0.23.1-next.233ccab9b.0

package/build-types/stories/index.story.d.ts

@@ -0,0 +1,25 @@
+import { DataForm } from '@wordpress/dataviews';
+declare const _default: {
+    title: string;
+    component: typeof DataForm;
+};
+export default _default;
+export declare const DataFormsPreview: {
+    render: ({ type }: {
+        type: "regular" | "panel";
+    }) => import("react").JSX.Element;
+    argTypes: {
+        type: {
+            control: {
+                type: string;
+            };
+            description: string;
+            options: string[];
+        };
+    };
+    args: {
+        type: string;
+    };
+};
+export declare const DataViewsPreview: () => import("react").JSX.Element;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAwB,MAAM,sBAAsB,CAAC;;;;;AA4BtE,wBAGE;AAkGF,eAAO,MAAM,gBAAgB;uBA1CU;QAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAA;KAAE;;;;;;;;;;;;;CAsDnE,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAuC5B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/fields",
-	"version": "0.23.0",
+	"version": "0.23.1-next.233ccab9b.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,29 +33,29 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/api-fetch": "^7.31.0",
-		"@wordpress/blob": "^4.31.0",
-		"@wordpress/block-editor": "^15.4.0",
-		"@wordpress/blocks": "^15.4.0",
-		"@wordpress/components": "^30.4.0",
-		"@wordpress/compose": "^7.31.0",
-		"@wordpress/core-data": "^7.31.0",
-		"@wordpress/data": "^10.31.0",
-		"@wordpress/dataviews": "^9.0.0",
-		"@wordpress/date": "^5.31.0",
-		"@wordpress/element": "^6.31.0",
-		"@wordpress/hooks": "^4.31.0",
-		"@wordpress/html-entities": "^4.31.0",
-		"@wordpress/i18n": "^6.4.0",
-		"@wordpress/icons": "^10.31.0",
-		"@wordpress/media-utils": "^5.31.0",
-		"@wordpress/notices": "^5.31.0",
-		"@wordpress/patterns": "^2.31.0",
-		"@wordpress/primitives": "^4.31.0",
-		"@wordpress/private-apis": "^1.31.0",
-		"@wordpress/router": "^1.31.0",
-		"@wordpress/url": "^4.31.0",
-		"@wordpress/warning": "^3.31.0",
+		"@wordpress/api-fetch": "^7.31.1-next.233ccab9b.0",
+		"@wordpress/blob": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/block-editor": "^15.4.1-next.233ccab9b.0",
+		"@wordpress/blocks": "^15.4.1-next.233ccab9b.0",
+		"@wordpress/components": "^30.5.1-next.233ccab9b.0",
+		"@wordpress/compose": "^7.31.1-next.233ccab9b.0",
+		"@wordpress/core-data": "^7.31.1-next.233ccab9b.0",
+		"@wordpress/data": "^10.31.1-next.233ccab9b.0",
+		"@wordpress/dataviews": "^9.1.1-next.233ccab9b.0",
+		"@wordpress/date": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/element": "^6.31.1-next.233ccab9b.0",
+		"@wordpress/hooks": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/html-entities": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/i18n": "^6.4.1-next.233ccab9b.0",
+		"@wordpress/icons": "^10.31.1-next.233ccab9b.0",
+		"@wordpress/media-utils": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/notices": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/patterns": "^2.31.1-next.233ccab9b.0",
+		"@wordpress/primitives": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/private-apis": "^1.31.1-next.233ccab9b.0",
+		"@wordpress/router": "^1.31.1-next.233ccab9b.0",
+		"@wordpress/url": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/warning": "^3.31.1-next.233ccab9b.0",
 		"change-case": "4.1.2",
 		"client-zip": "^2.4.5",
 		"clsx": "2.1.1",
@@ -67,5 +67,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d7601d30d49462ea942168e8ab6bf449fb93097e"
+	"gitHead": "d11f971521e4b39b07124d5c5516890ff98b0e31"
 }

package/src/stories/index.story.tsx

@@ -0,0 +1,187 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { DataForm, DataViews, type Form } from '@wordpress/dataviews';
+import type { Field, View } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+
+import {
+	authorField,
+	commentStatusField,
+	dateField,
+	orderField,
+	passwordField,
+	slugField,
+	statusField,
+	titleField,
+} from '../fields';
+
+// Fields not yet covered:
+// featuredImageField,
+// pageTitleField,
+// parentField,
+// patternTitleField,
+// templateField,
+// templateTitleField,
+
+import type { BasePost, BasePostWithEmbeddedAuthor } from '../types';
+
+export default {
+	title: 'Fields/Base Fields',
+	component: DataForm,
+};
+
+// Sample data for different field types
+const sampleBasePost: BasePost = {
+	id: 1,
+	title: { rendered: 'Sample Post Title', raw: 'Sample Post Title' },
+	content: {
+		rendered: '<p>This is sample content.</p>',
+		raw: 'This is sample content.',
+	},
+	type: 'post',
+	slug: 'sample-post-title',
+	permalink_template: 'http://localhost:8888/%postname%/',
+	date: '2024-01-15T10:30:00',
+	modified: '2024-01-20T14:45:00',
+	status: 'publish',
+	comment_status: 'open',
+	password: '',
+	parent: 0,
+	menu_order: 0,
+	author: 1,
+	featured_media: 123,
+	template: 'single',
+};
+
+const samplePostWithAuthor: BasePostWithEmbeddedAuthor = {
+	...sampleBasePost,
+	_embedded: {
+		author: [
+			{
+				name: 'John Doe',
+				avatar_urls: {
+					'24': 'https://gravatar.com/avatar?d=retro&s=24',
+					'48': 'https://gravatar.com/avatar?d=retro&s=48',
+					'96': 'https://gravatar.com/avatar?d=retro&s=96',
+				},
+			},
+		],
+	},
+};
+
+// Create a showcase of all base fields.
+// This does not include fields that require more complex setups,
+// however this could be extended in the future, by setting up the data
+// stores to contain entities like pages, users, media, etc.
+const showcaseFields: Field< any >[] = [
+	titleField,
+	slugField,
+	statusField,
+	dateField,
+	authorField,
+	commentStatusField,
+	passwordField,
+	orderField,
+];
+
+const DataFormsComponent = ( { type }: { type: 'regular' | 'panel' } ) => {
+	const [ data, setData ] = useState( samplePostWithAuthor );
+
+	const handleChange = ( updates: Partial< BasePostWithEmbeddedAuthor > ) => {
+		setData( ( prev ) => ( { ...prev, ...updates } ) );
+	};
+
+	// Form configuration for the showcase.
+	const showcaseForm: Form = {
+		layout: {
+			type,
+		},
+		fields: [
+			'title',
+			'slug',
+			'status',
+			'date',
+			'author',
+			'comment_status',
+			'password',
+			'menu_order',
+		],
+	};
+
+	return (
+		<div style={ { padding: '20px' } }>
+			<h2>Base Fields</h2>
+			<p>
+				This story demonstrates all the base fields from the
+				@wordpress/fields package within a DataForm.
+			</p>
+
+			<DataForm
+				data={ data }
+				fields={ showcaseFields }
+				form={ showcaseForm }
+				onChange={ handleChange }
+			/>
+		</div>
+	);
+};
+
+export const DataFormsPreview = {
+	render: DataFormsComponent,
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			description: 'Choose the layout type.',
+			options: [ 'regular', 'panel' ],
+		},
+	},
+	args: {
+		type: 'regular',
+	},
+};
+
+export const DataViewsPreview = () => {
+	const [ view, setView ] = useState< View >( {
+		type: 'table',
+		fields: showcaseFields.map( ( f ) => f.id ),
+		titleField: 'title',
+		descriptionField: undefined,
+		mediaField: undefined,
+	} );
+	const [ data ] = useState( [ samplePostWithAuthor ] );
+
+	const paginationInfo = {
+		totalItems: 1,
+		totalPages: 1,
+	};
+
+	const defaultLayouts = {
+		table: {},
+		list: {},
+		grid: {},
+	};
+
+	return (
+		<div style={ { padding: '20px' } }>
+			<h2>Fields Package DataViews Preview</h2>
+			<p>
+				This story demonstrates all the base fields from the
+				@wordpress/fields package, rendered in a DataViews component,
+				allowing preview of view state and layout switching.
+			</p>
+			<DataViews
+				data={ data }
+				fields={ showcaseFields }
+				view={ view }
+				onChangeView={ ( nextView: View ) => setView( nextView ) }
+				paginationInfo={ paginationInfo }
+				defaultLayouts={ defaultLayouts }
+			/>
+		</div>
+	);
+};