@wordpress/dataviews 0.2.0

package/build-style/style.css

@@ -0,0 +1,325 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+:root {
+  --wp-admin-theme-color: #007cba;
+  --wp-admin-theme-color--rgb: 0, 124, 186;
+  --wp-admin-theme-color-darker-10: #006ba1;
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
+  --wp-admin-theme-color-darker-20: #005a87;
+  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
+.dataviews-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  scroll-padding-bottom: 64px;
+}
+.dataviews-wrapper > div {
+  min-height: 100%;
+}
+
+.dataviews__filters-view-actions {
+  padding: 12px 32px;
+}
+
+.dataviews-pagination {
+  margin-top: auto;
+  position: sticky;
+  bottom: 0;
+  background-color: #fff;
+  padding: 12px 32px;
+  border-top: 1px solid #f0f0f0;
+  color: #757575;
+}
+
+.dataviews-filters-options {
+  margin: 32px 0 16px;
+}
+
+.dataviews-table-view {
+  width: 100%;
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+  position: relative;
+  color: #757575;
+}
+.dataviews-table-view a {
+  text-decoration: none;
+  color: #1e1e1e;
+  font-weight: 500;
+}
+.dataviews-table-view th {
+  text-align: left;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  font-weight: normal;
+  font-size: 13px;
+}
+.dataviews-table-view td,
+.dataviews-table-view th {
+  padding: 12px;
+  min-width: 160px;
+}
+.dataviews-table-view td[data-field-id=actions],
+.dataviews-table-view th[data-field-id=actions] {
+  text-align: right;
+}
+.dataviews-table-view tr {
+  border-bottom: 1px solid #f0f0f0;
+}
+.dataviews-table-view tr td:first-child,
+.dataviews-table-view tr th:first-child {
+  padding-left: 32px;
+}
+.dataviews-table-view tr td:last-child,
+.dataviews-table-view tr th:last-child {
+  padding-right: 32px;
+}
+.dataviews-table-view tr:last-child {
+  border-bottom: 0;
+}
+.dataviews-table-view thead tr {
+  border: 0;
+}
+.dataviews-table-view thead th {
+  position: sticky;
+  top: -1px;
+  background-color: #fafafa;
+  box-shadow: inset 0 -1px 0 #f0f0f0;
+  border-top: 1px solid #f0f0f0;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.dataviews-grid-view {
+  margin-bottom: 24px;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  padding: 0 32px;
+}
+@media (min-width: 1080px) {
+  .dataviews-grid-view {
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+  }
+}
+@media (min-width: 1440px) {
+  .dataviews-grid-view {
+    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+  }
+}
+.dataviews-grid-view .dataviews-view-grid__card h3 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dataviews-grid-view .dataviews-view-grid__media {
+  width: 100%;
+  min-height: 200px;
+  aspect-ratio: 1/1;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.dataviews-grid-view .dataviews-view-grid__media > * {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.dataviews-grid-view .dataviews-view-grid__primary-field {
+  min-height: 24px;
+}
+.dataviews-grid-view .dataviews-view-grid__primary-field a {
+  color: #1e1e1e;
+  text-decoration: none;
+  font-weight: 500;
+}
+.dataviews-grid-view .dataviews-view-grid__fields {
+  position: relative;
+  font-size: 12px;
+  line-height: 16px;
+}
+.dataviews-grid-view .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-header {
+  color: #757575;
+}
+.dataviews-grid-view .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+  color: #1e1e1e;
+}
+
+.dataviews-list-view {
+  margin: 0;
+}
+.dataviews-list-view li {
+  border-bottom: 1px solid #f0f0f0;
+  margin: 0;
+}
+.dataviews-list-view li:first-child {
+  border-top: 1px solid #f0f0f0;
+}
+.dataviews-list-view li:last-child {
+  border-bottom: 0;
+}
+.dataviews-list-view .dataviews-list-view__item {
+  padding: 12px 32px;
+  cursor: default;
+}
+.dataviews-list-view .dataviews-list-view__item:focus, .dataviews-list-view .dataviews-list-view__item:hover {
+  background-color: #f8f8f8;
+}
+.dataviews-list-view .dataviews-list-view__item:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.dataviews-list-view .dataviews-list-view__item h3 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-list-view .dataviews-list-view__item-selected,
+.dataviews-list-view .dataviews-list-view__item-selected:hover {
+  background-color: #f0f0f0;
+}
+.dataviews-list-view .dataviews-list-view__item-selected:focus,
+.dataviews-list-view .dataviews-list-view__item-selected:hover:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.dataviews-list-view .dataviews-list-view__media-wrapper {
+  min-width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+.dataviews-list-view .dataviews-list-view__media-wrapper::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+.dataviews-list-view .edit-site-page-pages__featured-image,
+.dataviews-list-view .dataviews-list-view__media-placeholder {
+  min-width: 32px;
+  height: 32px;
+}
+.dataviews-list-view .dataviews-list-view__media-placeholder {
+  background-color: #e0e0e0;
+}
+.dataviews-list-view .dataviews-list-view__fields {
+  color: #757575;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-list-view .dataviews-list-view__fields .dataviews-list-view__field {
+  margin-right: 12px;
+}
+.dataviews-list-view .dataviews-list-view__fields .dataviews-list-view__field:last-child {
+  margin-right: 0;
+}
+
+.dataviews-action-modal {
+  z-index: 1000001;
+}
+
+.dataviews-no-results,
+.dataviews-loading {
+  padding: 0 32px;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "@wordpress/dataviews",
+	"version": "0.2.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",
+		"@wordpress/a11y": "^3.48.0",
+		"@wordpress/components": "^25.14.0",
+		"@wordpress/compose": "^6.25.0",
+		"@wordpress/element": "^5.25.0",
+		"@wordpress/i18n": "^4.48.0",
+		"@wordpress/icons": "^9.39.0",
+		"@wordpress/keycodes": "^3.48.0",
+		"@wordpress/private-apis": "^0.30.0",
+		"classnames": "^2.3.1",
+		"remove-accents": "^0.5.0"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
+}

package/src/add-filter.js

@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	privateApis as componentsPrivateApis,
+	Button,
+	Icon,
+} from '@wordpress/components';
+import { chevronRightSmall, plus } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownSubMenuV2: DropdownSubMenu,
+	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
+	DropdownMenuItemV2: DropdownMenuItem,
+} = unlock( componentsPrivateApis );
+
+export default function AddFilter( { fields, view, onChangeView } ) {
+	const filters = [];
+	fields.forEach( ( field ) => {
+		if ( ! field.type ) {
+			return;
+		}
+
+		switch ( field.type ) {
+			case ENUMERATION_TYPE:
+				filters.push( {
+					field: field.id,
+					name: field.header,
+					elements: field.elements || [],
+					isVisible: view.filters.some(
+						( f ) => f.field === field.id
+					),
+				} );
+		}
+	} );
+
+	if ( filters.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<DropdownMenu
+			label={ __( 'Add filter' ) }
+			trigger={
+				<Button
+					disabled={ filters.length === view.filters?.length }
+					__experimentalIsFocusable
+					variant="tertiary"
+					size="compact"
+				>
+					<Icon icon={ plus } style={ { flexShrink: 0 } } />
+					{ __( 'Add filter' ) }
+				</Button>
+			}
+		>
+			{ filters.map( ( filter ) => {
+				if ( filter.isVisible ) {
+					return null;
+				}
+
+				return (
+					<DropdownSubMenu
+						key={ filter.field }
+						trigger={
+							<DropdownSubMenuTrigger
+								suffix={ <Icon icon={ chevronRightSmall } /> }
+							>
+								{ filter.name }
+							</DropdownSubMenuTrigger>
+						}
+					>
+						{ filter.elements.map( ( element ) => (
+							<DropdownMenuItem
+								key={ element.value }
+								onSelect={ () => {
+									onChangeView( ( currentView ) => ( {
+										...currentView,
+										page: 1,
+										filters: [
+											...currentView.filters,
+											{
+												field: filter.field,
+												operator: OPERATOR_IN,
+												value: element.value,
+											},
+										],
+									} ) );
+								} }
+							>
+								{ element.label }
+							</DropdownMenuItem>
+						) ) }
+					</DropdownSubMenu>
+				);
+			} ) }
+		</DropdownMenu>
+	);
+}

