Removed proptypes and js to ts conversion for Product Categories (https://github.com/woocommerce/woocommerce-blocks/pull/9755)

* Removed proptypes from product-categories

* deleted js file

plugins/woocommerce-blocks/assets/js/blocks/product-categories/block.tsx

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
-import PropTypes from 'prop-types';
 import { Icon, listView } from '@wordpress/icons';
 import { isSiteEditorPage, isWidgetEditorPage } from '@woocommerce/utils';
 import { useSelect } from '@wordpress/data';
@@ -18,6 +17,10 @@ import {
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import type { ProductCategoriesBlockProps } from './types';
 
 const EmptyPlaceholder = () => (
 	<Placeholder
@@ -43,9 +46,15 @@ const EmptyPlaceholder = () => (
  * @param {function(any):any} props.setAttributes Setter for block attributes.
  * @param {string}            props.name          Name for block.
  */
-const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
-	const editSiteStore = useSelect( 'core/edit-site' );
-	const editWidgetStore = useSelect( 'core/edit-widgets' );
+const ProductCategoriesBlock = ( {
+	attributes,
+	setAttributes,
+	name,
+}: ProductCategoriesBlockProps ) => {
+	const editSiteStore = useSelect( ( select ) => select( 'core/edit-site' ) );
+	const editWidgetStore = useSelect( ( select ) =>
+		select( 'core/edit-widgets' )
+	);
 	const isSiteEditor = isSiteEditorPage( editSiteStore );
 	const isWidgetEditor = isWidgetEditorPage( editWidgetStore );
 	const getInspectorControls = () => {
@@ -73,7 +82,7 @@ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
 							'woo-gutenberg-products-block'
 						) }
 						value={ isDropdown ? 'dropdown' : 'list' }
-						onChange={ ( value ) =>
+						onChange={ ( value: string ) =>
 							setAttributes( {
 								isDropdown: value === 'dropdown',
 							} )
@@ -195,19 +204,4 @@ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
 	);
 };
 
-ProductCategoriesBlock.propTypes = {
-	/**
-	 * The attributes for this block
-	 */
-	attributes: PropTypes.object.isRequired,
-	/**
-	 * The register block name.
-	 */
-	name: PropTypes.string.isRequired,
-	/**
-	 * A callback to update attributes
-	 */
-	setAttributes: PropTypes.func.isRequired,
-};
-
 export default ProductCategoriesBlock;

plugins/woocommerce-blocks/assets/js/blocks/product-categories/edit.tsx

@@ -8,8 +8,9 @@ import { useBlockProps } from '@wordpress/block-editor';
  */
 import Block from './block';
 import './editor.scss';
+import type { ProductCategoriesBlockProps } from './types';
 
-export const Edit = ( props: unknown ): JSX.Element => {
+export const Edit = ( props: ProductCategoriesBlockProps ): JSX.Element => {
 	const blockProps = useBlockProps();
 
 	return (

plugins/woocommerce-blocks/assets/js/blocks/product-categories/index.tsx

@@ -11,6 +11,7 @@ import './editor.scss';
 import metadata from './block.json';
 import './style.scss';
 import { Edit } from './edit';
+import type { ProductCategoriesIndexProps } from './types';
 
 registerBlockType( metadata, {
 	icon: {
@@ -27,7 +28,10 @@ registerBlockType( metadata, {
 				type: 'block',
 				blocks: [ 'core/legacy-widget' ],
 				// We can't transform if raw instance isn't shown in the REST API.
-				isMatch: ( { idBase, instance } ) =>
+				isMatch: ( {
+					idBase,
+					instance,
+				}: ProductCategoriesIndexProps ) =>
 					idBase === 'woocommerce_product_categories' &&
 					!! instance?.raw,
 				transform: ( { instance } ) =>
@@ -77,10 +81,10 @@ registerBlockType( metadata, {
 			migrate( attributes ) {
 				return attributes;
 			},
-			save( props ) {
+			save( props: ProductCategoriesIndexProps ) {
 				const { hasCount, hasEmpty, isDropdown, isHierarchical } =
-					props.attributes;
-				const data = {};
+					props;
+				const data: { [ key: string ]: boolean } = {};
 				if ( hasCount ) {
 					data[ 'data-has-count' ] = true;
 				}

plugins/woocommerce-blocks/assets/js/blocks/product-categories/types.ts

@@ -0,0 +1,35 @@
+export interface ProductCategoriesBlockProps {
+	attributes: {
+		hasCount: boolean;
+		hasImage: boolean;
+		hasEmpty: boolean;
+		isDropdown: boolean;
+		isHierarchical: boolean;
+		showChildrenOnly: boolean;
+	};
+	name: string;
+	setAttributes: ( attributes: {
+		hasCount?: boolean;
+		hasImage?: boolean;
+		hasEmpty?: boolean;
+		isDropdown?: boolean;
+		isHierarchical?: boolean;
+		showChildrenOnly?: boolean;
+	} ) => void;
+}
+
+export interface ProductCategoriesIndexProps {
+	idBase?: string;
+	instance: {
+		raw: {
+			dropdown: boolean;
+			count: boolean;
+			hide_empty: boolean;
+			hierarchical: boolean;
+		};
+	};
+	hasCount: boolean;
+	hasEmpty: boolean;
+	isDropdown: boolean;
+	isHierarchical: boolean;
+}