@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.1-next.6870dfe5b.0

package/build/dataform-controls/boolean.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_components","require","_element","_lockUnlock","_jsxRuntime","ValidatedToggleControl","unlock","privateApis","Boolean","field","onChange","data","hideLabelFromVision","id","getValue","label","customValidity","setCustomValidity","useState","undefined","jsx","required","isValid","onValidate","newValue","message","custom","type","hidden","__nextHasNoMarginBottom","checked","item"],"sources":["@wordpress/dataviews/src/dataform-controls/boolean.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\n\nconst { ValidatedToggleControl } = unlock( privateApis );\n\nexport default function Boolean< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { id, getValue, label } = field;\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedToggleControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\treturn (\n\t\t<ValidatedToggleControl\n\t\t\trequired={ !! field.isValid.required }\n\t\t\tonValidate={ ( newValue: any ) => {\n\t\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\t\t{\n\t\t\t\t\t\t...data,\n\t\t\t\t\t\t[ id ]: newValue,\n\t\t\t\t\t},\n\t\t\t\t\tfield\n\t\t\t\t);\n\n\t\t\t\tif ( message ) {\n\t\t\t\t\tsetCustomValidity( {\n\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\tmessage,\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tsetCustomValidity( undefined );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\thidden={ hideLabelFromVision }\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tchecked={ getValue( { item: data } ) }\n\t\t\tonChange={ () =>\n\t\t\t\tonChange( { [ id ]: ! getValue( { item: data } ) } )\n\t\t\t}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,WAAA,GAAAF,OAAA;AAAwC,IAAAG,WAAA,GAAAH,OAAA;AAVxC;AACA;AACA;;AAIA;AACA;AACA;;AAIA,MAAM;EAAEI;AAAuB,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAY,CAAC;AAEzC,SAASC,OAAOA,CAAU;EACxCC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGN,KAAK;EACrC,MAAM,CAAEO,cAAc,EAAEC,iBAAiB,CAAE,GAC1C,IAAAC,iBAAQ,EAILC,SAAU,CAAC;EAEf,oBACC,IAAAf,WAAA,CAAAgB,GAAA,EAACf,sBAAsB;IACtBgB,QAAQ,EAAG,CAAC,CAAEZ,KAAK,CAACa,OAAO,CAACD,QAAU;IACtCE,UAAU,EAAKC,QAAa,IAAM;MACjC,MAAMC,OAAO,GAAGhB,KAAK,CAACa,OAAO,EAAEI,MAAM,GACpC;QACC,GAAGf,IAAI;QACP,CAAEE,EAAE,GAAIW;MACT,CAAC,EACDf,KACD,CAAC;MAED,IAAKgB,OAAO,EAAG;QACdR,iBAAiB,CAAE;UAClBU,IAAI,EAAE,SAAS;UACfF;QACD,CAAE,CAAC;QACH;MACD;MAEAR,iBAAiB,CAAEE,SAAU,CAAC;IAC/B,CAAG;IACHH,cAAc,EAAGA,cAAgB;IACjCY,MAAM,EAAGhB,mBAAqB;IAC9BiB,uBAAuB;IACvBd,KAAK,EAAGA,KAAO;IACfe,OAAO,EAAGhB,QAAQ,CAAE;MAAEiB,IAAI,EAAEpB;IAAK,CAAE,CAAG;IACtCD,QAAQ,EAAGA,CAAA,KACVA,QAAQ,CAAE;MAAE,CAAEG,EAAE,GAAI,CAAEC,QAAQ,CAAE;QAAEiB,IAAI,EAAEpB;MAAK,CAAE;IAAE,CAAE;EACnD,CACD,CAAC;AAEJ","ignoreList":[]}

package/build-module/dataform-controls/boolean.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["privateApis","useState","unlock","jsx","_jsx","ValidatedToggleControl","Boolean","field","onChange","data","hideLabelFromVision","id","getValue","label","customValidity","setCustomValidity","undefined","required","isValid","onValidate","newValue","message","custom","type","hidden","__nextHasNoMarginBottom","checked","item"],"sources":["@wordpress/dataviews/src/dataform-controls/boolean.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\n\nconst { ValidatedToggleControl } = unlock( privateApis );\n\nexport default function Boolean< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { id, getValue, label } = field;\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedToggleControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\treturn (\n\t\t<ValidatedToggleControl\n\t\t\trequired={ !! field.isValid.required }\n\t\t\tonValidate={ ( newValue: any ) => {\n\t\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\t\t{\n\t\t\t\t\t\t...data,\n\t\t\t\t\t\t[ id ]: newValue,\n\t\t\t\t\t},\n\t\t\t\t\tfield\n\t\t\t\t);\n\n\t\t\t\tif ( message ) {\n\t\t\t\t\tsetCustomValidity( {\n\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\tmessage,\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tsetCustomValidity( undefined );\n\t\t\t} }\n\t\t\tcustomValidity={ customValidity }\n\t\t\thidden={ hideLabelFromVision }\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tchecked={ getValue( { item: data } ) }\n\t\t\tonChange={ () =>\n\t\t\t\tonChange( { [ id ]: ! getValue( { item: data } ) } )\n\t\t\t}\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,uBAAuB;AACnD,SAASC,QAAQ,QAAQ,oBAAoB;;AAE7C;AACA;AACA;;AAEA,SAASC,MAAM,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,MAAM;EAAEC;AAAuB,CAAC,GAAGH,MAAM,CAAEF,WAAY,CAAC;AAExD,eAAe,SAASM,OAAOA,CAAU;EACxCC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGN,KAAK;EACrC,MAAM,CAAEO,cAAc,EAAEC,iBAAiB,CAAE,GAC1Cd,QAAQ,CAILe,SAAU,CAAC;EAEf,oBACCZ,IAAA,CAACC,sBAAsB;IACtBY,QAAQ,EAAG,CAAC,CAAEV,KAAK,CAACW,OAAO,CAACD,QAAU;IACtCE,UAAU,EAAKC,QAAa,IAAM;MACjC,MAAMC,OAAO,GAAGd,KAAK,CAACW,OAAO,EAAEI,MAAM,GACpC;QACC,GAAGb,IAAI;QACP,CAAEE,EAAE,GAAIS;MACT,CAAC,EACDb,KACD,CAAC;MAED,IAAKc,OAAO,EAAG;QACdN,iBAAiB,CAAE;UAClBQ,IAAI,EAAE,SAAS;UACfF;QACD,CAAE,CAAC;QACH;MACD;MAEAN,iBAAiB,CAAEC,SAAU,CAAC;IAC/B,CAAG;IACHF,cAAc,EAAGA,cAAgB;IACjCU,MAAM,EAAGd,mBAAqB;IAC9Be,uBAAuB;IACvBZ,KAAK,EAAGA,KAAO;IACfa,OAAO,EAAGd,QAAQ,CAAE;MAAEe,IAAI,EAAElB;IAAK,CAAE,CAAG;IACtCD,QAAQ,EAAGA,CAAA,KACVA,QAAQ,CAAE;MAAE,CAAEG,EAAE,GAAI,CAAEC,QAAQ,CAAE;QAAEe,IAAI,EAAElB;MAAK,CAAE;IAAE,CAAE;EACnD,CACD,CAAC;AAEJ","ignoreList":[]}

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

@@ -1,63 +0,0 @@
-import DataForm from '../dataform/index';
-declare const meta: {
-    readonly title: "DataViews/FieldTypes";
-    readonly component: typeof DataForm;
-    readonly argTypes: {
-        readonly type: {
-            readonly control: {
-                readonly type: "select";
-            };
-            readonly description: "Chooses the default layout of each field. \"regular\" is the default layout.";
-            readonly options: readonly ["default", "regular", "panel"];
-        };
-        readonly labelPosition: {
-            readonly control: {
-                readonly type: "select";
-            };
-            readonly description: "Chooses the label position of the layout.";
-            readonly options: readonly ["default", "top", "side", "none"];
-        };
-    };
-};
-export default meta;
-export declare const All: ({ type, labelPosition, }: {
-    type: "default" | "regular" | "panel";
-    labelPosition: "default" | "top" | "side" | "none";
-}) => import("react").JSX.Element;
-export declare const Text: ({ type, labelPosition, }: {
-    type: "default" | "regular" | "panel";
-    labelPosition: "default" | "top" | "side" | "none";
-}) => import("react").JSX.Element;
-export declare const Integer: ({ type, labelPosition, }: {
-    type: "default" | "regular" | "panel";
-    labelPosition: "default" | "top" | "side" | "none";
-}) => import("react").JSX.Element;
-export declare const Boolean: ({ type, labelPosition, }: {
-    type: "default" | "regular" | "panel";
-    labelPosition: "default" | "top" | "side" | "none";
-}) => import("react").JSX.Element;
-export declare const DateTime: ({ type, labelPosition, }: {
-    type: "default" | "regular" | "panel";
-    labelPosition: "default" | "top" | "side" | "none";
-}) => import("react").JSX.Element;
-export declare const Date: ({ type, labelPosition, }: {
-    type: "default" | "regular" | "panel";
-    labelPosition: "default" | "top" | "side" | "none";
-}) => import("react").JSX.Element;
-export declare const Email: ({ type, labelPosition, }: {
-    type: "default" | "regular" | "panel";
-    labelPosition: "default" | "top" | "side" | "none";
-}) => import("react").JSX.Element;
-export declare const Media: ({ type, labelPosition, }: {
-    type: "default" | "regular" | "panel";
-    labelPosition: "default" | "top" | "side" | "none";
-}) => import("react").JSX.Element;
-export declare const Array: ({ type, labelPosition, }: {
-    type: "default" | "regular" | "panel";
-    labelPosition: "default" | "top" | "side" | "none";
-}) => import("react").JSX.Element;
-export declare const NoType: ({ type, labelPosition, }: {
-    type: "default" | "regular" | "panel";
-    labelPosition: "default" | "top" | "side" | "none";
-}) => import("react").JSX.Element;
-//# sourceMappingURL=index.story.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/stories/index.story.tsx"],"names":[],"mappings":"AAaA,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AAUzC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;CAgBA,CAAC;AACX,eAAe,IAAI,CAAC;AA6HpB,eAAO,MAAM,GAAG,6BAGb;IACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACnD,gCAWA,CAAC;AAEF,eAAO,MAAM,IAAI,6BAGd;IACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACnD,gCAaA,CAAC;AAEF,eAAO,MAAM,OAAO,6BAGjB;IACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACnD,gCAaA,CAAC;AAEF,eAAO,MAAM,OAAO,6BAGjB;IACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACnD,gCAaA,CAAC;AAEF,eAAO,MAAM,QAAQ,6BAGlB;IACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACnD,gCAaA,CAAC;AAEF,eAAO,MAAM,IAAI,6BAGd;IACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACnD,gCAaA,CAAC;AAEF,eAAO,MAAM,KAAK,6BAGf;IACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACnD,gCAaA,CAAC;AAEF,eAAO,MAAM,KAAK,6BAGf;IACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACnD,gCAaA,CAAC;AAEF,eAAO,MAAM,KAAK,6BAGf;IACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACnD,gCAaA,CAAC;AAEF,eAAO,MAAM,MAAM,6BAGhB;IACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACnD,gCAaA,CAAC"}

package/build-types/dataform-controls/boolean.d.ts

@@ -1,6 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { DataFormControlProps } from '../types';
-export default function Boolean<Item>({ field, onChange, data, hideLabelFromVision, }: DataFormControlProps<Item>): import("react").JSX.Element;
-//# sourceMappingURL=boolean.d.ts.map

package/build-types/dataform-controls/boolean.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"boolean.d.ts","sourceRoot":"","sources":["../../src/dataform-controls/boolean.tsx"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAKrD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAE,IAAI,EAAI,EACxC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,mBAAmB,GACnB,EAAE,oBAAoB,CAAE,IAAI,CAAE,+BAyC9B"}

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

@@ -1,372 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useMemo } from '@wordpress/element';
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import DataViews from '../dataviews/index';
-import DataForm from '../dataform/index';
-import {
-	actions,
-	data,
-	fields,
-	type SpaceObject,
-} from '../dataviews/stories/fixtures';
-import { filterSortAndPaginate } from '../../filter-and-sort-data-view';
-import type { View, Form, Field } from '../../types';
-
-const meta = {
-	title: 'DataViews/FieldTypes',
-	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' ],
-		},
-	},
-} as const;
-export default meta;
-
-const defaultLayouts = {
-	table: {},
-	grid: {},
-	list: {},
-};
-
-interface FieldTypeStoryProps {
-	fields: Field< SpaceObject >[];
-	titleField?: string;
-	descriptionField?: string;
-	mediaField?: string;
-	type?: 'default' | 'regular' | 'panel';
-	labelPosition?: 'default' | 'top' | 'side' | 'none';
-}
-
-const FieldTypeStory = ( {
-	fields: storyFields,
-	titleField,
-	descriptionField,
-	mediaField,
-	type = 'default',
-	labelPosition = 'default',
-}: FieldTypeStoryProps ) => {
-	const form = useMemo(
-		() => ( {
-			type,
-			labelPosition,
-			fields: storyFields.map( ( field ) => field.id ),
-		} ),
-		[ type, labelPosition, storyFields ]
-	) as Form;
-
-	const [ view, setView ] = useState< View >( {
-		type: 'table' as const,
-		search: '',
-		page: 1,
-		perPage: 10,
-		layout: {},
-		filters: [],
-		titleField,
-		descriptionField,
-		mediaField,
-		fields: storyFields
-			.filter(
-				( field ) =>
-					! [ titleField, descriptionField, mediaField ].includes(
-						field.id
-					)
-			)
-			.map( ( field ) => field.id ),
-	} );
-
-	const [ selectedIds, setSelectedIds ] = useState< number[] >( [] );
-	const [ modifiedData, setModifiedData ] = useState< SpaceObject[] >( data );
-
-	const { data: shownData, paginationInfo } = useMemo( () => {
-		return filterSortAndPaginate( modifiedData, view, storyFields );
-	}, [ modifiedData, view, storyFields ] );
-
-	const selectedItem =
-		( selectedIds.length === 1 &&
-			shownData.find( ( item ) => item.id === selectedIds[ 0 ] ) ) ||
-		null;
-
-	return (
-		<HStack alignment="stretch">
-			<div style={ { flex: 2 } }>
-				<DataViews
-					getItemId={ ( item ) => item.id.toString() }
-					data={ shownData }
-					paginationInfo={ paginationInfo }
-					view={ view }
-					fields={ storyFields }
-					onChangeView={ setView }
-					actions={ actions }
-					defaultLayouts={ defaultLayouts }
-					selection={ selectedIds.map( ( id ) => id.toString() ) }
-					onChangeSelection={ ( newSelection ) =>
-						setSelectedIds(
-							newSelection.map( ( id ) => parseInt( id, 10 ) )
-						)
-					}
-					// eslint-disable-next-line no-alert
-					onClickItem={ ( item ) => alert( 'clicked ' + item.title ) }
-				/>
-			</div>
-			{ selectedItem ? (
-				<VStack alignment="top">
-					<DataForm
-						data={ selectedItem }
-						form={ form }
-						fields={ storyFields }
-						onChange={ ( updatedValues ) => {
-							const updatedItem = {
-								...selectedItem,
-								...updatedValues,
-							};
-
-							setModifiedData(
-								modifiedData.map( ( item ) =>
-									item.id === selectedItem.id
-										? updatedItem
-										: item
-								)
-							);
-						} }
-					/>
-				</VStack>
-			) : (
-				<VStack alignment="center">
-					<span
-						style={ {
-							color: '#888',
-						} }
-					>
-						Please, select a single item.
-					</span>
-				</VStack>
-			) }
-		</HStack>
-	);
-};
-
-export const All = ( {
-	type,
-	labelPosition,
-}: {
-	type: 'default' | 'regular' | 'panel';
-	labelPosition: 'default' | 'top' | 'side' | 'none';
-} ) => {
-	return (
-		<FieldTypeStory
-			fields={ fields }
-			titleField="title"
-			descriptionField="description"
-			mediaField="image"
-			type={ type }
-			labelPosition={ labelPosition }
-		/>
-	);
-};
-
-export const Text = ( {
-	type,
-	labelPosition,
-}: {
-	type: 'default' | 'regular' | 'panel';
-	labelPosition: 'default' | 'top' | 'side' | 'none';
-} ) => {
-	const textFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'text' ),
-		[]
-	);
-
-	return (
-		<FieldTypeStory
-			fields={ textFields }
-			type={ type }
-			labelPosition={ labelPosition }
-		/>
-	);
-};
-
-export const Integer = ( {
-	type,
-	labelPosition,
-}: {
-	type: 'default' | 'regular' | 'panel';
-	labelPosition: 'default' | 'top' | 'side' | 'none';
-} ) => {
-	const integerFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'integer' ),
-		[]
-	);
-
-	return (
-		<FieldTypeStory
-			fields={ integerFields }
-			type={ type }
-			labelPosition={ labelPosition }
-		/>
-	);
-};
-
-export const Boolean = ( {
-	type,
-	labelPosition,
-}: {
-	type: 'default' | 'regular' | 'panel';
-	labelPosition: 'default' | 'top' | 'side' | 'none';
-} ) => {
-	const booleanFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'boolean' ),
-		[]
-	);
-
-	return (
-		<FieldTypeStory
-			fields={ booleanFields }
-			type={ type }
-			labelPosition={ labelPosition }
-		/>
-	);
-};
-
-export const DateTime = ( {
-	type,
-	labelPosition,
-}: {
-	type: 'default' | 'regular' | 'panel';
-	labelPosition: 'default' | 'top' | 'side' | 'none';
-} ) => {
-	const dateTimeFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'datetime' ),
-		[]
-	);
-
-	return (
-		<FieldTypeStory
-			fields={ dateTimeFields }
-			type={ type }
-			labelPosition={ labelPosition }
-		/>
-	);
-};
-
-export const Date = ( {
-	type,
-	labelPosition,
-}: {
-	type: 'default' | 'regular' | 'panel';
-	labelPosition: 'default' | 'top' | 'side' | 'none';
-} ) => {
-	const dateFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'date' ),
-		[]
-	);
-
-	return (
-		<FieldTypeStory
-			fields={ dateFields }
-			type={ type }
-			labelPosition={ labelPosition }
-		/>
-	);
-};
-
-export const Email = ( {
-	type,
-	labelPosition,
-}: {
-	type: 'default' | 'regular' | 'panel';
-	labelPosition: 'default' | 'top' | 'side' | 'none';
-} ) => {
-	const emailFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'email' ),
-		[]
-	);
-
-	return (
-		<FieldTypeStory
-			fields={ emailFields }
-			type={ type }
-			labelPosition={ labelPosition }
-		/>
-	);
-};
-
-export const Media = ( {
-	type,
-	labelPosition,
-}: {
-	type: 'default' | 'regular' | 'panel';
-	labelPosition: 'default' | 'top' | 'side' | 'none';
-} ) => {
-	const mediaFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'media' ),
-		[]
-	);
-
-	return (
-		<FieldTypeStory
-			fields={ mediaFields }
-			type={ type }
-			labelPosition={ labelPosition }
-		/>
-	);
-};
-
-export const Array = ( {
-	type,
-	labelPosition,
-}: {
-	type: 'default' | 'regular' | 'panel';
-	labelPosition: 'default' | 'top' | 'side' | 'none';
-} ) => {
-	const arrayTextFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'array' ),
-		[]
-	);
-
-	return (
-		<FieldTypeStory
-			fields={ arrayTextFields }
-			type={ type }
-			labelPosition={ labelPosition }
-		/>
-	);
-};
-
-export const NoType = ( {
-	type,
-	labelPosition,
-}: {
-	type: 'default' | 'regular' | 'panel';
-	labelPosition: 'default' | 'top' | 'side' | 'none';
-} ) => {
-	const noTypeFields = useMemo(
-		() => fields.filter( ( field ) => field.type === undefined ),
-		[]
-	);
-
-	return (
-		<FieldTypeStory
-			fields={ noTypeFields }
-			type={ type }
-			labelPosition={ labelPosition }
-		/>
-	);
-};