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>

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;

assets/js/atomic/blocks/product-elements/stock-indicator/block.js → assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx

@@ -2,28 +2,42 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } 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 );

assets/js/atomic/blocks/product-elements/stock-indicator/constants.js → 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 = (
 	<Icon icon={ box } className="wc-block-editor-components-block-icon" />
 );
-export const BLOCK_DESCRIPTION = __(
+export const BLOCK_DESCRIPTION: string = __(
 	'Display product stock status.',
 	'woo-gutenberg-products-block'
 );

assets/js/atomic/blocks/product-elements/stock-indicator/edit.js → 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 (
 		<div { ...blockProps }>
@@ -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 );

assets/js/atomic/blocks/product-elements/stock-indicator/index.js → 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,
 } );

assets/js/atomic/blocks/product-elements/stock-indicator/types.ts

@@ -0,0 +1,3 @@
+export interface BlockAttributes {
+	productId: number;
+}

checkstyle.xml

@@ -1172,11 +1172,6 @@
 <error line="4" column="23" severity="error" message="Could not find a declaration file for module &apos;@wordpress/wordcount&apos;. &apos;/home/runner/work/woocommerce-blocks/woocommerce-blocks/node_modules/@wordpress/wordcount/build/index.js&apos; implicitly has an &apos;any&apos; type.
   Try `npm i --save-dev @types/wordpress__wordcount` if it exists or add a new declaration (.d.ts) file containing `declare module &apos;@wordpress/wordcount&apos;;`" source="TS7016" />
 </file>
-<file name="assets/js/atomic/blocks/product-elements/stock-indicator/block.js">
-<error line="69" column="24" severity="error" message="Parameter &apos;lowStock&apos; implicitly has an &apos;any&apos; type." source="TS7006" />
-<error line="77" column="21" severity="error" message="Parameter &apos;inStock&apos; implicitly has an &apos;any&apos; type." source="TS7006" />
-<error line="77" column="30" severity="error" message="Parameter &apos;isBackordered&apos; implicitly has an &apos;any&apos; type." source="TS7006" />
-</file>
 <file name="assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js">
 <error line="120" column="4" severity="error" message="Type &apos;{ children: string; className: string; href: string; onClick: () =&gt; any; rel: string; }&apos; is not assignable to type &apos;IntrinsicAttributes &amp; ButtonProps&apos;.
   Property &apos;href&apos; does not exist on type &apos;IntrinsicAttributes &amp; ButtonProps&apos;." source="TS2322" />