Skip to content

Commit

Permalink
Add DataViews to Storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
@t-hamano
t-hamano committed Apr 26, 2024
1 parent ff01bcb commit 9533659
Show file tree
Hide file tree
Showing 5 changed files with 357 additions and 0 deletions.
30 changes: 30 additions & 0 deletions storybook/stories/dataviews/constants.js
View file
Original file line number Diff line number Diff line change
@@ -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' },
];
170 changes: 170 additions & 0 deletions storybook/stories/dataviews/data.js
View file
Original file line number Diff line number Diff line change
@@ -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;
89 changes: 89 additions & 0 deletions storybook/stories/dataviews/fields.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<img
src={ item.mediaUrl }
alt=""
style={ { maxWidth: '100%' } }
/>
);
},
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;
52 changes: 52 additions & 0 deletions storybook/stories/dataviews/index.story.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<DataViews
{ ...args }
data={ filteredData }
fields={ fields }
view={ view }
onChangeView={ setView }
paginationInfo={ paginationInfo }
/>
);
};

export const Default = Template.bind( {} );
Default.args = {
data: defaultData,
fields: defaultFields,
view: defaultView,
};
16 changes: 16 additions & 0 deletions storybook/stories/dataviews/view.js
View file
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 9533659

Please sign in to comment.