From ce81be5c442a3864391c79703af71bde34606b31 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 1 Dec 2023 19:53:39 +0200 Subject: [PATCH 1/5] Dataviews: Extract to dedicated bundled package --- docs/manifest.json | 6 +++ package-lock.json | 49 ++++++++++++++++++- package.json | 1 + packages/dataviews/.npmrc | 1 + packages/dataviews/CHANGELOG.md | 3 ++ packages/dataviews/README.md | 23 +++++++++ packages/dataviews/package.json | 48 ++++++++++++++++++ .../dataviews => dataviews/src}/README.md | 0 .../dataviews => dataviews/src}/add-filter.js | 2 +- .../dataviews => dataviews/src}/constants.js | 0 .../dataviews => dataviews/src}/dataviews.js | 0 .../src}/filter-summary.js | 2 +- .../dataviews => dataviews/src}/filters.js | 0 .../dataviews => dataviews/src}/index.js | 0 .../src}/item-actions.js | 2 +- packages/dataviews/src/lock-unlock.js | 10 ++++ .../dataviews => dataviews/src}/pagination.js | 0 .../src}/reset-filters.js | 0 .../dataviews => dataviews/src}/search.js | 2 +- .../dataviews => dataviews/src}/style.scss | 0 .../src/utils/use-debounced-input.js | 18 +++++++ .../src}/view-actions.js | 2 +- .../dataviews => dataviews/src}/view-grid.js | 0 .../dataviews => dataviews/src}/view-list.js | 0 .../dataviews => dataviews/src}/view-table.js | 2 +- packages/edit-site/package.json | 2 +- .../src/components/page-pages/index.js | 16 +++--- .../page-templates/dataviews-templates.js | 14 +++--- .../sidebar-dataviews/dataview-item.js | 2 +- .../sidebar-dataviews/default-views.js | 6 +-- packages/edit-site/src/style.scss | 2 +- packages/private-apis/src/implementation.js | 1 + tools/webpack/packages.js | 1 + 33 files changed, 184 insertions(+), 31 deletions(-) create mode 100644 packages/dataviews/.npmrc create mode 100644 packages/dataviews/CHANGELOG.md create mode 100644 packages/dataviews/README.md create mode 100644 packages/dataviews/package.json rename packages/{edit-site/src/components/dataviews => dataviews/src}/README.md (100%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/add-filter.js (98%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/constants.js (100%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/dataviews.js (100%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/filter-summary.js (97%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/filters.js (100%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/index.js (100%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/item-actions.js (99%) create mode 100644 packages/dataviews/src/lock-unlock.js rename packages/{edit-site/src/components/dataviews => dataviews/src}/pagination.js (100%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/reset-filters.js (100%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/search.js (93%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/style.scss (100%) create mode 100644 packages/dataviews/src/utils/use-debounced-input.js rename packages/{edit-site/src/components/dataviews => dataviews/src}/view-actions.js (99%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/view-grid.js (100%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/view-list.js (100%) rename packages/{edit-site/src/components/dataviews => dataviews/src}/view-table.js (99%) 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/dataviews/README.md b/packages/dataviews/README.md new file mode 100644 index 00000000000000..bb5d4f048733cb --- /dev/null +++ b/packages/dataviews/README.md @@ -0,0 +1,23 @@ +# DataViews + +Data Views are an improved and reusable UI that deal with collections of things. + +## Installation + +Install the module + +```bash +npm install @wordpress/dataviews --save +``` + +## API + + + +## 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). + +

Code is Poetry.

diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json new file mode 100644 index 00000000000000..635f72161ab94b --- /dev/null +++ b/packages/dataviews/package.json @@ -0,0 +1,48 @@ +{ + "name": "@wordpress/dataviews", + "version": "0.1.0", + "description": "Data Views are an improved and reusable UI that deal with collections of things.", + "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/README.md b/packages/dataviews/src/README.md similarity index 100% rename from packages/edit-site/src/components/dataviews/README.md rename to packages/dataviews/src/README.md 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/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. From 3bdc0a5778a4de37ce398655f36bec039160c04f Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Fri, 1 Dec 2023 20:01:52 +0200 Subject: [PATCH 2/5] Update packages/dataviews/package.json MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: André <583546+oandregal@users.noreply.github.com> --- packages/dataviews/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json index 635f72161ab94b..40a09050b94321 100644 --- a/packages/dataviews/package.json +++ b/packages/dataviews/package.json @@ -1,7 +1,7 @@ { "name": "@wordpress/dataviews", "version": "0.1.0", - "description": "Data Views are an improved and reusable UI that deal with collections of things.", + "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": [ From e8299cb7c8b6efe41de58ac69599419b503e23a8 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 1 Dec 2023 20:05:04 +0200 Subject: [PATCH 3/5] update readme --- packages/dataviews/README.md | 190 +++++++++++++++++++++++++++++- packages/dataviews/src/README.md | 191 ------------------------------- 2 files changed, 188 insertions(+), 193 deletions(-) delete mode 100644 packages/dataviews/src/README.md diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md index bb5d4f048733cb..327c713f818f14 100644 --- a/packages/dataviews/README.md +++ b/packages/dataviews/README.md @@ -10,9 +10,195 @@ Install the module npm install @wordpress/dataviews --save ``` -## API +## Usage - +```js + item.id } + isLoading={ isLoadingPages } + view={ view } + onChangeView={ onChangeView } + fields={ fields } + actions={ [ trashPostAction ] } + paginationInfo={ { totalItems, totalPages } } +/> +``` + +## Data + +The dataset to work with, represented as a one-dimensional array. + +Example: + +```js +[ + { id: 1, title: "Title", ... }, + { ... } +] +``` + +## View + +The view object configures how the dataset is visible to the user. + +Example: + +```js +{ + type: LAYOUT_TABLE, + perPage: 5, + page: 1, + sort: { + field: 'date', + direction: 'desc', + }, + search: '', + filters: [ + { field: 'author', operator: OPERATOR_IN, value: 2 }, + { field: 'status', operator: OPERATOR_IN, value: 'publish,draft' } + ], + hiddenFields: [ 'date', 'featured-image' ], + layout: {}, +} +``` + +- `type`: view type, one of `table`, `grid`, or `side-by-side`. +- `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. + - `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. + - `mediaField`: used by the `grid` layout. The `id` of the field to be used for rendering each card's media. + - `primaryField`: used by the `grid` layout. The `id` of the field to be used for rendering each card's title. + +### View <=> data + +The view is a representation of the visible state of the dataset. Note, however, that it's the consumer's responsibility to work with the data provider to make sure the user options defined through the view's config (sort, pagination, filters, etc.) are respected. + +The following example shows how a view object is used to query the WordPress REST API via the entities abstraction. The same can be done with any other data provider. + +```js +function MyCustomPageTable() { + const [ view, setView ] = useState( { + type: TABLE_LAYOUT, + perPage: 5, + page: 1, + sort: { + field: 'date', + direction: 'desc', + }, + search: '', + filters: [ + { field: 'author', operator: OPERATOR_IN, value: 2 }, + { field: 'status', operator: OPERATOR_IN, value: 'publish,draft' } + ], + hiddenFields: [ 'date', 'featured-image' ], + layout: {}, + } ); + + const queryArgs = useMemo( () => { + const filters = {}; + view.filters.forEach( ( filter ) => { + if ( filter.field === 'status' && filter.operator === OPERATOR_IN ) { + filters.status = filter.value; + } + if ( filter.field === 'author' && filter.operator === OPERATOR_IN ) { + filters.author = filter.value; + } + } ); + return { + per_page: view.perPage, + page: view.page, + _embed: 'author', + order: view.sort?.direction, + orderby: view.sort?.field, + search: view.search, + ...filters, + }; + }, [ view ] ); + + const { + records + } = useEntityRecords( 'postType', 'page', queryArgs ); + + return ( + + ); +} +``` + +## Fields + +The fields describe the visible items for each record in the dataset. + +Example: + +```js +[ + { + id: 'date', + header: __( 'Date' ), + getValue: ( { item } ) => item.date, + render: ( { item } ) => { + return ( + + ); + }, + enableHiding: false + }, + { + id: 'author', + header: __( 'Author' ), + getValue: ( { item } ) => item.author, + render: ( { item } ) => { + return ( + { item.author } + ); + }, + type: ENUMERATION_TYPE, + elements: [ + { value: 1, label: 'Admin' } + { value: 2, label: 'User' } + ] + enableSorting: false + } +] +``` + +- `id`: identifier for the field. Unique. +- `header`: the field's name to be shown in the UI. +- `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. +- `enableSorting`: whether the data can be sorted by the given field. True by default. +- `enableHiding`: whether the field can be hidden. True by default. + +## Actions + +Array of operations that can be performed upon each record. Each action is an object with the following properties: + +- `id`: string, required. Unique identifier of the action. For example, `move-to-trash`. +- `label`: string, required. User facing description of the action. For example, `Move to Trash`. +- `isPrimary`: boolean, optional. Whether the action should be listed inline (primary) or in hidden in the more actions menu (secondary). +- `icon`: icon to show for primary actions. It's required for a primary action, otherwise the action would be considered secondary. +- `isEligible`: function, optional. Whether the action can be performed for a given record. If not present, the action is considered to be eligible for all items. It takes the given record as input. +- `isDestructive`: boolean, optional. Whether the action can delete data, in which case the UI would communicate it via red color. +- `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 diff --git a/packages/dataviews/src/README.md b/packages/dataviews/src/README.md deleted file mode 100644 index 31e69a6675c46a..00000000000000 --- a/packages/dataviews/src/README.md +++ /dev/null @@ -1,191 +0,0 @@ -# DataView - -This file documents the DataViews UI component, which provides an API to render datasets using different view types (table, grid, etc.). - -```js - item.id } - isLoading={ isLoadingPages } - view={ view } - onChangeView={ onChangeView } - fields={ fields } - actions={ [ trashPostAction ] } - paginationInfo={ { totalItems, totalPages } } -/> -``` - -## Data - -The dataset to work with, represented as a one-dimensional array. - -Example: - -```js -[ - { id: 1, title: "Title", ... }, - { ... } -] -``` - -## View - -The view object configures how the dataset is visible to the user. - -Example: - -```js -{ - type: LAYOUT_TABLE, - perPage: 5, - page: 1, - sort: { - field: 'date', - direction: 'desc', - }, - search: '', - filters: [ - { field: 'author', operator: OPERATOR_IN, value: 2 }, - { field: 'status', operator: OPERATOR_IN, value: 'publish,draft' } - ], - hiddenFields: [ 'date', 'featured-image' ], - layout: {}, -} -``` - -- `type`: view type, one of `table`, `grid`, or `side-by-side`. -- `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. - - `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. - - `mediaField`: used by the `grid` layout. The `id` of the field to be used for rendering each card's media. - - `primaryField`: used by the `grid` layout. The `id` of the field to be used for rendering each card's title. - -### View <=> data - -The view is a representation of the visible state of the dataset. Note, however, that it's the consumer's responsibility to work with the data provider to make sure the user options defined through the view's config (sort, pagination, filters, etc.) are respected. - -The following example shows how a view object is used to query the WordPress REST API via the entities abstraction. The same can be done with any other data provider. - -```js -function MyCustomPageTable() { - const [ view, setView ] = useState( { - type: TABLE_LAYOUT, - perPage: 5, - page: 1, - sort: { - field: 'date', - direction: 'desc', - }, - search: '', - filters: [ - { field: 'author', operator: OPERATOR_IN, value: 2 }, - { field: 'status', operator: OPERATOR_IN, value: 'publish,draft' } - ], - hiddenFields: [ 'date', 'featured-image' ], - layout: {}, - } ); - - const queryArgs = useMemo( () => { - const filters = {}; - view.filters.forEach( ( filter ) => { - if ( filter.field === 'status' && filter.operator === OPERATOR_IN ) { - filters.status = filter.value; - } - if ( filter.field === 'author' && filter.operator === OPERATOR_IN ) { - filters.author = filter.value; - } - } ); - return { - per_page: view.perPage, - page: view.page, - _embed: 'author', - order: view.sort?.direction, - orderby: view.sort?.field, - search: view.search, - ...filters, - }; - }, [ view ] ); - - const { - records - } = useEntityRecords( 'postType', 'page', queryArgs ); - - return ( - - ); -} -``` - -## Fields - -The fields describe the visible items for each record in the dataset. - -Example: - -```js -[ - { - id: 'date', - header: __( 'Date' ), - getValue: ( { item } ) => item.date, - render: ( { item } ) => { - return ( - - ); - }, - enableHiding: false - }, - { - id: 'author', - header: __( 'Author' ), - getValue: ( { item } ) => item.author, - render: ( { item } ) => { - return ( - { item.author } - ); - }, - type: ENUMERATION_TYPE, - elements: [ - { value: 1, label: 'Admin' } - { value: 2, label: 'User' } - ] - enableSorting: false - } -] -``` - -- `id`: identifier for the field. Unique. -- `header`: the field's name to be shown in the UI. -- `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. -- `enableSorting`: whether the data can be sorted by the given field. True by default. -- `enableHiding`: whether the field can be hidden. True by default. - -## Actions - -Array of operations that can be performed upon each record. Each action is an object with the following properties: - -- `id`: string, required. Unique identifier of the action. For example, `move-to-trash`. -- `label`: string, required. User facing description of the action. For example, `Move to Trash`. -- `isPrimary`: boolean, optional. Whether the action should be listed inline (primary) or in hidden in the more actions menu (secondary). -- `icon`: icon to show for primary actions. It's required for a primary action, otherwise the action would be considered secondary. -- `isEligible`: function, optional. Whether the action can be performed for a given record. If not present, the action is considered to be eligible for all items. It takes the given record as input. -- `isDestructive`: boolean, optional. Whether the action can delete data, in which case the UI would communicate it via red color. -- `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. From d35ebe498c5a754f7a5b0fb893ea973522b10f29 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Fri, 1 Dec 2023 20:06:54 +0200 Subject: [PATCH 4/5] Update packages/dataviews/README.md --- packages/dataviews/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md index 327c713f818f14..52fff8269d2459 100644 --- a/packages/dataviews/README.md +++ b/packages/dataviews/README.md @@ -1,6 +1,6 @@ # DataViews -Data Views are an improved and reusable UI that deal with collections of things. +DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.). ## Installation From ab436a9d4872daca5eda3bc9808881c16a8a22c9 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Sat, 2 Dec 2023 13:35:14 +0200 Subject: [PATCH 5/5] include in dep.extraction plugin bundled packages --- packages/dependency-extraction-webpack-plugin/lib/util.js | 1 + 1 file changed, 1 insertion(+) 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', ]; /**