DataViews: doo not export string constants (#56754)

packages/dataviews/README.md

@@ -46,7 +46,7 @@ Example:
 
 ```js
 {
-	type: LAYOUT_TABLE,
+	type: 'table',
 	perPage: 5,
 	page: 1,
 	sort: {
@@ -55,23 +55,23 @@ Example:
 	},
 	search: '',
 	filters: [
-		{ field: 'author', operator: OPERATOR_IN, value: 2 },
-		{ field: 'status', operator: OPERATOR_IN, value: 'publish,draft' }
+		{ field: 'author', operator: 'in', value: 2 },
+		{ field: 'status', operator: 'in', value: 'publish,draft' }
 	],
 	hiddenFields: [ 'date', 'featured-image' ],
 	layout: {},
 }
 ```
 
--   `type`: view type, one of `table`, `grid`, or `side-by-side`.
+-   `type`: view type, one of `table`, `grid`, `list`. See "View types".
 -   `perPage`: number of records to show per page.
 -   `page`: the page that is visible.
 -   `sort.field`: field used for sorting the dataset.
 -   `sort.direction`: the direction to use for sorting, one of `asc` or `desc`.
 -   `search`: the text search applied to the dataset.
 -   `filters`: the filters applied to the dataset. Each item describes:
     -   `field`: which field this filter is bound to.
-    -   `operator`: which type of filter it is. Only `in` available at the moment.
+    -   `operator`: which type of filter it is. One of `in`, `notIn`. See "Operator types".
     -   `value`: the actual value selected by the user.
 -   `hiddenFields`: the `id` of the fields that are hidden in the UI.
 -   `layout`: config that is specific to a particular layout type.
@@ -87,7 +87,7 @@ The following example shows how a view object is used to query the WordPress RES
 ```js
 function MyCustomPageTable() {
 	const [ view, setView ] = useState( {
-		type: TABLE_LAYOUT,
+		type: 'table',
 		perPage: 5,
 		page: 1,
 		sort: {
@@ -96,8 +96,8 @@ function MyCustomPageTable() {
 		},
 		search: '',
 		filters: [
-			{ field: 'author', operator: OPERATOR_IN, value: 2 },
-			{ field: 'status', operator: OPERATOR_IN, value: 'publish,draft' }
+			{ field: 'author', operator: 'in', value: 2 },
+			{ field: 'status', operator: 'in', value: 'publish,draft' }
 		],
 		hiddenFields: [ 'date', 'featured-image' ],
 		layout: {},
@@ -106,10 +106,10 @@ function MyCustomPageTable() {
 	const queryArgs = useMemo( () => {
 		const filters = {};
 		view.filters.forEach( ( filter ) => {
-			if ( filter.field === 'status' && filter.operator === OPERATOR_IN ) {
+			if ( filter.field === 'status' && filter.operator === 'in' ) {
 				filters.status = filter.value;
 			}
-			if ( filter.field === 'author' && filter.operator === OPERATOR_IN ) {
+			if ( filter.field === 'author' && filter.operator === 'in' ) {
 				filters.author = filter.value;
 			}
 		} );
@@ -167,7 +167,7 @@ Example:
 				<a href="...">{ item.author }</a>
 			);
 		},
-		type: ENUMERATION_TYPE,
+		type: 'enumeration',
 		elements: [
 			{ value: 1, label: 'Admin' }
 			{ value: 2, label: 'User' }
@@ -182,7 +182,7 @@ Example:
 -   `getValue`: function that returns the value of the field.
 -   `render`: function that renders the field.
 -   `elements`: the set of valid values for the field's value.
--   `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment.
+-   `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment. See "Field types".
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
 -   `filterBy`: configuration for the filters.
@@ -202,6 +202,18 @@ Array of operations that can be performed upon each record. Each action is an ob
 -   `RenderModal`: ReactElement, optional. If an action requires that some UI be rendered in a modal, it can provide a component which takes as props the record as `item` and a `closeModal` function. When this prop is provided, the `callback` property is ignored.
 -   `hideModalHeader`: boolean, optional. This property is used in combination with `RenderModal` and controls the visibility of the modal's header. If the action renders a modal and doesn't hide the header, the action's label is going to be used in the modal's header.
 
+## Types
+
+- Layout types:
+    - `table`: the view uses a table layout.
+    - `grid`: the view uses a grid layout.
+    - `list`: the view uses a list layout.
+- Field types:
+    - `enumeration`: the field value should be taken and can be filtered from a closed list of elements.
+- Operator types:
+    - `in`: operator to be used in filters for fields of type `enumeration`.
+    - `notIn`: operator to be used in filters for fields of type `enumeration`.
+
 ## Contributing to this package
 
 This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.

packages/dataviews/src/index.js

@@ -1,10 +1,2 @@
 export { default as DataViews } from './dataviews';
-export {
-	VIEW_LAYOUTS,
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
-	LAYOUT_LIST,
-	ENUMERATION_TYPE,
-	OPERATOR_IN,
-	OPERATOR_NOT_IN,
-} from './constants';
+export { VIEW_LAYOUTS } from './constants';

packages/edit-site/src/components/page-pages/index.js

@@ -12,22 +12,22 @@ import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	DataViews,
-	ENUMERATION_TYPE,
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
-	OPERATOR_IN,
-	OPERATOR_NOT_IN,
-	VIEW_LAYOUTS,
-} from '@wordpress/dataviews';
+import { DataViews, VIEW_LAYOUTS } from '@wordpress/dataviews';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
 import Link from '../routes/link';
 import { default as DEFAULT_VIEWS } from '../sidebar-dataviews/default-views';
+import {
+	ENUMERATION_TYPE,
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	OPERATOR_IN,
+	OPERATOR_NOT_IN,
+} from '../../utils/constants';
+
 import {
 	trashPostAction,
 	usePermanentlyDeletePostAction,

packages/edit-site/src/components/page-templates/dataviews-templates.js

@@ -23,21 +23,21 @@ import {
 	BlockPreview,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import {
-	DataViews,
-	ENUMERATION_TYPE,
-	OPERATOR_IN,
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
-} from '@wordpress/dataviews';
+import { DataViews } from '@wordpress/dataviews';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
 import Link from '../routes/link';
 import { useAddedBy, AvatarImage } from '../list/added-by';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import {
+	TEMPLATE_POST_TYPE,
+	ENUMERATION_TYPE,
+	OPERATOR_IN,
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+} from '../../utils/constants';
 import {
 	useResetTemplateAction,
 	deleteTemplateAction,

packages/edit-site/src/components/sidebar-dataviews/default-views.js

@@ -3,7 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 import { trash } from '@wordpress/icons';
-import { LAYOUT_TABLE, OPERATOR_IN } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { LAYOUT_TABLE, OPERATOR_IN } from '../../utils/constants';
 
 const DEFAULT_PAGE_BASE = {
 	type: LAYOUT_TABLE,

packages/edit-site/src/utils/constants.js

@@ -44,3 +44,11 @@ export const POST_TYPE_LABELS = {
 	[ PATTERN_TYPES.user ]: __( 'Pattern' ),
 	[ NAVIGATION_POST_TYPE ]: __( 'Navigation' ),
 };
+
+// DataViews constants
+export const LAYOUT_GRID = 'grid';
+export const LAYOUT_TABLE = 'table';
+export const LAYOUT_LIST = 'list';
+export const ENUMERATION_TYPE = 'enumeration';
+export const OPERATOR_IN = 'in';
+export const OPERATOR_NOT_IN = 'notIn';