Convert sidebar layout component to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/7904)

plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/main.js

@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-
-const Main = forwardRef( ( { children, className = '' }, ref ) => {
-	return (
-		<div
-			ref={ ref }
-			className={ classNames( 'wc-block-components-main', className ) }
-		>
-			{ children }
-		</div>
-	);
-} );
-
-export default Main;

plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/main.tsx

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { ForwardRefProps } from './types';
+
+const Main = forwardRef< HTMLInputElement, ForwardRefProps >(
+	( { children, className = '' }, ref ): JSX.Element => {
+		return (
+			<div
+				ref={ ref }
+				className={ classNames(
+					'wc-block-components-main',
+					className
+				) }
+			>
+				{ children }
+			</div>
+		);
+	}
+);
+
+export default Main;

plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.tsx

@@ -2,15 +2,21 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { ContainerWidthContextProvider } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+interface SidebarLayoutProps {
+	children: JSX.Element | JSX.Element[];
+	className: string;
+}
 
-const SidebarLayout = ( { children, className } ) => {
+const SidebarLayout = ( {
+	children,
+	className,
+}: SidebarLayoutProps ): JSX.Element => {
 	return (
 		<ContainerWidthContextProvider
 			className={ classNames(
@@ -23,8 +29,4 @@ const SidebarLayout = ( { children, className } ) => {
 	);
 };
 
-SidebarLayout.propTypes = {
-	className: PropTypes.string,
-};
-
 export default SidebarLayout;

plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar.js

@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-
-const Sidebar = forwardRef( ( { children, className = '' }, ref ) => {
-	return (
-		<div
-			ref={ ref }
-			className={ classNames( 'wc-block-components-sidebar', className ) }
-		>
-			{ children }
-		</div>
-	);
-} );
-
-export default Sidebar;

plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar.tsx

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { ForwardRefProps } from './types';
+
+const Sidebar = forwardRef< HTMLInputElement, ForwardRefProps >(
+	( { children, className = '' }, ref ): JSX.Element => {
+		return (
+			<div
+				ref={ ref }
+				className={ classNames(
+					'wc-block-components-sidebar',
+					className
+				) }
+			>
+				{ children }
+			</div>
+		);
+	}
+);
+
+export default Sidebar;

plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/types.ts

@@ -0,0 +1,4 @@
+export type ForwardRefProps = {
+	children: JSX.Element | JSX.Element[];
+	className?: string;
+};

plugins/woocommerce-blocks/assets/js/base/context/providers/container-width-context.tsx

@@ -1,44 +1,46 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { createContext, useContext } from '@wordpress/element';
 import { useContainerQueries } from '@woocommerce/base-hooks';
 import classNames from 'classnames';
 
-/**
- * @typedef {import('@woocommerce/type-defs/contexts').ContainerWidthContext} ContainerWidthContext
- * @typedef {import('react')} React
- */
+export type ContainerWidthContextProps = {
+	hasContainerWidth: boolean;
+	containerClassName: string;
+	isMobile: boolean;
+	isSmall: boolean;
+	isMedium: boolean;
+	isLarge: boolean;
+};
 
-const ContainerWidthContext = createContext( {
-	hasContainerWidth: false,
-	containerClassName: '',
-	isMobile: false,
-	isSmall: false,
-	isMedium: false,
-	isLarge: false,
-} );
+const ContainerWidthContext: React.Context< ContainerWidthContextProps > =
+	createContext< ContainerWidthContextProps >( {
+		hasContainerWidth: false,
+		containerClassName: '',
+		isMobile: false,
+		isSmall: false,
+		isMedium: false,
+		isLarge: false,
+	} );
 
-/**
- * @return {ContainerWidthContext} Returns the container width context value
- */
-export const useContainerWidthContext = () => {
+export const useContainerWidthContext = (): ContainerWidthContextProps => {
 	return useContext( ContainerWidthContext );
 };
 
+interface ContainerWidthContextProviderProps {
+	children: JSX.Element | JSX.Element[];
+	className: string;
+}
+
 /**
  * Provides an interface to useContainerQueries so children can see what size is being used by the
  * container.
- *
- * @param {Object}              props           Incoming props for the component.
- * @param {React.ReactChildren} props.children  React elements wrapped by the component.
- * @param {string}              props.className CSS class in use.
  */
 export const ContainerWidthContextProvider = ( {
 	children,
 	className = '',
-} ) => {
+}: ContainerWidthContextProviderProps ): JSX.Element => {
 	const [ resizeListener, containerClassName ] = useContainerQueries();
 
 	const contextValue = {
@@ -50,9 +52,6 @@ export const ContainerWidthContextProvider = ( {
 		isLarge: containerClassName === 'is-large',
 	};
 
-	/**
-	 * @type {ContainerWidthContext}
-	 */
 	return (
 		<ContainerWidthContext.Provider value={ contextValue }>
 			<div className={ classNames( className, containerClassName ) }>
@@ -62,7 +61,3 @@ export const ContainerWidthContextProvider = ( {
 		</ContainerWidthContext.Provider>
 	);
 };
-
-ContainerWidthContextProvider.propTypes = {
-	children: PropTypes.node,
-};