Update Label component to TSX (https://github.com/woocommerce/woocommerce-blocks/pull/3889)

* Add tsconfig to components directory and include it as project

* Add @types/classnames package

* Migrate Label component to TSX

* Remove unused imports from Label component

* fix package-lock.json

It was generated with npm 7 and we don’t support that yet (and that update should be done in a separate pull)

* Add interface for LabelProps and implement.

Also:
- import `Fragment` from @wordpress/element.
- import `HTMLAttributes` explicitly as a type from react (@types/wordpress__element doesn’t export this interface).

* fix jest configuration

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

plugins/woocommerce-blocks/assets/js/base/components/label/index.tsx

@@ -1,27 +1,29 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
-import { Fragment } from 'react';
+import { Fragment } from '@wordpress/element';
 import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+
+interface LabelProps {
+	label?: string;
+	screenReaderLabel?: string;
+	wrapperElement?: string;
+	wrapperProps?: HTMLAttributes< HTMLElement >;
+}
 
 /**
  * Component used to render an accessible text given a label and/or a
  * screenReaderLabel. The wrapper element and wrapper props can also be
  * specified via props.
  *
- * @param {Object} props Incoming props for the component.
- * @param {string} [props.label] Label content.
- * @param {string} [props.screenReaderLabel] Content for screen readers.
- * @param {string} [props.wrapperElement] What element is used to wrap the label.
- * @param {Object} [props.wrapperProps] Props passed into wrapper element.
  */
 const Label = ( {
 	label,
 	screenReaderLabel,
 	wrapperElement,
 	wrapperProps = {},
-} ) => {
+}: LabelProps ): JSX.Element => {
 	let Wrapper;
 
 	const hasLabel = typeof label !== 'undefined' && label !== null;
@@ -57,11 +59,4 @@ const Label = ( {
 	return <Wrapper { ...wrapperProps }>{ label }</Wrapper>;
 };
 
-Label.propTypes = {
-	label: PropTypes.node,
-	screenReaderLabel: PropTypes.node,
-	wrapperElement: PropTypes.elementType,
-	wrapperProps: PropTypes.object,
-};
-
 export default Label;

plugins/woocommerce-blocks/assets/js/base/components/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {},
+  "include": [ "." ],
+  "exclude": [ "**/test/**" ]
+}

plugins/woocommerce-blocks/package.json

@@ -87,6 +87,7 @@
 		"@testing-library/react": "11.2.5",
 		"@testing-library/react-hooks": "5.0.3",
 		"@testing-library/user-event": "12.6.3",
+		"@types/classnames": "^2.2.11",
 		"@types/jest": "26.0.20",
 		"@types/lodash": "4.14.168",
 		"@types/react": "16.14.2",

plugins/woocommerce-blocks/tests/js/jest.config.json

@@ -47,7 +47,7 @@
 	"testEnvironment": "jest-environment-jsdom-sixteen",
 	"preset": "@wordpress/jest-preset-default",
 	"transform": {
-		"^.+\\.js$": "<rootDir>/tests/js/jestPreprocess.js"
+		"^.+\\.(js|ts|tsx)$": "<rootDir>/tests/js/jestPreprocess.js"
 	},
 	"verbose": true
 }

plugins/woocommerce-blocks/tests/js/jestPreprocess.js

@@ -1,5 +1,5 @@
 const babelOptions = {
-	presets: [ '@wordpress/babel-preset-default' ],
+	presets: [ '@babel/preset-typescript', '@wordpress/babel-preset-default' ],
 	plugins: [ '@babel/plugin-proposal-class-properties' ],
 };
 

plugins/woocommerce-blocks/tsconfig.json

@@ -2,5 +2,8 @@
   "extends": "./tsconfig.base.json",
   "include": [ "./assets/js/**/*" ],
   "exclude": [ "./assets/js/data" ],
-  "references": [ { "path": "./assets/js/data" } ]
+  "references": [
+	{ "path": "./assets/js/data" },
+	{ "path":  "/assets/js/base/components" }
+  ]
 }