Moving useProductHelper and useVariationsOrder hooks to product editor package (#37006)

This commit is contained in:
Joel Thiessen 2023-03-06 09:11:54 -08:00 committed by GitHub
parent deb1d131ad
commit b825b51767
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 60 additions and 27 deletions

View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Bringing in use-product-helper and related hooks.

View File

@ -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",

View File

@ -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])';

View File

@ -0,0 +1,2 @@
export { useProductHelper as __experimentalUseProductHelper } from './use-product-helper';
export { useVariationsOrder as __experimentalUseVariationsOrder } from './use-variations-order';

View File

@ -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'
);

View File

@ -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[];

View File

@ -4,3 +4,8 @@ export * from './components';
* Utils
*/
export * from './utils';
/**
* Hooks
*/
export * from './hooks';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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();

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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;

View File

@ -43,9 +43,9 @@ jest.mock( '~/header/utils', () => ( {
<Fragment { ...props }>{ props.children() }</Fragment>
),
} ) );
jest.mock( '../use-product-helper', () => {
jest.mock( '@woocommerce/product-editor', () => {
return {
useProductHelper: () => ( {
__experimentalUseProductHelper: () => ( {
createProductWithStatus,
updateProductWithStatus,
copyProductWithStatus,

View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Moving use-product-helper and related product hooks to product editor package.

View File

@ -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