[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 <lourensschep@gmail.com>
Co-authored-by: Sam Seay <samueljseay@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>

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.
+

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 (
+		<DataForm
+			data={ product }
+			fields={ fields }
+			form={ form }
+			onChange={ ( newProduct ) =>
+				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 ) => <ProductForm { ...args } />;
+
+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,
+	},
+};

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 (
+		<DataViews
+			data={ productsData }
+			fields={ fields }
+			view={ view }
+			onChangeView={ onChangeView }
+			paginationInfo={ paginationInfo }
+			defaultLayouts={ defaultLayouts }
+			getItemId={ ( item: ( typeof PRODUCTS_DATA )[ 0 ] ) => 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 ) => <ProductsView { ...args } />;
+
+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: () => {},
+};

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

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: [

tools/storybook/.storybook/preview-head.html

@@ -1,7 +1,4 @@
-<link
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined&ver=1601945340" rel="stylesheet" />
-	href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined&ver=1601945340"
-	rel="stylesheet"
-/>
 <link href="wordpress/css/common.min.css" rel="stylesheet" />
 <link href="wordpress/css/forms.min.css" rel="stylesheet" />
 <link href="wordpress/css/admin-menu.min.css" rel="stylesheet" />
@@ -18,3 +15,4 @@
 <link href="wordpress/css/l10n.min.css" rel="stylesheet" />
 <link href="wordpress/css/site-health.min.css" rel="stylesheet" />
 <link href="wordpress/css/components.css" rel="stylesheet" />
+<link href="wordpress/css/edit-site.css" rel="stylesheet" />

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" ]

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(