From b825b51767919871fa1d4d3b64d602b870726c47 Mon Sep 17 00:00:00 2001 From: Joel Thiessen <444632+joelclimbsthings@users.noreply.github.com> Date: Mon, 6 Mar 2023 09:11:54 -0800 Subject: [PATCH] Moving useProductHelper and useVariationsOrder hooks to product editor package (#37006) --- .../changelog/update-move-product-hooks | 4 ++++ packages/js/product-editor/package.json | 3 +++ packages/js/product-editor/src/constants.ts | 3 +++ packages/js/product-editor/src/hooks/index.ts | 2 ++ .../src/hooks}/use-product-helper.ts | 17 +++++++++++------ .../src}/hooks/use-variations-order.ts | 6 +++--- packages/js/product-editor/src/index.ts | 5 +++++ .../products/fields/variations/variations.tsx | 2 +- .../pricing-section/pricing-section-fills.tsx | 2 +- .../shipping-field-dimensions-height.tsx | 2 +- .../shipping-field-dimensions-length.tsx | 3 ++- .../shipping-field-dimensions-weight.tsx | 6 +----- .../shipping-field-dimensions-width.tsx | 2 +- .../shipping-section/shipping-section-fills.tsx | 2 +- .../client/products/product-form-actions.tsx | 6 ++++-- .../edit-product-link-modal.tsx | 2 +- .../products/test/product-form-actions.spec.tsx | 4 ++-- .../changelog/update-move-product-hooks | 4 ++++ pnpm-lock.yaml | 12 ++++++++++-- 19 files changed, 60 insertions(+), 27 deletions(-) create mode 100644 packages/js/product-editor/changelog/update-move-product-hooks create mode 100644 packages/js/product-editor/src/constants.ts create mode 100644 packages/js/product-editor/src/hooks/index.ts rename {plugins/woocommerce-admin/client/products => packages/js/product-editor/src/hooks}/use-product-helper.ts (94%) rename {plugins/woocommerce-admin/client/products => packages/js/product-editor/src}/hooks/use-variations-order.ts (95%) create mode 100644 plugins/woocommerce/changelog/update-move-product-hooks diff --git a/packages/js/product-editor/changelog/update-move-product-hooks b/packages/js/product-editor/changelog/update-move-product-hooks new file mode 100644 index 00000000000..f44831541bd --- /dev/null +++ b/packages/js/product-editor/changelog/update-move-product-hooks @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Bringing in use-product-helper and related hooks. diff --git a/packages/js/product-editor/package.json b/packages/js/product-editor/package.json index c6f7301c3a5..0d235eaa222 100644 --- a/packages/js/product-editor/package.json +++ b/packages/js/product-editor/package.json @@ -29,7 +29,9 @@ }, "dependencies": { "@woocommerce/components": "workspace:*", + "@woocommerce/currency": "workspace:*", "@woocommerce/data": "workspace:^4.1.0", + "@woocommerce/number": "workspace:*", "@woocommerce/tracks": "workspace:^1.3.0", "@wordpress/components": "^19.5.0", "@wordpress/element": "^4.1.1", @@ -39,6 +41,7 @@ "devDependencies": { "@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/browserslist-config": "^4.1.1", diff --git a/packages/js/product-editor/src/constants.ts b/packages/js/product-editor/src/constants.ts new file mode 100644 index 00000000000..2942144a2a7 --- /dev/null +++ b/packages/js/product-editor/src/constants.ts @@ -0,0 +1,3 @@ +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])'; diff --git a/packages/js/product-editor/src/hooks/index.ts b/packages/js/product-editor/src/hooks/index.ts new file mode 100644 index 00000000000..700bcf73864 --- /dev/null +++ b/packages/js/product-editor/src/hooks/index.ts @@ -0,0 +1,2 @@ +export { useProductHelper as __experimentalUseProductHelper } from './use-product-helper'; +export { useVariationsOrder as __experimentalUseVariationsOrder } from './use-variations-order'; diff --git a/plugins/woocommerce-admin/client/products/use-product-helper.ts b/packages/js/product-editor/src/hooks/use-product-helper.ts similarity index 94% rename from plugins/woocommerce-admin/client/products/use-product-helper.ts rename to packages/js/product-editor/src/hooks/use-product-helper.ts index a26a3e60558..3f2039ad67d 100644 --- a/plugins/woocommerce-admin/client/products/use-product-helper.ts +++ b/packages/js/product-editor/src/hooks/use-product-helper.ts @@ -2,10 +2,6 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { - AUTO_DRAFT_NAME, - getDerivedProductType, -} from '@woocommerce/product-editor'; import { useDispatch } from '@wordpress/data'; import { useCallback, useContext, useState } from '@wordpress/element'; import * as WooNumber from '@woocommerce/number'; @@ -25,11 +21,14 @@ import { CurrencyContext } from '@woocommerce/currency'; /** * Internal dependencies */ +import { AUTO_DRAFT_NAME, getDerivedProductType } from '../index'; import { NUMBERS_AND_DECIMAL_SEPARATOR, ONLY_ONE_DECIMAL_SEPARATOR, -} from './constants'; -import { ProductVariationsOrder } from './hooks/use-variations-order'; +} from '../constants'; +import { ProductVariationsOrder } from './use-variations-order'; + +// TODO: Having to add TS ignore comments here, should be able to address with TS config but running into issues. function removeReadonlyProperties( product: Product @@ -156,7 +155,11 @@ export function useProductHelper() { }, { update: Object.values( variationsOrder ) + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore .flatMap( Object.entries ) + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore .map( ( [ id, menu_order ] ) => ( { id, menu_order, @@ -309,6 +312,8 @@ export function useProductHelper() { 'g' ); const decimalRegex = new RegExp( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore ONLY_ONE_DECIMAL_SEPARATOR.replaceAll( '%s', decimalSeparator ), 'g' ); diff --git a/plugins/woocommerce-admin/client/products/hooks/use-variations-order.ts b/packages/js/product-editor/src/hooks/use-variations-order.ts similarity index 95% rename from plugins/woocommerce-admin/client/products/hooks/use-variations-order.ts rename to packages/js/product-editor/src/hooks/use-variations-order.ts index e1747b43b46..27de68fe89b 100644 --- a/plugins/woocommerce-admin/client/products/hooks/use-variations-order.ts +++ b/packages/js/product-editor/src/hooks/use-variations-order.ts @@ -45,10 +45,10 @@ function sort( } ); } -export default function useVariationsOrder( { +export const useVariationsOrder = ( { variations, currentPage, -}: UseVariationsOrderInput ): UseVariationsOrderOutput { +}: UseVariationsOrderInput ): UseVariationsOrderOutput => { const { setValue, values } = useFormContext< ProductVariationsOrder >(); function onOrderChange( items: JSX.Element[] ) { @@ -71,7 +71,7 @@ export default function useVariationsOrder( { getVariationKey, onOrderChange, }; -} +}; export type UseVariationsOrderInput = { variations: ProductVariation[]; diff --git a/packages/js/product-editor/src/index.ts b/packages/js/product-editor/src/index.ts index 1b104d58223..88b9995636a 100644 --- a/packages/js/product-editor/src/index.ts +++ b/packages/js/product-editor/src/index.ts @@ -4,3 +4,8 @@ export * from './components'; * Utils */ export * from './utils'; + +/** + * Hooks + */ +export * from './hooks'; diff --git a/plugins/woocommerce-admin/client/products/fields/variations/variations.tsx b/plugins/woocommerce-admin/client/products/fields/variations/variations.tsx index 55c972ec0af..50790d11294 100644 --- a/plugins/woocommerce-admin/client/products/fields/variations/variations.tsx +++ b/plugins/woocommerce-admin/client/products/fields/variations/variations.tsx @@ -11,6 +11,7 @@ import { import { getProductStockStatus, getProductStockStatusClass, + __experimentalUseVariationsOrder as useVariationsOrder, } from '@woocommerce/product-editor'; import { Link, @@ -31,7 +32,6 @@ import { CurrencyContext } from '@woocommerce/currency'; * Internal dependencies */ import { PRODUCT_VARIATION_TITLE_LIMIT } from '~/products/constants'; -import useVariationsOrder from '~/products/hooks/use-variations-order'; import HiddenIcon from '~/products/images/hidden-icon'; import VisibleIcon from '~/products/images/visible-icon'; import './variations.scss'; diff --git a/plugins/woocommerce-admin/client/products/fills/pricing-section/pricing-section-fills.tsx b/plugins/woocommerce-admin/client/products/fills/pricing-section/pricing-section-fills.tsx index 854534be269..2998e3cb986 100644 --- a/plugins/woocommerce-admin/client/products/fills/pricing-section/pricing-section-fills.tsx +++ b/plugins/woocommerce-admin/client/products/fills/pricing-section/pricing-section-fills.tsx @@ -11,6 +11,7 @@ import { __experimentalWooProductSectionItem as WooProductSectionItem, __experimentalWooProductFieldItem as WooProductFieldItem, __experimentalProductSectionLayout as ProductSectionLayout, + __experimentalUseProductHelper as useProductHelper, } from '@woocommerce/product-editor'; import { recordEvent } from '@woocommerce/tracks'; import { Product } from '@woocommerce/data'; @@ -27,7 +28,6 @@ import { PricingTaxesClassField, PricingTaxesChargeField, } from './index'; -import { useProductHelper } from '../../use-product-helper'; import { PLUGIN_ID } from '../constants'; import './pricing-section.scss'; diff --git a/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-height.tsx b/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-height.tsx index 07130f41543..628a8a39185 100644 --- a/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-height.tsx +++ b/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-height.tsx @@ -4,6 +4,7 @@ import { __ } from '@wordpress/i18n'; import { useFormContext } from '@woocommerce/components'; import { PartialProduct } from '@woocommerce/data'; +import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor'; import { BaseControl, // @ts-expect-error `__experimentalInputControl` does exist. @@ -14,7 +15,6 @@ import { /** * Internal dependencies */ -import { useProductHelper } from '../../use-product-helper'; import { getInterpolatedSizeLabel } from './utils'; import { ShippingDimensionsPropsType } from './index'; diff --git a/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-length.tsx b/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-length.tsx index 5739af19ec5..6dc609e907f 100644 --- a/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-length.tsx +++ b/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-length.tsx @@ -4,6 +4,8 @@ import { __ } from '@wordpress/i18n'; import { useFormContext } from '@woocommerce/components'; import { PartialProduct } from '@woocommerce/data'; +import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor'; + import { BaseControl, // @ts-expect-error `__experimentalInputControl` does exist. @@ -14,7 +16,6 @@ import { /** * Internal dependencies */ -import { useProductHelper } from '../../use-product-helper'; import { getInterpolatedSizeLabel } from './utils'; import { ShippingDimensionsPropsType } from './index'; diff --git a/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-weight.tsx b/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-weight.tsx index dedfda542c4..a7cf1450045 100644 --- a/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-weight.tsx +++ b/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-weight.tsx @@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n'; import { useFormContext } from '@woocommerce/components'; import { OPTIONS_STORE_NAME, PartialProduct } from '@woocommerce/data'; import { useSelect } from '@wordpress/data'; +import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor'; import { BaseControl, // @ts-expect-error `__experimentalInputControl` does exist. @@ -12,11 +13,6 @@ import { __experimentalInputControl as InputControl, } from '@wordpress/components'; -/** - * Internal dependencies - */ -import { useProductHelper } from '../../use-product-helper'; - export const ShippingDimensionsWeightField = () => { const { getInputProps } = useFormContext< PartialProduct >(); const { formatNumber, parseNumber } = useProductHelper(); diff --git a/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-width.tsx b/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-width.tsx index f4ea9409fd7..0c7cc8a0d87 100644 --- a/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-width.tsx +++ b/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-width.tsx @@ -4,6 +4,7 @@ import { __ } from '@wordpress/i18n'; import { useFormContext } from '@woocommerce/components'; import { PartialProduct } from '@woocommerce/data'; +import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor'; import { BaseControl, // @ts-expect-error `__experimentalInputControl` does exist. @@ -14,7 +15,6 @@ import { /** * Internal dependencies */ -import { useProductHelper } from '../../use-product-helper'; import { getInterpolatedSizeLabel } from './utils'; import { ShippingDimensionsPropsType } from './index'; diff --git a/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-section-fills.tsx b/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-section-fills.tsx index 4b0a10a6637..73278ba3f91 100644 --- a/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-section-fills.tsx +++ b/plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-section-fills.tsx @@ -6,6 +6,7 @@ import { __experimentalWooProductSectionItem as WooProductSectionItem, __experimentalWooProductFieldItem as WooProductFieldItem, __experimentalProductSectionLayout as ProductSectionLayout, + __experimentalUseProductHelper as useProductHelper, } from '@woocommerce/product-editor'; import { PartialProduct, OPTIONS_STORE_NAME } from '@woocommerce/data'; import { useSelect } from '@wordpress/data'; @@ -30,7 +31,6 @@ import { ShippingDimensionsImage, ShippingDimensionsImageProps, } from '../../fields/shipping-dimensions-image'; -import { useProductHelper } from '../../use-product-helper'; import './shipping-section.scss'; diff --git a/plugins/woocommerce-admin/client/products/product-form-actions.tsx b/plugins/woocommerce-admin/client/products/product-form-actions.tsx index 19fb65153db..a9fbe53c797 100644 --- a/plugins/woocommerce-admin/client/products/product-form-actions.tsx +++ b/plugins/woocommerce-admin/client/products/product-form-actions.tsx @@ -12,7 +12,10 @@ import { import { chevronDown, check, Icon } from '@wordpress/icons'; import { registerPlugin } from '@wordpress/plugins'; import { useFormContext } from '@woocommerce/components'; -import { preventLeavingProductForm } from '@woocommerce/product-editor'; +import { + preventLeavingProductForm, + __experimentalUseProductHelper as useProductHelper, +} from '@woocommerce/product-editor'; import { Product } from '@woocommerce/data'; import { recordEvent } from '@woocommerce/tracks'; import { navigateTo } from '@woocommerce/navigation'; @@ -27,7 +30,6 @@ import { store } from '@wordpress/viewport'; */ import usePreventLeavingPage from '~/hooks/usePreventLeavingPage'; import { WooHeaderItem } from '~/header/utils'; -import { useProductHelper } from './use-product-helper'; import './product-form-actions.scss'; import { useProductMVPCESFooter } from '~/customer-effort-score-tracks/use-product-mvp-ces-footer'; import { useCustomerEffortScoreExitPageTracker } from '~/customer-effort-score-tracks/use-customer-effort-score-exit-page-tracker'; diff --git a/plugins/woocommerce-admin/client/products/shared/edit-product-link-modal/edit-product-link-modal.tsx b/plugins/woocommerce-admin/client/products/shared/edit-product-link-modal/edit-product-link-modal.tsx index 7673d2b47a2..22c73d84b3d 100644 --- a/plugins/woocommerce-admin/client/products/shared/edit-product-link-modal/edit-product-link-modal.tsx +++ b/plugins/woocommerce-admin/client/products/shared/edit-product-link-modal/edit-product-link-modal.tsx @@ -10,12 +10,12 @@ 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 '../../use-product-helper'; type EditProductLinkModalProps = { product: Product; diff --git a/plugins/woocommerce-admin/client/products/test/product-form-actions.spec.tsx b/plugins/woocommerce-admin/client/products/test/product-form-actions.spec.tsx index 7189faf5eeb..bad811af579 100644 --- a/plugins/woocommerce-admin/client/products/test/product-form-actions.spec.tsx +++ b/plugins/woocommerce-admin/client/products/test/product-form-actions.spec.tsx @@ -43,9 +43,9 @@ jest.mock( '~/header/utils', () => ( { { props.children() } ), } ) ); -jest.mock( '../use-product-helper', () => { +jest.mock( '@woocommerce/product-editor', () => { return { - useProductHelper: () => ( { + __experimentalUseProductHelper: () => ( { createProductWithStatus, updateProductWithStatus, copyProductWithStatus, diff --git a/plugins/woocommerce/changelog/update-move-product-hooks b/plugins/woocommerce/changelog/update-move-product-hooks new file mode 100644 index 00000000000..5dbc28e2162 --- /dev/null +++ b/plugins/woocommerce/changelog/update-move-product-hooks @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Moving use-product-helper and related product hooks to product editor package. diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 82e41aa3995..9d9c30be900 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1297,10 +1297,13 @@ importers: specifiers: '@types/react': ^17.0.2 '@types/wordpress__components': ^19.10.1 + '@types/wordpress__data': ^6.0.0 '@woocommerce/components': workspace:* + '@woocommerce/currency': workspace:* '@woocommerce/data': workspace:^4.1.0 '@woocommerce/eslint-plugin': workspace:* '@woocommerce/internal-style-build': workspace:* + '@woocommerce/number': workspace:* '@woocommerce/tracks': workspace:^1.3.0 '@wordpress/browserslist-config': ^4.1.1 '@wordpress/components': ^19.5.0 @@ -1323,7 +1326,9 @@ importers: webpack-cli: ^3.3.12 dependencies: '@woocommerce/components': link:../components + '@woocommerce/currency': link:../currency '@woocommerce/data': link:../data + '@woocommerce/number': link:../number '@woocommerce/tracks': link:../tracks '@wordpress/components': 19.12.0_tufdcic6wklrwyy3rhbsbktylu '@wordpress/element': 4.20.0 @@ -1332,6 +1337,7 @@ importers: devDependencies: '@types/react': 17.0.50 '@types/wordpress__components': 19.10.1_sfoxds7t5ydpegc3knd667wn6m + '@types/wordpress__data': 6.0.0 '@woocommerce/eslint-plugin': link:../eslint-plugin '@woocommerce/internal-style-build': link:../internal-style-build '@wordpress/browserslist-config': 4.1.3 @@ -3026,6 +3032,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.19.3 + dev: true /@babel/helper-module-imports/7.16.7: resolution: {integrity: sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==} @@ -3082,6 +3089,7 @@ packages: /@babel/helper-plugin-utils/7.14.5: resolution: {integrity: sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==} engines: {node: '>=6.9.0'} + dev: true /@babel/helper-plugin-utils/7.18.9: resolution: {integrity: sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==} @@ -4160,7 +4168,7 @@ packages: '@babel/core': 7.12.9 '@babel/helper-annotate-as-pure': 7.16.7 '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.12.9 - '@babel/helper-plugin-utils': 7.19.0 + '@babel/helper-plugin-utils': 7.18.9 '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.12.9 transitivePeerDependencies: - supports-color @@ -4175,7 +4183,7 @@ packages: '@babel/core': 7.16.12 '@babel/helper-annotate-as-pure': 7.16.7 '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.16.12 - '@babel/helper-plugin-utils': 7.19.0 + '@babel/helper-plugin-utils': 7.18.9 '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.16.12 transitivePeerDependencies: - supports-color