Migrating details fields to product-editor package (woocommerce#36945)

vivekanand30 · Mar 6, 2023 · 2332c7c · 2332c7c
1 parent 79841c5
commit 2332c7c
Show file tree

Hide file tree

Showing 34 changed files with 148 additions and 60 deletions.
diff --git a/packages/js/product-editor/changelog/update-36395-move-product-fields b/packages/js/product-editor/changelog/update-36395-move-product-fields
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Adding DetailsNameField and associated hooks/components.
diff --git a/packages/js/product-editor/package.json b/packages/js/product-editor/package.json
@@ -28,22 +28,34 @@
 		"access": "public"
 	},
 	"dependencies": {
+		"@automattic/interpolate-components": "^1.2.0",
+		"@types/lodash": "^4.14.179",
+		"@types/wordpress__blocks": "^11.0.7",
 		"@woocommerce/components": "workspace:*",
 		"@woocommerce/currency": "workspace:*",
 		"@woocommerce/data": "workspace:^4.1.0",
 		"@woocommerce/number": "workspace:*",
 		"@woocommerce/tracks": "workspace:^1.3.0",
+		"@wordpress/blocks": "^11.17.0",
 		"@wordpress/components": "^19.5.0",
+		"@wordpress/compose": "^5.1.2",
 		"@wordpress/element": "^4.1.1",
+		"@wordpress/html-entities": "^3.3.1",
 		"@wordpress/i18n": "^4.26.0",
+		"@wordpress/icons": "^8.1.0",
+		"@wordpress/url": "^3.4.1",
+		"classnames": "^2.3.1",
+		"lodash": "^4.17.21",
 		"react-router-dom": "^6.3.0"
 	},
 	"devDependencies": {
+		"@testing-library/react": "^12.1.3",
 		"@types/react": "^17.0.2",
 		"@types/wordpress__components": "^19.10.1",
 		"@types/wordpress__data": "^6.0.0",
 		"@woocommerce/eslint-plugin": "workspace:*",
 		"@woocommerce/internal-style-build": "workspace:*",
+		"@wordpress/block-editor": "^9.8.0",
 		"@wordpress/browserslist-config": "^4.1.1",
 		"concurrently": "^7.0.0",
 		"css-loader": "^3.6.0",
@@ -53,6 +65,7 @@
 		"postcss-loader": "^3.0.0",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
+		"react-hooks^8.0.1": "link:@testing-library/react-hooks^8.0.1",
 		"rimraf": "^3.0.2",
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
@@ -75,6 +88,8 @@
 	},
 	"peerDependencies": {
 		"@types/react": "^17.0.2",
-		"react": "^17.0.2"
+		"@wordpress/data": "^6.15.0",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
 	}
 }
diff --git a/...ory-field/category-field-add-new-item.tsx → ...ies-field/category-field-add-new-item.tsx b/...ory-field/category-field-add-new-item.tsx → ...ies-field/category-field-add-new-item.tsx
@@ -7,6 +7,7 @@ import { plus } from '@wordpress/icons';
 import classNames from 'classnames';
 import { ProductCategory } from '@woocommerce/data';
 import { __experimentalSelectControlMenuItemProps as MenuItemProps } from '@woocommerce/components';
+import { createElement } from '@wordpress/element';
 
 type CategoryFieldAddNewItemProps = {
 	item: Pick< ProductCategory, 'id' | 'name' >;

diff --git a/...ds/category-field/category-field-item.tsx → ...-categories-field/category-field-item.tsx b/...ds/category-field/category-field-item.tsx → ...-categories-field/category-field-item.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { CheckboxControl, Icon } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, createElement } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { chevronDown, chevronUp } from '@wordpress/icons';
 import { ProductCategory } from '@woocommerce/data';

