VStack: Convert component to TypeScript (#41850)

* VStack: Convert component to TypeScript

* Update CHANGELOG.md

* Add story

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

packages/components/CHANGELOG.md

@@ -16,6 +16,7 @@
 -   `InputControl`: Add tests and update to use `@testing-library/user-event` ([#41421](https://github.com/WordPress/gutenberg/pull/41421)).
 -   `FormToggle`: Convert to TypeScript ([#41729](https://github.com/WordPress/gutenberg/pull/41729)).
 -   `ColorIndicator`: Convert to TypeScript ([#41587](https://github.com/WordPress/gutenberg/pull/41587)).
+-   `VStack`: Convert to TypeScript ([#41850](https://github.com/WordPress/gutenberg/pull/41587)).
 -   `AlignmentMatrixControl`: Refactor away from `_.flattenDeep()` in utils ([#41814](https://github.com/WordPress/gutenberg/pull/41814/)).
 -   `AutoComplete`: Revert recent `exhaustive-deps` refactor ([#41820](https://github.com/WordPress/gutenberg/pull/41820)).
 

packages/components/src/v-stack/README.md

@@ -29,9 +29,7 @@ function Example() {
 
 ## Props
 
-##### alignment
-
-**Type**: `HStackAlignment`,`CSS['alignItems']`
+##### `alignment`: `HStackAlignment | CSSProperties['alignItems']`
 
 Determines how the child elements are aligned.
 
@@ -47,35 +45,25 @@ Determines how the child elements are aligned.
 -   `edge`: Aligns content to the edges of the container.
 -   `stretch`: Stretches content to the edges of the container.
 
-##### direction
-
-**Type**: `FlexDirection`
+##### `direction`: `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
-
-**Type**: `boolean`
+##### `expanded`: `boolean`
 
 Expands to the maximum available width (if horizontal) or height (if vertical).
 
-##### justify
-
-**Type**: `CSS['justifyContent']`
+##### `justify`: `CSSProperties['justifyContent']`
 
 Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 In the example below, `flex-start` will align the children content to the left.
 
-##### spacing
-
-**Type**: `CSS['width']`
+##### `spacing`: `CSSProperties['width']`
 
 The amount of space between each child element. Spacing in between each child can be adjusted by using `spacing`.
 The value of `spacing` works as a multiplier to the library's grid system (base of `4px`).
 
-##### wrap
-
-**Type**: `boolean`
+##### `wrap`: `boolean`
 
 Determines if children should wrap.
 

packages/components/src/v-stack/component.js → packages/components/src/v-stack/component.tsx

@@ -1,26 +1,31 @@
+/**
+ * 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 { useVStack } from './hook';
+import type { VStackProps } from './types';
 
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                               forwardedRef
- */
-function VStack( props, forwardedRef ) {
+function UnconnectedVStack(
+	props: WordPressComponentProps< VStackProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const vStackProps = useVStack( props );
 
 	return <View { ...vStackProps } ref={ forwardedRef } />;
 }
 
 /**
- * `VStack` (or Vertical Stack) is a layout component that arranges child elements in a vertical line.
+ * `VStack` (or Vertical Stack) is a layout component that arranges child
+ * elements in a vertical line.
  *
  * `VStack` can render anything inside.
  *
- * @example
  * ```jsx
  * import {
  * 	__experimentalText as Text,
@@ -38,6 +43,6 @@ function VStack( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedVStack = contextConnect( VStack, 'VStack' );
+export const VStack = contextConnect( UnconnectedVStack, 'VStack' );
 
-export default ConnectedVStack;
+export default VStack;

packages/components/src/v-stack/hook.js → packages/components/src/v-stack/hook.ts

@@ -1,14 +1,13 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../ui/context';
 import { useHStack } from '../h-stack';
+import type { VStackProps } from './types';
 
-/**
- *
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- */
-export function useVStack( props ) {
+export function useVStack(
+	props: WordPressComponentProps< VStackProps, 'div' >
+) {
 	const { expanded = false, ...otherProps } = useContextSystem(
 		props,
 		'VStack'

packages/components/src/v-stack/stories/index.tsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { VStack } from '..';
+
+const meta: ComponentMeta< typeof VStack > = {
+	component: VStack,
+	title: 'Components (Experimental)/VStack',
+	argTypes: {
+		alignment: { control: { type: 'text' } },
+		as: { control: { type: 'text' } },
+		direction: { control: { type: 'text' } },
+		justify: { control: { type: 'text' } },
+		spacing: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof VStack > = ( props ) => {
+	return (
+		<VStack { ...props }>
+			<View>One</View>
+			<View>Two</View>
+			<View>Three</View>
+			<View>Four</View>
+			<View>Five</View>
+		</VStack>
+	);
+};
+
+export const Default = Template.bind( {} );

packages/components/src/v-stack/types.ts

@@ -8,7 +8,27 @@ import type { CSSProperties } from 'react';
  */
 import type { HStackAlignment, Props as HStackProps } from '../h-stack/types';
 
-export type Props = HStackProps & {
+export type VStackProps = HStackProps & {
+	/**
+	 * Determines how the child elements are aligned.
+	 *
+	 * -   `top`: Aligns content to the top.
+	 * -   `topLeft`: Aligns content to the top/left.
+	 * -   `topRight`: Aligns content to the top/right.
+	 * -   `left`: Aligns content to the left.
+	 * -   `center`: Aligns content to the center.
+	 * -   `right`: Aligns content to the right.
+	 * -   `bottom`: Aligns content to the bottom.
+	 * -   `bottomLeft`: Aligns content to the bottom/left.
+	 * -   `bottomRight`: Aligns content to the bottom/right.
+	 * -   `edge`: Aligns content to the edges of the container.
+	 * -   `stretch`: Stretches content to the edges of the container.
+	 */
 	alignment?: HStackAlignment | CSSProperties[ 'alignItems' ];
+	/**
+	 * The amount of space between each child element. Spacing in between each
+	 * child can be adjusted by using `spacing`. The value of `spacing` works as
+	 * a multiplier to the library's grid system (base of `4px`).
+	 */
 	spacing?: CSSProperties[ 'width' ];
 };