package/src/constants.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	blockTable,
+	category,
+	formatListBullets,
+	formatListBulletsRTL,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import ViewTable from './view-table';
+import ViewGrid from './view-grid';
+import ViewList from './view-list';
+
+// Field types.
+export const ENUMERATION_TYPE = 'enumeration';
+
+// Filter operators.
+export const OPERATOR_IN = 'in';
+export const OPERATOR_NOT_IN = 'notIn';
+
+// View layouts.
+export const LAYOUT_TABLE = 'table';
+export const LAYOUT_GRID = 'grid';
+export const LAYOUT_LIST = 'list';
+
+export const VIEW_LAYOUTS = [
+	{
+		type: LAYOUT_TABLE,
+		label: __( 'Table' ),
+		component: ViewTable,
+		icon: blockTable,
+	},
+	{
+		type: LAYOUT_GRID,
+		label: __( 'Grid' ),
+		component: ViewGrid,
+		icon: category,
+	},
+	{
+		type: LAYOUT_LIST,
+		label: __( 'List' ),
+		component: ViewList,
+		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
+	},
+];

package/src/dataviews.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Pagination from './pagination';
+import ViewActions from './view-actions';
+import Filters from './filters';
+import Search from './search';
+import { VIEW_LAYOUTS } from './constants';
+
+export default function DataViews( {
+	view,
+	onChangeView,
+	fields,
+	search = true,
+	searchLabel = undefined,
+	actions,
+	data,
+	getItemId,
+	isLoading = false,
+	paginationInfo,
+	supportedLayouts,
+	onSelectionChange,
+	deferredRendering,
+} ) {
+	const [ selection, setSelection ] = useState( [] );
+
+	const onSetSelection = ( items ) => {
+		setSelection( items.map( ( item ) => item.id ) );
+		onSelectionChange( items );
+	};
+
+	const ViewComponent = VIEW_LAYOUTS.find(
+		( v ) => v.type === view.type
+	).component;
+	const _fields = useMemo( () => {
+		return fields.map( ( field ) => ( {
+			...field,
+			render: field.render || field.getValue,
+		} ) );
+	}, [ fields ] );
+	return (
+		<div className="dataviews-wrapper">
+			<VStack spacing={ 0 } justify="flex-start">
+				<HStack
+					alignment="flex-start"
+					className="dataviews__filters-view-actions"
+				>
+					<HStack justify="start" wrap>
+						{ search && (
+							<Search
+								label={ searchLabel }
+								view={ view }
+								onChangeView={ onChangeView }
+							/>
+						) }
+						<Filters
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					</HStack>
+					<ViewActions
+						fields={ fields }
+						view={ view }
+						onChangeView={ onChangeView }
+						supportedLayouts={ supportedLayouts }
+					/>
+				</HStack>
+				<ViewComponent
+					fields={ _fields }
+					view={ view }
+					onChangeView={ onChangeView }
+					paginationInfo={ paginationInfo }
+					actions={ actions }
+					data={ data }
+					getItemId={ getItemId }
+					isLoading={ isLoading }
+					onSelectionChange={ onSetSelection }
+					selection={ selection }
+					deferredRendering={ deferredRendering }
+				/>
+				<Pagination
+					view={ view }
+					onChangeView={ onChangeView }
+					paginationInfo={ paginationInfo }
+				/>
+			</VStack>
+		</div>
+	);
+}