Dataviews: Extract to dedicated bundled package (#56721)

* Dataviews: Extract to dedicated bundled package

* Update packages/dataviews/package.json

Co-authored-by: André <[email protected]>

* update readme

* Update packages/dataviews/README.md

* include in dep.extraction plugin bundled packages

---------

Co-authored-by: André <[email protected]>

docs/manifest.json

@@ -1619,6 +1619,12 @@
 		"markdown_source": "../packages/data/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/dataviews",
+		"slug": "packages-dataviews",
+		"markdown_source": "../packages/dataviews/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/date",
 		"slug": "packages-date",

package.json

@@ -41,6 +41,7 @@
 		"@wordpress/customize-widgets": "file:packages/customize-widgets",
 		"@wordpress/data": "file:packages/data",
 		"@wordpress/data-controls": "file:packages/data-controls",
+		"@wordpress/dataviews": "file:packages/dataviews",
 		"@wordpress/date": "file:packages/date",
 		"@wordpress/deprecated": "file:packages/deprecated",
 		"@wordpress/dom": "file:packages/dom",

packages/dataviews/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/dataviews/CHANGELOG.md

@@ -0,0 +1,3 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased

packages/edit-site/src/components/dataviews/README.md → packages/dataviews/README.md

@@ -1,6 +1,16 @@
-# DataView
+# DataViews
 
-This file documents the DataViews UI component, which provides an API to render datasets using different view types (table, grid, etc.).
+DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/dataviews --save
+```
+
+## Usage
 
 ```js
 <DataViews
@@ -189,3 +199,11 @@ Array of operations that can be performed upon each record. Each action is an ob
 -   `callback`: function, required unless `RenderModal` is provided. Callback function that takes the record as input and performs the required action.
 -   `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.
+
+## 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.
+
+To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/dataviews/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "@wordpress/dataviews",
+	"version": "0.1.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",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"dataviews"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/dataviews/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/dataviews"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=12"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@babel/runtime": "^7.16.0",
+		"@tanstack/react-table": "^8.10.3",
+		"@wordpress/a11y": "file:../a11y",
+		"@wordpress/components": "file:../components",
+		"@wordpress/compose": "file:../compose",
+		"@wordpress/element": "file:../element",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
+		"@wordpress/private-apis": "file:../private-apis",
+		"classnames": "^2.3.1",
+		"remove-accents": "^0.5.0"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/edit-site/src/components/dataviews/add-filter.js → packages/dataviews/src/add-filter.js

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
+import { unlock } from './lock-unlock';
 import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
 
 const {

packages/edit-site/src/components/dataviews/filter-summary.js → packages/dataviews/src/filter-summary.js

@@ -13,7 +13,7 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { OPERATOR_IN } from './constants';
-import { unlock } from '../../lock-unlock';
+import { unlock } from './lock-unlock';
 
 const {
 	DropdownMenuV2: DropdownMenu,

packages/edit-site/src/components/dataviews/item-actions.js → packages/dataviews/src/item-actions.js

@@ -14,7 +14,7 @@ import { moreVertical } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
+import { unlock } from './lock-unlock';
 
 const {
 	DropdownMenuV2Ariakit: DropdownMenu,

packages/dataviews/src/lock-unlock.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'@wordpress/dataviews'
+	);

packages/edit-site/src/components/dataviews/search.js → packages/dataviews/src/search.js

@@ -8,7 +8,7 @@ import { SearchControl } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import useDebouncedInput from '../../utils/use-debounced-input';
+import useDebouncedInput from './utils/use-debounced-input';
 
 export default function Search( { label, view, onChangeView } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(

packages/dataviews/src/utils/use-debounced-input.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+
+export default function useDebouncedInput( defaultValue = '' ) {
+	const [ input, setInput ] = useState( defaultValue );
+	const [ debouncedInput, setDebouncedState ] = useState( defaultValue );
+
+	const setDebouncedInput = useDebounce( setDebouncedState, 250 );
+
+	useEffect( () => {
+		setDebouncedInput( input );
+	}, [ input ] );
+
+	return [ input, setInput, debouncedInput ];
+}

packages/edit-site/src/components/dataviews/view-actions.js → packages/dataviews/src/view-actions.js

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
+import { unlock } from './lock-unlock';
 import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants';
 
 const {

packages/edit-site/src/components/dataviews/view-table.js → packages/dataviews/src/view-table.js

@@ -35,7 +35,7 @@ import { useMemo, Children, Fragment } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
+import { unlock } from './lock-unlock';
 import ItemActions from './item-actions';
 import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
 

packages/dependency-extraction-webpack-plugin/lib/util.js

@@ -4,6 +4,7 @@ const BUNDLED_PACKAGES = [
 	'@wordpress/interface',
 	'@wordpress/undo-manager',
 	'@wordpress/sync',
+	'@wordpress/dataviews',
 ];
 
 /**

packages/edit-site/package.json

@@ -27,7 +27,6 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@tanstack/react-table": "^8.10.3",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/blob": "file:../blob",
@@ -40,6 +39,7 @@
 		"@wordpress/core-commands": "file:../core-commands",
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
+		"@wordpress/dataviews": "file:../dataviews",
 		"@wordpress/date": "file:../date",
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/dom": "file:../dom",

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

@@ -12,20 +12,20 @@ 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,
+	VIEW_LAYOUTS,
+	OPERATOR_IN,
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+} from '@wordpress/dataviews';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
 import Link from '../routes/link';
-import {
-	DataViews,
-	VIEW_LAYOUTS,
-	ENUMERATION_TYPE,
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
-	OPERATOR_IN,
-} from '../dataviews';
 import { default as DEFAULT_VIEWS } from '../sidebar-dataviews/default-views';
 import {
 	trashPostAction,

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

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

packages/edit-site/src/components/sidebar-dataviews/dataview-item.js

@@ -8,14 +8,14 @@ import classnames from 'classnames';
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __experimentalHStack as HStack } from '@wordpress/components';
+import { VIEW_LAYOUTS } from '@wordpress/dataviews';
 
 /**
  * Internal dependencies
  */
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { unlock } from '../../lock-unlock';
-import { VIEW_LAYOUTS } from '../dataviews';
 const { useLocation } = unlock( routerPrivateApis );
 
 export default function DataViewItem( {