DataViews: Add story (#56761)

packages/dataviews/src/stories/fixtures.js

@@ -0,0 +1,126 @@
+/**
+ * WordPress dependencies
+ */
+import { trash } from '@wordpress/icons';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { LAYOUT_TABLE } from '../constants';
+
+export const data = [
+	{
+		id: 1,
+		title: 'Apollo',
+		description: 'Apollo description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 2,
+		title: 'Space',
+		description: 'Space description',
+		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
+	},
+	{
+		id: 3,
+		title: 'NASA',
+		description: 'NASA photo',
+		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
+	},
+	{
+		id: 4,
+		title: 'Neptune',
+		description: 'Neptune description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 5,
+		title: 'Mercury',
+		description: 'Mercury description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 6,
+		title: 'Venus',
+		description: 'Venus description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 7,
+		title: 'Earth',
+		description: 'Earth description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 8,
+		title: 'Mars',
+		description: 'Mars description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 9,
+		title: 'Jupiter',
+		description: 'Jupiter description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 10,
+		title: 'Saturn',
+		description: 'Saturn description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 11,
+		title: 'Uranus',
+		description: 'Uranus description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+];
+
+export const DEFAULT_VIEW = {
+	type: LAYOUT_TABLE,
+	search: '',
+	page: 1,
+	perPage: 10,
+	hiddenFields: [ 'image' ],
+	layout: {},
+	filters: [],
+};
+
+export const actions = [
+	{
+		id: 'delete',
+		label: 'Delete item',
+		isPrimary: true,
+		icon: trash,
+		hideModalHeader: true,
+		RenderModal: ( { item, closeModal } ) => {
+			return (
+				<VStack spacing="5">
+					<Text>
+						{ `Are you sure you want to delete "${ item.title }"?` }
+					</Text>
+					<HStack justify="right">
+						<Button variant="tertiary" onClick={ closeModal }>
+							Cancel
+						</Button>
+						<Button variant="primary" onClick={ closeModal }>
+							Delete
+						</Button>
+					</HStack>
+				</VStack>
+			);
+		},
+	},
+	{
+		id: 'secondary',
+		label: 'Secondary action',
+		callback() {},
+	},
+];

packages/dataviews/src/stories/index.story.js

@@ -0,0 +1,137 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { DataViews, LAYOUT_GRID, LAYOUT_TABLE } from '../index';
+
+import { DEFAULT_VIEW, actions, data } from './fixtures';
+
+const meta = {
+	title: 'DataViews (Experimental)/DataViews',
+	component: DataViews,
+};
+export default meta;
+
+const defaultConfigPerViewType = {
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {
+		mediaField: 'image',
+		primaryField: 'title',
+	},
+};
+
+function normalizeSearchInput( input = '' ) {
+	return input.trim().toLowerCase();
+}
+
+const fields = [
+	{
+		header: 'Image',
+		id: 'image',
+		render: ( { item } ) => {
+			return (
+				<img src={ item.image } alt="" style={ { width: '100%' } } />
+			);
+		},
+		width: 50,
+		enableSorting: false,
+	},
+	{
+		header: 'Title',
+		id: 'title',
+		getValue: ( { item } ) => item.title,
+		maxWidth: 400,
+		enableHiding: false,
+	},
+	{
+		header: 'Description',
+		id: 'description',
+		getValue: ( { item } ) => item.description,
+		maxWidth: 200,
+		enableSorting: false,
+	},
+];
+
+export const Default = ( props ) => {
+	const [ view, setView ] = useState( DEFAULT_VIEW );
+	const { shownData, paginationInfo } = useMemo( () => {
+		let filteredData = [ ...data ];
+		// Handle global search.
+		if ( view.search ) {
+			const normalizedSearch = normalizeSearchInput( view.search );
+			filteredData = filteredData.filter( ( item ) => {
+				return [
+					normalizeSearchInput( item.title ),
+					normalizeSearchInput( item.description ),
+				].some( ( field ) => field.includes( normalizedSearch ) );
+			} );
+		}
+		// Handle sorting.
+		if ( view.sort ) {
+			const stringSortingFields = [ 'title' ];
+			const fieldId = view.sort.field;
+			if ( stringSortingFields.includes( fieldId ) ) {
+				const fieldToSort = fields.find( ( field ) => {
+					return field.id === fieldId;
+				} );
+				filteredData.sort( ( a, b ) => {
+					const valueA = fieldToSort.getValue( { item: a } ) ?? '';
+					const valueB = fieldToSort.getValue( { item: b } ) ?? '';
+					return view.sort.direction === 'asc'
+						? valueA.localeCompare( valueB )
+						: valueB.localeCompare( valueA );
+				} );
+			}
+		}
+		// Handle pagination.
+		const start = ( view.page - 1 ) * view.perPage;
+		const totalItems = filteredData?.length || 0;
+		filteredData = filteredData?.slice( start, start + view.perPage );
+		return {
+			shownData: filteredData,
+			paginationInfo: {
+				totalItems,
+				totalPages: Math.ceil( totalItems / view.perPage ),
+			},
+		};
+	}, [ view ] );
+	const onChangeView = useCallback(
+		( viewUpdater ) => {
+			let updatedView =
+				typeof viewUpdater === 'function'
+					? viewUpdater( view )
+					: viewUpdater;
+			if ( updatedView.type !== view.type ) {
+				updatedView = {
+					...updatedView,
+					layout: {
+						...defaultConfigPerViewType[ updatedView.type ],
+					},
+				};
+			}
+
+			setView( updatedView );
+		},
+		[ view, setView ]
+	);
+	return (
+		<DataViews
+			{ ...props }
+			paginationInfo={ paginationInfo }
+			data={ shownData }
+			view={ view }
+			fields={ fields }
+			onChangeView={ onChangeView }
+		/>
+	);
+};
+Default.args = {
+	actions,
+	getItemId: ( item ) => item.id,
+	isLoading: false,
+	supportedLayouts: [ LAYOUT_TABLE, LAYOUT_GRID ],
+};

packages/dataviews/src/style.scss

@@ -3,6 +3,7 @@
 	height: calc(100% - #{$grid-unit-40} * 2);
 	overflow: auto;
 	padding: $grid-unit-40 $grid-unit-40 0;
+	box-sizing: border-box;
 
 	> div {
 		min-height: 100%;
@@ -100,7 +101,7 @@
 		}
 	}
 
-	.dataviews-view-grid__title {
+	.dataviews-view-grid__primary-field {
 		min-height: $grid-unit-30;
 
 		a {

packages/dataviews/src/view-grid.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	FlexBlock,
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -45,10 +46,12 @@ export default function ViewGrid( { data, fields, view, actions, getItemId } ) {
 						{ mediaField?.render( { item, view } ) }
 					</div>
 					<HStack
-						className="dataviews-view-grid__title"
+						className="dataviews-view-grid__primary-field"
 						justify="space-between"
 					>
-						{ primaryField?.render( { item, view } ) }
+						<FlexBlock>
+							{ primaryField?.render( { item, view } ) }
+						</FlexBlock>
 						<ItemActions
 							item={ item }
 							actions={ actions }

storybook/main.js

@@ -33,6 +33,7 @@ const stories = [
 	'../packages/components/src/**/stories/*.story.@(js|tsx|mdx)',
 	'../packages/icons/src/**/stories/*.story.@(js|tsx|mdx)',
 	'../packages/edit-site/src/**/stories/*.story.@(js|tsx|mdx)',
+	'../packages/dataviews/src/**/stories/*.story.@(js|tsx|mdx)',
 ].filter( Boolean );
 
 module.exports = {

storybook/package-styles/config.js

@@ -11,6 +11,8 @@ import formatLibraryLtr from '../package-styles/format-library-ltr.lazy.scss';
 import formatLibraryRtl from '../package-styles/format-library-rtl.lazy.scss';
 import editSiteLtr from '../package-styles/edit-site-ltr.lazy.scss';
 import editSiteRtl from '../package-styles/edit-site-rtl.lazy.scss';
+import dataviewsLtr from '../package-styles/dataviews-ltr.lazy.scss';
+import dataviewsRtl from '../package-styles/dataviews-rtl.lazy.scss';
 
 /**
  * Stylesheets to lazy load when the story's context.componentId matches the
@@ -51,6 +53,11 @@ const CONFIG = [
 		ltr: [ componentsLtr ],
 		rtl: [ componentsRtl ],
 	},
+	{
+		componentIdMatcher: /^dataviews-/,
+		ltr: [ dataviewsLtr, componentsLtr ],
+		rtl: [ dataviewsRtl, componentsRtl ],
+	},
 ];
 
 export default CONFIG;

storybook/package-styles/dataviews-ltr.lazy.scss

@@ -0,0 +1 @@
+@import "../../packages/dataviews/build-style/style";

storybook/package-styles/dataviews-rtl.lazy.scss

@@ -0,0 +1 @@
+@import "../../packages/dataviews/build-style/style-rtl";