Convert product-elements/sale-badge to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/7543)

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/attributes.ts

@@ -1,4 +1,4 @@
-export const blockAttributes = {
+export const blockAttributes: Record< string, Record< string, unknown > > = {
 	productId: {
 		type: 'number',
 		default: 0,

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import Label from '@woocommerce/base-components/label';
@@ -16,27 +15,22 @@ import {
 	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';
 
-/**
+type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
- * Product Sale Badge Block Component.
+
- *
+const Block = ( props: Props ): JSX.Element | null => {
- * @param {Object} props             Incoming props.
- * @param {string} [props.className] CSS Class name for the component.
- * @param {string} [props.align]     Alignment of the badge.
- * @return {*} The component.
- */
-export const Block = ( props ) => {
 	const { className, align } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const borderProps = useBorderProps( props );
 	const colorProps = useColorProps( props );
-
 	const typographyProps = useTypographyProps( props );
 	const spacingProps = useSpacingProps( props );
 
@@ -79,9 +73,4 @@ export const Block = ( props ) => {
 	);
 };
 
-Block.propTypes = {
-	className: PropTypes.string,
-	align: PropTypes.string,
-};
-
 export default withProductDataContext( Block );

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/constants.tsx

@@ -4,14 +4,14 @@
 import { __ } from '@wordpress/i18n';
 import { percent, Icon } from '@wordpress/icons';
 
-export const BLOCK_TITLE = __(
+export const BLOCK_TITLE: string = __(
 	'On-Sale Badge',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = (
+export const BLOCK_ICON: JSX.Element = (
 	<Icon icon={ percent } className="wc-block-editor-components-block-icon" />
 );
-export const BLOCK_DESCRIPTION = __(
+export const BLOCK_DESCRIPTION: string = __(
 	'Displays an on-sale badge if the product is on-sale.',
 	'woo-gutenberg-products-block'
 );

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/edit.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -9,9 +8,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 }>
@@ -20,11 +28,4 @@ const Edit = ( { attributes } ) => {
 	);
 };
 
-export default withProductSelector( {
+export default withProductSelector( { icon, label, description } )( Edit );
-	icon: BLOCK_ICON,
-	label: BLOCK_TITLE,
-	description: __(
-		'Choose a product to display its sale-badge.',
-		'woo-gutenberg-products-block'
-	),
-} )( Edit );

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/index.js

@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import { registerBlockType } from '@wordpress/blocks';
-import { isFeaturePluginBuild } from '@woocommerce/block-settings';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared/config';
-import attributes from './attributes';
-import edit from './edit';
-import {
-	BLOCK_TITLE as title,
-	BLOCK_ICON as icon,
-	BLOCK_DESCRIPTION as description,
-} from './constants';
-import { Save } from './save';
-import { hasSpacingStyleSupport } from '../../../../utils/global-style';
-
-const blockConfig = {
-	title,
-	description,
-	icon: { src: icon },
-	apiVersion: 2,
-	supports: {
-		html: false,
-		...( isFeaturePluginBuild() && {
-			color: {
-				gradients: true,
-				background: true,
-				link: false,
-				__experimentalSkipSerialization: true,
-			},
-			typography: {
-				fontSize: true,
-				__experimentalSkipSerialization: true,
-			},
-			__experimentalBorder: {
-				color: true,
-				radius: true,
-				width: true,
-				__experimentalSkipSerialization: true,
-			},
-			...( hasSpacingStyleSupport() && {
-				spacing: {
-					padding: true,
-					__experimentalSkipSerialization: true,
-				},
-			} ),
-			__experimentalSelector: '.wc-block-components-product-sale-badge',
-		} ),
-	},
-	attributes,
-	edit,
-	save: Save,
-};
-
-registerBlockType( 'woocommerce/product-sale-badge', {
-	...sharedConfig,
-	...blockConfig,
-} );

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/index.ts

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import type { BlockConfiguration } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+import { Save } from './save';
+import { supports } from './support';
+
+const blockConfig: BlockConfiguration = {
+	...sharedConfig,
+	title,
+	description,
+	icon: { src: icon },
+	apiVersion: 2,
+	supports,
+	attributes,
+	edit,
+	save: Save,
+};
+
+registerBlockType( 'woocommerce/product-sale-badge', { ...blockConfig } );

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/support.ts

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { hasSpacingStyleSupport } from '../../../../utils/global-style';
+
+export const supports = {
+	html: false,
+	...( isFeaturePluginBuild() && {
+		color: {
+			gradients: true,
+			background: true,
+			link: false,
+			__experimentalSkipSerialization: true,
+		},
+		typography: {
+			fontSize: true,
+			__experimentalSkipSerialization: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+		},
+		...( hasSpacingStyleSupport() && {
+			spacing: {
+				padding: true,
+				__experimentalSkipSerialization: true,
+			},
+		} ),
+		__experimentalSelector: '.wc-block-components-product-sale-badge',
+	} ),
+};

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/types.ts

@@ -0,0 +1,4 @@
+export interface BlockAttributes {
+	productId: number;
+	align: 'left' | 'center' | 'right';
+}