Move RadioControland RadioControlAccordion components to components package (#11312)

Co-authored-by: Thomas Roberts <[email protected]>

Author: Alex Florisca

assets/js/base/components/cart-checkout/local-pickup-select/index.tsx

@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import { RadioControlOption } from '@woocommerce/base-components/radio-control/types';
+import {
+	RadioControl,
+	RadioControlOptionType,
+} from '@woocommerce/blocks-components';
 import { CartShippingPackageShippingRate } from '@woocommerce/types';
-/**
- * Internal dependencies
- */
-import RadioControl from '../../radio-control';
 
 interface LocalPickupSelectProps {
 	title?: string | undefined;
@@ -17,7 +16,7 @@ interface LocalPickupSelectProps {
 	renderPickupLocation: (
 		location: CartShippingPackageShippingRate,
 		pickupLocationsCount: number
-	) => RadioControlOption;
+	) => RadioControlOptionType;
 	packageCount: number;
 }
 /**

assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx

@@ -2,9 +2,10 @@
  * External dependencies
  */
 import { useState, useEffect } from '@wordpress/element';
-import RadioControl, {
+import {
+	RadioControl,
 	RadioControlOptionLayout,
-} from '@woocommerce/base-components/radio-control';
+} from '@woocommerce/blocks-components';
 import type { CartShippingPackageShippingRate } from '@woocommerce/types';
 import { usePrevious } from '@woocommerce/base-hooks';
 

assets/js/base/components/index.ts

@@ -10,7 +10,6 @@ export * from './filter-reset-button';
 export * from './filter-submit-button';
 export * from './form';
 export * from './form-token-field';
-export * from './formatted-monetary-amount';
 export * from './label';
 export * from './load-more-button';
 export * from './loading-mask';
@@ -23,8 +22,6 @@ export * from './product-name';
 export * from './product-price';
 export * from './product-rating';
 export * from './quantity-selector';
-export * from './radio-control';
-export * from './radio-control-accordion';
 export * from './read-more';
 export * from './reviews';
 export * from './sidebar-layout';

assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js

@@ -8,7 +8,7 @@ import {
 import { cloneElement, useCallback } from '@wordpress/element';
 import { useEditorContext } from '@woocommerce/base-context';
 import classNames from 'classnames';
-import RadioControlAccordion from '@woocommerce/base-components/radio-control-accordion';
+import { RadioControlAccordion } from '@woocommerce/blocks-components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getPaymentMethods } from '@woocommerce/blocks-registry';
 

assets/js/blocks/cart-checkout-shared/payment-methods/saved-payment-method-options.tsx

@@ -4,7 +4,10 @@
 import { useMemo, cloneElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { noticeContexts } from '@woocommerce/base-context';
-import RadioControl from '@woocommerce/base-components/radio-control';
+import {
+	RadioControl,
+	RadioControlOptionType,
+} from '@woocommerce/blocks-components';
 import {
 	usePaymentMethodInterface,
 	useStoreEvents,
@@ -13,7 +16,6 @@ import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getPaymentMethods } from '@woocommerce/blocks-registry';
 import { isNull } from '@woocommerce/types';
-import { RadioControlOption } from '@woocommerce/base-components/radio-control/types';
 
 /**
  * Internal dependencies
@@ -87,7 +89,7 @@ const SavedPaymentMethodOptions = () => {
 	const { removeNotice } = useDispatch( 'core/notices' );
 	const { dispatchCheckoutEvent } = useStoreEvents();
 
-	const options = useMemo< RadioControlOption[] >( () => {
+	const options = useMemo< RadioControlOptionType[] >( () => {
 		const types = Object.keys( savedPaymentMethods );
 
 		// Get individual payment methods from saved payment methods and put them into a unique array.
@@ -145,7 +147,7 @@ const SavedPaymentMethodOptions = () => {
 		} );
 		return mappedOptions.filter(
 			( option ) => typeof option !== 'undefined'
-		) as RadioControlOption[];
+		) as RadioControlOptionType[];
 	}, [
 		savedPaymentMethods,
 		paymentMethods,

assets/js/blocks/cart-checkout-shared/payment-methods/test/payment-methods.js

@@ -27,19 +27,24 @@ jest.mock( '../saved-payment-method-options', () => ( { onChange } ) => {
 	);
 } );
 
-jest.mock(
-	'@woocommerce/base-components/radio-control-accordion',
-	() =>
-		( { onChange } ) =>
-			(
-				<>
-					<span>Payment method options</span>
-					<button onClick={ () => onChange( 'credit-card' ) }>
-						Select new payment
-					</button>
-				</>
-			)
-);
+jest.mock( '@woocommerce/blocks-components', () => {
+	const originalModule = jest.requireActual(
+		'@woocommerce/blocks-components'
+	);
+
+	return {
+		__esModule: true,
+		...originalModule,
+		RadioControlAccordion: ( { onChange } ) => (
+			<>
+				<span>Payment method options</span>
+				<button onClick={ () => onChange( 'credit-card' ) }>
+					Select new payment
+				</button>
+			</>
+		),
+	};
+} );
 
 const originalSelect = jest.requireActual( '@wordpress/data' ).select;
 const selectMock = jest

assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx

@@ -10,11 +10,13 @@ import {
 } from '@wordpress/element';
 import { useShippingData, useStoreCart } from '@woocommerce/base-context/hooks';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { FormattedMonetaryAmount } from '@woocommerce/blocks-components';
+import {
+	FormattedMonetaryAmount,
+	RadioControlOptionType,
+} from '@woocommerce/blocks-components';
 import { decodeEntities } from '@wordpress/html-entities';
 import { getSetting } from '@woocommerce/settings';
 import { Icon, mapMarker } from '@wordpress/icons';
-import type { RadioControlOption } from '@woocommerce/base-components/radio-control/types';
 import { CartShippingPackageShippingRate } from '@woocommerce/types';
 import {
 	isPackageRateCollectable,
@@ -67,7 +69,7 @@ const getPickupDetails = (
 const renderPickupLocation = (
 	option: CartShippingPackageShippingRate,
 	packageCount: number
-): RadioControlOption => {
+): RadioControlOptionType => {
 	const priceWithTaxes = getSetting( 'displayCartPricesIncludingTax', false )
 		? parseInt( option.price, 10 ) + parseInt( option.taxes, 10 )
 		: option.price;

bin/webpack-entries.js

@@ -166,7 +166,7 @@ const getBlockEntries = ( relativePath ) => {
 const entries = {
 	styling: {
 		// Packages styles
-		'packages-style': glob.sync( './packages/**/index.js' ),
+		'packages-style': glob.sync( './packages/**/index.{t,j}s' ),
 
 		// Shared blocks code
 		'wc-blocks': './assets/js/index.js',
@@ -195,7 +195,7 @@ const entries = {
 		wcBlocksSharedHocs: './assets/js/shared/hocs/index.js',
 		priceFormat: './packages/prices/index.js',
 		blocksCheckout: './packages/checkout/index.js',
-		blocksComponents: './packages/components/index.js',
+		blocksComponents: './packages/components/index.ts',
 	},
 	main: {
 		// Shared blocks code

packages/checkout/components/order-local-pickup-packages/index.tsx

@@ -7,12 +7,12 @@ import {
 	CartShippingPackageShippingRate,
 } from '@woocommerce/type-defs/cart';
 import { Component } from '@wordpress/element';
-import { RadioControlOption } from '@woocommerce/base-components/radio-control/types';
 
 /**
  * Internal dependencies
  */
 import { createSlotFill } from '../../slot';
+import type { RadioControlOption } from '../../../../packages/components/radio-control/types';
 
 const slotName = '__experimentalOrderLocalPickupPackages';
 const {

packages/components/index.js packages/components/index.tspackages/components/index.js renamed to packages/components/index.ts

@@ -1,5 +1,12 @@
 export { default as CheckboxList } from './checkbox-list';
+export { Chip, RemovableChip } from './chip';
 export { default as Label } from './label';
 export { default as FormattedMonetaryAmount } from './formatted-monetary-amount';
-export { Chip, RemovableChip } from './chip';
+export {
+	default as RadioControl,
+	RadioControlOption,
+	RadioControlOptionLayout,
+} from './radio-control';
+export type { RadioControlOption as RadioControlOptionType } from './radio-control/types';
+export { default as RadioControlAccordion } from './radio-control-accordion';
 export { default as Spinner } from './spinner';