From d77df5bb28a14e825e4104569fff8a539743c032 Mon Sep 17 00:00:00 2001 From: Thomas Roberts Date: Tue, 7 Nov 2023 16:46:47 +0000 Subject: [PATCH 1/3] Move checkbox to components package and leave alias behind --- .../components/checkbox-control/index.tsx | 81 +------------------ .../components/checkbox-control/index.tsx | 80 ++++++++++++++++++ .../stories/index.stories.tsx | 0 .../components/checkbox-control/style.scss | 0 4 files changed, 81 insertions(+), 80 deletions(-) create mode 100644 packages/components/checkbox-control/index.tsx rename packages/{checkout => }/components/checkbox-control/stories/index.stories.tsx (100%) rename packages/{checkout => }/components/checkbox-control/style.scss (100%) diff --git a/packages/checkout/components/checkbox-control/index.tsx b/packages/checkout/components/checkbox-control/index.tsx index bbce84858e0..31bb0ac1963 100644 --- a/packages/checkout/components/checkbox-control/index.tsx +++ b/packages/checkout/components/checkbox-control/index.tsx @@ -1,80 +1 @@ -/** - * External dependencies - */ -import classNames from 'classnames'; -import { useInstanceId } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import './style.scss'; - -export type CheckboxControlProps = { - className?: string; - label?: string | React.ReactNode; - id?: string; - onChange: ( value: boolean ) => void; - children?: React.ReactChildren; - hasError?: boolean; - checked?: boolean; - disabled?: boolean; -}; - -/** - * Component used to show a checkbox control with styles. - */ -export const CheckboxControl = ( { - className, - label, - id, - onChange, - children, - hasError = false, - checked = false, - disabled = false, - ...rest -}: CheckboxControlProps ): JSX.Element => { - const instanceId = useInstanceId( CheckboxControl ); - const checkboxId = id || `checkbox-control-${ instanceId }`; - - return ( -
- -
- ); -}; - -export default CheckboxControl; +export { CheckboxControl } from '../../../../components/checkbox-control'; diff --git a/packages/components/checkbox-control/index.tsx b/packages/components/checkbox-control/index.tsx new file mode 100644 index 00000000000..bbce84858e0 --- /dev/null +++ b/packages/components/checkbox-control/index.tsx @@ -0,0 +1,80 @@ +/** + * External dependencies + */ +import classNames from 'classnames'; +import { useInstanceId } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import './style.scss'; + +export type CheckboxControlProps = { + className?: string; + label?: string | React.ReactNode; + id?: string; + onChange: ( value: boolean ) => void; + children?: React.ReactChildren; + hasError?: boolean; + checked?: boolean; + disabled?: boolean; +}; + +/** + * Component used to show a checkbox control with styles. + */ +export const CheckboxControl = ( { + className, + label, + id, + onChange, + children, + hasError = false, + checked = false, + disabled = false, + ...rest +}: CheckboxControlProps ): JSX.Element => { + const instanceId = useInstanceId( CheckboxControl ); + const checkboxId = id || `checkbox-control-${ instanceId }`; + + return ( +
+ +
+ ); +}; + +export default CheckboxControl; diff --git a/packages/checkout/components/checkbox-control/stories/index.stories.tsx b/packages/components/checkbox-control/stories/index.stories.tsx similarity index 100% rename from packages/checkout/components/checkbox-control/stories/index.stories.tsx rename to packages/components/checkbox-control/stories/index.stories.tsx diff --git a/packages/checkout/components/checkbox-control/style.scss b/packages/components/checkbox-control/style.scss similarity index 100% rename from packages/checkout/components/checkbox-control/style.scss rename to packages/components/checkbox-control/style.scss From 948c8298051b0fc35ec8b61637b61a2d4bdcbb1e Mon Sep 17 00:00:00 2001 From: Thomas Roberts Date: Tue, 7 Nov 2023 18:29:44 +0000 Subject: [PATCH 2/3] Update imports of Checkbox Control --- .../payment-methods/payment-method-card.tsx | 2 +- .../inner-blocks/checkout-terms-block/edit.tsx | 2 +- .../inner-blocks/checkout-terms-block/frontend.tsx | 2 +- assets/js/blocks/checkout/order-notes/index.tsx | 3 +-- .../checkout/components/checkbox-control/index.tsx | 2 +- packages/checkout/components/index.ts | 10 +++++++--- packages/components/checkbox-list/index.tsx | 3 +-- packages/components/index.ts | 1 + 8 files changed, 14 insertions(+), 11 deletions(-) diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.tsx b/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.tsx index ed32a66c6fd..71c12900ebe 100644 --- a/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.tsx +++ b/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.tsx @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useEditorContext } from '@woocommerce/base-context'; -import { CheckboxControl } from '@woocommerce/blocks-checkout'; +import { CheckboxControl } from '@woocommerce/blocks-components'; import { useSelect, useDispatch } from '@wordpress/data'; import { CHECKOUT_STORE_KEY, PAYMENT_STORE_KEY } from '@woocommerce/block-data'; diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx index 2ba5e0e462b..3fda91777ef 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx @@ -7,7 +7,7 @@ import { RichText, InspectorControls, } from '@wordpress/block-editor'; -import { CheckboxControl } from '@woocommerce/blocks-checkout'; +import { CheckboxControl } from '@woocommerce/blocks-components'; import { PanelBody, ToggleControl, diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx index 46ffce5c4cc..b5a2f52dd2a 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import classnames from 'classnames'; import { useState, useEffect } from '@wordpress/element'; -import { CheckboxControl } from '@woocommerce/blocks-checkout'; +import { CheckboxControl } from '@woocommerce/blocks-components'; import { useCheckoutSubmit } from '@woocommerce/base-context/hooks'; import { withInstanceId } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; diff --git a/assets/js/blocks/checkout/order-notes/index.tsx b/assets/js/blocks/checkout/order-notes/index.tsx index cace83c8c65..910d55d2e54 100644 --- a/assets/js/blocks/checkout/order-notes/index.tsx +++ b/assets/js/blocks/checkout/order-notes/index.tsx @@ -3,8 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; -import { CheckboxControl } from '@woocommerce/blocks-checkout'; -import { Textarea } from '@woocommerce/blocks-components'; +import { CheckboxControl, Textarea } from '@woocommerce/blocks-components'; interface CheckoutOrderNotesProps { disabled: boolean; diff --git a/packages/checkout/components/checkbox-control/index.tsx b/packages/checkout/components/checkbox-control/index.tsx index 31bb0ac1963..b62cfd10777 100644 --- a/packages/checkout/components/checkbox-control/index.tsx +++ b/packages/checkout/components/checkbox-control/index.tsx @@ -1 +1 @@ -export { CheckboxControl } from '../../../../components/checkbox-control'; +export { CheckboxControl } from '../../../components/checkbox-control'; diff --git a/packages/checkout/components/index.ts b/packages/checkout/components/index.ts index 00f03de34b1..fd18831b522 100644 --- a/packages/checkout/components/index.ts +++ b/packages/checkout/components/index.ts @@ -8,7 +8,11 @@ export { default as Panel } from '../../components/panel'; export { default as Button } from '../../components/button'; export { default as Label } from './label'; export { default as StoreNoticesContainer } from '../../components/store-notices-container'; -export { default as CheckboxControl } from './checkbox-control'; -export { ValidationInputError } from './validation-input-error'; -export { ValidatedTextInput, TextInput } from './text-input'; +export { CheckboxControl } from './checkbox-control'; +export { + default as ValidatedTextInput, + ValidatedTextInputHandle, +} from '../../components/text-input/validated-text-input'; +export { default as TextInput } from '../../components/text-input/text-input'; +export { default as ValidationInputError } from '../../components/validation-input-error'; export { default as StoreNotice } from '../../components/store-notice'; diff --git a/packages/components/checkbox-list/index.tsx b/packages/components/checkbox-list/index.tsx index 9166bdad61b..ca7a2c847e9 100644 --- a/packages/components/checkbox-list/index.tsx +++ b/packages/components/checkbox-list/index.tsx @@ -4,13 +4,12 @@ import { __, _n, sprintf } from '@wordpress/i18n'; import { Fragment, useMemo, useState } from '@wordpress/element'; import classNames from 'classnames'; -import { CheckboxControl } from '@woocommerce/blocks-checkout'; /** * Internal dependencies */ import './style.scss'; - +import { CheckboxControl } from '../checkbox-control'; interface CheckboxListOptions { label: React.ReactNode; value: string; diff --git a/packages/components/index.ts b/packages/components/index.ts index aa7ea170679..dc9ab4efb63 100644 --- a/packages/components/index.ts +++ b/packages/components/index.ts @@ -1,4 +1,5 @@ export { default as Button } from './button'; +export { default as CheckboxControl } from './checkbox-control'; export { default as CheckboxList } from './checkbox-list'; export { Chip, RemovableChip } from './chip'; export { default as FormStep } from './form-step'; From 2c54143222c60ce2b94e28cd30fd7da86b6379cb Mon Sep 17 00:00:00 2001 From: Thomas Roberts Date: Mon, 20 Nov 2023 12:41:27 +0000 Subject: [PATCH 3/3] Update style import path --- .../collection-filters/inner-blocks/stock-filter/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/collection-filters/inner-blocks/stock-filter/style.scss b/assets/js/blocks/collection-filters/inner-blocks/stock-filter/style.scss index 75bbc6a6265..2bbaa446aa0 100644 --- a/assets/js/blocks/collection-filters/inner-blocks/stock-filter/style.scss +++ b/assets/js/blocks/collection-filters/inner-blocks/stock-filter/style.scss @@ -2,7 +2,7 @@ // Import styles we need to render the checkbox list and checkbox control. @import "../../../../../../packages/components/checkbox-list/style"; -@import "../../../../../../packages/checkout/components/checkbox-control/style"; +@import "../../../../../../packages/components/checkbox-control/style"; .wp-block-woocommerce-stock-filter {