From af9ca20af5440be756087bda1cda1375ced11bd4 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 3 Sep 2024 16:09:54 +0200 Subject: [PATCH] [DataView]: Add Products View and Product Edit stories (#50999) * Product Editor: add storybook * fix storybook * Add products data views list * Add navigation on the left * Update edit site package * Fix styling * Add changelog * Add wp/icons package to syncpack exception list * Delete some unused stuff and address types * Add changelog * Remove un needed css * Remove dependency on edit-site package * WIP * WIP * WIP * Fix storybook build * Ignore storybook from version pinning * add slug stories * Add products data views list * Add navigation on the left * Update edit site package * Fix styling * Add changelog * Add wp/icons package to syncpack exception list * Delete some unused stuff and address types * Add changelog * Remove un needed css * Remove dependency on edit-site package * Fix custom status filters * Make sure page size works with view config * improve storybook * rename file * Add changefile(s) from automation for the following project(s): @woocommerce/product-editor * Remove use of canvasMode and navigation context as it is not needed * Remove wordpress/dom from syncpack * Add changefile(s) from automation for the following project(s): @woocommerce/product-editor, woocommerce * add edit-site style * Add changefile(s) from automation for the following project(s): @woocommerce/product-editor * remove not necessary file * address feedback * fix webpack configuration * fix lint errors --------- Co-authored-by: Lourens Schep Co-authored-by: Sam Seay Co-authored-by: github-actions --- .../changelog/50999-add-slug-control | 4 + .../src/products-app/product-form.stories.tsx | 67 + .../products-app/products-view.stories.tsx | 95 + .../utilites/product-data-view-data.tsx | 1578 +++++++++++++++++ pnpm-lock.yaml | 4 +- tools/storybook/.storybook/main.js | 2 +- tools/storybook/.storybook/preview-head.html | 6 +- tools/storybook/import-wp-css-storybook.sh | 5 +- tools/storybook/webpack.config.js | 3 - tools/storybook/wordpress/.gitkeep | 0 10 files changed, 1753 insertions(+), 11 deletions(-) create mode 100644 packages/js/product-editor/changelog/50999-add-slug-control create mode 100644 packages/js/product-editor/src/products-app/product-form.stories.tsx create mode 100644 packages/js/product-editor/src/products-app/products-view.stories.tsx create mode 100644 packages/js/product-editor/src/products-app/utilites/product-data-view-data.tsx delete mode 100644 tools/storybook/wordpress/.gitkeep diff --git a/packages/js/product-editor/changelog/50999-add-slug-control b/packages/js/product-editor/changelog/50999-add-slug-control new file mode 100644 index 00000000000..312a5077650 --- /dev/null +++ b/packages/js/product-editor/changelog/50999-add-slug-control @@ -0,0 +1,4 @@ +Significance: patch +Type: tweak +Comment: [DataView]: Add Products View and Product Edit stories. + diff --git a/packages/js/product-editor/src/products-app/product-form.stories.tsx b/packages/js/product-editor/src/products-app/product-form.stories.tsx new file mode 100644 index 00000000000..4428317c48b --- /dev/null +++ b/packages/js/product-editor/src/products-app/product-form.stories.tsx @@ -0,0 +1,67 @@ +/** + * External dependencies + */ +import { createElement, useState } from '@wordpress/element'; +import { DataForm, FieldType, Form } from '@wordpress/dataviews'; + +/** + * Internal dependencies + */ +import { + PRODUCT_FIELDS, + PRODUCT_FIELDS_KEYS, + PRODUCTS_DATA, +} from './utilites/product-data-view-data'; + +type ProductFormProps = { + productData: ( typeof PRODUCTS_DATA )[ 0 ]; + fields: { + label: string; + id: string; + type: FieldType; + options?: string[]; + Edit?: () => JSX.Element; + }[]; + form: Form; +}; + +// ProductForm component is just a wrapper around DataViews component. Currently, it is needed to experiment with the DataViews component in isolation. +// We expect that this component will be removed in the future, instead it will be used the component used in Products App. +const ProductForm = ( { fields, form, productData }: ProductFormProps ) => { + const [ product, setProduct ] = useState( productData ); + return ( + + setProduct( ( prev ) => ( { + ...prev, + ...newProduct, + } ) ) + } + /> + ); +}; + +export default { + title: 'Product App/Product Form', + component: ProductForm, +}; + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore - improve typing. +const Template = ( args: unknown ) => ; + +export const Default = Template.bind( {} ); + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore - Improve typing. +Default.args = { + productData: PRODUCTS_DATA[ 0 ], + fields: PRODUCT_FIELDS, + form: { + type: 'regular', + fields: PRODUCT_FIELDS_KEYS, + }, +}; diff --git a/packages/js/product-editor/src/products-app/products-view.stories.tsx b/packages/js/product-editor/src/products-app/products-view.stories.tsx new file mode 100644 index 00000000000..4875e1f5f48 --- /dev/null +++ b/packages/js/product-editor/src/products-app/products-view.stories.tsx @@ -0,0 +1,95 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; +import { + DataViews, + FieldType, + SupportedLayouts, + View, +} from '@wordpress/dataviews'; + +/** + * Internal dependencies + */ +import { + PRODUCT_FIELDS, + PRODUCT_FIELDS_KEYS, + PRODUCTS_DATA, +} from './utilites/product-data-view-data'; + +type ProductsViewProps = { + productsData: typeof PRODUCTS_DATA; + fields: { + label: string; + id: string; + type: FieldType; + options?: string[]; + }[]; + view: View; + onChangeView: ( newView: View ) => void; + paginationInfo: { + totalPages: number; + totalItems: number; + }; + defaultLayouts: SupportedLayouts; +}; + +// ProductView component is just a wrapper around DataViews component. Currently, it is needed to experiment with the DataViews component in isolation. +// We expect that this component will be removed in the future, instead it will be used the component used in Products App. +const ProductsView = ( { + fields, + view, + productsData, + paginationInfo, + defaultLayouts, + onChangeView, +}: ProductsViewProps ) => { + return ( + item.name } + /> + ); +}; + +export default { + title: 'Product App/Products View', + component: ProductsView, +}; + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore - Improve typing. +const Template = ( args: unknown ) => ; + +export const Default = Template.bind( {} ); +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore - Improve typing. +Default.args = { + productsData: PRODUCTS_DATA, + fields: PRODUCT_FIELDS, + view: { + type: 'list', + fields: PRODUCT_FIELDS_KEYS.filter( + ( field ) => + field !== 'downloads' && + field !== 'categories' && + field !== 'images' + ), + }, + defaultLayouts: { + list: { + type: 'list', + }, + }, + paginationInfo: { + totalPages: 1, + totalItems: 10, + }, + onChangeView: () => {}, +}; diff --git a/packages/js/product-editor/src/products-app/utilites/product-data-view-data.tsx b/packages/js/product-editor/src/products-app/utilites/product-data-view-data.tsx new file mode 100644 index 00000000000..3838f04ae4c --- /dev/null +++ b/packages/js/product-editor/src/products-app/utilites/product-data-view-data.tsx @@ -0,0 +1,1578 @@ +export const PRODUCTS_DATA = [ + { + id: 236, + name: 'Album', + slug: 'album', + permalink: 'http://locale.local/product/album/', + date_created: '2024-08-27T19:48:51', + date_created_gmt: '2024-08-27T19:48:51', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + type: 'simple', + status: 'publish', + featured: false, + catalog_visibility: 'visible', + description: + '

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed luctus, dui eu sagittis sodales, nulla nibh sagittis augue, vel porttitor diam enim non metus. Vestibulum aliquam augue neque. Phasellus tincidunt odio eget ullamcorper efficitur. Cras placerat ut turpis pellentesque vulputate. Nam sed consequat tortor. Curabitur finibus sapien dolor. Ut eleifend tellus nec erat pulvinar dignissim. Nam non arcu purus. Vivamus et massa massa.

\n', + short_description: '

This is a simple, virtual product.

\n', + sku: 'woo-album', + price: '15', + regular_price: '15', + sale_price: '', + date_on_sale_from: null, + date_on_sale_from_gmt: null, + date_on_sale_to: null, + date_on_sale_to_gmt: null, + on_sale: false, + purchasable: true, + total_sales: 0, + virtual: true, + downloadable: true, + downloads: [ + { + id: '3c60ffba-cab0-45c1-b201-b0e520da7006', + name: 'Single 1', + file: 'https://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2017/08/single.jpg', + }, + { + id: '70c30447-1da4-48f2-8233-51ff1a332010', + name: 'Single 2', + file: 'https://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2017/08/album.jpg', + }, + ], + download_limit: 1, + download_expiry: 1, + external_url: '', + button_text: '', + tax_status: 'taxable', + tax_class: '', + manage_stock: false, + stock_quantity: null, + backorders: 'no', + backorders_allowed: false, + backordered: false, + low_stock_amount: null, + sold_individually: false, + weight: '', + dimensions: { + length: '', + width: '', + height: '', + }, + shipping_required: false, + shipping_taxable: false, + shipping_class: '', + shipping_class_id: 0, + reviews_allowed: true, + average_rating: '0.00', + rating_count: 0, + upsell_ids: [], + cross_sell_ids: [], + parent_id: 0, + purchase_note: '', + categories: [ + { + id: 25, + name: 'Music', + slug: 'music', + }, + ], + tags: [], + images: [ + { + id: 133, + date_created: '2024-08-26T08:13:47', + date_created_gmt: '2024-08-26T08:13:47', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + src: 'http://locale.local/wp-content/uploads/2024/08/album-1.jpg', + name: 'album-1.jpg', + alt: '', + }, + ], + attributes: [], + default_attributes: [], + variations: [], + grouped_products: [], + menu_order: 0, + price_html: + '€ 15', + related_ids: [ 237 ], + meta_data: [ + { + id: 1763, + key: '_wpcom_is_markdown', + value: '1', + }, + ], + stock_status: 'instock', + has_options: false, + post_password: '', + global_unique_id: '', + class_list: { + '0': 'post-236', + '1': 'product', + '2': 'type-product', + '3': 'status-publish', + '4': 'has-post-thumbnail', + '6': 'product_cat-music', + '8': 'first', + '9': 'instock', + '10': 'downloadable', + '11': 'virtual', + '12': 'purchasable', + '13': 'product-type-simple', + }, + _links: { + self: [ + { + href: 'http://locale.local/wp-json/wc/v3/products/236', + targetHints: { + allow: [ 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ], + }, + }, + ], + collection: [ + { + href: 'http://locale.local/wp-json/wc/v3/products', + }, + ], + }, + }, + { + id: 237, + name: 'Single', + slug: 'single', + permalink: 'http://locale.local/product/single/', + date_created: '2024-08-27T19:48:51', + date_created_gmt: '2024-08-27T19:48:51', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + type: 'simple', + status: 'publish', + featured: false, + catalog_visibility: 'visible', + description: + '

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed luctus, dui eu sagittis sodales, nulla nibh sagittis augue, vel porttitor diam enim non metus. Vestibulum aliquam augue neque. Phasellus tincidunt odio eget ullamcorper efficitur. Cras placerat ut turpis pellentesque vulputate. Nam sed consequat tortor. Curabitur finibus sapien dolor. Ut eleifend tellus nec erat pulvinar dignissim. Nam non arcu purus. Vivamus et massa massa.

\n', + short_description: '

This is a simple, virtual product.

\n', + sku: 'woo-single', + price: '2', + regular_price: '3', + sale_price: '2', + date_on_sale_from: null, + date_on_sale_from_gmt: null, + date_on_sale_to: null, + date_on_sale_to_gmt: null, + on_sale: true, + purchasable: true, + total_sales: 0, + virtual: true, + downloadable: true, + downloads: [ + { + id: '37d09344-7e41-43fc-ba78-f0f50d6c9a44', + name: 'Single', + file: 'https://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2017/08/single.jpg', + }, + ], + download_limit: 1, + download_expiry: 1, + external_url: '', + button_text: '', + tax_status: 'taxable', + tax_class: '', + manage_stock: false, + stock_quantity: null, + backorders: 'no', + backorders_allowed: false, + backordered: false, + low_stock_amount: null, + sold_individually: false, + weight: '', + dimensions: { + length: '', + width: '', + height: '', + }, + shipping_required: false, + shipping_taxable: false, + shipping_class: '', + shipping_class_id: 0, + reviews_allowed: true, + average_rating: '0.00', + rating_count: 0, + upsell_ids: [], + cross_sell_ids: [], + parent_id: 0, + purchase_note: '', + categories: [ + { + id: 25, + name: 'Music', + slug: 'music', + }, + ], + tags: [], + images: [ + { + id: 134, + date_created: '2024-08-26T08:13:48', + date_created_gmt: '2024-08-26T08:13:48', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + src: 'http://locale.local/wp-content/uploads/2024/08/single-1.jpg', + name: 'single-1.jpg', + alt: '', + }, + ], + attributes: [], + default_attributes: [], + variations: [], + grouped_products: [], + menu_order: 0, + price_html: + ' Original price was: € 3.Current price is: € 2.', + related_ids: [ 236 ], + meta_data: [ + { + id: 1770, + key: '_wpcom_is_markdown', + value: '1', + }, + ], + stock_status: 'instock', + has_options: false, + post_password: '', + global_unique_id: '', + class_list: { + '0': 'post-237', + '1': 'product', + '2': 'type-product', + '3': 'status-publish', + '4': 'has-post-thumbnail', + '6': 'product_cat-music', + '8': '', + '9': 'instock', + '10': 'sale', + '11': 'downloadable', + '12': 'virtual', + '13': 'purchasable', + '14': 'product-type-simple', + }, + _links: { + self: [ + { + href: 'http://locale.local/wp-json/wc/v3/products/237', + targetHints: { + allow: [ 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ], + }, + }, + ], + collection: [ + { + href: 'http://locale.local/wp-json/wc/v3/products', + }, + ], + }, + }, + { + id: 244, + name: 'T-Shirt with Logo', + slug: 't-shirt-with-logo', + permalink: 'http://locale.local/product/t-shirt-with-logo/', + date_created: '2024-08-27T19:48:51', + date_created_gmt: '2024-08-27T19:48:51', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + type: 'simple', + status: 'publish', + featured: false, + catalog_visibility: 'visible', + description: + '

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n', + short_description: '

This is a simple product.

\n', + sku: 'Woo-tshirt-logo', + price: '18', + regular_price: '18', + sale_price: '', + date_on_sale_from: null, + date_on_sale_from_gmt: null, + date_on_sale_to: null, + date_on_sale_to_gmt: null, + on_sale: false, + purchasable: true, + total_sales: 0, + virtual: false, + downloadable: false, + downloads: [], + download_limit: 0, + download_expiry: 0, + external_url: '', + button_text: '', + tax_status: 'taxable', + tax_class: '', + manage_stock: false, + stock_quantity: null, + backorders: 'no', + backorders_allowed: false, + backordered: false, + low_stock_amount: null, + sold_individually: false, + weight: '', + dimensions: { + length: '', + width: '', + height: '', + }, + shipping_required: true, + shipping_taxable: true, + shipping_class: '', + shipping_class_id: 0, + reviews_allowed: true, + average_rating: '0.00', + rating_count: 0, + upsell_ids: [], + cross_sell_ids: [], + parent_id: 0, + purchase_note: '', + categories: [ + { + id: 22, + name: 'Tshirts', + slug: 'tshirts', + }, + ], + tags: [], + images: [ + { + id: 135, + date_created: '2024-08-26T08:13:48', + date_created_gmt: '2024-08-26T08:13:48', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + src: 'http://locale.local/wp-content/uploads/2024/08/t-shirt-with-logo-1.jpg', + name: 't-shirt-with-logo-1.jpg', + alt: '', + }, + ], + attributes: [ + { + id: 1, + name: 'Color', + slug: 'pa_color', + position: 0, + visible: true, + variation: false, + options: [ 'Gray' ], + }, + ], + default_attributes: [], + variations: [], + grouped_products: [], + menu_order: 0, + price_html: + '€ 18', + related_ids: [ 235, 234, 224, 227 ], + meta_data: [ + { + id: 1825, + key: '_wpcom_is_markdown', + value: '1', + }, + ], + stock_status: 'instock', + has_options: false, + post_password: '', + global_unique_id: '', + class_list: { + '0': 'post-244', + '1': 'product', + '2': 'type-product', + '3': 'status-publish', + '4': 'has-post-thumbnail', + '6': 'product_cat-tshirts', + '8': 'last', + '9': 'instock', + '10': 'shipping-taxable', + '11': 'purchasable', + '12': 'product-type-simple', + }, + _links: { + self: [ + { + href: 'http://locale.local/wp-json/wc/v3/products/244', + targetHints: { + allow: [ 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ], + }, + }, + ], + collection: [ + { + href: 'http://locale.local/wp-json/wc/v3/products', + }, + ], + }, + }, + { + id: 245, + name: 'Beanie with Logo', + slug: 'beanie-with-logo', + permalink: 'http://locale.local/product/beanie-with-logo/', + date_created: '2024-08-27T19:48:51', + date_created_gmt: '2024-08-27T19:48:51', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + type: 'simple', + status: 'publish', + featured: false, + catalog_visibility: 'visible', + description: + '

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n', + short_description: '

This is a simple product.

\n', + sku: 'Woo-beanie-logo', + price: '18', + regular_price: '20', + sale_price: '18', + date_on_sale_from: null, + date_on_sale_from_gmt: null, + date_on_sale_to: null, + date_on_sale_to_gmt: null, + on_sale: true, + purchasable: true, + total_sales: 0, + virtual: false, + downloadable: false, + downloads: [], + download_limit: 0, + download_expiry: 0, + external_url: '', + button_text: '', + tax_status: 'taxable', + tax_class: '', + manage_stock: false, + stock_quantity: null, + backorders: 'no', + backorders_allowed: false, + backordered: false, + low_stock_amount: null, + sold_individually: false, + weight: '', + dimensions: { + length: '', + width: '', + height: '', + }, + shipping_required: true, + shipping_taxable: true, + shipping_class: '', + shipping_class_id: 0, + reviews_allowed: true, + average_rating: '0.00', + rating_count: 0, + upsell_ids: [], + cross_sell_ids: [], + parent_id: 0, + purchase_note: '', + categories: [ + { + id: 24, + name: 'Accessories', + slug: 'accessories', + }, + ], + tags: [], + images: [ + { + id: 136, + date_created: '2024-08-26T08:13:49', + date_created_gmt: '2024-08-26T08:13:49', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + src: 'http://locale.local/wp-content/uploads/2024/08/beanie-with-logo-1.jpg', + name: 'beanie-with-logo-1.jpg', + alt: '', + }, + ], + attributes: [ + { + id: 1, + name: 'Color', + slug: 'pa_color', + position: 0, + visible: true, + variation: false, + options: [ 'Red' ], + }, + ], + default_attributes: [], + variations: [], + grouped_products: [], + menu_order: 0, + price_html: + ' Original price was: € 20.Current price is: € 18.', + related_ids: [ 228, 229, 231, 230 ], + meta_data: [ + { + id: 1832, + key: '_wpcom_is_markdown', + value: '1', + }, + ], + stock_status: 'instock', + has_options: false, + post_password: '', + global_unique_id: '', + class_list: { + '0': 'post-245', + '1': 'product', + '2': 'type-product', + '3': 'status-publish', + '4': 'has-post-thumbnail', + '6': 'product_cat-accessories', + '8': 'first', + '9': 'instock', + '10': 'sale', + '11': 'shipping-taxable', + '12': 'purchasable', + '13': 'product-type-simple', + }, + _links: { + self: [ + { + href: 'http://locale.local/wp-json/wc/v3/products/245', + targetHints: { + allow: [ 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ], + }, + }, + ], + collection: [ + { + href: 'http://locale.local/wp-json/wc/v3/products', + }, + ], + }, + }, + { + id: 246, + name: 'Logo Collection', + slug: 'logo-collection', + permalink: 'http://locale.local/product/logo-collection/', + date_created: '2024-08-27T19:48:51', + date_created_gmt: '2024-08-27T19:48:51', + date_modified: '2024-08-27T19:48:56', + date_modified_gmt: '2024-08-27T19:48:56', + type: 'grouped', + status: 'publish', + featured: false, + catalog_visibility: 'visible', + description: + '

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n', + short_description: '

This is a grouped product.

\n', + sku: 'logo-collection', + price: '18', + regular_price: '', + sale_price: '', + date_on_sale_from: null, + date_on_sale_from_gmt: null, + date_on_sale_to: null, + date_on_sale_to_gmt: null, + on_sale: true, + purchasable: false, + total_sales: 0, + virtual: false, + downloadable: false, + downloads: [], + download_limit: 0, + download_expiry: 0, + external_url: '', + button_text: '', + tax_status: 'taxable', + tax_class: '', + manage_stock: false, + stock_quantity: null, + backorders: 'no', + backorders_allowed: false, + backordered: false, + low_stock_amount: null, + sold_individually: false, + weight: '', + dimensions: { + length: '', + width: '', + height: '', + }, + shipping_required: true, + shipping_taxable: true, + shipping_class: '', + shipping_class_id: 0, + reviews_allowed: true, + average_rating: '0.00', + rating_count: 0, + upsell_ids: [], + cross_sell_ids: [], + parent_id: 0, + purchase_note: '', + categories: [ + { + id: 21, + name: 'Clothing', + slug: 'clothing', + }, + ], + tags: [], + images: [ + { + id: 137, + date_created: '2024-08-26T08:13:50', + date_created_gmt: '2024-08-26T08:13:50', + date_modified: '2024-08-27T19:48:56', + date_modified_gmt: '2024-08-27T19:48:56', + src: 'http://locale.local/wp-content/uploads/2024/08/logo-1.jpg', + name: 'logo-1.jpg', + alt: '', + }, + { + id: 136, + date_created: '2024-08-26T08:13:49', + date_created_gmt: '2024-08-26T08:13:49', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + src: 'http://locale.local/wp-content/uploads/2024/08/beanie-with-logo-1.jpg', + name: 'beanie-with-logo-1.jpg', + alt: '', + }, + { + id: 135, + date_created: '2024-08-26T08:13:48', + date_created_gmt: '2024-08-26T08:13:48', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + src: 'http://locale.local/wp-content/uploads/2024/08/t-shirt-with-logo-1.jpg', + name: 't-shirt-with-logo-1.jpg', + alt: '', + }, + { + id: 123, + date_created: '2024-08-26T08:13:42', + date_created_gmt: '2024-08-26T08:13:42', + date_modified: '2024-08-27T19:48:52', + date_modified_gmt: '2024-08-27T19:48:52', + src: 'http://locale.local/wp-content/uploads/2024/08/hoodie-with-logo-2.jpg', + name: 'hoodie-with-logo-2.jpg', + alt: '', + }, + ], + attributes: [], + default_attributes: [], + variations: [], + grouped_products: [ 226, 227, 228 ], + menu_order: 0, + price_html: + '€ 18 – € 45', + related_ids: [], + meta_data: [ + { + id: 1838, + key: '_wpcom_is_markdown', + value: '1', + }, + ], + stock_status: 'instock', + has_options: false, + post_password: '', + global_unique_id: '', + class_list: { + '0': 'post-246', + '1': 'product', + '2': 'type-product', + '3': 'status-publish', + '4': 'has-post-thumbnail', + '6': 'product_cat-clothing', + '8': '', + '9': 'instock', + '10': 'sale', + '11': 'shipping-taxable', + '12': 'product-type-grouped', + }, + _links: { + self: [ + { + href: 'http://locale.local/wp-json/wc/v3/products/246', + targetHints: { + allow: [ 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ], + }, + }, + ], + collection: [ + { + href: 'http://locale.local/wp-json/wc/v3/products', + }, + ], + }, + }, + { + id: 247, + name: 'WordPress Pennant', + slug: 'wordpress-pennant', + permalink: 'http://locale.local/product/wordpress-pennant/', + date_created: '2024-08-27T19:48:51', + date_created_gmt: '2024-08-27T19:48:51', + date_modified: '2024-08-27T19:48:56', + date_modified_gmt: '2024-08-27T19:48:56', + type: 'external', + status: 'publish', + featured: false, + catalog_visibility: 'visible', + description: + '

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n', + short_description: '

This is an external product.

\n', + sku: 'wp-pennant', + price: '11.05', + regular_price: '11.05', + sale_price: '', + date_on_sale_from: null, + date_on_sale_from_gmt: null, + date_on_sale_to: null, + date_on_sale_to_gmt: null, + on_sale: false, + purchasable: false, + total_sales: 0, + virtual: false, + downloadable: false, + downloads: [], + download_limit: 0, + download_expiry: 0, + external_url: + 'https://mercantile.wordpress.org/product/wordpress-pennant/', + button_text: 'Buy on the WordPress swag store!', + tax_status: 'taxable', + tax_class: '', + manage_stock: false, + stock_quantity: null, + backorders: 'no', + backorders_allowed: false, + backordered: false, + low_stock_amount: null, + sold_individually: false, + weight: '', + dimensions: { + length: '', + width: '', + height: '', + }, + shipping_required: true, + shipping_taxable: true, + shipping_class: '', + shipping_class_id: 0, + reviews_allowed: true, + average_rating: '0.00', + rating_count: 0, + upsell_ids: [], + cross_sell_ids: [], + parent_id: 0, + purchase_note: '', + categories: [ + { + id: 26, + name: 'Decor', + slug: 'decor', + }, + ], + tags: [], + images: [ + { + id: 138, + date_created: '2024-08-26T08:13:50', + date_created_gmt: '2024-08-26T08:13:50', + date_modified: '2024-08-27T19:48:56', + date_modified_gmt: '2024-08-27T19:48:56', + src: 'http://locale.local/wp-content/uploads/2024/08/pennant-1.jpg', + name: 'pennant-1.jpg', + alt: '', + }, + ], + attributes: [], + default_attributes: [], + variations: [], + grouped_products: [], + menu_order: 0, + price_html: + '€ 11', + related_ids: [], + meta_data: [ + { + id: 1846, + key: '_wpcom_is_markdown', + value: '1', + }, + ], + stock_status: 'instock', + has_options: false, + post_password: '', + global_unique_id: '', + class_list: { + '0': 'post-247', + '1': 'product', + '2': 'type-product', + '3': 'status-publish', + '4': 'has-post-thumbnail', + '6': 'product_cat-decor', + '8': 'last', + '9': 'instock', + '10': 'shipping-taxable', + '11': 'product-type-external', + }, + _links: { + self: [ + { + href: 'http://locale.local/wp-json/wc/v3/products/247', + targetHints: { + allow: [ 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ], + }, + }, + ], + collection: [ + { + href: 'http://locale.local/wp-json/wc/v3/products', + }, + ], + }, + }, + { + id: 224, + name: 'V-Neck T-Shirt', + slug: 'v-neck-t-shirt', + permalink: 'http://locale.local/product/v-neck-t-shirt/', + date_created: '2024-08-27T19:48:50', + date_created_gmt: '2024-08-27T19:48:50', + date_modified: '2024-08-27T19:48:56', + date_modified_gmt: '2024-08-27T19:48:56', + type: 'variable', + status: 'publish', + featured: true, + catalog_visibility: 'visible', + description: + '

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n', + short_description: '

This is a variable product.

\n', + sku: 'woo-vneck-tee', + price: '15', + regular_price: '', + sale_price: '', + date_on_sale_from: null, + date_on_sale_from_gmt: null, + date_on_sale_to: null, + date_on_sale_to_gmt: null, + on_sale: false, + purchasable: true, + total_sales: 0, + virtual: false, + downloadable: false, + downloads: [], + download_limit: 0, + download_expiry: 0, + external_url: '', + button_text: '', + tax_status: 'taxable', + tax_class: '', + manage_stock: false, + stock_quantity: null, + backorders: 'no', + backorders_allowed: false, + backordered: false, + low_stock_amount: null, + sold_individually: false, + weight: '', + dimensions: { + length: '', + width: '', + height: '', + }, + shipping_required: true, + shipping_taxable: true, + shipping_class: '', + shipping_class_id: 0, + reviews_allowed: true, + average_rating: '0.00', + rating_count: 0, + upsell_ids: [], + cross_sell_ids: [], + parent_id: 0, + purchase_note: '', + categories: [ + { + id: 22, + name: 'Tshirts', + slug: 'tshirts', + }, + ], + tags: [], + images: [ + { + id: 117, + date_created: '2024-08-26T08:13:40', + date_created_gmt: '2024-08-26T08:13:40', + date_modified: '2024-08-27T19:48:51', + date_modified_gmt: '2024-08-27T19:48:51', + src: 'http://locale.local/wp-content/uploads/2024/08/vneck-tee-2.jpg', + name: 'vneck-tee-2.jpg', + alt: '', + }, + { + id: 118, + date_created: '2024-08-26T08:13:40', + date_created_gmt: '2024-08-26T08:13:40', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + src: 'http://locale.local/wp-content/uploads/2024/08/vnech-tee-green-1.jpg', + name: 'vnech-tee-green-1.jpg', + alt: '', + }, + { + id: 119, + date_created: '2024-08-26T08:13:41', + date_created_gmt: '2024-08-26T08:13:41', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + src: 'http://locale.local/wp-content/uploads/2024/08/vnech-tee-blue-1.jpg', + name: 'vnech-tee-blue-1.jpg', + alt: '', + }, + ], + attributes: [ + { + id: 1, + name: 'Color', + slug: 'pa_color', + position: 0, + visible: true, + variation: true, + options: [ 'Blue', 'Green', 'Red' ], + }, + { + id: 2, + name: 'Size', + slug: 'pa_size', + position: 1, + visible: true, + variation: true, + options: [ 'Large', 'Medium', 'Small' ], + }, + ], + default_attributes: [], + variations: [ 238, 239, 240 ], + grouped_products: [], + menu_order: 0, + price_html: + '€ 15 – € 20', + related_ids: [ 244, 234, 235, 227 ], + meta_data: [ + { + id: 1690, + key: '_wpcom_is_markdown', + value: '1', + }, + ], + stock_status: 'instock', + has_options: true, + post_password: '', + global_unique_id: '', + class_list: { + '0': 'post-224', + '1': 'product', + '2': 'type-product', + '3': 'status-publish', + '4': 'has-post-thumbnail', + '6': 'product_cat-tshirts', + '8': 'first', + '9': 'instock', + '10': 'featured', + '11': 'shipping-taxable', + '12': 'purchasable', + '13': 'product-type-variable', + }, + _links: { + self: [ + { + href: 'http://locale.local/wp-json/wc/v3/products/224', + targetHints: { + allow: [ 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ], + }, + }, + ], + collection: [ + { + href: 'http://locale.local/wp-json/wc/v3/products', + }, + ], + }, + }, + { + id: 225, + name: 'Hoodie', + slug: 'hoodie', + permalink: 'http://locale.local/product/hoodie/', + date_created: '2024-08-27T19:48:50', + date_created_gmt: '2024-08-27T19:48:50', + date_modified: '2024-08-27T19:48:56', + date_modified_gmt: '2024-08-27T19:48:56', + type: 'variable', + status: 'publish', + featured: false, + catalog_visibility: 'visible', + description: + '

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n', + short_description: '

This is a variable product.

\n', + sku: 'woo-hoodie', + price: '42', + regular_price: '', + sale_price: '', + date_on_sale_from: null, + date_on_sale_from_gmt: null, + date_on_sale_to: null, + date_on_sale_to_gmt: null, + on_sale: true, + purchasable: true, + total_sales: 0, + virtual: false, + downloadable: false, + downloads: [], + download_limit: 0, + download_expiry: 0, + external_url: '', + button_text: '', + tax_status: 'taxable', + tax_class: '', + manage_stock: false, + stock_quantity: null, + backorders: 'no', + backorders_allowed: false, + backordered: false, + low_stock_amount: null, + sold_individually: false, + weight: '', + dimensions: { + length: '', + width: '', + height: '', + }, + shipping_required: true, + shipping_taxable: true, + shipping_class: '', + shipping_class_id: 0, + reviews_allowed: true, + average_rating: '0.00', + rating_count: 0, + upsell_ids: [], + cross_sell_ids: [], + parent_id: 0, + purchase_note: '', + categories: [ + { + id: 23, + name: 'Hoodies', + slug: 'hoodies', + }, + ], + tags: [], + images: [ + { + id: 120, + date_created: '2024-08-26T08:13:41', + date_created_gmt: '2024-08-26T08:13:41', + date_modified: '2024-08-27T19:48:52', + date_modified_gmt: '2024-08-27T19:48:52', + src: 'http://locale.local/wp-content/uploads/2024/08/hoodie-2.jpg', + name: 'hoodie-2.jpg', + alt: '', + }, + { + id: 121, + date_created: '2024-08-26T08:13:41', + date_created_gmt: '2024-08-26T08:13:41', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + src: 'http://locale.local/wp-content/uploads/2024/08/hoodie-blue-1.jpg', + name: 'hoodie-blue-1.jpg', + alt: '', + }, + { + id: 122, + date_created: '2024-08-26T08:13:42', + date_created_gmt: '2024-08-26T08:13:42', + date_modified: '2024-08-27T19:48:55', + date_modified_gmt: '2024-08-27T19:48:55', + src: 'http://locale.local/wp-content/uploads/2024/08/hoodie-green-1.jpg', + name: 'hoodie-green-1.jpg', + alt: '', + }, + { + id: 123, + date_created: '2024-08-26T08:13:42', + date_created_gmt: '2024-08-26T08:13:42', + date_modified: '2024-08-27T19:48:52', + date_modified_gmt: '2024-08-27T19:48:52', + src: 'http://locale.local/wp-content/uploads/2024/08/hoodie-with-logo-2.jpg', + name: 'hoodie-with-logo-2.jpg', + alt: '', + }, + ], + attributes: [ + { + id: 1, + name: 'Color', + slug: 'pa_color', + position: 0, + visible: true, + variation: true, + options: [ 'Blue', 'Green', 'Red' ], + }, + { + id: 0, + name: 'Logo', + slug: 'Logo', + position: 1, + visible: true, + variation: true, + options: [ 'Yes', 'No' ], + }, + ], + default_attributes: [], + variations: [ 248, 241, 242, 243 ], + grouped_products: [], + menu_order: 0, + price_html: + '€ 42 – € 45', + related_ids: [ 226, 233 ], + meta_data: [ + { + id: 1695, + key: '_wpcom_is_markdown', + value: '1', + }, + ], + stock_status: 'instock', + has_options: true, + post_password: '', + global_unique_id: '', + class_list: { + '0': 'post-225', + '1': 'product', + '2': 'type-product', + '3': 'status-publish', + '4': 'has-post-thumbnail', + '6': 'product_cat-hoodies', + '8': '', + '9': 'instock', + '10': 'sale', + '11': 'shipping-taxable', + '12': 'purchasable', + '13': 'product-type-variable', + }, + _links: { + self: [ + { + href: 'http://locale.local/wp-json/wc/v3/products/225', + targetHints: { + allow: [ 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ], + }, + }, + ], + collection: [ + { + href: 'http://locale.local/wp-json/wc/v3/products', + }, + ], + }, + }, + { + id: 226, + name: 'Hoodie with Logo', + slug: 'hoodie-with-logo', + permalink: 'http://locale.local/product/hoodie-with-logo/', + date_created: '2024-08-27T19:48:50', + date_created_gmt: '2024-08-27T19:48:50', + date_modified: '2024-08-27T19:48:52', + date_modified_gmt: '2024-08-27T19:48:52', + type: 'simple', + status: 'publish', + featured: false, + catalog_visibility: 'visible', + description: + '

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n', + short_description: '

This is a simple product.

\n', + sku: 'woo-hoodie-with-logo', + price: '45', + regular_price: '45', + sale_price: '', + date_on_sale_from: null, + date_on_sale_from_gmt: null, + date_on_sale_to: null, + date_on_sale_to_gmt: null, + on_sale: false, + purchasable: true, + total_sales: 0, + virtual: false, + downloadable: false, + downloads: [], + download_limit: 0, + download_expiry: 0, + external_url: '', + button_text: '', + tax_status: 'taxable', + tax_class: '', + manage_stock: false, + stock_quantity: null, + backorders: 'no', + backorders_allowed: false, + backordered: false, + low_stock_amount: null, + sold_individually: false, + weight: '', + dimensions: { + length: '', + width: '', + height: '', + }, + shipping_required: true, + shipping_taxable: true, + shipping_class: '', + shipping_class_id: 0, + reviews_allowed: true, + average_rating: '0.00', + rating_count: 0, + upsell_ids: [], + cross_sell_ids: [], + parent_id: 0, + purchase_note: '', + categories: [ + { + id: 23, + name: 'Hoodies', + slug: 'hoodies', + }, + ], + tags: [], + images: [ + { + id: 123, + date_created: '2024-08-26T08:13:42', + date_created_gmt: '2024-08-26T08:13:42', + date_modified: '2024-08-27T19:48:52', + date_modified_gmt: '2024-08-27T19:48:52', + src: 'http://locale.local/wp-content/uploads/2024/08/hoodie-with-logo-2.jpg', + name: 'hoodie-with-logo-2.jpg', + alt: '', + }, + ], + attributes: [ + { + id: 1, + name: 'Color', + slug: 'pa_color', + position: 0, + visible: true, + variation: false, + options: [ 'Blue' ], + }, + ], + default_attributes: [], + variations: [], + grouped_products: [], + menu_order: 0, + price_html: + '€ 45', + related_ids: [ 233, 225 ], + meta_data: [ + { + id: 1702, + key: '_wpcom_is_markdown', + value: '1', + }, + ], + stock_status: 'instock', + has_options: false, + post_password: '', + global_unique_id: '', + class_list: { + '0': 'post-226', + '1': 'product', + '2': 'type-product', + '3': 'status-publish', + '4': 'has-post-thumbnail', + '6': 'product_cat-hoodies', + '8': 'last', + '9': 'instock', + '10': 'shipping-taxable', + '11': 'purchasable', + '12': 'product-type-simple', + }, + _links: { + self: [ + { + href: 'http://locale.local/wp-json/wc/v3/products/226', + targetHints: { + allow: [ 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ], + }, + }, + ], + collection: [ + { + href: 'http://locale.local/wp-json/wc/v3/products', + }, + ], + }, + }, + { + id: 227, + name: 'T-Shirt', + slug: 't-shirt', + permalink: 'http://locale.local/product/t-shirt/', + date_created: '2024-08-27T19:48:50', + date_created_gmt: '2024-08-27T19:48:50', + date_modified: '2024-08-27T19:48:52', + date_modified_gmt: '2024-08-27T19:48:52', + type: 'simple', + status: 'publish', + featured: false, + catalog_visibility: 'visible', + description: + '

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n', + short_description: '

This is a simple product.

\n', + sku: 'woo-tshirt', + price: '18', + regular_price: '18', + sale_price: '', + date_on_sale_from: null, + date_on_sale_from_gmt: null, + date_on_sale_to: null, + date_on_sale_to_gmt: null, + on_sale: false, + purchasable: true, + total_sales: 0, + virtual: false, + downloadable: false, + downloads: [], + download_limit: 0, + download_expiry: 0, + external_url: '', + button_text: '', + tax_status: 'taxable', + tax_class: '', + manage_stock: false, + stock_quantity: null, + backorders: 'no', + backorders_allowed: false, + backordered: false, + low_stock_amount: null, + sold_individually: false, + weight: '', + dimensions: { + length: '', + width: '', + height: '', + }, + shipping_required: true, + shipping_taxable: true, + shipping_class: '', + shipping_class_id: 0, + reviews_allowed: true, + average_rating: '0.00', + rating_count: 0, + upsell_ids: [], + cross_sell_ids: [], + parent_id: 0, + purchase_note: '', + categories: [ + { + id: 22, + name: 'Tshirts', + slug: 'tshirts', + }, + ], + tags: [], + images: [ + { + id: 124, + date_created: '2024-08-26T08:13:42', + date_created_gmt: '2024-08-26T08:13:42', + date_modified: '2024-08-27T19:48:52', + date_modified_gmt: '2024-08-27T19:48:52', + src: 'http://locale.local/wp-content/uploads/2024/08/tshirt-2.jpg', + name: 'tshirt-2.jpg', + alt: '', + }, + ], + attributes: [ + { + id: 1, + name: 'Color', + slug: 'pa_color', + position: 0, + visible: true, + variation: false, + options: [ 'Gray' ], + }, + ], + default_attributes: [], + variations: [], + grouped_products: [], + menu_order: 0, + price_html: + '€ 18', + related_ids: [ 234, 244, 224, 235 ], + meta_data: [ + { + id: 1708, + key: '_wpcom_is_markdown', + value: '1', + }, + ], + stock_status: 'instock', + has_options: false, + post_password: '', + global_unique_id: '', + class_list: { + '0': 'post-227', + '1': 'product', + '2': 'type-product', + '3': 'status-publish', + '4': 'has-post-thumbnail', + '6': 'product_cat-tshirts', + '8': 'first', + '9': 'instock', + '10': 'shipping-taxable', + '11': 'purchasable', + '12': 'product-type-simple', + }, + _links: { + self: [ + { + href: 'http://locale.local/wp-json/wc/v3/products/227', + targetHints: { + allow: [ 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ], + }, + }, + ], + collection: [ + { + href: 'http://locale.local/wp-json/wc/v3/products', + }, + ], + }, + }, +]; + +export const PRODUCT_FIELDS = [ + { + label: 'Name', + id: 'name', + type: 'text', + }, + { + label: 'Slug', + id: 'slug', + type: 'text', + }, + { + label: 'Permalink', + id: 'permalink', + type: 'url', + }, + { + label: 'Date Created', + id: 'date_created', + type: 'datetime', + }, + { + label: 'Date Modified', + id: 'date_modified', + type: 'datetime', + }, + { + label: 'Type', + id: 'type', + type: 'text', + }, + { + label: 'Status', + id: 'status', + type: 'text', + }, + { + label: 'Featured', + id: 'featured', + type: 'checkbox', + }, + { + label: 'Catalog Visibility', + id: 'catalog_visibility', + type: 'text', + }, + { + label: 'Description', + id: 'description', + type: 'textarea', + }, + { + label: 'Short Description', + id: 'short_description', + type: 'textarea', + }, + { + label: 'SKU', + id: 'sku', + type: 'text', + }, + { + label: 'Price', + id: 'price', + type: 'text', + }, + { + label: 'Regular Price', + id: 'regular_price', + type: 'text', + }, + { + label: 'On Sale', + id: 'on_sale', + type: 'checkbox', + }, + { + label: 'Purchasable', + id: 'purchasable', + type: 'checkbox', + }, + { + label: 'Downloads', + id: 'downloads', + type: 'text', + }, + { + label: 'Stock Status', + id: 'stock_status', + type: 'text', + }, + { + label: 'Categories', + id: 'categories', + type: 'text', + }, + { + label: 'Images', + id: 'images', + type: 'text', + }, + { + label: 'Average Rating', + id: 'average_rating', + type: 'text', + }, + { + label: 'Rating Count', + id: 'rating_count', + type: 'text', + }, +]; + +export const PRODUCT_FIELDS_KEYS = PRODUCT_FIELDS.map( ( field ) => field.id ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec49d327648..2e0821341dc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57964,7 +57964,7 @@ snapshots: react-inspector@5.1.1(react@18.3.1): dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.25.0 is-dom: 1.1.0 prop-types: 15.8.1 react: 18.3.1 @@ -58360,7 +58360,7 @@ snapshots: react-select@3.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.25.0 '@emotion/cache': 10.0.29 '@emotion/core': 10.3.1(react@18.3.1) '@emotion/css': 10.0.27 diff --git a/tools/storybook/.storybook/main.js b/tools/storybook/.storybook/main.js index baba444b870..3b6c7e4b415 100644 --- a/tools/storybook/.storybook/main.js +++ b/tools/storybook/.storybook/main.js @@ -11,7 +11,7 @@ module.exports = { '../../../packages/js/experimental/src/**/stories/*.@(js|tsx)', // WooCommerce Admin / @woocommerce/onboarding components '../../../packages/js/onboarding/src/**/stories/*.@(js|tsx)', - '../../../packages/js/product-editor/src/**/stories/*.@(js|tsx)', + '../../../packages/js/product-editor/src/**/*.stories.@(js|tsx)', '../../../plugins/woocommerce-admin/client/**/stories/*.@(js|tsx)', ], addons: [ diff --git a/tools/storybook/.storybook/preview-head.html b/tools/storybook/.storybook/preview-head.html index d1c4ac5ebd2..189f36c0821 100644 --- a/tools/storybook/.storybook/preview-head.html +++ b/tools/storybook/.storybook/preview-head.html @@ -1,7 +1,4 @@ - + @@ -18,3 +15,4 @@ + \ No newline at end of file diff --git a/tools/storybook/import-wp-css-storybook.sh b/tools/storybook/import-wp-css-storybook.sh index 3d5790c6f75..b9c49c640f6 100755 --- a/tools/storybook/import-wp-css-storybook.sh +++ b/tools/storybook/import-wp-css-storybook.sh @@ -5,16 +5,19 @@ STORY_BOOK_CSS_PATH="$DIR/../storybook/wordpress/css"; TMP_DIR="$DIR/../storybook/wordpress/tmp"; ARCHIVE_CSS_PATH="wordpress/wp-admin/css"; ARCHIVE_IMG_PATH="wordpress/wp-admin/images"; +ARCHIVE_EDIT_SITE_PATH="wordpress/wp-includes/css/dist/edit-site/style.css"; mkdir -p "$STORY_BOOK_CSS_PATH"; mkdir -p "$TMP_DIR"; function download_and_extract_css { curl -o "$STORYBOOK_WORDPRESS_DIR/wordpress-latest.zip" https://wordpress.org/nightly-builds/wordpress-latest.zip; - unzip -qq "$STORYBOOK_WORDPRESS_DIR/wordpress-latest.zip" "$ARCHIVE_CSS_PATH/*" "$ARCHIVE_IMG_PATH/*" -d "$TMP_DIR"; + unzip -qq "$STORYBOOK_WORDPRESS_DIR/wordpress-latest.zip" "$ARCHIVE_CSS_PATH/*" "$ARCHIVE_IMG_PATH/*" "$ARCHIVE_EDIT_SITE_PATH" -d "$TMP_DIR"; rsync -a "$TMP_DIR/$ARCHIVE_CSS_PATH" "$STORYBOOK_WORDPRESS_DIR"; rsync -a "$TMP_DIR/$ARCHIVE_IMG_PATH" "$STORYBOOK_WORDPRESS_DIR"; + rsync -a "$TMP_DIR/$ARCHIVE_EDIT_SITE_PATH" "$STORYBOOK_WORDPRESS_DIR/css/edit-site.css"; rm -r "$TMP_DIR"; + rm -r "$STORYBOOK_WORDPRESS_DIR/wordpress-latest.zip"; } if [ -z "$(find "$STORY_BOOK_CSS_PATH" -iname '*.css')" ] || [ "$1" == "-f" ] diff --git a/tools/storybook/webpack.config.js b/tools/storybook/webpack.config.js index ed728477a7d..5de3c72deb3 100644 --- a/tools/storybook/webpack.config.js +++ b/tools/storybook/webpack.config.js @@ -40,9 +40,6 @@ module.exports = ( storybookConfig ) => { './setting.mock.js' ); - storybookConfig.resolve.alias[ 'react/jsx-runtime' ] = - require.resolve( 'react/jsx-runtime' ); - // We need to use react 18 for the storybook since some dependencies are not compatible with react 17 // Once we upgrade react to 18 in repo, we can remove this alias storybookConfig.resolve.alias.react = path.resolve( diff --git a/tools/storybook/wordpress/.gitkeep b/tools/storybook/wordpress/.gitkeep deleted file mode 100644 index e69de29bb2d..00000000000