From 95336591eefdd0551acb051d6ff72eac8dbd5c67 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 25 Apr 2024 19:49:03 +0900 Subject: [PATCH] Add DataViews to Storybook --- storybook/stories/dataviews/constants.js | 30 ++++ storybook/stories/dataviews/data.js | 170 +++++++++++++++++++++ storybook/stories/dataviews/fields.js | 89 +++++++++++ storybook/stories/dataviews/index.story.js | 52 +++++++ storybook/stories/dataviews/view.js | 16 ++ 5 files changed, 357 insertions(+) create mode 100644 storybook/stories/dataviews/constants.js create mode 100644 storybook/stories/dataviews/data.js create mode 100644 storybook/stories/dataviews/fields.js create mode 100644 storybook/stories/dataviews/index.story.js create mode 100644 storybook/stories/dataviews/view.js diff --git a/storybook/stories/dataviews/constants.js b/storybook/stories/dataviews/constants.js new file mode 100644 index 0000000000000..928bd5d6427b1 --- /dev/null +++ b/storybook/stories/dataviews/constants.js @@ -0,0 +1,30 @@ +export const ROLES = [ + { + value: 'administrator', + label: 'Administrator', + }, + { + value: 'editor', + label: 'Editor', + }, + { + value: 'author', + label: 'Author', + }, + { + value: 'contributor', + label: 'Contributor', + }, + { + value: 'subscriber', + label: 'Subscriber', + }, +]; + +export const POST_STATUSES = [ + { value: 'draft', label: 'Draft' }, + { value: 'scheduled', label: 'Scheduled' }, + { value: 'private', label: 'Private' }, + { value: 'published', label: 'Published' }, + { value: 'trash', label: 'Trash' }, +]; diff --git a/storybook/stories/dataviews/data.js b/storybook/stories/dataviews/data.js new file mode 100644 index 0000000000000..1fc29a617fc9e --- /dev/null +++ b/storybook/stories/dataviews/data.js @@ -0,0 +1,170 @@ +const data = [ + { + id: 1, + title: 'Spectral Adventure', + author: 'author', + status: 'scheduled', + date: '2023-11-17T06:58:21.104Z', + mediaUrl: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg', + }, + { + id: 2, + title: 'Mystical Voyage', + author: 'contributor', + status: 'scheduled', + date: '2024-01-29T02:13:02.438Z', + mediaUrl: 'https://s.w.org/images/core/5.3/Glacial_lakes%2C_Bhutan.jpg', + }, + { + id: 3, + title: 'Ethereal Dreams', + author: 'editor', + status: 'private', + date: '2022-10-05T12:46:38.999Z', + mediaUrl: + 'https://s.w.org/images/core/5.3/Sediment_off_the_Yucatan_Peninsula.jpg', + }, + { + id: 4, + title: 'Celestial Chronicle', + author: 'administrator', + status: 'published', + date: '2022-03-30T18:22:13.832Z', + mediaUrl: 'https://s.w.org/images/core/5.3/MtBlanc1.jpg', + }, + { + id: 5, + title: 'Serene Odyssey', + author: 'subscriber', + status: 'scheduled', + date: '2023-05-19T03:07:57.642Z', + mediaUrl: + 'https://s.w.org/images/core/5.3/Biologia_Centrali-Americana_-_Cantorchilus_semibadius_1902.jpg', + }, + { + id: 6, + title: 'Whispering Quest', + author: 'contributor', + status: 'draft', + date: '2020-12-28T11:54:46.013Z', + mediaUrl: 'https://s.w.org/images/core/5.5/don-quixote-06.jpg', + }, + { + id: 7, + title: 'Enigmatic Exploration', + author: 'editor', + status: 'scheduled', + date: '2023-09-12T17:30:33.922Z', + mediaUrl: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg', + }, + { + id: 8, + title: 'Surreal Adventure', + author: 'editor', + status: 'trash', + date: '2021-07-21T08:09:49.177Z', + mediaUrl: 'https://s.w.org/images/core/5.3/Glacial_lakes%2C_Bhutan.jpg', + }, + { + id: 9, + title: 'Luminous Journey', + author: 'author', + status: 'draft', + date: '2020-11-06T21:14:32.553Z', + mediaUrl: + 'https://s.w.org/images/core/5.3/Sediment_off_the_Yucatan_Peninsula.jpg', + }, + { + id: 10, + title: 'Infinite Voyage', + author: 'subscriber', + status: 'published', + date: '2023-03-08T07:41:59.730Z', + mediaUrl: 'https://s.w.org/images/core/5.3/MtBlanc1.jpg', + }, + { + id: 11, + title: 'Chronicle of Dreams', + author: 'contributor', + status: 'private', + date: '2024-05-10T22:25:37.779Z', + mediaUrl: + 'https://s.w.org/images/core/5.3/Biologia_Centrali-Americana_-_Cantorchilus_semibadius_1902.jpg', + }, + { + id: 12, + title: 'Whispering Odyssey', + author: 'editor', + status: 'scheduled', + date: '2023-02-14T19:33:06.342Z', + mediaUrl: 'https://s.w.org/images/core/5.5/don-quixote-06.jpg', + }, + { + id: 13, + title: 'Ethereal Adventure', + author: 'administrator', + status: 'scheduled', + date: '2023-08-03T14:48:59.788Z', + mediaUrl: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg', + }, + { + id: 14, + title: 'Celestial Journey', + author: 'contributor', + status: 'published', + date: '2022-06-27T01:55:22.650Z', + mediaUrl: 'https://s.w.org/images/core/5.3/Glacial_lakes%2C_Bhutan.jpg', + }, + { + id: 15, + title: 'Spectral Voyage', + author: 'editor', + status: 'private', + date: '2022-04-14T09:36:45.399Z', + mediaUrl: + 'https://s.w.org/images/core/5.3/Sediment_off_the_Yucatan_Peninsula.jpg', + }, + { + id: 16, + title: 'Mystical Dreams', + author: 'author', + status: 'draft', + date: '2020-09-18T05:08:11.687Z', + mediaUrl: 'https://s.w.org/images/core/5.3/MtBlanc1.jpg', + }, + { + id: 17, + title: 'Serene Chronicle', + author: 'subscriber', + status: 'trash', + date: '2021-12-09T15:22:53.102Z', + mediaUrl: + 'https://s.w.org/images/core/5.3/Biologia_Centrali-Americana_-_Cantorchilus_semibadius_1902.jpg', + }, + { + id: 18, + title: 'Whispering Exploration', + author: 'editor', + status: 'scheduled', + date: '2023-10-22T10:17:28.981Z', + mediaUrl: 'https://s.w.org/images/core/5.5/don-quixote-06.jpg', + }, + { + id: 19, + title: 'Enigmatic Adventure', + author: 'administrator', + status: 'scheduled', + date: '2023-06-14T20:49:41.726Z', + mediaUrl: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg', + }, + { + id: 20, + title: 'Surreal Quest', + author: 'contributor', + status: 'published', + date: '2022-01-05T13:37:30.898Z', + mediaUrl: 'https://s.w.org/images/core/5.3/Glacial_lakes%2C_Bhutan.jpg', + }, +]; + +export default data; diff --git a/storybook/stories/dataviews/fields.js b/storybook/stories/dataviews/fields.js new file mode 100644 index 0000000000000..fe66fd08b9f14 --- /dev/null +++ b/storybook/stories/dataviews/fields.js @@ -0,0 +1,89 @@ +/** + * WordPress dependencies + */ +import { dateI18n } from '@wordpress/date'; + +/** + * Internal dependencies + */ +import { ROLES, POST_STATUSES } from './constants'; + +const fields = [ + { + id: 'featured-image', + header: 'Featured Image', + render: ( { item } ) => { + if ( ! item.mediaUrl ) { + return null; + } + return ( + + ); + }, + enableSorting: false, + }, + { + id: 'title', + header: 'Title', + enableHiding: false, + enableGlobalSearch: true, + }, + { + id: 'date', + header: 'Date', + render: ( { item } ) => { + return dateI18n( 'Y-m-d H:i', item.date ); + }, + }, + { + id: 'author', + header: 'Author', + render: ( { item } ) => { + return ( + ROLES.find( ( { value } ) => value === item.author )?.label ?? + item.author + ); + }, + getValue: ( { item } ) => { + return ( + ROLES.find( ( { value } ) => value === item.author )?.value ?? + item.author + ); + }, + elements: ROLES.map( ( { value, label } ) => ( { + value, + label, + } ) ), + filterBy: { + operators: [ 'is', 'isNot' ], + }, + enableSorting: false, + }, + { + id: 'status', + header: 'Status', + render: ( { item } ) => { + return ( + POST_STATUSES.find( ( { value } ) => value === item.status ) + ?.label ?? item.status + ); + }, + getValue: ( { item } ) => { + return ( + POST_STATUSES.find( ( { value } ) => value === item.status ) + ?.value ?? item.status + ); + }, + elements: POST_STATUSES, + filterBy: { + operators: [ 'isAny' ], + }, + enableSorting: false, + }, +]; + +export default fields; diff --git a/storybook/stories/dataviews/index.story.js b/storybook/stories/dataviews/index.story.js new file mode 100644 index 0000000000000..1fbf8d89c01f5 --- /dev/null +++ b/storybook/stories/dataviews/index.story.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { useMemo, useState } from '@wordpress/element'; +import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews'; + +/** + * Internal dependencies + */ +import defaultData from './data'; +import defaultFields from './fields'; +import defaultView from './view'; + +const meta = { + title: 'Playground/DataViews', + component: DataViews, + argTypes: { + search: { control: 'boolean', default: true }, + searchLabel: { control: 'text' }, + isLoading: { control: 'boolean' }, + }, + parameters: { + controls: { expanded: true }, + sourceLink: 'storybook/stories/dataviews', + }, +}; +export default meta; + +const Template = ( { onChange, data, view: _view, fields, ...args } ) => { + const [ view, setView ] = useState( _view ); + const { data: filteredData, paginationInfo } = useMemo( () => { + return filterSortAndPaginate( data, view, fields ); + }, [ data, view, fields ] ); + + return ( + + ); +}; + +export const Default = Template.bind( {} ); +Default.args = { + data: defaultData, + fields: defaultFields, + view: defaultView, +}; diff --git a/storybook/stories/dataviews/view.js b/storybook/stories/dataviews/view.js new file mode 100644 index 0000000000000..d27c2810115d7 --- /dev/null +++ b/storybook/stories/dataviews/view.js @@ -0,0 +1,16 @@ +const view = { + type: 'table', + filters: [], + page: 1, + perPage: 5, + sort: { + field: 'date', + direction: 'desc', + }, + hiddenFields: [], + layout: { + mediaField: 'featured-image', + }, +}; + +export default view;