From c8809f9f8db9fc383a2a3f85b3d3d7fe89d8d01c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 2 Sep 2024 17:59:26 +0200 Subject: [PATCH 1/3] Add story about combining fields --- .../components/dataviews/stories/fixtures.js | 411 +++++++++++++++++- .../dataviews/stories/index.story.js | 61 ++- 2 files changed, 467 insertions(+), 5 deletions(-) diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.js b/packages/dataviews/src/components/dataviews/stories/fixtures.js index 14c9718a50d76..c1204679324a9 100644 --- a/packages/dataviews/src/components/dataviews/stories/fixtures.js +++ b/packages/dataviews/src/components/dataviews/stories/fixtures.js @@ -127,12 +127,421 @@ export const data = [ }, ]; +export const themeData = [ + { + slug: 'twentyeleven', + name: 'Twenty Eleven', + description: + 'The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background -- then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats.', + requires: '3.2', + tested: '6.6', + tags: [ + 'blog', + 'one-column', + 'two-columns', + 'left-sidebar', + 'right-sidebar', + 'custom-background', + 'custom-colors', + 'custom-header', + 'custom-menu', + 'editor-style', + 'featured-image-header', + 'featured-images', + 'flexible-header', + 'footer-widgets', + 'full-width-template', + 'microformats', + 'post-formats', + 'rtl-language-support', + 'sticky-post', + 'theme-options', + 'translation-ready', + 'block-patterns', + ], + }, + { + slug: 'twentyfifteen', + name: 'Twenty Fifteen', + description: + "Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.", + requires: '4.1', + tested: '6.6', + tags: [ + 'blog', + 'two-columns', + 'left-sidebar', + 'accessibility-ready', + 'custom-background', + 'custom-colors', + 'custom-header', + 'custom-logo', + 'custom-menu', + 'editor-style', + 'featured-images', + 'microformats', + 'post-formats', + 'rtl-language-support', + 'sticky-post', + 'threaded-comments', + 'translation-ready', + 'block-patterns', + ], + }, + { + slug: 'twentyfourteen', + name: 'Twenty Fourteen', + description: + "In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.", + requires: '3.6', + tested: '6.6', + tags: [ + 'blog', + 'news', + 'two-columns', + 'three-columns', + 'left-sidebar', + 'right-sidebar', + 'custom-background', + 'custom-header', + 'custom-menu', + 'editor-style', + 'featured-images', + 'flexible-header', + 'footer-widgets', + 'full-width-template', + 'microformats', + 'post-formats', + 'rtl-language-support', + 'sticky-post', + 'theme-options', + 'translation-ready', + 'accessibility-ready', + 'block-patterns', + ], + }, + { + slug: 'twentynineteen', + name: 'Twenty Nineteen', + description: + "Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.", + requires: '4.7', + tested: '6.6', + tags: [ + 'one-column', + 'accessibility-ready', + 'custom-colors', + 'custom-menu', + 'custom-logo', + 'editor-style', + 'featured-images', + 'footer-widgets', + 'rtl-language-support', + 'sticky-post', + 'threaded-comments', + 'translation-ready', + 'block-patterns', + ], + }, + { + slug: 'twentyseventeen', + name: 'Twenty Seventeen', + description: + 'Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.', + requires: '4.7', + tested: '6.6', + tags: [ + 'one-column', + 'two-columns', + 'right-sidebar', + 'flexible-header', + 'accessibility-ready', + 'custom-colors', + 'custom-header', + 'custom-menu', + 'custom-logo', + 'editor-style', + 'featured-images', + 'footer-widgets', + 'post-formats', + 'rtl-language-support', + 'sticky-post', + 'theme-options', + 'threaded-comments', + 'translation-ready', + 'block-patterns', + ], + }, + { + slug: 'twentysixteen', + name: 'Twenty Sixteen', + description: + 'Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.', + requires: '4.4', + tested: '6.6', + tags: [ + 'one-column', + 'two-columns', + 'right-sidebar', + 'accessibility-ready', + 'custom-background', + 'custom-colors', + 'custom-header', + 'custom-menu', + 'editor-style', + 'featured-images', + 'flexible-header', + 'microformats', + 'post-formats', + 'rtl-language-support', + 'sticky-post', + 'threaded-comments', + 'translation-ready', + 'blog', + 'block-patterns', + ], + }, + { + slug: 'twentyten', + name: 'Twenty Ten', + description: + 'The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar.', + requires: '5.6', + tested: '6.6', + tags: [ + 'blog', + 'two-columns', + 'custom-header', + 'custom-background', + 'threaded-comments', + 'sticky-post', + 'translation-ready', + 'microformats', + 'rtl-language-support', + 'editor-style', + 'custom-menu', + 'flexible-header', + 'featured-images', + 'footer-widgets', + 'featured-image-header', + 'block-patterns', + ], + }, + { + slug: 'twentythirteen', + name: 'Twenty Thirteen', + description: + 'The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.', + requires: '3.6', + tested: '6.6', + tags: [ + 'blog', + 'one-column', + 'two-columns', + 'right-sidebar', + 'custom-header', + 'custom-menu', + 'editor-style', + 'featured-images', + 'footer-widgets', + 'microformats', + 'post-formats', + 'rtl-language-support', + 'sticky-post', + 'translation-ready', + 'accessibility-ready', + 'block-patterns', + ], + }, + { + slug: 'twentytwelve', + name: 'Twenty Twelve', + description: + 'The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.', + requires: '3.5', + tested: '6.6', + tags: [ + 'blog', + 'one-column', + 'two-columns', + 'right-sidebar', + 'custom-background', + 'custom-header', + 'custom-menu', + 'editor-style', + 'featured-images', + 'flexible-header', + 'footer-widgets', + 'full-width-template', + 'microformats', + 'post-formats', + 'rtl-language-support', + 'sticky-post', + 'theme-options', + 'translation-ready', + 'block-patterns', + ], + }, + { + slug: 'twentytwenty', + name: 'Twenty Twenty', + description: + 'Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.', + requires: '4.7', + tested: '6.6', + tags: [ + 'blog', + 'one-column', + 'custom-background', + 'custom-colors', + 'custom-logo', + 'custom-menu', + 'editor-style', + 'featured-images', + 'footer-widgets', + 'full-width-template', + 'rtl-language-support', + 'sticky-post', + 'theme-options', + 'threaded-comments', + 'translation-ready', + 'block-patterns', + 'block-styles', + 'wide-blocks', + 'accessibility-ready', + ], + }, + { + slug: 'twentytwentyfour', + name: 'Twenty Twenty-Four', + description: + 'Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.', + requires: '6.4', + tested: '6.6', + tags: [ + 'one-column', + 'custom-colors', + 'custom-menu', + 'custom-logo', + 'editor-style', + 'featured-images', + 'full-site-editing', + 'block-patterns', + 'rtl-language-support', + 'sticky-post', + 'threaded-comments', + 'translation-ready', + 'wide-blocks', + 'block-styles', + 'style-variations', + 'accessibility-ready', + 'blog', + 'portfolio', + 'news', + ], + }, + { + slug: 'twentytwentyone', + name: 'Twenty Twenty-One', + description: + 'Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.', + requires: '5.3', + tested: '6.6', + tags: [ + 'one-column', + 'accessibility-ready', + 'custom-colors', + 'custom-menu', + 'custom-logo', + 'editor-style', + 'featured-images', + 'footer-widgets', + 'block-patterns', + 'rtl-language-support', + 'sticky-post', + 'threaded-comments', + 'translation-ready', + 'blog', + 'portfolio', + ], + }, + { + slug: 'twentytwentythree', + name: 'Twenty Twenty-Three', + description: + 'Twenty Twenty-Three is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse style variations created by members of the WordPress community. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.', + requires: '6.1', + tested: '6.6', + tags: [ + 'one-column', + 'custom-colors', + 'custom-menu', + 'custom-logo', + 'editor-style', + 'featured-images', + 'full-site-editing', + 'block-patterns', + 'rtl-language-support', + 'sticky-post', + 'threaded-comments', + 'translation-ready', + 'wide-blocks', + 'block-styles', + 'style-variations', + 'accessibility-ready', + 'blog', + 'portfolio', + 'news', + ], + }, + { + slug: 'twentytwentytwo', + name: 'Twenty Twenty-Two', + description: + 'Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.', + requires: '5.9', + tested: '6.6', + tags: [ + 'one-column', + 'custom-colors', + 'custom-menu', + 'custom-logo', + 'editor-style', + 'featured-images', + 'full-site-editing', + 'block-patterns', + 'rtl-language-support', + 'sticky-post', + 'threaded-comments', + 'style-variations', + 'wide-blocks', + 'block-styles', + 'accessibility-ready', + 'blog', + 'portfolio', + 'news', + ], + }, +]; + +export const themeFields = [ + { id: 'slug', label: 'Slug' }, + { id: 'name', label: 'Name' }, + { id: 'description', label: 'Description' }, + { id: 'requires', label: 'Requires at least' }, + { id: 'tested', label: 'Tested up to' }, + { + id: 'tags', + label: 'Tags', + render: ( { item } ) => item.tags.join( ', ' ), + }, +]; + export const DEFAULT_VIEW = { type: LAYOUT_TABLE, search: '', page: 1, perPage: 10, - fields: [ 'title', 'description', 'categories' ], layout: {}, filters: [], }; diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.js b/packages/dataviews/src/components/dataviews/stories/index.story.js index 75fb0786ecfee..f3d95a1a6386d 100644 --- a/packages/dataviews/src/components/dataviews/stories/index.story.js +++ b/packages/dataviews/src/components/dataviews/stories/index.story.js @@ -7,7 +7,14 @@ import { useState, useMemo } from '@wordpress/element'; * Internal dependencies */ import DataViews from '../index'; -import { DEFAULT_VIEW, actions, data, fields } from './fixtures'; +import { + DEFAULT_VIEW, + actions, + data, + fields, + themeData, + themeFields, +} from './fixtures'; import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants'; import { filterSortAndPaginate } from '../../../filter-and-sort-data-view'; @@ -18,7 +25,10 @@ const meta = { export default meta; export const Default = ( props ) => { - const [ view, setView ] = useState( DEFAULT_VIEW ); + const [ view, setView ] = useState( { + ...DEFAULT_VIEW, + fields: [ 'title', 'description', 'categories' ], + } ); const { data: shownData, paginationInfo } = useMemo( () => { return filterSortAndPaginate( data, view, fields ); }, [ view ] ); @@ -35,7 +45,10 @@ export const Default = ( props ) => { }; export const Empty = ( props ) => { - const [ view, setView ] = useState( DEFAULT_VIEW ); + const [ view, setView ] = useState( { + ...DEFAULT_VIEW, + fields: [ 'title', 'description', 'categories' ], + } ); return ( { }; export const FieldsNoSortableNoHidable = ( props ) => { - const [ view, setView ] = useState( DEFAULT_VIEW ); + const [ view, setView ] = useState( { + ...DEFAULT_VIEW, + fields: [ 'title', 'description', 'categories' ], + } ); const { data: shownData, paginationInfo } = useMemo( () => { return filterSortAndPaginate( data, view, fields ); }, [ view ] ); @@ -73,6 +89,43 @@ export const FieldsNoSortableNoHidable = ( props ) => { ); }; +export const CombinedFields = ( props ) => { + const [ view, setView ] = useState( { + ...DEFAULT_VIEW, + fields: [ 'theme', 'requires', 'tested' ], + } ); + const { data: shownData, paginationInfo } = useMemo( () => { + return filterSortAndPaginate( themeData, view, themeFields ); + }, [ view ] ); + + const defaultLayouts = { + table: { + layout: { + combinedFields: [ + { + id: 'theme', + header: 'Theme', + children: [ 'name', 'description' ], + direction: 'vertical', + }, + ], + }, + }, + }; + + return ( + + ); +}; + Default.args = { actions, defaultLayouts: { From c7f372e6ff246708d3de7e7bd5461889d8fee56e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 3 Sep 2024 10:52:21 +0200 Subject: [PATCH 2/3] Type and fix story --- .../src/components/dataviews/index.tsx | 2 +- .../stories/{fixtures.js => fixtures.tsx} | 34 ++++- .../{index.story.js => index.story.tsx} | 130 +++++++++--------- 3 files changed, 93 insertions(+), 73 deletions(-) rename packages/dataviews/src/components/dataviews/stories/{fixtures.js => fixtures.tsx} (97%) rename packages/dataviews/src/components/dataviews/stories/{index.story.js => index.story.tsx} (61%) diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx index da60ab15ecade..7d4d470e0492a 100644 --- a/packages/dataviews/src/components/dataviews/index.tsx +++ b/packages/dataviews/src/components/dataviews/index.tsx @@ -28,7 +28,7 @@ import type { SelectionOrUpdater } from '../../private-types'; type ItemWithId = { id: string }; -type DataViewsProps< Item > = { +export type DataViewsProps< Item > = { view: View; onChangeView: ( view: View ) => void; fields: Field< Item >[]; diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.js b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx similarity index 97% rename from packages/dataviews/src/components/dataviews/stories/fixtures.js rename to packages/dataviews/src/components/dataviews/stories/fixtures.tsx index c1204679324a9..2ab02ec728e5e 100644 --- a/packages/dataviews/src/components/dataviews/stories/fixtures.js +++ b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx @@ -12,9 +12,29 @@ import { /** * Internal dependencies */ -import { LAYOUT_TABLE } from '../../../constants'; +import type { Field, Action } from '../../../types'; -export const data = [ +export type Theme = { + slug: string; + name: string; + description: string; + requires: string; + tested: string; + tags: string[]; +}; + +export type SpaceObject = { + id: number; + title: string; + description: string; + image: string; + type: string; + categories: string[]; + satellites: number; + date: string; +}; + +export const data: SpaceObject[] = [ { id: 1, title: 'Apollo', @@ -127,7 +147,7 @@ export const data = [ }, ]; -export const themeData = [ +export const themeData: Theme[] = [ { slug: 'twentyeleven', name: 'Twenty Eleven', @@ -524,7 +544,7 @@ export const themeData = [ }, ]; -export const themeFields = [ +export const themeFields: Field< Theme >[] = [ { id: 'slug', label: 'Slug' }, { id: 'name', label: 'Name' }, { id: 'description', label: 'Description' }, @@ -538,7 +558,7 @@ export const themeFields = [ ]; export const DEFAULT_VIEW = { - type: LAYOUT_TABLE, + type: 'table' as const, search: '', page: 1, perPage: 10, @@ -546,7 +566,7 @@ export const DEFAULT_VIEW = { filters: [], }; -export const actions = [ +export const actions: Action< SpaceObject >[] = [ { id: 'delete', label: 'Delete item', @@ -586,7 +606,7 @@ export const actions = [ }, ]; -export const fields = [ +export const fields: Field< SpaceObject >[] = [ { label: 'Image', id: 'image', diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.js b/packages/dataviews/src/components/dataviews/stories/index.story.tsx similarity index 61% rename from packages/dataviews/src/components/dataviews/stories/index.story.js rename to packages/dataviews/src/components/dataviews/stories/index.story.tsx index f3d95a1a6386d..645c6d7ddcd92 100644 --- a/packages/dataviews/src/components/dataviews/stories/index.story.js +++ b/packages/dataviews/src/components/dataviews/stories/index.story.tsx @@ -17,6 +17,7 @@ import { } from './fixtures'; import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants'; import { filterSortAndPaginate } from '../../../filter-and-sort-data-view'; +import type { View } from '../../../types'; const meta = { title: 'DataViews/DataViews', @@ -24,8 +25,42 @@ const meta = { }; export default meta; -export const Default = ( props ) => { - const [ view, setView ] = useState( { +const defaultLayouts = { + [ LAYOUT_TABLE ]: { + layout: { + primaryField: 'title', + styles: { + image: { + width: 50, + }, + title: { + maxWidth: 400, + }, + type: { + maxWidth: 400, + }, + description: { + maxWidth: 200, + }, + }, + }, + }, + [ LAYOUT_GRID ]: { + layout: { + mediaField: 'image', + primaryField: 'title', + }, + }, + [ LAYOUT_LIST ]: { + layout: { + mediaField: 'image', + primaryField: 'title', + }, + }, +}; + +export const Default = () => { + const [ view, setView ] = useState< View >( { ...DEFAULT_VIEW, fields: [ 'title', 'description', 'categories' ], } ); @@ -34,36 +69,40 @@ export const Default = ( props ) => { }, [ view ] ); return ( item.id.toString() } paginationInfo={ paginationInfo } data={ shownData } view={ view } fields={ fields } onChangeView={ setView } + actions={ actions } + defaultLayouts={ defaultLayouts } /> ); }; -export const Empty = ( props ) => { - const [ view, setView ] = useState( { +export const Empty = () => { + const [ view, setView ] = useState< View >( { ...DEFAULT_VIEW, fields: [ 'title', 'description', 'categories' ], } ); return ( item.id.toString() } paginationInfo={ { totalItems: 0, totalPages: 0 } } data={ [] } view={ view } fields={ fields } onChangeView={ setView } + actions={ actions } + defaultLayouts={ defaultLayouts } /> ); }; -export const FieldsNoSortableNoHidable = ( props ) => { - const [ view, setView ] = useState( { +export const FieldsNoSortableNoHidable = () => { + const [ view, setView ] = useState< View >( { ...DEFAULT_VIEW, fields: [ 'title', 'description', 'categories' ], } ); @@ -79,86 +118,47 @@ export const FieldsNoSortableNoHidable = ( props ) => { return ( item.id.toString() } paginationInfo={ paginationInfo } data={ shownData } view={ view } fields={ _fields } onChangeView={ setView } + defaultLayouts={ { + table: {}, + } } /> ); }; -export const CombinedFields = ( props ) => { - const [ view, setView ] = useState( { +export const CombinedFields = () => { + const [ view, setView ] = useState< View >( { ...DEFAULT_VIEW, fields: [ 'theme', 'requires', 'tested' ], + layout: { + combinedFields: [ + { + id: 'theme', + label: 'Theme', + children: [ 'name', 'description' ], + direction: 'vertical', + }, + ], + }, } ); const { data: shownData, paginationInfo } = useMemo( () => { return filterSortAndPaginate( themeData, view, themeFields ); }, [ view ] ); - const defaultLayouts = { - table: { - layout: { - combinedFields: [ - { - id: 'theme', - header: 'Theme', - children: [ 'name', 'description' ], - direction: 'vertical', - }, - ], - }, - }, - }; - return ( item.name } paginationInfo={ paginationInfo } data={ shownData } view={ view } fields={ themeFields } onChangeView={ setView } - defaultLayouts={ defaultLayouts } + defaultLayouts={ { table: {} } } /> ); }; - -Default.args = { - actions, - defaultLayouts: { - [ LAYOUT_TABLE ]: { - layout: { - primaryField: 'title', - styles: { - image: { - width: 50, - }, - title: { - maxWidth: 400, - }, - type: { - maxWidth: 400, - }, - description: { - maxWidth: 200, - }, - }, - }, - }, - [ LAYOUT_GRID ]: { - layout: { - mediaField: 'image', - primaryField: 'title', - }, - }, - [ LAYOUT_LIST ]: { - layout: { - mediaField: 'image', - primaryField: 'title', - }, - }, - }, -}; From 5140b862ca00802c046a1c559e2be9b943c54187 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 3 Sep 2024 10:54:50 +0200 Subject: [PATCH 3/3] Remove temporary change --- packages/dataviews/src/components/dataviews/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx index 7d4d470e0492a..da60ab15ecade 100644 --- a/packages/dataviews/src/components/dataviews/index.tsx +++ b/packages/dataviews/src/components/dataviews/index.tsx @@ -28,7 +28,7 @@ import type { SelectionOrUpdater } from '../../private-types'; type ItemWithId = { id: string }; -export type DataViewsProps< Item > = { +type DataViewsProps< Item > = { view: View; onChangeView: ( view: View ) => void; fields: Field< Item >[];