diff --git a/docs/manifest.json b/docs/manifest.json index 3ab4cefb2b533c..b8939951d71837 100644 --- a/docs/manifest.json +++ b/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", diff --git a/package-lock.json b/package-lock.json index 94a60889e63ccf..80a3f384e808ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,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", @@ -18315,6 +18316,10 @@ "resolved": "packages/data-controls", "link": true }, + "node_modules/@wordpress/dataviews": { + "resolved": "packages/dataviews", + "link": true + }, "node_modules/@wordpress/date": { "resolved": "packages/date", "link": true @@ -55057,6 +55062,30 @@ "react": "^18.0.0" } }, + "packages/dataviews": { + "name": "@wordpress/dataviews", + "version": "0.1.0", + "license": "GPL-2.0-or-later", + "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" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "packages/date": { "name": "@wordpress/date", "version": "4.47.0", @@ -55278,7 +55307,6 @@ "license": "GPL-2.0-or-later", "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", @@ -55291,6 +55319,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", @@ -70371,6 +70400,22 @@ "@wordpress/deprecated": "file:../deprecated" } }, + "@wordpress/dataviews": { + "version": "file:packages/dataviews", + "requires": { + "@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" + } + }, "@wordpress/date": { "version": "file:packages/date", "requires": { @@ -70513,7 +70558,6 @@ "version": "file:packages/edit-site", "requires": { "@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", @@ -70526,6 +70570,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", diff --git a/package.json b/package.json index bc4f43a47d03f9..e7514660813d9b 100644 --- a/package.json +++ b/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", diff --git a/packages/dataviews/.npmrc b/packages/dataviews/.npmrc new file mode 100644 index 00000000000000..43c97e719a5a82 --- /dev/null +++ b/packages/dataviews/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md new file mode 100644 index 00000000000000..6ed52df1077824 --- /dev/null +++ b/packages/dataviews/CHANGELOG.md @@ -0,0 +1,3 @@ + + +## Unreleased diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/dataviews/README.md similarity index 86% rename from packages/edit-site/src/components/dataviews/README.md rename to packages/dataviews/README.md index 31e69a6675c46a..52fff8269d2459 100644 --- a/packages/edit-site/src/components/dataviews/README.md +++ b/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

Code is Poetry.

diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json new file mode 100644 index 00000000000000..40a09050b94321 --- /dev/null +++ b/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" + } +} diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/dataviews/src/add-filter.js similarity index 98% rename from packages/edit-site/src/components/dataviews/add-filter.js rename to packages/dataviews/src/add-filter.js index a4b9bf42a4d782..91b35e04aab967 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/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 { diff --git a/packages/edit-site/src/components/dataviews/constants.js b/packages/dataviews/src/constants.js similarity index 100% rename from packages/edit-site/src/components/dataviews/constants.js rename to packages/dataviews/src/constants.js diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/dataviews/src/dataviews.js similarity index 100% rename from packages/edit-site/src/components/dataviews/dataviews.js rename to packages/dataviews/src/dataviews.js diff --git a/packages/edit-site/src/components/dataviews/filter-summary.js b/packages/dataviews/src/filter-summary.js similarity index 97% rename from packages/edit-site/src/components/dataviews/filter-summary.js rename to packages/dataviews/src/filter-summary.js index ae92d0cc462737..64a5b39bf74a6d 100644 --- a/packages/edit-site/src/components/dataviews/filter-summary.js +++ b/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, diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/dataviews/src/filters.js similarity index 100% rename from packages/edit-site/src/components/dataviews/filters.js rename to packages/dataviews/src/filters.js diff --git a/packages/edit-site/src/components/dataviews/index.js b/packages/dataviews/src/index.js similarity index 100% rename from packages/edit-site/src/components/dataviews/index.js rename to packages/dataviews/src/index.js diff --git a/packages/edit-site/src/components/dataviews/item-actions.js b/packages/dataviews/src/item-actions.js similarity index 99% rename from packages/edit-site/src/components/dataviews/item-actions.js rename to packages/dataviews/src/item-actions.js index bec33e915b8a80..267ed3f07e856b 100644 --- a/packages/edit-site/src/components/dataviews/item-actions.js +++ b/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, diff --git a/packages/dataviews/src/lock-unlock.js b/packages/dataviews/src/lock-unlock.js new file mode 100644 index 00000000000000..18318773cefefe --- /dev/null +++ b/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' + ); diff --git a/packages/edit-site/src/components/dataviews/pagination.js b/packages/dataviews/src/pagination.js similarity index 100% rename from packages/edit-site/src/components/dataviews/pagination.js rename to packages/dataviews/src/pagination.js diff --git a/packages/edit-site/src/components/dataviews/reset-filters.js b/packages/dataviews/src/reset-filters.js similarity index 100% rename from packages/edit-site/src/components/dataviews/reset-filters.js rename to packages/dataviews/src/reset-filters.js diff --git a/packages/edit-site/src/components/dataviews/search.js b/packages/dataviews/src/search.js similarity index 93% rename from packages/edit-site/src/components/dataviews/search.js rename to packages/dataviews/src/search.js index 17a882637a7183..b226ddbffd35e4 100644 --- a/packages/edit-site/src/components/dataviews/search.js +++ b/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( diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/dataviews/src/style.scss similarity index 100% rename from packages/edit-site/src/components/dataviews/style.scss rename to packages/dataviews/src/style.scss diff --git a/packages/dataviews/src/utils/use-debounced-input.js b/packages/dataviews/src/utils/use-debounced-input.js new file mode 100644 index 00000000000000..26cd6c0da0e0a9 --- /dev/null +++ b/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 ]; +} diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/dataviews/src/view-actions.js similarity index 99% rename from packages/edit-site/src/components/dataviews/view-actions.js rename to packages/dataviews/src/view-actions.js index 28acd2bdb882d6..ff01155727e697 100644 --- a/packages/edit-site/src/components/dataviews/view-actions.js +++ b/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 { diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/dataviews/src/view-grid.js similarity index 100% rename from packages/edit-site/src/components/dataviews/view-grid.js rename to packages/dataviews/src/view-grid.js diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/dataviews/src/view-list.js similarity index 100% rename from packages/edit-site/src/components/dataviews/view-list.js rename to packages/dataviews/src/view-list.js diff --git a/packages/edit-site/src/components/dataviews/view-table.js b/packages/dataviews/src/view-table.js similarity index 99% rename from packages/edit-site/src/components/dataviews/view-table.js rename to packages/dataviews/src/view-table.js index 60b584b7f10261..bf2817293172c4 100644 --- a/packages/edit-site/src/components/dataviews/view-table.js +++ b/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'; diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js index 47dd1a0b7adf4c..bd328430313ce9 100644 --- a/packages/dependency-extraction-webpack-plugin/lib/util.js +++ b/packages/dependency-extraction-webpack-plugin/lib/util.js @@ -4,6 +4,7 @@ const BUNDLED_PACKAGES = [ '@wordpress/interface', '@wordpress/undo-manager', '@wordpress/sync', + '@wordpress/dataviews', ]; /** diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index 2ff4f10c084a88..92e9fd8bebe59a 100644 --- a/packages/edit-site/package.json +++ b/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", diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index eac10153e83266..5819b825865ef5 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/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, diff --git a/packages/edit-site/src/components/page-templates/dataviews-templates.js b/packages/edit-site/src/components/page-templates/dataviews-templates.js index 5c24db0c537f78..07f32441da84f3 100644 --- a/packages/edit-site/src/components/page-templates/dataviews-templates.js +++ b/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, diff --git a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js index cd76a923fa6b6c..cbcb4f2f8ed59c 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js +++ b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js @@ -8,6 +8,7 @@ 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 @@ -15,7 +16,6 @@ import { __experimentalHStack as HStack } from '@wordpress/components'; 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( { diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js index d71265860b29ed..d22786cff0b5c8 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js @@ -3,11 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { trash } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import { LAYOUT_TABLE, OPERATOR_IN } from '../dataviews'; +import { LAYOUT_TABLE, OPERATOR_IN } from '@wordpress/dataviews'; const DEFAULT_PAGE_BASE = { type: LAYOUT_TABLE, diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 30fbec3a94cc1b..5a93375afec8b0 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -1,10 +1,10 @@ @import "../../interface/src/style.scss"; +@import "../../dataviews/src/style.scss"; @import "./components/add-new-template/style.scss"; @import "./components/block-editor/style.scss"; @import "./components/canvas-loader/style.scss"; @import "./components/code-editor/style.scss"; -@import "./components/dataviews/style.scss"; @import "./components/global-styles/style.scss"; @import "./components/global-styles/screen-revisions/style.scss"; @import "./components/header-edit-mode/style.scss"; diff --git a/packages/private-apis/src/implementation.js b/packages/private-apis/src/implementation.js index 400d84c8cf584d..a7da5bc9726554 100644 --- a/packages/private-apis/src/implementation.js +++ b/packages/private-apis/src/implementation.js @@ -27,6 +27,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [ '@wordpress/patterns', '@wordpress/reusable-blocks', '@wordpress/router', + '@wordpress/dataviews', ]; /** diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js index a76889622b4a2f..86554d5f139098 100644 --- a/tools/webpack/packages.js +++ b/tools/webpack/packages.js @@ -29,6 +29,7 @@ const BUNDLED_PACKAGES = [ '@wordpress/interface', '@wordpress/undo-manager', '@wordpress/sync', + '@wordpress/dataviews', ]; // PHP files in packages that have to be copied during build.