HStack: Convert component to TypeScript

[ralucaStan]

What?

Converts the HStack component to TypeScript

Part of #35744

Why?

Part of Contributor Day at WordCamp EU 2022

How?

I followed the Transition to TS Guide.

Testing Instructions

1. Run npm run dev and ensure no typing errors.
2. Run npm run storybook:dev and visit the HStack component.

cc @ciampo

Screenshots or screencast

[ciampo]

Thank you so much @ralucaStan for your contribution — it's greatly appreciated ❤️

Apart from a few inline comments, the main thing I noticed is that currently the Storybook pages haven't been setup in a way that shows the component's props as docs:

In order to fix this, we'll need to make a few changes:

• Add a named export for the component (on top of the default one
• Add a few settings to the Storybook example's config
• Use the ComponentMeta and ComponentStory types from Storybook
• Rewrite the story in an "controls-friendly" way (e.g. having a template, and using it to instantiate individual stories)
• Tweak the control types (and whether certain controls should be hidden)

(All of these points should be explained in the guide, but please let me know in case they were not explained in a clear way!)

Applying the above suggestion may result in these changes

diff --git a/packages/components/src/h-stack/component.tsx b/packages/components/src/h-stack/component.tsx
index 1db3155e1b..ee7c36ace8 100644
--- a/packages/components/src/h-stack/component.tsx
+++ b/packages/components/src/h-stack/component.tsx
@@ -6,7 +6,7 @@ import { View } from '../view';
 import { useHStack } from './hook';
 import type { Props } from './types';
 
-function HStack(
+function UnconnectedHStack(
 	props: WordPressComponentProps< Props, 'div' >,
 	forwardedRef: React.ForwardedRef< any >
 ) {
@@ -39,6 +39,6 @@ function HStack(
  * ```
  */
 
-const ConnectedHStack = contextConnect( HStack, 'HStack' );
+export const HStack = contextConnect( UnconnectedHStack, 'HStack' );
 
-export default ConnectedHStack;
+export default HStack;
diff --git a/packages/components/src/h-stack/stories/index.tsx b/packages/components/src/h-stack/stories/index.tsx
index a0b672035b..16331ceb8f 100644
--- a/packages/components/src/h-stack/stories/index.tsx
+++ b/packages/components/src/h-stack/stories/index.tsx
@@ -1,22 +1,93 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * Internal dependencies
  */
 import { View } from '../../view';
 import { HStack } from '..';
 
-export default {
+const ALIGNMENTS = {
+	top: 'top',
+	topLeft: 'topLeft',
+	topRight: 'topRight',
+	left: 'left',
+	center: 'center',
+	right: 'right',
+	bottom: 'bottom',
+	bottomLeft: 'bottomLeft',
+	bottomRight: 'bottomRight',
+	edge: 'edge',
+	stretch: 'stretch',
+};
+
+const DIRECTIONS = {
+	row: 'row',
+	column: 'column',
+	responsive: [ 'column', 'row' ],
+};
+
+const JUSTIFICATIONS = {
+	'space-around': 'space-around',
+	'space-between': 'space-between',
+	'space-evenly': 'space-evenly',
+	stretch: 'stretch',
+	center: 'center',
+	end: 'end',
+	'flex-end': 'flex-end',
+	'flex-start': 'flex-start',
+	start: 'start',
+};
+
+const meta: ComponentMeta< typeof HStack > = {
 	component: HStack,
 	title: 'Components (Experimental)/HStack',
+	argTypes: {
+		as: {
+			control: { type: null },
+		},
+		children: {
+			control: { type: null },
+		},
+		alignment: {
+			control: { type: 'select' },
+			options: Object.keys( ALIGNMENTS ),
+			mapping: ALIGNMENTS,
+		},
+		direction: {
+			control: { type: 'select' },
+			options: Object.keys( DIRECTIONS ),
+			mapping: DIRECTIONS,
+		},
+		justify: {
+			control: { type: 'select' },
+			options: Object.keys( JUSTIFICATIONS ),
+			mapping: JUSTIFICATIONS,
+		},
+		spacing: {
+			control: { type: 'text' },
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
 };
+export default meta;
+
+const Template: ComponentStory< typeof HStack > = ( args ) => (
+	<HStack { ...args } style={ { background: '#eee', minHeight: '3rem' } }>
+		{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
+			<View key={ text } style={ { background: '#b9f9ff' } }>
+				{ text }
+			</View>
+		) ) }
+	</HStack>
+);
 
-export const _default = () => {
-	return (
-		<HStack spacing={ 3 }>
-			<View>One</View>
-			<View>Two</View>
-			<View>Three</View>
-			<View>Four</View>
-			<View>Five</View>
-		</HStack>
-	);
+export const Default: ComponentStory< typeof HStack > = Template.bind( {} );
+Default.args = {
+	spacing: '3',
 };

Finally, could you add an entry to the package's CHANGELOG ?

Thank you for your patience!

[ralucaStan]

@ciampo thank you so much for your support with this PR. I have addressed the requested changes and the Story for this component now works. Please take a look again.

[ciampo]

Code changes LGTM, tests well in Storybook 🚀

Thank you so so much for contributing to the components package! Hopefully this will be first of many others 🤞