diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/local-pickup-select/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/local-pickup-select/index.tsx index 3a4d42ba6cc..696db0fefae 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/local-pickup-select/index.tsx +++ b/plugins/woocommerce-blocks/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; } /** diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx index 8ea650b608b..31778fba701 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx +++ b/plugins/woocommerce-blocks/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'; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/index.ts b/plugins/woocommerce-blocks/assets/js/base/components/index.ts index f0a57cd8795..fca0dbf0250 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/index.ts +++ b/plugins/woocommerce-blocks/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'; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js index ec80578572b..fb151538dc4 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js +++ b/plugins/woocommerce-blocks/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'; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/saved-payment-method-options.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/saved-payment-method-options.tsx index c90ab0406db..c6a11c25aec 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/saved-payment-method-options.tsx +++ b/plugins/woocommerce-blocks/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, diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/test/payment-methods.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/test/payment-methods.js index e426f7f20cc..aac922b2e25 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/test/payment-methods.js +++ b/plugins/woocommerce-blocks/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 } ) => - ( - <> - Payment method options - - - ) -); +jest.mock( '@woocommerce/blocks-components', () => { + const originalModule = jest.requireActual( + '@woocommerce/blocks-components' + ); + + return { + __esModule: true, + ...originalModule, + RadioControlAccordion: ( { onChange } ) => ( + <> + Payment method options + + + ), + }; +} ); const originalSelect = jest.requireActual( '@wordpress/data' ).select; const selectMock = jest diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx index bcaf239ee8b..68b3f8a0105 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx +++ b/plugins/woocommerce-blocks/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; diff --git a/plugins/woocommerce-blocks/bin/webpack-entries.js b/plugins/woocommerce-blocks/bin/webpack-entries.js index 91542d7c89f..d28f2d651b2 100644 --- a/plugins/woocommerce-blocks/bin/webpack-entries.js +++ b/plugins/woocommerce-blocks/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 diff --git a/plugins/woocommerce-blocks/packages/checkout/components/order-local-pickup-packages/index.tsx b/plugins/woocommerce-blocks/packages/checkout/components/order-local-pickup-packages/index.tsx index ef07b6d5fb0..9f7b3eba123 100644 --- a/plugins/woocommerce-blocks/packages/checkout/components/order-local-pickup-packages/index.tsx +++ b/plugins/woocommerce-blocks/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 { diff --git a/plugins/woocommerce-blocks/packages/components/index.js b/plugins/woocommerce-blocks/packages/components/index.ts similarity index 50% rename from plugins/woocommerce-blocks/packages/components/index.js rename to plugins/woocommerce-blocks/packages/components/index.ts index 43f4a9ecf1f..9ab2bba2dde 100644 --- a/plugins/woocommerce-blocks/packages/components/index.js +++ b/plugins/woocommerce-blocks/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'; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/radio-control-accordion/index.tsx b/plugins/woocommerce-blocks/packages/components/radio-control-accordion/index.tsx similarity index 97% rename from plugins/woocommerce-blocks/assets/js/base/components/radio-control-accordion/index.tsx rename to plugins/woocommerce-blocks/packages/components/radio-control-accordion/index.tsx index d55cf315bd3..723a6ff74f9 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/radio-control-accordion/index.tsx +++ b/plugins/woocommerce-blocks/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; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/index.tsx b/plugins/woocommerce-blocks/packages/components/radio-control/index.tsx similarity index 100% rename from plugins/woocommerce-blocks/assets/js/base/components/radio-control/index.tsx rename to plugins/woocommerce-blocks/packages/components/radio-control/index.tsx diff --git a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/option-layout.tsx b/plugins/woocommerce-blocks/packages/components/radio-control/option-layout.tsx similarity index 100% rename from plugins/woocommerce-blocks/assets/js/base/components/radio-control/option-layout.tsx rename to plugins/woocommerce-blocks/packages/components/radio-control/option-layout.tsx diff --git a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/option.tsx b/plugins/woocommerce-blocks/packages/components/radio-control/option.tsx similarity index 100% rename from plugins/woocommerce-blocks/assets/js/base/components/radio-control/option.tsx rename to plugins/woocommerce-blocks/packages/components/radio-control/option.tsx diff --git a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/style.scss b/plugins/woocommerce-blocks/packages/components/radio-control/style.scss similarity index 100% rename from plugins/woocommerce-blocks/assets/js/base/components/radio-control/style.scss rename to plugins/woocommerce-blocks/packages/components/radio-control/style.scss diff --git a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/types.ts b/plugins/woocommerce-blocks/packages/components/radio-control/types.ts similarity index 100% rename from plugins/woocommerce-blocks/assets/js/base/components/radio-control/types.ts rename to plugins/woocommerce-blocks/packages/components/radio-control/types.ts