Move RadioControland RadioControlAccordion components to components package

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

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { RadioControlOption } from '@woocommerce/base-components/radio-control/types';
+import { RadioControl } from '@woocommerce/blocks-components';
 import { CartShippingPackageShippingRate } from '@woocommerce/types';
 /**
  * Internal dependencies
  */
-import RadioControl from '../../radio-control';
+import type { RadioControlOption } from '../../../../../../packages/components/radio-control/types';
 
 interface LocalPickupSelectProps {
 	title?: string | undefined;

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,7 @@
 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 } from '@woocommerce/blocks-components';
 import {
 	usePaymentMethodInterface,
 	useStoreEvents,
@@ -13,13 +13,13 @@ 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
  */
 import { getCanMakePaymentArg } from '../../../data/payment/utils/check-payment-methods';
 import { CustomerPaymentMethodConfiguration } from '../../../data/payment/types';
+import type { RadioControlOption } from '../../../../../packages/components/radio-control/types';
 
 /**
  * Returns the option object for a cc or echeck saved payment method token.

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

@@ -14,7 +14,6 @@ import { FormattedMonetaryAmount } 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,
@@ -27,6 +26,7 @@ import { LocalPickupSelect } from '@woocommerce/base-components/cart-checkout/lo
  * Internal dependencies
  */
 import ShippingRatesControlPackage from '../../../../base/components/cart-checkout/shipping-rates-control-package';
+import type { RadioControlOption } from '../../../../../../packages/components/radio-control/types';
 
 const getPickupLocation = (
 	option: CartShippingPackageShippingRate

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

@@ -1,3 +1,9 @@
 export { default as CheckboxList } from './checkbox-list';
+export {
+	default as RadioControl,
+	RadioControlOption,
+	RadioControlOptionLayout,
+} from './radio-control';
 export { default as FormattedMonetaryAmount } from './formatted-monetary-amount';
 export { Chip, RemovableChip } from './chip';
+export { default as RadioControlAccordion } from './radio-control-accordion';

assets/js/base/components/radio-control-accordion/index.tsx → packages/components/radio-control-accordion/index.tsx

@@ -7,7 +7,7 @@ import { withInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import RadioControlOption from '../radio-control/option';
+import { RadioControlOption } from '../radio-control';
 
 interface RadioControlAccordionProps {
 	className?: string;