diff --git a/.../fields/category-field/category-field.tsx → ...tails-categories-field/category-field.tsx b/.../fields/category-field/category-field.tsx → ...tails-categories-field/category-field.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useMemo, useState } from '@wordpress/element';
+import { useMemo, useState, createElement, Fragment } from '@wordpress/element';
 import {
 	selectControlStateChangeTypes,
 	Spinner,
@@ -15,7 +15,6 @@ import { debounce } from 'lodash';
 /**
  * Internal dependencies
  */
-import './category-field.scss';
 import { CategoryFieldItem, CategoryTreeItem } from './category-field-item';
 import { useCategorySearch } from './use-category-search';
 import { CreateCategoryModal } from './create-category-modal';

diff --git a/...category-field/create-category-modal.scss → ...tegories-field/create-category-modal.scss b/...category-field/create-category-modal.scss → ...tegories-field/create-category-modal.scss
diff --git a/.../category-field/create-category-modal.tsx → ...ategories-field/create-category-modal.tsx b/.../category-field/create-category-modal.tsx → ...ategories-field/create-category-modal.tsx
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import interpolateComponents from '@automattic/interpolate-components';
 import { Button, Modal, Spinner, TextControl } from '@wordpress/components';
 import { useDebounce } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
+import { useState, createElement } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import {
 	__experimentalSelectControl as SelectControl,
@@ -20,7 +20,6 @@ import {
 /**
  * Internal dependencies
  */
-import './create-category-modal.scss';
 import { useCategorySearch } from './use-category-search';
 import { CategoryFieldItem } from './category-field-item';
 

diff --git a/...ails-section/details-field-categories.tsx → ...gories-field/details-categories-field.tsx b/...ails-section/details-field-categories.tsx → ...gories-field/details-categories-field.tsx
@@ -4,11 +4,12 @@
 import { __ } from '@wordpress/i18n';
 import { useFormContext } from '@woocommerce/components';
 import { Product, ProductCategory } from '@woocommerce/data';
+import { createElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { CategoryField } from '../../fields/category-field';
+import { CategoryField } from './category-field';
 
 export const DetailsCategoriesField = () => {
 	const { getInputProps } = useFormContext< Product >();

diff --git a/packages/js/product-editor/src/components/details-categories-field/index.ts b/packages/js/product-editor/src/components/details-categories-field/index.ts
@@ -0,0 +1,2 @@
+export * from './details-categories-field';
+export * from './category-field';
diff --git a/...fields/category-field/category-field.scss → ...nents/details-categories-field/style.scss b/...fields/category-field/category-field.scss → ...nents/details-categories-field/style.scss
diff --git a/...tegory-field/test/category-field.test.tsx → ...gories-field/test/category-field.test.tsx b/...tegory-field/test/category-field.test.tsx → ...gories-field/test/category-field.test.tsx
@@ -5,6 +5,7 @@ import { ReactElement, Component } from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { Form, FormContext } from '@woocommerce/components';
 import { Product, ProductCategory } from '@woocommerce/data';
+import { createElement } from '@wordpress/element';
 
 /**
  * Internal dependencies

diff --git a/...ry-field/test/use-category-search.test.ts → ...es-field/test/use-category-search.test.ts b/...ry-field/test/use-category-search.test.ts → ...es-field/test/use-category-search.test.ts
diff --git a/...lds/category-field/use-category-search.ts → ...s-categories-field/use-category-search.ts b/...lds/category-field/use-category-search.ts → ...s-categories-field/use-category-search.ts
diff --git a/...ils-section/details-field-description.tsx → ...ption-field/details-description-field.tsx b/...ils-section/details-field-description.tsx → ...ption-field/details-description-field.tsx
@@ -8,7 +8,7 @@ import {
 } from '@woocommerce/components';
 import { Product } from '@woocommerce/data';
 import { BlockInstance, serialize, parse } from '@wordpress/blocks';
-import { useState } from '@wordpress/element';
+import { useState, createElement } from '@wordpress/element';
 
 export const DetailsDescriptionField = () => {
 	const { setValue, values } = useFormContext< Product >();

diff --git a/packages/js/product-editor/src/components/details-description-field/index.ts b/packages/js/product-editor/src/components/details-description-field/index.ts
@@ -0,0 +1 @@
+export * from './details-description-field';
diff --git a/...details-section/details-field-feature.tsx → ...s-feature-field/details-feature-field.tsx b/...details-section/details-field-feature.tsx → ...s-feature-field/details-feature-field.tsx
@@ -8,15 +8,16 @@ import {
 	Link,
 	__experimentalTooltip as Tooltip,
 } from '@woocommerce/components';
-import { getCheckboxTracks } from '@woocommerce/product-editor';
 import interpolateComponents from '@automattic/interpolate-components';
 import { Product } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
+import { createElement, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { PRODUCT_DETAILS_SLUG } from '../constants';
+import { getCheckboxTracks } from '../../utils';
+import { PRODUCT_DETAILS_SLUG } from '../../constants';
 
 export const DetailsFeatureField = () => {
 	const { getCheckboxControlProps } = useFormContext< Product >();

diff --git a/packages/js/product-editor/src/components/details-feature-field/index.ts b/packages/js/product-editor/src/components/details-feature-field/index.ts
@@ -0,0 +1 @@
+export * from './details-feature-field';
diff --git a/...ls/details-section/details-field-name.tsx → ...details-name-field/details-name-field.tsx b/...ls/details-section/details-field-name.tsx → ...details-name-field/details-name-field.tsx
@@ -12,13 +12,13 @@ import {
 	PRODUCTS_STORE_NAME,
 	WCDataSelector,
 } from '@woocommerce/data';
-import { useState } from '@wordpress/element';
+import { useState, createElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { EditProductLinkModal } from '../../shared/edit-product-link-modal';
-import { PRODUCT_DETAILS_SLUG } from '../constants';
+import { PRODUCT_DETAILS_SLUG } from '../../constants';
+import { EditProductLinkModal } from '../edit-product-link-modal';
 
 export const DetailsNameField = ( {} ) => {
 	const [ showProductLinkEditModal, setShowProductLinkEditModal ] =

diff --git a/packages/js/product-editor/src/components/details-name-field/index.ts b/packages/js/product-editor/src/components/details-name-field/index.ts
@@ -0,0 +1 @@
+export * from './details-name-field';
diff --git a/...details-section/details-field-summary.tsx → ...s-summary-field/details-summary-field.tsx b/...details-section/details-field-summary.tsx → ...s-summary-field/details-summary-field.tsx
@@ -8,7 +8,7 @@ import {
 } from '@woocommerce/components';
 import { Product } from '@woocommerce/data';
 import { BlockInstance, serialize, parse } from '@wordpress/blocks';
-import { useState } from '@wordpress/element';
+import { useState, createElement } from '@wordpress/element';
 
 export const DetailsSummaryField = () => {
 	const { setValue, values } = useFormContext< Product >();

diff --git a/packages/js/product-editor/src/components/details-summary-field/index.ts b/packages/js/product-editor/src/components/details-summary-field/index.ts
@@ -0,0 +1 @@
+export * from './details-summary-field';
diff --git a/...ct-link-modal/edit-product-link-modal.tsx → ...ct-link-modal/edit-product-link-modal.tsx b/...ct-link-modal/edit-product-link-modal.tsx → ...ct-link-modal/edit-product-link-modal.tsx
@@ -3,19 +3,18 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button, Modal, TextControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState, createElement } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { cleanForSlug } from '@wordpress/url';
 import interpolateComponents from '@automattic/interpolate-components';
 import { Product } from '@woocommerce/data';
 import { useFormContext } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
-import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor';
 
 /**
  * Internal dependencies
  */
-import './edit-product-link-modal.scss';
+import { useProductHelper } from '../../hooks/use-product-helper';
 
 type EditProductLinkModalProps = {
 	product: Product;

diff --git a/...s/shared/edit-product-link-modal/index.ts → ...mponents/edit-product-link-modal/index.ts b/...s/shared/edit-product-link-modal/index.ts → ...mponents/edit-product-link-modal/index.ts
diff --git a/...t-link-modal/edit-product-link-modal.scss → ...onents/edit-product-link-modal/style.scss b/...t-link-modal/edit-product-link-modal.scss → ...onents/edit-product-link-modal/style.scss
diff --git a/...dal/test/edit-product-link-modal.test.tsx → ...dal/test/edit-product-link-modal.test.tsx b/...dal/test/edit-product-link-modal.test.tsx → ...dal/test/edit-product-link-modal.test.tsx
@@ -4,6 +4,7 @@
 import { render } from '@testing-library/react';
 import { Product } from '@woocommerce/data';
 import userEvent from '@testing-library/user-event';
+import { createElement } from '@wordpress/element';
 
 /**
  * Internal dependencies

diff --git a/packages/js/product-editor/src/components/index.ts b/packages/js/product-editor/src/components/index.ts
@@ -5,3 +5,8 @@ export {
 export { WooProductFieldItem as __experimentalWooProductFieldItem } from './woo-product-field-item';
 export { WooProductSectionItem as __experimentalWooProductSectionItem } from './woo-product-section-item';
 export { WooProductTabItem as __experimentalWooProductTabItem } from './woo-product-tab-item';
+export { DetailsNameField as __experimentalDetailsNameField } from './details-name-field';
+export { DetailsFeatureField as __experimentalDetailsFeatureField } from './details-feature-field';
+export { DetailsCategoriesField as __experimentalDetailsCategoriesField } from './details-categories-field';
+export { DetailsSummaryField as __experimentalDetailsSummaryField } from './details-summary-field';
+export { DetailsDescriptionField as __experimentalDetailsDescriptionField } from './details-description-field';
diff --git a/packages/js/product-editor/src/constants.ts b/packages/js/product-editor/src/constants.ts
@@ -1,3 +1,44 @@
 export const NUMBERS_AND_ALLOWED_CHARS = '[^-0-9%s1%s2]';
 export const NUMBERS_AND_DECIMAL_SEPARATOR = '[^-\\d\\%s]+';
 export const ONLY_ONE_DECIMAL_SEPARATOR = '[%s](?=%s*[%s])';
+
+// This should never be a real slug value of any existing shipping class
+export const ADD_NEW_SHIPPING_CLASS_OPTION_VALUE =
+	'__ADD_NEW_SHIPPING_CLASS_OPTION__';
+export const UNCATEGORIZED_CATEGORY_SLUG = 'uncategorized';
+export const PRODUCT_VARIATION_TITLE_LIMIT = 32;
+export const STANDARD_RATE_TAX_CLASS_SLUG = 'standard';
+
+// Fill constants
+
+export const TAB_GENERAL_ID = 'tab/general';
+export const TAB_PRICING_ID = 'tab/pricing';
+export const TAB_INVENTORY_ID = 'tab/inventory';
+export const TAB_SHIPPING_ID = 'tab/shipping';
+export const TAB_OPTIONS_ID = 'tab/options';
+
+export const VARIANT_TAB_GENERAL_ID = `variant/${ TAB_GENERAL_ID }`;
+export const VARIANT_TAB_PRICING_ID = `variant/${ TAB_PRICING_ID }`;
+export const VARIANT_TAB_INVENTORY_ID = `variant/${ TAB_INVENTORY_ID }`;
+export const VARIANT_TAB_SHIPPING_ID = `variant/${ TAB_SHIPPING_ID }`;
+
+export const DETAILS_SECTION_ID = `${ TAB_GENERAL_ID }/details`;
+export const IMAGES_SECTION_ID = `${ TAB_GENERAL_ID }/images`;
+export const ATTRIBUTES_SECTION_ID = `${ TAB_GENERAL_ID }/attributes`;
+export const PRICING_SECTION_BASIC_ID = `${ TAB_PRICING_ID }/basic`;
+export const PRICING_SECTION_TAXES_ID = `${ TAB_PRICING_ID }/taxes`;
+export const PRICING_SECTION_TAXES_ADVANCED_ID = `${ TAB_PRICING_ID }/taxes/advanced`;
+export const INVENTORY_SECTION_ID = `${ TAB_INVENTORY_ID }/basic`;
+export const INVENTORY_SECTION_ADVANCED_ID = `${ TAB_INVENTORY_ID }/advanced`;
+export const SHIPPING_SECTION_BASIC_ID = `${ TAB_SHIPPING_ID }/basic`;
+export const SHIPPING_SECTION_DIMENSIONS_ID = `${ TAB_SHIPPING_ID }/dimensions`;
+
+export const VARIANT_PRICING_SECTION_BASIC_ID = `variant/${ PRICING_SECTION_BASIC_ID }`;
+export const VARIANT_PRICING_SECTION_TAXES_ID = `variant/${ PRICING_SECTION_TAXES_ID }`;
+export const VARIANT_PRICING_SECTION_TAXES_ADVANCED_ID = `variant/${ PRICING_SECTION_TAXES_ADVANCED_ID }`;
+export const VARIANT_INVENTORY_SECTION_ID = `variant/${ INVENTORY_SECTION_ID }`;
+export const VARIANT_INVENTORY_SECTION_ADVANCED_ID = `variant/${ INVENTORY_SECTION_ADVANCED_ID }`;
+export const VARIANT_SHIPPING_SECTION_BASIC_ID = `variant/${ SHIPPING_SECTION_BASIC_ID }`;
+export const VARIANT_SHIPPING_SECTION_DIMENSIONS_ID = `variant/${ SHIPPING_SECTION_DIMENSIONS_ID }`;
+
+export const PRODUCT_DETAILS_SLUG = 'product-details';
diff --git a/packages/js/product-editor/src/index.ts b/packages/js/product-editor/src/index.ts
@@ -1,4 +1,5 @@
 export * from './components';
+export { DETAILS_SECTION_ID, TAB_GENERAL_ID } from './constants';
 
 /**
  * Utils

diff --git a/packages/js/product-editor/src/style.scss b/packages/js/product-editor/src/style.scss
@@ -1 +1,4 @@
 @import 'components/product-section-layout/style.scss';
+@import 'components/edit-product-link-modal/style.scss';
+@import 'components/details-categories-field/style.scss';
+@import 'components/details-categories-field/create-category-modal.scss';
diff --git a/plugins/woocommerce-admin/client/products/fields/category-field/index.ts b/plugins/woocommerce-admin/client/products/fields/category-field/index.ts
diff --git a/plugins/woocommerce-admin/client/products/fills/details-section/details-section-fills.tsx b/plugins/woocommerce-admin/client/products/fills/details-section/details-section-fills.tsx
@@ -6,21 +6,19 @@ import {
 	__experimentalProductFieldSection as ProductFieldSection,
 	__experimentalWooProductSectionItem as WooProductSectionItem,
 	__experimentalWooProductFieldItem as WooProductFieldItem,
+	__experimentalDetailsNameField as DetailsNameField,
+	__experimentalDetailsFeatureField as DetailsFeatureField,
+	__experimentalDetailsCategoriesField as DetailsCategoriesField,
+	__experimentalDetailsSummaryField as DetailsSummaryField,
+	__experimentalDetailsDescriptionField as DetailsDescriptionField,
+	DETAILS_SECTION_ID,
+	TAB_GENERAL_ID,
 } from '@woocommerce/product-editor';
 
 /**
  * Internal dependencies
  */
-import {
-	DetailsNameField,
-	DetailsCategoriesField,
-	DetailsFeatureField,
-	DetailsSummaryField,
-	DetailsDescriptionField,
-} from './index';
-
-import { DETAILS_SECTION_ID, PLUGIN_ID, TAB_GENERAL_ID } from '../constants';
-
+import { PLUGIN_ID } from '../constants';
 import './product-details-section.scss';
 
 export const DetailsSectionFills = () => (

diff --git a/plugins/woocommerce-admin/client/products/fills/details-section/index.ts b/plugins/woocommerce-admin/client/products/fills/details-section/index.ts
@@ -1,6 +1 @@
-export * from './details-field-name';
-export * from './details-field-categories';
-export * from './details-field-feature';
-export * from './details-field-summary';
-export * from './details-field-description';
 export * from './details-section-fills';
diff --git a/plugins/woocommerce/changelog/update-36395-move-product-fields b/plugins/woocommerce/changelog/update-36395-move-product-fields
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Moving some components out of core and into product-editor package.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './details-categories-field';
		export * from './category-field';