From 04f3f4f2bdddae3babf0bab092f58488d109bedd Mon Sep 17 00:00:00 2001 From: Niels Lange Date: Tue, 15 Nov 2022 06:16:02 +0700 Subject: [PATCH] Convert product-elements/stock-indicator to TypeScript (#7567) * Convert product-elements/stock-indicator to TypeScript * bot: update checkstyle.xml * Add interface for blockAttributes * bot: update checkstyle.xml Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../stock-indicator/attributes.js | 8 --- .../stock-indicator/attributes.ts | 15 ++++++ .../stock-indicator/{block.js => block.tsx} | 54 ++++++++----------- .../{constants.js => constants.tsx} | 6 +-- .../stock-indicator/{edit.js => edit.tsx} | 23 ++++---- .../stock-indicator/{index.js => index.ts} | 5 +- .../{supports.js => supports.ts} | 0 .../product-elements/stock-indicator/types.ts | 3 ++ checkstyle.xml | 5 -- 9 files changed, 59 insertions(+), 60 deletions(-) delete mode 100644 assets/js/atomic/blocks/product-elements/stock-indicator/attributes.js create mode 100644 assets/js/atomic/blocks/product-elements/stock-indicator/attributes.ts rename assets/js/atomic/blocks/product-elements/stock-indicator/{block.js => block.tsx} (83%) rename assets/js/atomic/blocks/product-elements/stock-indicator/{constants.js => constants.tsx} (72%) rename assets/js/atomic/blocks/product-elements/stock-indicator/{edit.js => edit.tsx} (56%) rename assets/js/atomic/blocks/product-elements/stock-indicator/{index.js => index.ts} (86%) rename assets/js/atomic/blocks/product-elements/stock-indicator/{supports.js => supports.ts} (100%) create mode 100644 assets/js/atomic/blocks/product-elements/stock-indicator/types.ts diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/attributes.js b/assets/js/atomic/blocks/product-elements/stock-indicator/attributes.js deleted file mode 100644 index 5bac8820c40..00000000000 --- a/assets/js/atomic/blocks/product-elements/stock-indicator/attributes.js +++ /dev/null @@ -1,8 +0,0 @@ -export const blockAttributes = { - productId: { - type: 'number', - default: 0, - }, -}; - -export default blockAttributes; diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/attributes.ts b/assets/js/atomic/blocks/product-elements/stock-indicator/attributes.ts new file mode 100644 index 00000000000..b2cae177672 --- /dev/null +++ b/assets/js/atomic/blocks/product-elements/stock-indicator/attributes.ts @@ -0,0 +1,15 @@ +interface BlockAttributes { + productId: { + type: string; + default: number; + }; +} + +export const blockAttributes: BlockAttributes = { + productId: { + type: 'number', + default: 0, + }, +}; + +export default blockAttributes; diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/block.js b/assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx similarity index 83% rename from assets/js/atomic/blocks/product-elements/stock-indicator/block.js rename to assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx index 90b487dd7c1..d30c2b7037d 100644 --- a/assets/js/atomic/blocks/product-elements/stock-indicator/block.js +++ b/assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx @@ -2,7 +2,6 @@ * External dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useInnerBlockLayoutContext, @@ -10,20 +9,35 @@ import { } from '@woocommerce/shared-context'; import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks'; import { withProductDataContext } from '@woocommerce/shared-hocs'; +import type { HTMLAttributes } from 'react'; /** * Internal dependencies */ import './style.scss'; +import type { BlockAttributes } from './types'; -/** - * Product Stock Indicator Block Component. - * - * @param {Object} props Incoming props. - * @param {string} [props.className] CSS Class name for the component. - * @return {*} The component. - */ -const Block = ( props ) => { +const lowStockText = ( lowStock: string ): string => { + return sprintf( + /* translators: %d stock amount (number of items in stock for product) */ + __( '%d left in stock', 'woo-gutenberg-products-block' ), + lowStock + ); +}; + +const stockText = ( inStock: boolean, isBackordered: boolean ): string => { + if ( isBackordered ) { + return __( 'Available on backorder', 'woo-gutenberg-products-block' ); + } + + return inStock + ? __( 'In Stock', 'woo-gutenberg-products-block' ) + : __( 'Out of Stock', 'woo-gutenberg-products-block' ); +}; + +type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >; + +export const Block = ( props: Props ): JSX.Element | null => { const { className } = props; const { parentClassName } = useInnerBlockLayoutContext(); const { product } = useProductDataContext(); @@ -66,26 +80,4 @@ const Block = ( props ) => { ); }; -const lowStockText = ( lowStock ) => { - return sprintf( - /* translators: %d stock amount (number of items in stock for product) */ - __( '%d left in stock', 'woo-gutenberg-products-block' ), - lowStock - ); -}; - -const stockText = ( inStock, isBackordered ) => { - if ( isBackordered ) { - return __( 'Available on backorder', 'woo-gutenberg-products-block' ); - } - - return inStock - ? __( 'In Stock', 'woo-gutenberg-products-block' ) - : __( 'Out of Stock', 'woo-gutenberg-products-block' ); -}; - -Block.propTypes = { - className: PropTypes.string, -}; - export default withProductDataContext( Block ); diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/constants.js b/assets/js/atomic/blocks/product-elements/stock-indicator/constants.tsx similarity index 72% rename from assets/js/atomic/blocks/product-elements/stock-indicator/constants.js rename to assets/js/atomic/blocks/product-elements/stock-indicator/constants.tsx index 32ee7520185..01d220daa3e 100644 --- a/assets/js/atomic/blocks/product-elements/stock-indicator/constants.js +++ b/assets/js/atomic/blocks/product-elements/stock-indicator/constants.tsx @@ -4,14 +4,14 @@ import { __ } from '@wordpress/i18n'; import { box, Icon } from '@wordpress/icons'; -export const BLOCK_TITLE = __( +export const BLOCK_TITLE: string = __( 'Product Stock Indicator', 'woo-gutenberg-products-block' ); -export const BLOCK_ICON = ( +export const BLOCK_ICON: JSX.Element = ( ); -export const BLOCK_DESCRIPTION = __( +export const BLOCK_DESCRIPTION: string = __( 'Display product stock status.', 'woo-gutenberg-products-block' ); diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/edit.js b/assets/js/atomic/blocks/product-elements/stock-indicator/edit.tsx similarity index 56% rename from assets/js/atomic/blocks/product-elements/stock-indicator/edit.js rename to assets/js/atomic/blocks/product-elements/stock-indicator/edit.tsx index a29336ad661..a27e2d88b2e 100644 --- a/assets/js/atomic/blocks/product-elements/stock-indicator/edit.js +++ b/assets/js/atomic/blocks/product-elements/stock-indicator/edit.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; import EditProductLink from '@woocommerce/editor-components/edit-product-link'; import { useBlockProps } from '@wordpress/block-editor'; @@ -10,9 +9,18 @@ import { useBlockProps } from '@wordpress/block-editor'; */ import Block from './block'; import withProductSelector from '../shared/with-product-selector'; -import { BLOCK_TITLE, BLOCK_ICON } from './constants'; +import { + BLOCK_TITLE as label, + BLOCK_ICON as icon, + BLOCK_DESCRIPTION as description, +} from './constants'; +import type { BlockAttributes } from './types'; -const Edit = ( { attributes } ) => { +interface Props { + attributes: BlockAttributes; +} + +const Edit = ( { attributes }: Props ): JSX.Element => { const blockProps = useBlockProps(); return (
@@ -22,11 +30,4 @@ const Edit = ( { attributes } ) => { ); }; -export default withProductSelector( { - icon: BLOCK_ICON, - label: BLOCK_TITLE, - description: __( - 'Choose a product to display its stock.', - 'woo-gutenberg-products-block' - ), -} )( Edit ); +export default withProductSelector( { icon, label, description } )( Edit ); diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/index.js b/assets/js/atomic/blocks/product-elements/stock-indicator/index.ts similarity index 86% rename from assets/js/atomic/blocks/product-elements/stock-indicator/index.js rename to assets/js/atomic/blocks/product-elements/stock-indicator/index.ts index 439ebb8d131..213ea732545 100644 --- a/assets/js/atomic/blocks/product-elements/stock-indicator/index.js +++ b/assets/js/atomic/blocks/product-elements/stock-indicator/index.ts @@ -2,6 +2,7 @@ * External dependencies */ import { registerExperimentalBlockType } from '@woocommerce/block-settings'; +import type { BlockConfiguration } from '@wordpress/blocks'; /** * Internal dependencies @@ -18,7 +19,8 @@ import { BLOCK_DESCRIPTION as description, } from './constants'; -const blockConfig = { +const blockConfig: BlockConfiguration = { + ...sharedConfig, apiVersion: 2, title, description, @@ -30,6 +32,5 @@ const blockConfig = { }; registerExperimentalBlockType( 'woocommerce/product-stock-indicator', { - ...sharedConfig, ...blockConfig, } ); diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/supports.js b/assets/js/atomic/blocks/product-elements/stock-indicator/supports.ts similarity index 100% rename from assets/js/atomic/blocks/product-elements/stock-indicator/supports.js rename to assets/js/atomic/blocks/product-elements/stock-indicator/supports.ts diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/types.ts b/assets/js/atomic/blocks/product-elements/stock-indicator/types.ts new file mode 100644 index 00000000000..e64df6f3d4f --- /dev/null +++ b/assets/js/atomic/blocks/product-elements/stock-indicator/types.ts @@ -0,0 +1,3 @@ +export interface BlockAttributes { + productId: number; +} diff --git a/checkstyle.xml b/checkstyle.xml index 4ffb65aab7f..46b3e0a8e7c 100644 --- a/checkstyle.xml +++ b/checkstyle.xml @@ -1172,11 +1172,6 @@ - - - - -