Flex: Convert component to TypeScript (#42537)

* Flex: Convert component to TypeScript

* Update CHANGELOG.md

* Apply suggestions from code review

Co-authored-by: Lena Morita <[email protected]>

* Update packages/components/src/flex/flex/component.tsx

Co-authored-by: Lena Morita <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Lena Morita <[email protected]>

packages/components/CHANGELOG.md

@@ -20,6 +20,7 @@
 
 ### Internal
 
+-   `Flex`, `FlexItem`, `FlexBlock`: Convert to TypeScript ([#42537](https://github.com/WordPress/gutenberg/pull/42537)).
 -   `InputControl`: Fix incorrect `size` prop passing ([#42793](https://github.com/WordPress/gutenberg/pull/42793)).
 
 ## 19.16.0 (2022-07-27)

packages/components/src/flex/flex-block/README.md

@@ -8,8 +8,8 @@ See [`flex/README.md#usage`](/packages/components/src/flex/README.md#usage) for
 
 ## Props
 
-### display
-
-**Type**: `[CSSProperties['display']]`
+### `display`: `CSSProperties['display']`
 
 The CSS display property of `FlexBlock`.
+
+-   Required: No

packages/components/src/flex/flex-block/component.js → packages/components/src/flex/flex-block/component.tsx

@@ -1,24 +1,29 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
+import type { FlexBlockProps } from '../types';
 import { useFlexBlock } from './hook';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                            forwardedRef
- */
-function FlexBlock( props, forwardedRef ) {
+function UnconnectedFlexBlock(
+	props: WordPressComponentProps< FlexBlockProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const flexBlockProps = useFlexBlock( props );
 
 	return <View { ...flexBlockProps } ref={ forwardedRef } />;
 }
 
 /**
- * `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`.
+ * `FlexBlock` is a primitive layout component that adaptively resizes content
+ * within layout containers like `Flex`.
  *
- * @example
  * ```jsx
  * import { Flex, FlexBlock } from '@wordpress/components';
  *
@@ -31,6 +36,6 @@ function FlexBlock( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedFlexBlock = contextConnect( FlexBlock, 'FlexBlock' );
+export const FlexBlock = contextConnect( UnconnectedFlexBlock, 'FlexBlock' );
 
-export default ConnectedFlexBlock;
+export default FlexBlock;

packages/components/src/flex/flex-block/hook.js → packages/components/src/flex/flex-block/hook.ts

@@ -1,13 +1,13 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useFlexItem } from '../flex-item';
+import type { FlexBlockProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
- */
-export function useFlexBlock( props ) {
+export function useFlexBlock(
+	props: WordPressComponentProps< FlexBlockProps, 'div' >
+) {
 	const otherProps = useContextSystem( props, 'FlexBlock' );
 	const flexItemProps = useFlexItem( { isBlock: true, ...otherProps } );
 

packages/components/src/flex/flex-item/README.md

@@ -8,14 +8,15 @@ See [`flex/README.md#usage`](/packages/components/src/flex/flex/README.md#usage)
 
 ## Props
 
-### display
-
-**Type**: `[CSSProperties['display']]`
+### `display`: `CSSProperties['display']`
 
 The CSS display property of `FlexItem`.
 
-### isBlock
+-   Required: No
 
-**Type**: `[boolean]`
+### `isBlock`: `boolean`
 
 Determins if `FlexItem` should render as an adaptive full-width block.
+
+-   Required: No
+-   Default: `false`

packages/components/src/flex/flex-item/component.js → packages/components/src/flex/flex-item/component.tsx

@@ -1,24 +1,29 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
 import { useFlexItem } from './hook';
+import type { FlexItemProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                           forwardedRef
- */
-function FlexItem( props, forwardedRef ) {
+function UnconnectedFlexItem(
+	props: WordPressComponentProps< FlexItemProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const flexItemProps = useFlexItem( props );
 
 	return <View { ...flexItemProps } ref={ forwardedRef } />;
 }
 
 /**
- * `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`.
+ * `FlexItem` is a primitive layout component that aligns content within layout
+ * containers like `Flex`.
  *
- * @example
  * ```jsx
  * import { Flex, FlexItem } from '@wordpress/components';
  *
@@ -31,6 +36,6 @@ function FlexItem( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedFlexItem = contextConnect( FlexItem, 'FlexItem' );
+export const FlexItem = contextConnect( UnconnectedFlexItem, 'FlexItem' );
 
-export default ConnectedFlexItem;
+export default FlexItem;

packages/components/src/flex/flex-item/hook.js → packages/components/src/flex/flex-item/hook.ts

@@ -1,27 +1,30 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
+import { css, SerializedStyles } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useFlexContext } from '../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { FlexItemProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props
- */
-export function useFlexItem( props ) {
+export function useFlexItem(
+	props: WordPressComponentProps< FlexItemProps, 'div' >
+) {
 	const {
 		className,
 		display: displayProp,
 		isBlock = false,
 		...otherProps
 	} = useContextSystem( props, 'FlexItem' );
-	const sx = {};
+
+	const sx: {
+		Base?: SerializedStyles;
+	} = {};
 
 	const contextDisplay = useFlexContext().flexItemDisplay;
 

packages/components/src/flex/flex/README.md

@@ -25,38 +25,44 @@ function Example() {
 
 ## Props
 
-##### align
-
-**Type**: `CSSProperties['alignItems']`
+### `align`: `CSSProperties['alignItems']`
 
 Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.
 
-##### direction
+-   Required: No
+-   Default: `center`
 
-**Type**: `[ResponsiveCSSValue<CSSProperties['flexDirection']>]`
+### `direction`: `ResponsiveCSSValue<CSSProperties['flexDirection']>`
 
 The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
 
-##### expanded
+-   Required: No
+-   Default: `row`
 
-**Type**: `[boolean]`
+### `expanded`: `boolean`
 
 Expands to the maximum available width (if horizontal) or height (if vertical).
 
-##### gap
+-   Required: No
+-   Default: `true`
 
-**Type**: `[number | string]`
+### `gap`: `number`
 
 Spacing in between each child can be adjusted by using `gap`. The value of `gap` works as a multiplier to the library's grid system (base of `4px`).
 
-##### justify
+-   Required: No
+-   Default: `2`
 
-**Type**: `[CSSProperties['justifyContent']]`
+##### `justify`: `CSSProperties['justifyContent']`
 
 Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 
-##### wrap
+-   Required: No
+-   Default: `space-between`
 
-**Type**: `[boolean]`
+##### `wrap`: `boolean`
 
 Determines if children should wrap.
+
+-   Required: No
+-   Default: `false`

packages/components/src/flex/flex/component.js → packages/components/src/flex/flex/component.tsx

@@ -1,16 +1,21 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { useFlex } from './hook';
 import { FlexContext } from './../context';
 import { View } from '../../view';
+import type { FlexProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
- */
-function Flex( props, forwardedRef ) {
+function UnconnectedFlex(
+	props: WordPressComponentProps< FlexProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const { children, isColumn, ...otherProps } = useFlex( props );
 
 	return (
@@ -29,9 +34,9 @@ function Flex( props, forwardedRef ) {
  * horizontally or vertically. `Flex` powers components like `HStack` and
  * `VStack`.
  *
- * `Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.
+ * `Flex` is used with any of its two sub-components, `FlexItem` and
+ * `FlexBlock`.
  *
- * @example
  * ```jsx
  * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
  *
@@ -49,6 +54,6 @@ function Flex( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedFlex = contextConnect( Flex, 'Flex' );
+export const Flex = contextConnect( UnconnectedFlex, 'Flex' );
 
-export default ConnectedFlex;
+export default Flex;

packages/components/src/flex/flex/hook.js → packages/components/src/flex/flex/hook.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
+import { css, SerializedStyles } from '@emotion/react';
 
 /**
  * WordPress dependencies
@@ -12,18 +12,18 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useResponsiveValue } from '../../ui/utils/use-responsive-value';
 import { space } from '../../ui/utils/space';
 import * as styles from '../styles';
 import { useCx, rtl } from '../../utils';
+import type { FlexProps } from '../types';
+
+function useDeprecatedProps(
+	props: WordPressComponentProps< FlexProps, 'div' >
+): WordPressComponentProps< FlexProps, 'div' > {
+	const { isReversed, ...otherProps } = props;
 
-/**
- *
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
- * @return {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} Props with the deprecated props removed.
- */
-function useDeprecatedProps( { isReversed, ...otherProps } ) {
 	if ( typeof isReversed !== 'undefined' ) {
 		deprecated( 'Flex isReversed', {
 			alternative: 'Flex direction="row-reverse" or "column-reverse"',
@@ -38,10 +38,7 @@ function useDeprecatedProps( { isReversed, ...otherProps } ) {
 	return otherProps;
 }
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
- */
-export function useFlex( props ) {
+export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {
 	const {
 		align = 'center',
 		className,
@@ -67,7 +64,11 @@ export function useFlex( props ) {
 	const rtlWatchResult = rtl.watch();
 
 	const classes = useMemo( () => {
-		const sx = {};
+		const sx: {
+			Base?: SerializedStyles;
+			Items?: SerializedStyles;
+			WrapItems?: SerializedStyles;
+		} = {};
 
 		sx.Base = css( {
 			alignItems: isColumn ? 'normal' : align,