@wordpress/dataviews 9.1.1-next.f56bd8138.0 → 10.0.1-next.47f435fc9.0

package/src/{components/dataform/stories/index.story.tsx → stories/dataform.story.tsx}

@@ -16,8 +16,9 @@ import {
 /**
  * Internal dependencies
  */
-import DataForm from '../index';
-import { isItemValid } from '../../../validation';
+import DataForm from '../components/dataform';
+import isItemValid from '../utils/is-item-valid';
+
 import type {
 	Field,
 	Form,
@@ -26,10 +27,11 @@ import type {
 	RegularLayout,
 	PanelLayout,
 	CardLayout,
-} from '../../../types';
-import { unlock } from '../../../lock-unlock';
+} from '../types';
+import { unlock } from '../lock-unlock';
+import DateControl from '../dataform-controls/date';
 
-const { ValidatedTextControl } = unlock( privateApis );
+const { ValidatedTextControl, Badge } = unlock( privateApis );
 
 type SamplePost = {
 	title: string;
@@ -431,7 +433,6 @@ const LayoutPanelComponent = ( {
 					id: 'discussion',
 					label: 'Discussion',
 					children: [ 'comment_status', 'ping_status' ],
-					summary: 'discussion',
 				},
 				{
 					id: 'address1',
@@ -447,13 +448,19 @@ const LayoutPanelComponent = ( {
 						'flight_status',
 						'gate',
 					],
-					summary: [ 'origin', 'destination', 'flight_status' ],
+					layout: {
+						type: 'panel',
+						summary: [ 'origin', 'destination', 'flight_status' ],
+					},
 				},
 				{
 					id: 'passenger_details',
 					label: 'Passenger Details',
 					children: [ 'author', 'seat' ],
-					summary: [ 'author', 'seat' ],
+					layout: {
+						type: 'panel',
+						summary: [ 'author', 'seat' ],
+					},
 				},
 			],
 		};
@@ -523,6 +530,7 @@ const ValidationComponent = ( {
 		url: string;
 		color: string;
 		integer: number;
+		number: number;
 		boolean: boolean;
 		customEdit: string;
 		categories: string[];
@@ -530,6 +538,13 @@ const ValidationComponent = ( {
 		password: string;
 		toggle?: boolean;
 		toggleGroup?: string;
+		date?: string;
+		dateRange?: string;
+		datetime?: string;
+	};
+
+	const DateRangeEdit = ( props: DataFormControlProps< ValidatedItem > ) => {
+		return <DateControl { ...props } operator="between" />;
 	};
 
 	const [ post, setPost ] = useState< ValidatedItem >( {
@@ -542,6 +557,7 @@ const ValidationComponent = ( {
 		url: 'https://example.com',
 		color: '#ff6600',
 		integer: 2,
+		number: 3.14,
 		boolean: true,
 		categories: [ 'astronomy' ],
 		countries: [ 'us' ],
@@ -549,6 +565,9 @@ const ValidationComponent = ( {
 		password: 'secretpassword123',
 		toggle: undefined,
 		toggleGroup: undefined,
+		date: undefined,
+		dateRange: undefined,
+		datetime: undefined,
 	} );
 
 	const customTextRule = ( value: ValidatedItem ) => {
@@ -616,6 +635,13 @@ const ValidationComponent = ( {
 
 		return null;
 	};
+	const customNumberRule = ( value: ValidatedItem ) => {
+		if ( ! /^\d+\.\d{2}$/.test( value?.number?.toString() ) ) {
+			return 'Number must have exactly two decimal places.';
+		}
+
+		return null;
+	};
 	const customBooleanRule = ( value: ValidatedItem ) => {
 		if ( value.boolean !== true ) {
 			return 'Boolean must be active.';
@@ -652,6 +678,51 @@ const ValidationComponent = ( {
 		return null;
 	};
 
+	const customDateRule = ( value: ValidatedItem ) => {
+		if ( ! value.date ) {
+			return null;
+		}
+		const selectedDate = new Date( value.date );
+		const today = new Date();
+		today.setHours( 0, 0, 0, 0 );
+		if ( selectedDate < today ) {
+			return 'Date must not be in the past.';
+		}
+
+		return null;
+	};
+	const customDateTimeRule = ( value: ValidatedItem ) => {
+		if ( ! value.datetime ) {
+			return null;
+		}
+		const selectedDateTime = new Date( value.datetime );
+		const now = new Date();
+		if ( selectedDateTime < now ) {
+			return 'Date and time must not be in the past.';
+		}
+
+		return null;
+	};
+
+	const customDateRangeRule = ( value: ValidatedItem ) => {
+		if ( ! value.dateRange ) {
+			return null;
+		}
+		const [ fromDate, toDate ] = value.dateRange;
+		if ( ! fromDate || ! toDate ) {
+			return null;
+		}
+		const from = new Date( fromDate );
+		const to = new Date( toDate );
+		const daysDiff = Math.ceil(
+			( to.getTime() - from.getTime() ) / ( 1000 * 60 * 60 * 24 )
+		);
+		if ( daysDiff > 30 ) {
+			return 'Date range must not exceed 30 days.';
+		}
+		return null;
+	};
+
 	const maybeCustomRule = (
 		rule: ( item: ValidatedItem ) => null | string
 	) => {
@@ -750,6 +821,15 @@ const ValidationComponent = ( {
 				custom: maybeCustomRule( customIntegerRule ),
 			},
 		},
+		{
+			id: 'number',
+			type: 'number',
+			label: 'Number',
+			isValid: {
+				required,
+				custom: maybeCustomRule( customNumberRule ),
+			},
+		},
 		{
 			id: 'boolean',
 			type: 'boolean',
@@ -836,6 +916,34 @@ const ValidationComponent = ( {
 				custom: maybeCustomRule( customToggleGroupRule ),
 			},
 		},
+		{
+			id: 'date',
+			type: 'date',
+			label: 'Date',
+			isValid: {
+				required,
+				custom: maybeCustomRule( customDateRule ),
+			},
+		},
+		{
+			id: 'dateRange',
+			type: 'date',
+			label: 'Date Range',
+			Edit: DateRangeEdit,
+			isValid: {
+				required,
+				custom: maybeCustomRule( customDateRangeRule ),
+			},
+		},
+		{
+			id: 'datetime',
+			type: 'datetime',
+			label: 'Date Time',
+			isValid: {
+				required,
+				custom: maybeCustomRule( customDateTimeRule ),
+			},
+		},
 	];
 
 	const form = {
@@ -850,6 +958,7 @@ const ValidationComponent = ( {
 			'url',
 			'color',
 			'integer',
+			'number',
 			'boolean',
 			'categories',
 			'countries',
@@ -857,6 +966,9 @@ const ValidationComponent = ( {
 			'toggleGroup',
 			'password',
 			'customEdit',
+			'date',
+			'dateRange',
+			'datetime',
 		],
 	};
 
@@ -980,6 +1092,7 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 		hasVat: boolean;
 		vat: number;
 		commission: number;
+		dueDate: string;
 	};
 
 	const customerFields: Field< Customer >[] = [
@@ -1051,6 +1164,22 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 			label: 'Commission',
 			type: 'integer',
 		},
+		{
+			id: 'dueDate',
+			label: 'Due Date',
+			type: 'text',
+			render: ( { item } ) => {
+				return <Badge>Due on: { item.dueDate }</Badge>;
+			},
+		},
+		{
+			id: 'plan-summary',
+			type: 'text',
+			readOnly: true,
+			render: ( { item } ) => {
+				return <Badge>{ item.plan }</Badge>;
+			},
+		},
 	];
 
 	const [ customer, setCustomer ] = useState< Customer >( {
@@ -1067,6 +1196,7 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 		hasVat: true,
 		vat: 10,
 		commission: 5,
+		dueDate: 'March 1st, 2028',
 	} );
 
 	const form: Form = useMemo(
@@ -1078,6 +1208,7 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 			fields: [
 				{
 					id: 'customerCard',
+					layout: { type: 'card', summary: 'plan-summary' },
 					label: 'Customer',
 					description:
 						'Enter your contact details, plan type, and addresses to complete your customer information.',
@@ -1085,7 +1216,10 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 						{
 							id: 'customerContact',
 							label: 'Contact',
-							layout: { type: 'panel', labelPosition: 'top' },
+							layout: {
+								type: 'panel',
+								labelPosition: 'top',
+							},
 							children: [
 								{
 									id: 'name',
@@ -1138,6 +1272,7 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 					layout: {
 						type: 'card',
 						isOpened: false,
+						summary: [ { id: 'dueDate', visibility: 'always' } ],
 					},
 					children: [ 'vat', 'commission' ],
 				},
@@ -1185,6 +1320,10 @@ const LayoutRowComponent = ( {
 		hasDiscount: boolean;
 		vat: number;
 		commission: number;
+		cost: number;
+		tax: number;
+		quantity: number;
+		total: number;
 	};
 
 	const customerFields: Field< Customer >[] = [
@@ -1275,6 +1414,42 @@ const LayoutRowComponent = ( {
 				{ value: 'yearly', label: 'Yearly' },
 			],
 		},
+		{
+			id: 'cost',
+			label: 'Cost',
+			type: 'integer',
+			setValue: ( { item, value } ) => ( {
+				cost: value,
+				total: Number( value ) * item.quantity,
+			} ),
+		},
+		{
+			id: 'quantity',
+			label: 'Quantity',
+			type: 'integer',
+			elements: [
+				{ value: 1, label: '1' },
+				{ value: 2, label: '2' },
+				{ value: 3, label: '3' },
+				{ value: 4, label: '4' },
+				{ value: 5, label: '5' },
+				{ value: 6, label: '6' },
+				{ value: 7, label: '7' },
+				{ value: 8, label: '8' },
+				{ value: 9, label: '9' },
+				{ value: 10, label: '10' },
+			],
+			setValue: ( { item, value } ) => ( {
+				quantity: Number( value ),
+				total: Number( value ) * item.cost,
+			} ),
+		},
+		{
+			id: 'total',
+			label: 'Total',
+			type: 'integer',
+			readOnly: true,
+		},
 	];
 
 	const [ customer, setCustomer ] = useState< Customer >( {
@@ -1296,6 +1471,10 @@ const LayoutRowComponent = ( {
 		vat: 10,
 		commission: 5,
 		hasDiscount: true,
+		cost: 100,
+		tax: 20,
+		quantity: 5,
+		total: 600,
 	} );
 
 	const form: Form = useMemo(
@@ -1398,6 +1577,35 @@ const LayoutRowComponent = ( {
 					} ) )
 				}
 			/>
+			<h2>Field widths</h2>
+			<DataForm
+				data={ customer }
+				fields={ customerFields }
+				form={ {
+					fields: [
+						{
+							id: 'product',
+							label: 'Product',
+							layout: {
+								type: 'row',
+								alignment: 'end',
+								styles: {
+									total: { flex: 1 },
+									cost: { flex: 3 },
+									quantity: { flex: 3 },
+								},
+							},
+							children: [ 'total', 'cost', 'quantity' ],
+						},
+					],
+				} }
+				onChange={ ( edits ) =>
+					setCustomer( ( prev ) => ( {
+						...prev,
+						...edits,
+					} ) )
+				}
+			/>
 		</>
 	);
 };

package/src/{components/dataviews-picker/stories/index.story.tsx → stories/dataviews-picker.story.tsx}

@@ -11,15 +11,11 @@ import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import DataViewsPicker from '../index';
-import {
-	data,
-	fields,
-	type SpaceObject,
-} from '../../dataviews/stories/fixtures';
-import { LAYOUT_PICKER_GRID } from '../../../constants';
-import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
-import type { ActionButton, View } from '../../../types';
+import DataViewsPicker from '../components/dataviews-picker/index';
+import { LAYOUT_PICKER_GRID } from '../constants';
+import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
+import type { ActionButton, View } from '../types';
+import { data, fields, type SpaceObject } from './dataviews.fixtures';
 
 const meta = {
 	title: 'DataViews/DataViewsPicker',

package/src/{components/dataviews/stories/fixtures.tsx → stories/dataviews.fixtures.tsx}

@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import type { Field, Action } from '../../../types';
+import type { Field, Action } from '../types';
 
 export type Theme = {
 	slug: string;
@@ -311,6 +311,21 @@ export const data: SpaceObject[] = [
 		datetime: '2020-03-01T10:15:20Z',
 		email: 'uranus@example.com',
 	},
+	{
+		id: 19,
+		name: {
+			title: 'Thessalonikopolymnianebuchodonossarinacharybdis',
+			description: 'Takes longer to say than to orbit.',
+		},
+		image: 'https://live.staticflickr.com/1357/935805705_119635028c_b.jpg',
+		type: 'Rogue planet',
+		isPlanet: true,
+		categories: [ 'Planet', 'Rogue planet' ],
+		satellites: 0,
+		date: '2020-03-01',
+		datetime: '2020-03-01T10:15:20Z',
+		email: 'thessalonikopolymnianebuchodonossarinacharybdis@example.com',
+	},
 ];
 
 export const themeData: Theme[] = [
@@ -844,6 +859,17 @@ export const fields: Field< SpaceObject >[] = [
 			{ value: 'Ice giant', label: 'Ice giant' },
 			{ value: 'Terrestrial', label: 'Terrestrial' },
 			{ value: 'Gas giant', label: 'Gas giant' },
+			{ value: 'Dwarf planet', label: 'Dwarf planet' },
+			{ value: 'Asteroid', label: 'Asteroid' },
+			{ value: 'Comet', label: 'Comet' },
+			{ value: 'Kuiper belt object', label: 'Kuiper belt object' },
+			{ value: 'Protoplanet', label: 'Protoplanet' },
+			{ value: 'Planetesimal', label: 'Planetesimal' },
+			{ value: 'Minor planet', label: 'Minor planet' },
+			{
+				value: 'Trans-Neptunian object',
+				label: 'Trans-Neptunian object',
+			},
 		],
 		filterBy: {
 			operators: [ 'is', 'isNot' ],

package/src/{components/dataviews/stories/index.story.tsx → stories/dataviews.story.tsx}

@@ -29,19 +29,19 @@ import { __, _n } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import DataViews from '../index';
+import DataViews from '../components/dataviews/index';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
+import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
+import type { Field, View } from '../types';
 import {
 	DEFAULT_VIEW,
 	actions,
 	data,
 	fields,
 	type SpaceObject,
-} from './fixtures';
-import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
-import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
-import type { Field, View } from '../../../types';
+} from './dataviews.fixtures';
 
-import './style.css';
+import './dataviews.style.css';
 
 const meta = {
 	title: 'DataViews/DataViews',
@@ -93,8 +93,7 @@ export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
 			renderItemLink={ ( { item, ...props }: { item: SpaceObject } ) => (
 				<button
 					style={ { background: 'none', border: 'none', padding: 0 } }
-					onClick={ ( e ) => {
-						e.stopPropagation();
+					onClick={ () => {
 						// eslint-disable-next-line no-alert
 						alert( 'Clicked: ' + item.name.title );
 					} }
@@ -273,7 +272,7 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 						<DataViews.FiltersToggle />
 						<DataViews.Search label={ __( 'moons by planet' ) } />
 					</HStack>
-					<DataViews.Filters />
+					<DataViews.FiltersToggled />
 				</VStack>
 
 				<VStack>