Move CheckboxList and create new blocksComponents package (#11214)

.eslintrc.js

@@ -147,6 +147,7 @@ module.exports = {
 		'import/core-modules': [
 			'@woocommerce/block-data',
 			'@woocommerce/blocks-checkout',
+			'@woocommerce/blocks-components',
 			'@woocommerce/price-format',
 			'@woocommerce/settings',
 			'@woocommerce/shared-context',

assets/js/base/components/index.ts

@@ -1,7 +1,6 @@
 export * from './block-error-boundary';
 export * from './button';
 export * from './cart-checkout';
-export * from './checkbox-list';
 export * from './chip';
 export * from './combobox';
 export * from './country-input';

assets/js/blocks/attribute-filter/checkbox-filter.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import CheckboxList from '@woocommerce/base-components/checkbox-list';
+import { CheckboxList } from '@woocommerce/blocks-components';
+
 /**
  * Internal dependencies
  */

assets/js/blocks/rating-filter/block.tsx

@@ -17,7 +17,7 @@ import { getSettingWithCoercion } from '@woocommerce/settings';
 import { isBoolean, isObject, objectHasProp } from '@woocommerce/types';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { useState, useCallback, useMemo, useEffect } from '@wordpress/element';
-import CheckboxList from '@woocommerce/base-components/checkbox-list';
+import { CheckboxList } from '@woocommerce/blocks-components';
 import FilterSubmitButton from '@woocommerce/base-components/filter-submit-button';
 import FilterResetButton from '@woocommerce/base-components/filter-reset-button';
 import FormTokenField from '@woocommerce/base-components/form-token-field';

assets/js/blocks/stock-filter/block.tsx

@@ -18,7 +18,7 @@ import {
 	useMemo,
 	useRef,
 } from '@wordpress/element';
-import CheckboxList from '@woocommerce/base-components/checkbox-list';
+import { CheckboxList } from '@woocommerce/blocks-components';
 import FilterSubmitButton from '@woocommerce/base-components/filter-submit-button';
 import FilterResetButton from '@woocommerce/base-components/filter-reset-button';
 import FilterTitlePlaceholder from '@woocommerce/base-components/filter-placeholder';

bin/webpack-entries.js

@@ -195,6 +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',
 	},
 	main: {
 		// Shared blocks code

bin/webpack-helpers.js

@@ -17,6 +17,7 @@ const wcDepMap = {
 	'@woocommerce/shared-hocs': [ 'wc', 'wcBlocksSharedHocs' ],
 	'@woocommerce/price-format': [ 'wc', 'priceFormat' ],
 	'@woocommerce/blocks-checkout': [ 'wc', 'blocksCheckout' ],
+	'@woocommerce/blocks-components': [ 'wc', 'blocksComponents' ],
 	'@woocommerce/interactivity': [ 'wc', '__experimentalInteractivity' ],
 };
 
@@ -29,6 +30,7 @@ const wcHandleMap = {
 	'@woocommerce/shared-hocs': 'wc-blocks-shared-hocs',
 	'@woocommerce/price-format': 'wc-price-format',
 	'@woocommerce/blocks-checkout': 'wc-blocks-checkout',
+	'@woocommerce/blocks-components': 'wc-blocks-components',
 	'@woocommerce/interactivity': 'wc-interactivity',
 };
 

assets/js/base/components/checkbox-list/index.tsx → packages/components/checkbox-list/index.tsx

@@ -17,13 +17,13 @@ interface CheckboxListOptions {
 }
 
 interface CheckboxListProps {
-	className?: string;
-	isLoading?: boolean;
-	isDisabled?: boolean;
-	limit?: number;
-	checked?: string[];
-	onChange: ( value: string ) => void;
-	options?: CheckboxListOptions[];
+	className?: string | undefined;
+	isLoading?: boolean | undefined;
+	isDisabled?: boolean | undefined;
+	limit?: number | undefined;
+	checked?: string[] | undefined;
+	onChange: ( value: string ) => void | undefined;
+	options?: CheckboxListOptions[] | undefined;
 }
 
 /**

packages/components/index.js

@@ -0,0 +1 @@
+export { default as CheckboxList } from './checkbox-list';

src/AssetsController.php

@@ -62,6 +62,7 @@ public function register_assets() {
 		$this->api->register_script( 'wc-price-format', 'build/price-format.js', [], false );
 
 		$this->api->register_script( 'wc-blocks-checkout', 'build/blocks-checkout.js', [] );
+		$this->api->register_script( 'wc-blocks-components', 'build/blocks-components.js', [] );
 
 		wp_add_inline_script(
 			'wc-blocks-middleware',

tests/js/jest.config.json

@@ -16,6 +16,7 @@
 		"@woocommerce/editor-components(.*)$": "assets/js/editor-components/$1",
 		"@woocommerce/blocks-registry": "assets/js/blocks-registry",
 		"@woocommerce/blocks-checkout": "packages/checkout",
+		"@woocommerce/blocks-components": "packages/components",
 		"@woocommerce/price-format": "packages/prices",
 		"@woocommerce/block-hocs(.*)$": "assets/js/hocs/$1",
 		"@woocommerce/base-components(.*)$": "assets/js/base/components/$1",

tsconfig.base.json

@@ -51,6 +51,7 @@
 			"@woocommerce/block-hocs": [ "assets/js/hocs" ],
 			"@woocommerce/blocks-registry": [ "assets/js/blocks-registry" ],
 			"@woocommerce/blocks-checkout": [ "packages/checkout" ],
+			"@woocommerce/blocks-components": [ "packages/components" ],
 			"@woocommerce/price-format": [ "packages/prices" ],
 			"@woocommerce/block-settings": [ "assets/js/settings/blocks" ],
 			"@woocommerce/icons": [ "assets/js/icons" ],

tsconfig.json

@@ -3,6 +3,7 @@
 	"include": [
 		"./assets/js/**/*",
 		"./packages/checkout/**/*",
+		"./packages/components/**/*",
 		"./assets/js/blocks/**/block.json",
 		"./assets/js/atomic/blocks/**/block.json",
 		"./assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/**/block.json",