From f111a5aa30a14041a78e0dfb0406d8c3460ed809 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Thu, 4 Aug 2022 00:23:57 +0900
Subject: [PATCH 01/20] rename to ts

---
 packages/components/src/card/card-body/{index.js => index.ts}    | 0
 packages/components/src/card/card-divider/{index.js => index.ts} | 0
 packages/components/src/card/card-footer/{index.js => index.ts}  | 0
 packages/components/src/card/card-header/{index.js => index.ts}  | 0
 packages/components/src/card/card-media/{index.js => index.ts}   | 0
 packages/components/src/card/card/{index.js => index.ts}         | 0
 packages/components/src/card/{context.js => context.ts}          | 0
 packages/components/src/card/{index.js => index.ts}              | 0
 packages/components/src/card/{styles.js => styles.ts}            | 0
 9 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/components/src/card/card-body/{index.js => index.ts} (100%)
 rename packages/components/src/card/card-divider/{index.js => index.ts} (100%)
 rename packages/components/src/card/card-footer/{index.js => index.ts} (100%)
 rename packages/components/src/card/card-header/{index.js => index.ts} (100%)
 rename packages/components/src/card/card-media/{index.js => index.ts} (100%)
 rename packages/components/src/card/card/{index.js => index.ts} (100%)
 rename packages/components/src/card/{context.js => context.ts} (100%)
 rename packages/components/src/card/{index.js => index.ts} (100%)
 rename packages/components/src/card/{styles.js => styles.ts} (100%)

diff --git a/packages/components/src/card/card-body/index.js b/packages/components/src/card/card-body/index.ts
similarity index 100%
rename from packages/components/src/card/card-body/index.js
rename to packages/components/src/card/card-body/index.ts
diff --git a/packages/components/src/card/card-divider/index.js b/packages/components/src/card/card-divider/index.ts
similarity index 100%
rename from packages/components/src/card/card-divider/index.js
rename to packages/components/src/card/card-divider/index.ts
diff --git a/packages/components/src/card/card-footer/index.js b/packages/components/src/card/card-footer/index.ts
similarity index 100%
rename from packages/components/src/card/card-footer/index.js
rename to packages/components/src/card/card-footer/index.ts
diff --git a/packages/components/src/card/card-header/index.js b/packages/components/src/card/card-header/index.ts
similarity index 100%
rename from packages/components/src/card/card-header/index.js
rename to packages/components/src/card/card-header/index.ts
diff --git a/packages/components/src/card/card-media/index.js b/packages/components/src/card/card-media/index.ts
similarity index 100%
rename from packages/components/src/card/card-media/index.js
rename to packages/components/src/card/card-media/index.ts
diff --git a/packages/components/src/card/card/index.js b/packages/components/src/card/card/index.ts
similarity index 100%
rename from packages/components/src/card/card/index.js
rename to packages/components/src/card/card/index.ts
diff --git a/packages/components/src/card/context.js b/packages/components/src/card/context.ts
similarity index 100%
rename from packages/components/src/card/context.js
rename to packages/components/src/card/context.ts
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.ts
similarity index 100%
rename from packages/components/src/card/index.js
rename to packages/components/src/card/index.ts
diff --git a/packages/components/src/card/styles.js b/packages/components/src/card/styles.ts
similarity index 100%
rename from packages/components/src/card/styles.js
rename to packages/components/src/card/styles.ts

From 3aafbbd97c04a2b70d5008592f7466659770299c Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Thu, 4 Aug 2022 01:28:00 +0900
Subject: [PATCH 02/20] Replace component with tsx.

---
 .../card-body/{component.js => component.tsx} | 21 ++++++++++------
 .../{component.js => component.tsx}           | 22 ++++++++++-------
 .../{component.js => component.tsx}           | 21 ++++++++++------
 .../{component.js => component.tsx}           | 18 +++++++++-----
 .../{component.js => component.tsx}           | 20 ++++++++++------
 .../card/card/{component.js => component.tsx} | 24 ++++++++++++-------
 6 files changed, 83 insertions(+), 43 deletions(-)
 rename packages/components/src/card/card-body/{component.js => component.tsx} (62%)
 rename packages/components/src/card/card-divider/{component.js => component.tsx} (56%)
 rename packages/components/src/card/card-footer/{component.js => component.tsx} (54%)
 rename packages/components/src/card/card-header/{component.js => component.tsx} (54%)
 rename packages/components/src/card/card-media/{component.js => component.tsx} (58%)
 rename packages/components/src/card/card/{component.js => component.tsx} (83%)

diff --git a/packages/components/src/card/card-body/component.js b/packages/components/src/card/card-body/component.tsx
similarity index 62%
rename from packages/components/src/card/card-body/component.js
rename to packages/components/src/card/card-body/component.tsx
index 028974cbd1e882..ebf3c237617bdd 100644
--- a/packages/components/src/card/card-body/component.js
+++ b/packages/components/src/card/card-body/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 { Scrollable } from '../../scrollable';
 import { View } from '../../view';
 import { useCardBody } from './hook';
+import type { BodyProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
- */
-function CardBody( props, forwardedRef ) {
+function CardBody(
+	props: WordPressComponentProps< BodyProps, 'div' >,
+	forwardedRef: ForwardedRef< HTMLDivElement >
+) {
 	const { isScrollable, ...otherProps } = useCardBody( props );
 
 	if ( isScrollable ) {
@@ -35,6 +40,8 @@ function CardBody( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardBody = contextConnect( CardBody, 'CardBody' );
+const ConnectedCardBody = contextConnect<
+	WordPressComponentProps< BodyProps, 'div' >
+>( CardBody, 'CardBody' );
 
 export default ConnectedCardBody;
diff --git a/packages/components/src/card/card-divider/component.js b/packages/components/src/card/card-divider/component.tsx
similarity index 56%
rename from packages/components/src/card/card-divider/component.js
rename to packages/components/src/card/card-divider/component.tsx
index 9696b98673db74..4a15b62b2f7188 100644
--- a/packages/components/src/card/card-divider/component.js
+++ b/packages/components/src/card/card-divider/component.tsx
@@ -1,15 +1,19 @@
 /**
- * Internal dependencies
+ * External dependencies
  */
-import { contextConnect } from '../../ui/context';
-import { Divider } from '../../divider';
-import { useCardDivider } from './hook';
+import type { ForwardedRef } from 'react';
 
 /**
- * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
- * @param {import('react').ForwardedRef<any>}                                                                     forwardedRef
+ * Internal dependencies
  */
-function CardDivider( props, forwardedRef ) {
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { Divider, DividerProps } from '../../divider';
+import { useCardDivider } from './hook';
+
+function CardDivider(
+	props: WordPressComponentProps< DividerProps, 'hr', false >,
+	forwardedRef: ForwardedRef< HTMLHRElement >
+) {
 	const dividerProps = useCardDivider( props );
 
 	return <Divider { ...dividerProps } ref={ forwardedRef } />;
@@ -30,6 +34,8 @@ function CardDivider( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardDivider = contextConnect( CardDivider, 'CardDivider' );
+const ConnectedCardDivider = contextConnect<
+	WordPressComponentProps< DividerProps, 'hr', false >
+>( CardDivider, 'CardDivider' );
 
 export default ConnectedCardDivider;
diff --git a/packages/components/src/card/card-footer/component.js b/packages/components/src/card/card-footer/component.tsx
similarity index 54%
rename from packages/components/src/card/card-footer/component.js
rename to packages/components/src/card/card-footer/component.tsx
index 130d9141e409e6..f2d93f604bd24f 100644
--- a/packages/components/src/card/card-footer/component.js
+++ b/packages/components/src/card/card-footer/component.tsx
@@ -1,15 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
+import type { FooterProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
- */
-function CardFooter( props, forwardedRef ) {
+function CardFooter(
+	props: WordPressComponentProps< FooterProps, 'div' >,
+	forwardedRef: ForwardedRef< HTMLDivElement >
+) {
 	const footerProps = useCardFooter( props );
 
 	return <Flex { ...footerProps } ref={ forwardedRef } />;
@@ -28,6 +33,8 @@ function CardFooter( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardFooter = contextConnect( CardFooter, 'CardFooter' );
+const ConnectedCardFooter = contextConnect<
+	WordPressComponentProps< FooterProps, 'div' >
+>( CardFooter, 'CardFooter' );
 
 export default ConnectedCardFooter;
diff --git a/packages/components/src/card/card-header/component.js b/packages/components/src/card/card-header/component.tsx
similarity index 54%
rename from packages/components/src/card/card-header/component.js
rename to packages/components/src/card/card-header/component.tsx
index f9fe39d03a8c8f..3b48e047e7b7d2 100644
--- a/packages/components/src/card/card-header/component.js
+++ b/packages/components/src/card/card-header/component.tsx
@@ -1,15 +1,19 @@
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Flex } from '../../flex';
 import { useCardHeader } from './hook';
-
+import type { HeaderProps } from '../types';
 /**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
+ * External dependencies
  */
-function CardHeader( props, forwardedRef ) {
+import type { ForwardedRef } from 'react';
+
+function CardHeader(
+	props: WordPressComponentProps< HeaderProps, 'div' >,
+	forwardedRef: ForwardedRef< HTMLDivElement >
+) {
 	const headerProps = useCardHeader( props );
 
 	return <Flex { ...headerProps } ref={ forwardedRef } />;
@@ -28,6 +32,8 @@ function CardHeader( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardHeader = contextConnect( CardHeader, 'CardHeader' );
+const ConnectedCardHeader = contextConnect<
+	WordPressComponentProps< HeaderProps, 'div' >
+>( CardHeader, 'CardHeader' );
 
 export default ConnectedCardHeader;
diff --git a/packages/components/src/card/card-media/component.js b/packages/components/src/card/card-media/component.tsx
similarity index 58%
rename from packages/components/src/card/card-media/component.js
rename to packages/components/src/card/card-media/component.tsx
index 83313b1ce4fe3d..7e83cf10b4ee8e 100644
--- a/packages/components/src/card/card-media/component.js
+++ b/packages/components/src/card/card-media/component.tsx
@@ -1,15 +1,19 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef, ReactNode } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
 import { useCardMedia } from './hook';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                                  forwardedRef
- */
-function CardMedia( props, forwardedRef ) {
+function CardMedia(
+	props: WordPressComponentProps< { children: ReactNode }, 'div' >,
+	forwardedRef: ForwardedRef< HTMLDivElement >
+) {
 	const cardMediaProps = useCardMedia( props );
 
 	return <View { ...cardMediaProps } ref={ forwardedRef } />;
@@ -32,6 +36,8 @@ function CardMedia( props, forwardedRef ) {
  * );
  * ```
  */
-const ConnectedCardMedia = contextConnect( CardMedia, 'CardMedia' );
+const ConnectedCardMedia = contextConnect<
+	WordPressComponentProps< { children: ReactNode }, 'div' >
+>( CardMedia, 'CardMedia' );
 
 export default ConnectedCardMedia;
diff --git a/packages/components/src/card/card/component.js b/packages/components/src/card/card/component.tsx
similarity index 83%
rename from packages/components/src/card/card/component.js
rename to packages/components/src/card/card/component.tsx
index c78d8d69c3b7b4..ec4005103fe0b7 100644
--- a/packages/components/src/card/card/component.js
+++ b/packages/components/src/card/card/component.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -11,19 +12,23 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { contextConnect, ContextSystemProvider } from '../../ui/context';
+import {
+	contextConnect,
+	ContextSystemProvider,
+	WordPressComponentProps,
+} from '../../ui/context';
 import { Elevation } from '../../elevation';
 import { View } from '../../view';
 import * as styles from '../styles';
 import { useCard } from './hook';
 import CONFIG from '../../utils/config-values';
-import { useCx } from '../../utils/hooks/use-cx';
+import { useCx } from '../../utils';
+import type { Props } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                   forwardedRef
- */
-function Card( props, forwardedRef ) {
+function Card(
+	props: WordPressComponentProps< Props, 'div' >,
+	forwardedRef: ForwardedRef< HTMLDivElement >
+) {
 	const {
 		children,
 		elevation,
@@ -105,6 +110,9 @@ function Card( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedCard = contextConnect( Card, 'Card' );
+const ConnectedCard = contextConnect< WordPressComponentProps< Props, 'div' > >(
+	Card,
+	'Card'
+);
 
 export default ConnectedCard;

From 672a2713a941838904ed0a413a0aa6ffafc6b446 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Thu, 4 Aug 2022 01:32:12 +0900
Subject: [PATCH 03/20] move MediaProps to types.ts

---
 packages/components/src/card/card-media/component.tsx | 7 ++++---
 packages/components/src/card/types.ts                 | 7 +++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/card/card-media/component.tsx b/packages/components/src/card/card-media/component.tsx
index 7e83cf10b4ee8e..84d293c5a30a6e 100644
--- a/packages/components/src/card/card-media/component.tsx
+++ b/packages/components/src/card/card-media/component.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ForwardedRef, ReactNode } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -9,9 +9,10 @@ import type { ForwardedRef, ReactNode } from 'react';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
 import { useCardMedia } from './hook';
+import type { MediaProps } from '../types';
 
 function CardMedia(
-	props: WordPressComponentProps< { children: ReactNode }, 'div' >,
+	props: WordPressComponentProps< MediaProps, 'div' >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const cardMediaProps = useCardMedia( props );
@@ -37,7 +38,7 @@ function CardMedia(
  * ```
  */
 const ConnectedCardMedia = contextConnect<
-	WordPressComponentProps< { children: ReactNode }, 'div' >
+	WordPressComponentProps< MediaProps, 'div' >
 >( CardMedia, 'CardMedia' );
 
 export default ConnectedCardMedia;
diff --git a/packages/components/src/card/types.ts b/packages/components/src/card/types.ts
index f95b45d3647507..7589401f43ffac 100644
--- a/packages/components/src/card/types.ts
+++ b/packages/components/src/card/types.ts
@@ -74,6 +74,13 @@ export type BodyProps = BaseSubComponentProps & {
 	isScrollable?: boolean;
 };
 
+export type MediaProps = {
+	/**
+	 * The children elements.
+	 */
+	children: React.ReactNode;
+};
+
 type MarginalSubComponentProps = BaseSubComponentProps & {
 	/**
 	 * Renders without a border.

From 0e06f765a6c7f531c46c78349a8e9207ab390a08 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Thu, 4 Aug 2022 01:34:15 +0900
Subject: [PATCH 04/20] fix imports

---
 packages/components/src/card/card/component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx
index ec4005103fe0b7..3196f36ed3545d 100644
--- a/packages/components/src/card/card/component.tsx
+++ b/packages/components/src/card/card/component.tsx
@@ -22,7 +22,7 @@ import { View } from '../../view';
 import * as styles from '../styles';
 import { useCard } from './hook';
 import CONFIG from '../../utils/config-values';
-import { useCx } from '../../utils';
+import { useCx } from '../../utils/hooks/use-cx';
 import type { Props } from '../types';
 
 function Card(

From 726e2e2b8825599b461e5a2bec0cb663d5a5690b Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Thu, 4 Aug 2022 02:00:13 +0900
Subject: [PATCH 05/20] component props to DRY

---
 .../components/src/card/card-body/component.tsx   | 11 +++++++----
 .../src/card/card-divider/component.tsx           | 15 +++++++++++----
 .../components/src/card/card-footer/component.tsx | 11 +++++++----
 .../components/src/card/card-header/component.tsx | 11 +++++++----
 .../components/src/card/card-media/component.tsx  | 11 +++++++----
 packages/components/src/card/card/component.tsx   |  9 ++++-----
 6 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/packages/components/src/card/card-body/component.tsx b/packages/components/src/card/card-body/component.tsx
index ebf3c237617bdd..2a1e4725889e4e 100644
--- a/packages/components/src/card/card-body/component.tsx
+++ b/packages/components/src/card/card-body/component.tsx
@@ -12,8 +12,10 @@ import { View } from '../../view';
 import { useCardBody } from './hook';
 import type { BodyProps } from '../types';
 
+export type CardBodyProps = WordPressComponentProps< BodyProps, 'div' >;
+
 function CardBody(
-	props: WordPressComponentProps< BodyProps, 'div' >,
+	props: CardBodyProps,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const { isScrollable, ...otherProps } = useCardBody( props );
@@ -40,8 +42,9 @@ function CardBody(
  * </Card>
  * ```
  */
-const ConnectedCardBody = contextConnect<
-	WordPressComponentProps< BodyProps, 'div' >
->( CardBody, 'CardBody' );
+const ConnectedCardBody = contextConnect< CardBodyProps >(
+	CardBody,
+	'CardBody'
+);
 
 export default ConnectedCardBody;
diff --git a/packages/components/src/card/card-divider/component.tsx b/packages/components/src/card/card-divider/component.tsx
index 4a15b62b2f7188..76a6e737a8981b 100644
--- a/packages/components/src/card/card-divider/component.tsx
+++ b/packages/components/src/card/card-divider/component.tsx
@@ -10,8 +10,14 @@ import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Divider, DividerProps } from '../../divider';
 import { useCardDivider } from './hook';
 
+export type CardDividerProps = WordPressComponentProps<
+	DividerProps,
+	'hr',
+	false
+>;
+
 function CardDivider(
-	props: WordPressComponentProps< DividerProps, 'hr', false >,
+	props: CardDividerProps,
 	forwardedRef: ForwardedRef< HTMLHRElement >
 ) {
 	const dividerProps = useCardDivider( props );
@@ -34,8 +40,9 @@ function CardDivider(
  * </Card>
  * ```
  */
-const ConnectedCardDivider = contextConnect<
-	WordPressComponentProps< DividerProps, 'hr', false >
->( CardDivider, 'CardDivider' );
+const ConnectedCardDivider = contextConnect< CardDividerProps >(
+	CardDivider,
+	'CardDivider'
+);
 
 export default ConnectedCardDivider;
diff --git a/packages/components/src/card/card-footer/component.tsx b/packages/components/src/card/card-footer/component.tsx
index f2d93f604bd24f..5a77a4fef8a018 100644
--- a/packages/components/src/card/card-footer/component.tsx
+++ b/packages/components/src/card/card-footer/component.tsx
@@ -11,8 +11,10 @@ import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
 import type { FooterProps } from '../types';
 
+export type CardFooterProps = WordPressComponentProps< FooterProps, 'div' >;
+
 function CardFooter(
-	props: WordPressComponentProps< FooterProps, 'div' >,
+	props: CardFooterProps,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const footerProps = useCardFooter( props );
@@ -33,8 +35,9 @@ function CardFooter(
  * </Card>
  * ```
  */
-const ConnectedCardFooter = contextConnect<
-	WordPressComponentProps< FooterProps, 'div' >
->( CardFooter, 'CardFooter' );
+const ConnectedCardFooter = contextConnect< CardFooterProps >(
+	CardFooter,
+	'CardFooter'
+);
 
 export default ConnectedCardFooter;
diff --git a/packages/components/src/card/card-header/component.tsx b/packages/components/src/card/card-header/component.tsx
index 3b48e047e7b7d2..981bb24e5b4ad3 100644
--- a/packages/components/src/card/card-header/component.tsx
+++ b/packages/components/src/card/card-header/component.tsx
@@ -10,8 +10,10 @@ import type { HeaderProps } from '../types';
  */
 import type { ForwardedRef } from 'react';
 
+export type CardHeaderProps = WordPressComponentProps< HeaderProps, 'div' >;
+
 function CardHeader(
-	props: WordPressComponentProps< HeaderProps, 'div' >,
+	props: CardHeaderProps,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const headerProps = useCardHeader( props );
@@ -32,8 +34,9 @@ function CardHeader(
  * </Card>
  * ```
  */
-const ConnectedCardHeader = contextConnect<
-	WordPressComponentProps< HeaderProps, 'div' >
->( CardHeader, 'CardHeader' );
+const ConnectedCardHeader = contextConnect< CardHeaderProps >(
+	CardHeader,
+	'CardHeader'
+);
 
 export default ConnectedCardHeader;
diff --git a/packages/components/src/card/card-media/component.tsx b/packages/components/src/card/card-media/component.tsx
index 84d293c5a30a6e..62aad2435a269c 100644
--- a/packages/components/src/card/card-media/component.tsx
+++ b/packages/components/src/card/card-media/component.tsx
@@ -11,8 +11,10 @@ import { View } from '../../view';
 import { useCardMedia } from './hook';
 import type { MediaProps } from '../types';
 
+export type CardMediaProps = WordPressComponentProps< MediaProps, 'div' >;
+
 function CardMedia(
-	props: WordPressComponentProps< MediaProps, 'div' >,
+	props: CardMediaProps,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const cardMediaProps = useCardMedia( props );
@@ -37,8 +39,9 @@ function CardMedia(
  * );
  * ```
  */
-const ConnectedCardMedia = contextConnect<
-	WordPressComponentProps< MediaProps, 'div' >
->( CardMedia, 'CardMedia' );
+const ConnectedCardMedia = contextConnect< CardMediaProps >(
+	CardMedia,
+	'CardMedia'
+);
 
 export default ConnectedCardMedia;
diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx
index 3196f36ed3545d..a416780c57ad80 100644
--- a/packages/components/src/card/card/component.tsx
+++ b/packages/components/src/card/card/component.tsx
@@ -25,8 +25,10 @@ import CONFIG from '../../utils/config-values';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { Props } from '../types';
 
+export type CardProps = WordPressComponentProps< Props, 'div' >;
+
 function Card(
-	props: WordPressComponentProps< Props, 'div' >,
+	props: CardProps,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const {
@@ -110,9 +112,6 @@ function Card(
  * }
  * ```
  */
-const ConnectedCard = contextConnect< WordPressComponentProps< Props, 'div' > >(
-	Card,
-	'Card'
-);
+const ConnectedCard = contextConnect< CardProps >( Card, 'Card' );
 
 export default ConnectedCard;

From 7007dbe98ef2236ea4ae22a163dc9a62d949b17c Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Thu, 4 Aug 2022 02:51:45 +0900
Subject: [PATCH 06/20] convert to ts.

---
 packages/components/CONTRIBUTING.md            |  2 +-
 .../src/card/card-body/{hook.js => hook.ts}    |  6 ++----
 .../src/card/card-divider/{hook.js => hook.ts} |  6 ++----
 .../src/card/card-footer/{hook.js => hook.ts}  |  6 ++----
 .../src/card/card-header/{hook.js => hook.ts}  |  6 ++----
 .../src/card/card-media/{hook.js => hook.ts}   | 11 +++++++----
 .../src/card/card/{hook.js => hook.ts}         | 18 ++++++++----------
 7 files changed, 24 insertions(+), 31 deletions(-)
 rename packages/components/src/card/card-body/{hook.js => hook.ts} (83%)
 rename packages/components/src/card/card-divider/{hook.js => hook.ts} (79%)
 rename packages/components/src/card/card-footer/{hook.js => hook.ts} (84%)
 rename packages/components/src/card/card-header/{hook.js => hook.ts} (84%)
 rename packages/components/src/card/card-media/{hook.js => hook.ts} (77%)
 rename packages/components/src/card/card/{hook.js => hook.ts} (75%)

diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 0b866036905938..482aba54523e66 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -156,7 +156,7 @@ function Example(
 
 A couple of good examples of how hooks are used for composition are:
 
-- the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.js);
+- the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.ts);
 - the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.js).
 
 <!-- ## API Consinstency
diff --git a/packages/components/src/card/card-body/hook.js b/packages/components/src/card/card-body/hook.ts
similarity index 83%
rename from packages/components/src/card/card-body/hook.js
rename to packages/components/src/card/card-body/hook.ts
index 5333a77bbbd2e9..366a722a36e9f6 100644
--- a/packages/components/src/card/card-body/hook.js
+++ b/packages/components/src/card/card-body/hook.ts
@@ -9,11 +9,9 @@ import { useMemo } from '@wordpress/element';
 import { useContextSystem } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { CardBodyProps } from './component';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
- */
-export function useCardBody( props ) {
+export function useCardBody( props: CardBodyProps ) {
 	const {
 		className,
 		isScrollable = false,
diff --git a/packages/components/src/card/card-divider/hook.js b/packages/components/src/card/card-divider/hook.ts
similarity index 79%
rename from packages/components/src/card/card-divider/hook.js
rename to packages/components/src/card/card-divider/hook.ts
index 1007033c10987b..80943ac641034e 100644
--- a/packages/components/src/card/card-divider/hook.js
+++ b/packages/components/src/card/card-divider/hook.ts
@@ -9,11 +9,9 @@ import { useMemo } from '@wordpress/element';
 import { useContextSystem } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { CardDividerProps } from './component';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
- */
-export function useCardDivider( props ) {
+export function useCardDivider( props: CardDividerProps ) {
 	const { className, ...otherProps } = useContextSystem(
 		props,
 		'CardDivider'
diff --git a/packages/components/src/card/card-footer/hook.js b/packages/components/src/card/card-footer/hook.ts
similarity index 84%
rename from packages/components/src/card/card-footer/hook.js
rename to packages/components/src/card/card-footer/hook.ts
index 99d1317945e9a4..7cda5c747c10a0 100644
--- a/packages/components/src/card/card-footer/hook.js
+++ b/packages/components/src/card/card-footer/hook.ts
@@ -9,11 +9,9 @@ import { useMemo } from '@wordpress/element';
 import { useContextSystem } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { CardFooterProps } from './component';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
- */
-export function useCardFooter( props ) {
+export function useCardFooter( props: CardFooterProps ) {
 	const {
 		className,
 		justify,
diff --git a/packages/components/src/card/card-header/hook.js b/packages/components/src/card/card-header/hook.ts
similarity index 84%
rename from packages/components/src/card/card-header/hook.js
rename to packages/components/src/card/card-header/hook.ts
index 5318e4ef1a2f30..f49457d95d7608 100644
--- a/packages/components/src/card/card-header/hook.js
+++ b/packages/components/src/card/card-header/hook.ts
@@ -9,11 +9,9 @@ import { useMemo } from '@wordpress/element';
 import { useContextSystem } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { CardHeaderProps } from './component';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
- */
-export function useCardHeader( props ) {
+export function useCardHeader( props: CardHeaderProps ) {
 	const {
 		className,
 		isBorderless = false,
diff --git a/packages/components/src/card/card-media/hook.js b/packages/components/src/card/card-media/hook.ts
similarity index 77%
rename from packages/components/src/card/card-media/hook.js
rename to packages/components/src/card/card-media/hook.ts
index 30f6c13c7cf397..108ec2ed508e6a 100644
--- a/packages/components/src/card/card-media/hook.js
+++ b/packages/components/src/card/card-media/hook.ts
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentProps } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -9,11 +14,9 @@ import { useMemo } from '@wordpress/element';
 import { useContextSystem } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { CardMedia } from '../index';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- */
-export function useCardMedia( props ) {
+export function useCardMedia( props: ComponentProps< typeof CardMedia > ) {
 	const { className, ...otherProps } = useContextSystem( props, 'CardMedia' );
 
 	const cx = useCx();
diff --git a/packages/components/src/card/card/hook.js b/packages/components/src/card/card/hook.ts
similarity index 75%
rename from packages/components/src/card/card/hook.js
rename to packages/components/src/card/card/hook.ts
index b11d22aeccfd91..9a7b2a500eac73 100644
--- a/packages/components/src/card/card/hook.js
+++ b/packages/components/src/card/card/hook.ts
@@ -11,13 +11,14 @@ import { useContextSystem } from '../../ui/context';
 import { useSurface } from '../../surface';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { CardProps } from './component';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
- */
-function useDeprecatedProps( { elevation, isElevated, ...otherProps } ) {
-	/**@type {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} */
-	const propsToReturn = {
+function useDeprecatedProps( {
+	elevation,
+	isElevated,
+	...otherProps
+}: CardProps ): CardProps {
+	const propsToReturn: CardProps = {
 		...otherProps,
 	};
 	let computedElevation = elevation;
@@ -39,10 +40,7 @@ function useDeprecatedProps( { elevation, isElevated, ...otherProps } ) {
 	return propsToReturn;
 }
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
- */
-export function useCard( props ) {
+export function useCard( props: CardProps ) {
 	const {
 		className,
 		elevation = 0,

From 3f974975ad9412b4c65b35fdf8b25b3dfb1e773e Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Thu, 4 Aug 2022 03:30:31 +0900
Subject: [PATCH 07/20] fix type.

---
 packages/components/CONTRIBUTING.md           |   2 +-
 .../src/card/card-body/component.tsx          |   9 +-
 .../components/src/card/card-body/hook.ts     |   8 +-
 .../src/card/card-divider/component.tsx       |  10 +-
 .../components/src/card/card-divider/hook.ts  |   8 +-
 .../src/card/card-footer/component.tsx        |   6 +-
 .../components/src/card/card-footer/hook.ts   |   8 +-
 .../src/card/card-header/component.tsx        |   6 +-
 .../components/src/card/card-header/hook.ts   |   8 +-
 .../src/card/card-media/component.tsx         |   6 +-
 .../components/src/card/card-media/hook.ts    |  13 +-
 .../components/src/card/card/component.tsx    |   6 +-
 packages/components/src/card/card/hook.ts     |   6 +-
 packages/components/src/card/stories/index.js | 209 ------------------
 .../components/src/card/stories/index.tsx     |  63 ++++++
 packages/components/src/card/types.ts         |   2 +-
 16 files changed, 106 insertions(+), 264 deletions(-)
 delete mode 100644 packages/components/src/card/stories/index.js
 create mode 100644 packages/components/src/card/stories/index.tsx

diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 482aba54523e66..07d466b4e65ca9 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -364,7 +364,7 @@ Primary.args = {
 
 A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code. Avoid using [Knobs](https://storybook.js.org/addons/@storybook/addon-knobs) for new stories, as this addon is deprecated.
 
-The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](/packages/components/src/card/stories/index.js)).
+The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](/packages/components/src/card/stories/index.tsx)).
 
 Storybook can be started on a local machine by running `npm run storybook:dev`. Alternatively, the components' catalogue (up to date with the latest code on `trunk`) can be found at [wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/).
 
diff --git a/packages/components/src/card/card-body/component.tsx b/packages/components/src/card/card-body/component.tsx
index 2a1e4725889e4e..6f70a1f0599da7 100644
--- a/packages/components/src/card/card-body/component.tsx
+++ b/packages/components/src/card/card-body/component.tsx
@@ -12,10 +12,8 @@ import { View } from '../../view';
 import { useCardBody } from './hook';
 import type { BodyProps } from '../types';
 
-export type CardBodyProps = WordPressComponentProps< BodyProps, 'div' >;
-
 function CardBody(
-	props: CardBodyProps,
+	props: WordPressComponentProps< BodyProps, 'div' >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const { isScrollable, ...otherProps } = useCardBody( props );
@@ -42,9 +40,6 @@ function CardBody(
  * </Card>
  * ```
  */
-const ConnectedCardBody = contextConnect< CardBodyProps >(
-	CardBody,
-	'CardBody'
-);
+const ConnectedCardBody = contextConnect< BodyProps >( CardBody, 'CardBody' );
 
 export default ConnectedCardBody;
diff --git a/packages/components/src/card/card-body/hook.ts b/packages/components/src/card/card-body/hook.ts
index 366a722a36e9f6..a02a6981b54e3d 100644
--- a/packages/components/src/card/card-body/hook.ts
+++ b/packages/components/src/card/card-body/hook.ts
@@ -6,12 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardBodyProps } from './component';
+import type { BodyProps } from '../types';
 
-export function useCardBody( props: CardBodyProps ) {
+export function useCardBody(
+	props: WordPressComponentProps< BodyProps, 'div' >
+) {
 	const {
 		className,
 		isScrollable = false,
diff --git a/packages/components/src/card/card-divider/component.tsx b/packages/components/src/card/card-divider/component.tsx
index 76a6e737a8981b..527bcc62f93761 100644
--- a/packages/components/src/card/card-divider/component.tsx
+++ b/packages/components/src/card/card-divider/component.tsx
@@ -10,14 +10,8 @@ import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Divider, DividerProps } from '../../divider';
 import { useCardDivider } from './hook';
 
-export type CardDividerProps = WordPressComponentProps<
-	DividerProps,
-	'hr',
-	false
->;
-
 function CardDivider(
-	props: CardDividerProps,
+	props: WordPressComponentProps< DividerProps, 'hr', false >,
 	forwardedRef: ForwardedRef< HTMLHRElement >
 ) {
 	const dividerProps = useCardDivider( props );
@@ -40,7 +34,7 @@ function CardDivider(
  * </Card>
  * ```
  */
-const ConnectedCardDivider = contextConnect< CardDividerProps >(
+const ConnectedCardDivider = contextConnect< DividerProps >(
 	CardDivider,
 	'CardDivider'
 );
diff --git a/packages/components/src/card/card-divider/hook.ts b/packages/components/src/card/card-divider/hook.ts
index 80943ac641034e..aa5fdbe08eecbb 100644
--- a/packages/components/src/card/card-divider/hook.ts
+++ b/packages/components/src/card/card-divider/hook.ts
@@ -6,12 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardDividerProps } from './component';
+import type { DividerProps } from '../../divider';
 
-export function useCardDivider( props: CardDividerProps ) {
+export function useCardDivider(
+	props: WordPressComponentProps< DividerProps, 'hr', false >
+) {
 	const { className, ...otherProps } = useContextSystem(
 		props,
 		'CardDivider'
diff --git a/packages/components/src/card/card-footer/component.tsx b/packages/components/src/card/card-footer/component.tsx
index 5a77a4fef8a018..8f3c10226d1100 100644
--- a/packages/components/src/card/card-footer/component.tsx
+++ b/packages/components/src/card/card-footer/component.tsx
@@ -11,10 +11,8 @@ import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
 import type { FooterProps } from '../types';
 
-export type CardFooterProps = WordPressComponentProps< FooterProps, 'div' >;
-
 function CardFooter(
-	props: CardFooterProps,
+	props: WordPressComponentProps< FooterProps, 'div' >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const footerProps = useCardFooter( props );
@@ -35,7 +33,7 @@ function CardFooter(
  * </Card>
  * ```
  */
-const ConnectedCardFooter = contextConnect< CardFooterProps >(
+const ConnectedCardFooter = contextConnect< FooterProps >(
 	CardFooter,
 	'CardFooter'
 );
diff --git a/packages/components/src/card/card-footer/hook.ts b/packages/components/src/card/card-footer/hook.ts
index 7cda5c747c10a0..831a9c7773f778 100644
--- a/packages/components/src/card/card-footer/hook.ts
+++ b/packages/components/src/card/card-footer/hook.ts
@@ -6,12 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardFooterProps } from './component';
+import type { FooterProps } from '../types';
 
-export function useCardFooter( props: CardFooterProps ) {
+export function useCardFooter(
+	props: WordPressComponentProps< FooterProps, 'div' >
+) {
 	const {
 		className,
 		justify,
diff --git a/packages/components/src/card/card-header/component.tsx b/packages/components/src/card/card-header/component.tsx
index 981bb24e5b4ad3..12bd40d577e397 100644
--- a/packages/components/src/card/card-header/component.tsx
+++ b/packages/components/src/card/card-header/component.tsx
@@ -10,10 +10,8 @@ import type { HeaderProps } from '../types';
  */
 import type { ForwardedRef } from 'react';
 
-export type CardHeaderProps = WordPressComponentProps< HeaderProps, 'div' >;
-
 function CardHeader(
-	props: CardHeaderProps,
+	props: WordPressComponentProps< HeaderProps, 'div' >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const headerProps = useCardHeader( props );
@@ -34,7 +32,7 @@ function CardHeader(
  * </Card>
  * ```
  */
-const ConnectedCardHeader = contextConnect< CardHeaderProps >(
+const ConnectedCardHeader = contextConnect< HeaderProps >(
 	CardHeader,
 	'CardHeader'
 );
diff --git a/packages/components/src/card/card-header/hook.ts b/packages/components/src/card/card-header/hook.ts
index f49457d95d7608..9cf9387b62a265 100644
--- a/packages/components/src/card/card-header/hook.ts
+++ b/packages/components/src/card/card-header/hook.ts
@@ -6,12 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardHeaderProps } from './component';
+import type { HeaderProps } from '../types';
 
-export function useCardHeader( props: CardHeaderProps ) {
+export function useCardHeader(
+	props: WordPressComponentProps< HeaderProps, 'div' >
+) {
 	const {
 		className,
 		isBorderless = false,
diff --git a/packages/components/src/card/card-media/component.tsx b/packages/components/src/card/card-media/component.tsx
index 62aad2435a269c..cfaed878bbb623 100644
--- a/packages/components/src/card/card-media/component.tsx
+++ b/packages/components/src/card/card-media/component.tsx
@@ -11,10 +11,8 @@ import { View } from '../../view';
 import { useCardMedia } from './hook';
 import type { MediaProps } from '../types';
 
-export type CardMediaProps = WordPressComponentProps< MediaProps, 'div' >;
-
 function CardMedia(
-	props: CardMediaProps,
+	props: WordPressComponentProps< MediaProps, 'div' >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const cardMediaProps = useCardMedia( props );
@@ -39,7 +37,7 @@ function CardMedia(
  * );
  * ```
  */
-const ConnectedCardMedia = contextConnect< CardMediaProps >(
+const ConnectedCardMedia = contextConnect< MediaProps >(
 	CardMedia,
 	'CardMedia'
 );
diff --git a/packages/components/src/card/card-media/hook.ts b/packages/components/src/card/card-media/hook.ts
index 108ec2ed508e6a..edbedb986a4901 100644
--- a/packages/components/src/card/card-media/hook.ts
+++ b/packages/components/src/card/card-media/hook.ts
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { ComponentProps } from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -11,12 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardMedia } from '../index';
+import type { MediaProps } from '../types';
 
-export function useCardMedia( props: ComponentProps< typeof CardMedia > ) {
+export function useCardMedia(
+	props: WordPressComponentProps< MediaProps, 'div' >
+) {
 	const { className, ...otherProps } = useContextSystem( props, 'CardMedia' );
 
 	const cx = useCx();
diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx
index a416780c57ad80..6727ec37ce467a 100644
--- a/packages/components/src/card/card/component.tsx
+++ b/packages/components/src/card/card/component.tsx
@@ -25,10 +25,8 @@ import CONFIG from '../../utils/config-values';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { Props } from '../types';
 
-export type CardProps = WordPressComponentProps< Props, 'div' >;
-
 function Card(
-	props: CardProps,
+	props: WordPressComponentProps< Props, 'div' >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const {
@@ -112,6 +110,6 @@ function Card(
  * }
  * ```
  */
-const ConnectedCard = contextConnect< CardProps >( Card, 'Card' );
+const ConnectedCard = contextConnect< Props >( Card, 'Card' );
 
 export default ConnectedCard;
diff --git a/packages/components/src/card/card/hook.ts b/packages/components/src/card/card/hook.ts
index 9a7b2a500eac73..82270166bce80d 100644
--- a/packages/components/src/card/card/hook.ts
+++ b/packages/components/src/card/card/hook.ts
@@ -7,11 +7,13 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useSurface } from '../../surface';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardProps } from './component';
+import type { Props } from '../types';
+
+type CardProps = WordPressComponentProps< Props, 'div' >;
 
 function useDeprecatedProps( {
 	elevation,
diff --git a/packages/components/src/card/stories/index.js b/packages/components/src/card/stories/index.js
deleted file mode 100644
index 5cc7d95ae25318..00000000000000
--- a/packages/components/src/card/stories/index.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, select, number } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import {
-	Card,
-	CardHeader,
-	CardBody,
-	CardDivider,
-	CardMedia,
-	CardFooter,
-} from '../index';
-import { Text } from '../../text';
-import { Heading } from '../../heading';
-import Button from '../../button';
-
-export default {
-	component: Card,
-	title: 'Components/Card',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const KNOBS_GROUPS = {
-	Card: 'Card',
-	CardBody: 'CardBody',
-	CardHeader: 'CardHeader',
-	CardFooter: 'CardFooter',
-};
-
-// Using `unset` instead of `undefined` as Storybook seems to sometimes pass an
-// empty string instead of `undefined`, which is not ideal.
-// https://github.com/storybookjs/storybook/issues/800
-const PROP_UNSET = 'unset';
-
-export const _default = () => {
-	const cardProps = {
-		isBorderless: boolean( 'Card: isBorderless', false, KNOBS_GROUPS.Card ),
-		isRounded: boolean( 'Card: isRounded', true, KNOBS_GROUPS.Card ),
-		elevation: number( 'Card: elevation', 0, {}, KNOBS_GROUPS.Card ),
-		size: select(
-			'Card: size',
-			{
-				large: 'large',
-				medium: 'medium',
-				small: 'small',
-				xSmall: 'xSmall',
-			},
-			'medium',
-			KNOBS_GROUPS.Card
-		),
-		style: {
-			width: select(
-				'Card: width (via inline styles)',
-				{
-					'640px': 640,
-					'360px': 360,
-					'240px': 240,
-					'50%': '50%',
-					'100%': '100%',
-				},
-				360,
-				KNOBS_GROUPS.Card
-			),
-		},
-	};
-
-	const cardHeaderProps = {
-		isBorderless: select(
-			'CardHeader: isBorderless',
-			{
-				'unset (defaults to the value set on the <Card> parent)':
-					PROP_UNSET,
-				true: true,
-				false: false,
-			},
-			PROP_UNSET,
-			KNOBS_GROUPS.CardHeader
-		),
-		isShady: boolean(
-			'CardHeader: isShady',
-			false,
-			KNOBS_GROUPS.CardHeader
-		),
-		size: select(
-			'CardHeader: size',
-			{
-				'unset (defaults to the value set on the <Card> parent)':
-					PROP_UNSET,
-				large: 'large',
-				medium: 'medium',
-				small: 'small',
-				xSmall: 'xSmall',
-			},
-			PROP_UNSET,
-			KNOBS_GROUPS.CardHeader
-		),
-	};
-
-	const cardBodyProps = {
-		isShady: boolean( 'CardBody: isShady', false, KNOBS_GROUPS.CardBody ),
-		size: select(
-			'CardBody: size',
-			{
-				'unset (defaults to the value set on the <Card> parent)':
-					PROP_UNSET,
-				large: 'large',
-				medium: 'medium',
-				small: 'small',
-				xSmall: 'xSmall',
-			},
-			PROP_UNSET,
-			KNOBS_GROUPS.CardBody
-		),
-	};
-
-	const cardFooterProps = {
-		isBorderless: select(
-			'CardFooter: isBorderless',
-			{
-				'unset (defaults to the value set on the <Card> parent)':
-					PROP_UNSET,
-				true: true,
-				false: false,
-			},
-			PROP_UNSET,
-			KNOBS_GROUPS.CardFooter
-		),
-		isShady: boolean(
-			'CardFooter: isShady',
-			false,
-			KNOBS_GROUPS.CardFooter
-		),
-		justify: select(
-			'CardFooter: justify',
-			{
-				flexStart: 'flex-start',
-				flexEnd: 'flex-end',
-				center: 'center',
-				spaceAround: 'space-around',
-				spaceBetween: 'space-between',
-				spaceEvenly: 'space-evenly',
-			},
-			'space-between',
-			KNOBS_GROUPS.CardFooter
-		),
-		size: select(
-			'CardFooter: size',
-			{
-				'unset (defaults to the value set on the <Card> parent)':
-					PROP_UNSET,
-				large: 'large',
-				medium: 'medium',
-				small: 'small',
-				xSmall: 'xSmall',
-			},
-			PROP_UNSET,
-			KNOBS_GROUPS.CardFooter
-		),
-	};
-
-	// Do not pass the `size` and `isBorderless` props when their value is `undefined`.
-	// This allows the `CardHeader`, `CardBody` and `CardFooter` components to use
-	// the values that are set on the parent `Card` component by default.
-	for ( const componentProps of [
-		cardHeaderProps,
-		cardFooterProps,
-		cardBodyProps,
-	] ) {
-		for ( const prop of [ 'isBorderless', 'size' ] ) {
-			if ( componentProps[ prop ] === PROP_UNSET ) {
-				delete componentProps[ prop ];
-			}
-		}
-	}
-
-	return (
-		<Card { ...cardProps }>
-			<CardHeader { ...cardHeaderProps }>
-				<Heading>CardHeader</Heading>
-			</CardHeader>
-			<CardBody { ...cardBodyProps }>
-				<Text>CardBody</Text>
-			</CardBody>
-			<CardBody { ...cardBodyProps }>
-				<Text>CardBody (before CardDivider)</Text>
-			</CardBody>
-			<CardDivider />
-			<CardBody { ...cardBodyProps }>
-				<Text>CardBody (after CardDivider)</Text>
-			</CardBody>
-			<CardMedia>
-				<img
-					alt="Card Media"
-					src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
-				/>
-			</CardMedia>
-			<CardFooter { ...cardFooterProps }>
-				<Text>CardFooter</Text>
-				<Button variant="secondary">Action Button</Button>
-			</CardFooter>
-		</Card>
-	);
-};
diff --git a/packages/components/src/card/stories/index.tsx b/packages/components/src/card/stories/index.tsx
new file mode 100644
index 00000000000000..d88855a5519732
--- /dev/null
+++ b/packages/components/src/card/stories/index.tsx
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Card,
+	CardHeader,
+	CardBody,
+	CardDivider,
+	CardMedia,
+	CardFooter,
+} from '../index';
+import { Text } from '../../text';
+import { Heading } from '../../heading';
+import Button from '../../button';
+
+const meta: ComponentMeta< typeof Card > = {
+	component: Card,
+	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
+	title: 'Components/Card',
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+
+export default meta;
+
+export const Default: ComponentStory< typeof Card > = ( props ) => {
+	return (
+		<Card { ...props }>
+			<CardHeader>
+				<Heading>CardHeader</Heading>
+			</CardHeader>
+			<CardBody>
+				<Text>CardBody</Text>
+			</CardBody>
+			<CardBody>
+				<Text>CardBody (before CardDivider)</Text>
+			</CardBody>
+			<CardDivider />
+			<CardBody>
+				<Text>CardBody (after CardDivider)</Text>
+			</CardBody>
+			<CardMedia>
+				<img
+					alt="Card Media"
+					src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+				/>
+			</CardMedia>
+			<CardFooter>
+				<Text>CardFooter</Text>
+				<Button variant="secondary">Action Button</Button>
+			</CardFooter>
+		</Card>
+	);
+};
diff --git a/packages/components/src/card/types.ts b/packages/components/src/card/types.ts
index 7589401f43ffac..143e1947255b8d 100644
--- a/packages/components/src/card/types.ts
+++ b/packages/components/src/card/types.ts
@@ -93,5 +93,5 @@ type MarginalSubComponentProps = BaseSubComponentProps & {
 export type HeaderProps = MarginalSubComponentProps;
 
 export type FooterProps = MarginalSubComponentProps & {
-	justify: CSSProperties[ 'justifyContent' ];
+	justify?: CSSProperties[ 'justifyContent' ];
 };

From a9f0a0e14139a8afc2d97fed33c39358c196cfe3 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Thu, 4 Aug 2022 03:44:38 +0900
Subject: [PATCH 08/20] remove generics

---
 packages/components/src/card/card-body/component.tsx    | 2 +-
 packages/components/src/card/card-divider/component.tsx | 5 +----
 packages/components/src/card/card-footer/component.tsx  | 5 +----
 packages/components/src/card/card-header/component.tsx  | 5 +----
 packages/components/src/card/card-media/component.tsx   | 5 +----
 packages/components/src/card/card/component.tsx         | 2 +-
 packages/components/src/card/stories/index.tsx          | 6 +++++-
 7 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/card/card-body/component.tsx b/packages/components/src/card/card-body/component.tsx
index 6f70a1f0599da7..a2a7447835f151 100644
--- a/packages/components/src/card/card-body/component.tsx
+++ b/packages/components/src/card/card-body/component.tsx
@@ -40,6 +40,6 @@ function CardBody(
  * </Card>
  * ```
  */
-const ConnectedCardBody = contextConnect< BodyProps >( CardBody, 'CardBody' );
+const ConnectedCardBody = contextConnect( CardBody, 'CardBody' );
 
 export default ConnectedCardBody;
diff --git a/packages/components/src/card/card-divider/component.tsx b/packages/components/src/card/card-divider/component.tsx
index 527bcc62f93761..a570c544fa7495 100644
--- a/packages/components/src/card/card-divider/component.tsx
+++ b/packages/components/src/card/card-divider/component.tsx
@@ -34,9 +34,6 @@ function CardDivider(
  * </Card>
  * ```
  */
-const ConnectedCardDivider = contextConnect< DividerProps >(
-	CardDivider,
-	'CardDivider'
-);
+const ConnectedCardDivider = contextConnect( CardDivider, 'CardDivider' );
 
 export default ConnectedCardDivider;
diff --git a/packages/components/src/card/card-footer/component.tsx b/packages/components/src/card/card-footer/component.tsx
index 8f3c10226d1100..9c0d6d1ac0a8c0 100644
--- a/packages/components/src/card/card-footer/component.tsx
+++ b/packages/components/src/card/card-footer/component.tsx
@@ -33,9 +33,6 @@ function CardFooter(
  * </Card>
  * ```
  */
-const ConnectedCardFooter = contextConnect< FooterProps >(
-	CardFooter,
-	'CardFooter'
-);
+const ConnectedCardFooter = contextConnect( CardFooter, 'CardFooter' );
 
 export default ConnectedCardFooter;
diff --git a/packages/components/src/card/card-header/component.tsx b/packages/components/src/card/card-header/component.tsx
index 12bd40d577e397..82beed2b066961 100644
--- a/packages/components/src/card/card-header/component.tsx
+++ b/packages/components/src/card/card-header/component.tsx
@@ -32,9 +32,6 @@ function CardHeader(
  * </Card>
  * ```
  */
-const ConnectedCardHeader = contextConnect< HeaderProps >(
-	CardHeader,
-	'CardHeader'
-);
+const ConnectedCardHeader = contextConnect( CardHeader, 'CardHeader' );
 
 export default ConnectedCardHeader;
diff --git a/packages/components/src/card/card-media/component.tsx b/packages/components/src/card/card-media/component.tsx
index cfaed878bbb623..7e428b8450dfe1 100644
--- a/packages/components/src/card/card-media/component.tsx
+++ b/packages/components/src/card/card-media/component.tsx
@@ -37,9 +37,6 @@ function CardMedia(
  * );
  * ```
  */
-const ConnectedCardMedia = contextConnect< MediaProps >(
-	CardMedia,
-	'CardMedia'
-);
+const ConnectedCardMedia = contextConnect( CardMedia, 'CardMedia' );
 
 export default ConnectedCardMedia;
diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx
index 6727ec37ce467a..d0ed58758cb2e7 100644
--- a/packages/components/src/card/card/component.tsx
+++ b/packages/components/src/card/card/component.tsx
@@ -110,6 +110,6 @@ function Card(
  * }
  * ```
  */
-const ConnectedCard = contextConnect< Props >( Card, 'Card' );
+const ConnectedCard = contextConnect( Card, 'Card' );
 
 export default ConnectedCard;
diff --git a/packages/components/src/card/stories/index.tsx b/packages/components/src/card/stories/index.tsx
index d88855a5519732..02e50d42aba7df 100644
--- a/packages/components/src/card/stories/index.tsx
+++ b/packages/components/src/card/stories/index.tsx
@@ -26,13 +26,14 @@ const meta: ComponentMeta< typeof Card > = {
 		controls: {
 			expanded: true,
 		},
+		knobs: { disable: false },
 		docs: { source: { state: 'open' } },
 	},
 };
 
 export default meta;
 
-export const Default: ComponentStory< typeof Card > = ( props ) => {
+const Template: ComponentStory< typeof Card > = ( props ) => {
 	return (
 		<Card { ...props }>
 			<CardHeader>
@@ -61,3 +62,6 @@ export const Default: ComponentStory< typeof Card > = ( props ) => {
 		</Card>
 	);
 };
+
+export const Default: ComponentStory< typeof Card > = Template.bind( {} );
+Default.args = {};

From 2c59c0461a206d984003bdbdaf60f845890d93d8 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Thu, 4 Aug 2022 04:16:00 +0900
Subject: [PATCH 09/20] fix types

---
 .../components/src/card/card-body/component.tsx     |  2 +-
 .../components/src/card/card-divider/component.tsx  |  2 +-
 .../components/src/card/card-footer/component.tsx   |  2 +-
 .../components/src/card/card-header/component.tsx   |  2 +-
 .../components/src/card/card-media/component.tsx    |  2 +-
 packages/components/src/card/card/component.tsx     |  2 +-
 packages/components/src/card/stories/index.tsx      | 13 ++++++++++---
 7 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/card/card-body/component.tsx b/packages/components/src/card/card-body/component.tsx
index a2a7447835f151..cb98adf53de9e0 100644
--- a/packages/components/src/card/card-body/component.tsx
+++ b/packages/components/src/card/card-body/component.tsx
@@ -14,7 +14,7 @@ import type { BodyProps } from '../types';
 
 function CardBody(
 	props: WordPressComponentProps< BodyProps, 'div' >,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const { isScrollable, ...otherProps } = useCardBody( props );
 
diff --git a/packages/components/src/card/card-divider/component.tsx b/packages/components/src/card/card-divider/component.tsx
index a570c544fa7495..e1e3ebb93c19d0 100644
--- a/packages/components/src/card/card-divider/component.tsx
+++ b/packages/components/src/card/card-divider/component.tsx
@@ -12,7 +12,7 @@ import { useCardDivider } from './hook';
 
 function CardDivider(
 	props: WordPressComponentProps< DividerProps, 'hr', false >,
-	forwardedRef: ForwardedRef< HTMLHRElement >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const dividerProps = useCardDivider( props );
 
diff --git a/packages/components/src/card/card-footer/component.tsx b/packages/components/src/card/card-footer/component.tsx
index 9c0d6d1ac0a8c0..b43ec7abf53c80 100644
--- a/packages/components/src/card/card-footer/component.tsx
+++ b/packages/components/src/card/card-footer/component.tsx
@@ -13,7 +13,7 @@ import type { FooterProps } from '../types';
 
 function CardFooter(
 	props: WordPressComponentProps< FooterProps, 'div' >,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const footerProps = useCardFooter( props );
 
diff --git a/packages/components/src/card/card-header/component.tsx b/packages/components/src/card/card-header/component.tsx
index 82beed2b066961..0cf7c0ba49f7ff 100644
--- a/packages/components/src/card/card-header/component.tsx
+++ b/packages/components/src/card/card-header/component.tsx
@@ -12,7 +12,7 @@ import type { ForwardedRef } from 'react';
 
 function CardHeader(
 	props: WordPressComponentProps< HeaderProps, 'div' >,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const headerProps = useCardHeader( props );
 
diff --git a/packages/components/src/card/card-media/component.tsx b/packages/components/src/card/card-media/component.tsx
index 7e428b8450dfe1..00c5e917adc2c6 100644
--- a/packages/components/src/card/card-media/component.tsx
+++ b/packages/components/src/card/card-media/component.tsx
@@ -13,7 +13,7 @@ import type { MediaProps } from '../types';
 
 function CardMedia(
 	props: WordPressComponentProps< MediaProps, 'div' >,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const cardMediaProps = useCardMedia( props );
 
diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx
index d0ed58758cb2e7..667c66c107749a 100644
--- a/packages/components/src/card/card/component.tsx
+++ b/packages/components/src/card/card/component.tsx
@@ -27,7 +27,7 @@ import type { Props } from '../types';
 
 function Card(
 	props: WordPressComponentProps< Props, 'div' >,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		children,
diff --git a/packages/components/src/card/stories/index.tsx b/packages/components/src/card/stories/index.tsx
index 02e50d42aba7df..4f288a2e25fef1 100644
--- a/packages/components/src/card/stories/index.tsx
+++ b/packages/components/src/card/stories/index.tsx
@@ -20,13 +20,12 @@ import Button from '../../button';
 
 const meta: ComponentMeta< typeof Card > = {
 	component: Card,
-	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
 	title: 'Components/Card',
+	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
 	parameters: {
 		controls: {
 			expanded: true,
 		},
-		knobs: { disable: false },
 		docs: { source: { state: 'open' } },
 	},
 };
@@ -64,4 +63,12 @@ const Template: ComponentStory< typeof Card > = ( props ) => {
 };
 
 export const Default: ComponentStory< typeof Card > = Template.bind( {} );
-Default.args = {};
+Default.args = {
+	size: 'medium',
+	isBorderless: false,
+	isRounded: false,
+	elevation: 0,
+	style: {
+		width: 360,
+	},
+};

From 614f2e200d31e8a73aebfec1f25116f843217bd7 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Sat, 6 Aug 2022 03:27:02 +0900
Subject: [PATCH 10/20] named export

---
 .../components/src/card/card-body/component.tsx    |  6 +++---
 .../components/src/card/card-divider/component.tsx |  9 ++++++---
 .../components/src/card/card-footer/component.tsx  |  6 +++---
 .../components/src/card/card-header/component.tsx  |  6 +++---
 .../components/src/card/card-media/component.tsx   |  6 +++---
 packages/components/src/card/card/component.tsx    |  6 +++---
 packages/components/src/card/stories/index.tsx     | 14 +++++++++++---
 7 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/card/card-body/component.tsx b/packages/components/src/card/card-body/component.tsx
index cb98adf53de9e0..1bc35ab984261c 100644
--- a/packages/components/src/card/card-body/component.tsx
+++ b/packages/components/src/card/card-body/component.tsx
@@ -12,7 +12,7 @@ import { View } from '../../view';
 import { useCardBody } from './hook';
 import type { BodyProps } from '../types';
 
-function CardBody(
+function UnconnectedCardBody(
 	props: WordPressComponentProps< BodyProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -40,6 +40,6 @@ function CardBody(
  * </Card>
  * ```
  */
-const ConnectedCardBody = contextConnect( CardBody, 'CardBody' );
+export const CardBody = contextConnect( UnconnectedCardBody, 'CardBody' );
 
-export default ConnectedCardBody;
+export default CardBody;
diff --git a/packages/components/src/card/card-divider/component.tsx b/packages/components/src/card/card-divider/component.tsx
index e1e3ebb93c19d0..a1f21d63c043b7 100644
--- a/packages/components/src/card/card-divider/component.tsx
+++ b/packages/components/src/card/card-divider/component.tsx
@@ -10,7 +10,7 @@ import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Divider, DividerProps } from '../../divider';
 import { useCardDivider } from './hook';
 
-function CardDivider(
+function UnconnectedCardDivider(
 	props: WordPressComponentProps< DividerProps, 'hr', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -34,6 +34,9 @@ function CardDivider(
  * </Card>
  * ```
  */
-const ConnectedCardDivider = contextConnect( CardDivider, 'CardDivider' );
+export const CardDivider = contextConnect(
+	UnconnectedCardDivider,
+	'CardDivider'
+);
 
-export default ConnectedCardDivider;
+export default CardDivider;
diff --git a/packages/components/src/card/card-footer/component.tsx b/packages/components/src/card/card-footer/component.tsx
index b43ec7abf53c80..2f08f98a7471a4 100644
--- a/packages/components/src/card/card-footer/component.tsx
+++ b/packages/components/src/card/card-footer/component.tsx
@@ -11,7 +11,7 @@ import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
 import type { FooterProps } from '../types';
 
-function CardFooter(
+function UnconnectedCardFooter(
 	props: WordPressComponentProps< FooterProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -33,6 +33,6 @@ function CardFooter(
  * </Card>
  * ```
  */
-const ConnectedCardFooter = contextConnect( CardFooter, 'CardFooter' );
+export const CardFooter = contextConnect( UnconnectedCardFooter, 'CardFooter' );
 
-export default ConnectedCardFooter;
+export default CardFooter;
diff --git a/packages/components/src/card/card-header/component.tsx b/packages/components/src/card/card-header/component.tsx
index 0cf7c0ba49f7ff..68ec958944d26b 100644
--- a/packages/components/src/card/card-header/component.tsx
+++ b/packages/components/src/card/card-header/component.tsx
@@ -10,7 +10,7 @@ import type { HeaderProps } from '../types';
  */
 import type { ForwardedRef } from 'react';
 
-function CardHeader(
+function UnconnectedCardHeader(
 	props: WordPressComponentProps< HeaderProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -32,6 +32,6 @@ function CardHeader(
  * </Card>
  * ```
  */
-const ConnectedCardHeader = contextConnect( CardHeader, 'CardHeader' );
+export const CardHeader = contextConnect( UnconnectedCardHeader, 'CardHeader' );
 
-export default ConnectedCardHeader;
+export default CardHeader;
diff --git a/packages/components/src/card/card-media/component.tsx b/packages/components/src/card/card-media/component.tsx
index 00c5e917adc2c6..29e6990d5fe092 100644
--- a/packages/components/src/card/card-media/component.tsx
+++ b/packages/components/src/card/card-media/component.tsx
@@ -11,7 +11,7 @@ import { View } from '../../view';
 import { useCardMedia } from './hook';
 import type { MediaProps } from '../types';
 
-function CardMedia(
+function UnconnectedCardMedia(
 	props: WordPressComponentProps< MediaProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -37,6 +37,6 @@ function CardMedia(
  * );
  * ```
  */
-const ConnectedCardMedia = contextConnect( CardMedia, 'CardMedia' );
+export const CardMedia = contextConnect( UnconnectedCardMedia, 'CardMedia' );
 
-export default ConnectedCardMedia;
+export default CardMedia;
diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx
index 667c66c107749a..3a0472fbe8f091 100644
--- a/packages/components/src/card/card/component.tsx
+++ b/packages/components/src/card/card/component.tsx
@@ -25,7 +25,7 @@ import CONFIG from '../../utils/config-values';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { Props } from '../types';
 
-function Card(
+function UnconnectedCard(
 	props: WordPressComponentProps< Props, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -110,6 +110,6 @@ function Card(
  * }
  * ```
  */
-const ConnectedCard = contextConnect( Card, 'Card' );
+export const Card = contextConnect( UnconnectedCard, 'Card' );
 
-export default ConnectedCard;
+export default Card;
diff --git a/packages/components/src/card/stories/index.tsx b/packages/components/src/card/stories/index.tsx
index 4f288a2e25fef1..74c6825dc5f7ce 100644
--- a/packages/components/src/card/stories/index.tsx
+++ b/packages/components/src/card/stories/index.tsx
@@ -13,7 +13,7 @@ import {
 	CardDivider,
 	CardMedia,
 	CardFooter,
-} from '../index';
+} from '..';
 import { Text } from '../../text';
 import { Heading } from '../../heading';
 import Button from '../../button';
@@ -22,6 +22,14 @@ const meta: ComponentMeta< typeof Card > = {
 	component: Card,
 	title: 'Components/Card',
 	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
+	argTypes: {
+		as: {
+			control: { type: null },
+		},
+		children: {
+			control: { type: null },
+		},
+	},
 	parameters: {
 		controls: {
 			expanded: true,
@@ -32,9 +40,9 @@ const meta: ComponentMeta< typeof Card > = {
 
 export default meta;
 
-const Template: ComponentStory< typeof Card > = ( props ) => {
+const Template: ComponentStory< typeof Card > = ( args ) => {
 	return (
-		<Card { ...props }>
+		<Card { ...args }>
 			<CardHeader>
 				<Heading>CardHeader</Heading>
 			</CardHeader>

From 71b8c4e10310130dc7186625ed1f07d7f41e1836 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Sat, 6 Aug 2022 03:41:05 +0900
Subject: [PATCH 11/20] remove args

---
 packages/components/src/card/stories/index.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/components/src/card/stories/index.tsx b/packages/components/src/card/stories/index.tsx
index 74c6825dc5f7ce..71b521871d7df7 100644
--- a/packages/components/src/card/stories/index.tsx
+++ b/packages/components/src/card/stories/index.tsx
@@ -71,12 +71,3 @@ const Template: ComponentStory< typeof Card > = ( args ) => {
 };
 
 export const Default: ComponentStory< typeof Card > = Template.bind( {} );
-Default.args = {
-	size: 'medium',
-	isBorderless: false,
-	isRounded: false,
-	elevation: 0,
-	style: {
-		width: 360,
-	},
-};

From a10d5b59ca92683305a60e291e17b5c27158a025 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Fri, 19 Aug 2022 01:13:33 +0900
Subject: [PATCH 12/20] fix CONTRIBUTING.md

---
 packages/components/CONTRIBUTING.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 07d466b4e65ca9..b2b667bafe81de 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -157,7 +157,7 @@ function Example(
 A couple of good examples of how hooks are used for composition are:
 
 - the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.ts);
-- the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.js).
+- the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.tsx).
 
 <!-- ## API Consinstency
 
@@ -262,7 +262,7 @@ An example of how this is used can be found in the [`Card` component family](/pa
 
 ```jsx
 //=========================================================================
-// Simplified snippet from `packages/components/src/card/card/hook.js`
+// Simplified snippet from `packages/components/src/card/card/hook.ts`
 //=========================================================================
 import { useContextSystem } from '../../ui/context';
 
@@ -276,7 +276,7 @@ export function useCard( props ) {
 }
 
 //=========================================================================
-// Simplified snippet from `packages/components/src/card/card/component.js`
+// Simplified snippet from `packages/components/src/card/card/component.ts`
 //=========================================================================
 import { contextConnect, ContextSystemProvider } from '../../ui/context';
 
@@ -301,7 +301,7 @@ function Card( props, forwardedRef ) {
 	}, [ isBorderless, size ] );
 
 	return (
-		{ /* Write additional values to the Context System */ }
+		/* Write additional values to the Context System */
 		<ContextSystemProvider value={ contextProviderValue }>
 			{ /* [...] */ }
 		</ContextSystemProvider>
@@ -516,7 +516,7 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 	5. Extend existing components’ props if possible, especially when a component internally forwards its props to another component in the package.
 	6. If the component forwards its `...restProps` to an underlying element/component, you should use the `WordPressComponentProps` type for the component's props:
 
-		```jsx
+		```tsx
 		import type { WordPressComponentProps } from '../ui/context';
 		import type { ComponentOwnProps } from './types';
 
@@ -533,7 +533,7 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 
 	7. If the component doesn't forwards its ref yet, wrap the component in a `forwardRed` call. Alternatively, if you want to take advantage of the [Context system](#context-system), you can use the `contextConnect` utility function (which also takes care of adding ref forwarding)
 
-		```jsx
+		```tsx
 		// With `forwardRef`
 		import type { ForwardedRef } from 'react';
 		import { forwardRef } from '@wordpress/element';
@@ -554,7 +554,7 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 		export default MyComponent;
 		```
 
-		```jsx
+		```tsx
 		// With `contextConnect`
 		import type { ForwardedRef } from 'react';
 		import {

From c62ace34897878bf83df32ae44e330a79fffef64 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Fri, 19 Aug 2022 01:13:53 +0900
Subject: [PATCH 13/20] fix import order

---
 packages/components/src/card/card-header/component.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/card/card-header/component.tsx b/packages/components/src/card/card-header/component.tsx
index 68ec958944d26b..f37cd8f99e6cc1 100644
--- a/packages/components/src/card/card-header/component.tsx
+++ b/packages/components/src/card/card-header/component.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
@@ -5,10 +10,6 @@ import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Flex } from '../../flex';
 import { useCardHeader } from './hook';
 import type { HeaderProps } from '../types';
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
 
 function UnconnectedCardHeader(
 	props: WordPressComponentProps< HeaderProps, 'div' >,

From c383edf10d06f7b45bdb33a5b3d141b577c7724b Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Fri, 19 Aug 2022 01:17:26 +0900
Subject: [PATCH 14/20] Update packages/components/src/card/card/hook.ts

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
---
 packages/components/src/card/card/hook.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/card/card/hook.ts b/packages/components/src/card/card/hook.ts
index 82270166bce80d..57e928cb7f8592 100644
--- a/packages/components/src/card/card/hook.ts
+++ b/packages/components/src/card/card/hook.ts
@@ -19,8 +19,8 @@ function useDeprecatedProps( {
 	elevation,
 	isElevated,
 	...otherProps
-}: CardProps ): CardProps {
-	const propsToReturn: CardProps = {
+}: CardProps ) {
+	const propsToReturn: Omit< CardProps, 'isElevated' > = {
 		...otherProps,
 	};
 	let computedElevation = elevation;

From 87f80ac77468d6683210b2c11be2bbd5a8b32d11 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Fri, 19 Aug 2022 01:31:34 +0900
Subject: [PATCH 15/20] convert to typescript

---
 packages/components/src/card/test/{index.js => index.tsx} | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)
 rename packages/components/src/card/test/{index.js => index.tsx} (98%)

diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.tsx
similarity index 98%
rename from packages/components/src/card/test/index.js
rename to packages/components/src/card/test/index.tsx
index 613de06c24ad8e..d04559606047e3 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.tsx
@@ -56,9 +56,9 @@ describe( 'Card', () => {
 			const { container: containerSquared } = render(
 				<Card isRounded={ false }>Code is Poetry</Card>
 			);
-			expect( containerRounded.firstChild ).toMatchStyleDiffSnapshot(
-				containerSquared.firstChild
-			);
+			expect(
+				containerRounded.firstElementChild
+			).toMatchStyleDiffSnapshot( containerSquared.firstElementChild );
 		} );
 
 		it( 'should show a box shadow when the elevation prop is greater than 0', () => {

From fe95fd29b15952500dfc25455bdab6b29f160761 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Fri, 19 Aug 2022 01:39:50 +0900
Subject: [PATCH 16/20] remove `@example` .

---
 packages/components/src/card/card-body/component.tsx    | 1 -
 packages/components/src/card/card-divider/component.tsx | 1 -
 packages/components/src/card/card-footer/component.tsx  | 1 -
 packages/components/src/card/card-header/component.tsx  | 1 -
 packages/components/src/card/card/component.tsx         | 1 -
 5 files changed, 5 deletions(-)

diff --git a/packages/components/src/card/card-body/component.tsx b/packages/components/src/card/card-body/component.tsx
index 1bc35ab984261c..cab52cf02ad25d 100644
--- a/packages/components/src/card/card-body/component.tsx
+++ b/packages/components/src/card/card-body/component.tsx
@@ -29,7 +29,6 @@ function UnconnectedCardBody(
  * `CardBody` renders an optional content area for a `Card`.
  * Multiple `CardBody` components can be used within `Card` if needed.
  *
- * @example
  * ```jsx
  * import { Card, CardBody } from `@wordpress/components`;
  *
diff --git a/packages/components/src/card/card-divider/component.tsx b/packages/components/src/card/card-divider/component.tsx
index a1f21d63c043b7..cdd52bffd5c99f 100644
--- a/packages/components/src/card/card-divider/component.tsx
+++ b/packages/components/src/card/card-divider/component.tsx
@@ -23,7 +23,6 @@ function UnconnectedCardDivider(
  * `CardDivider` renders an optional divider within a `Card`.
  * It is typically used to divide multiple `CardBody` components from each other.
  *
- * @example
  * ```jsx
  * import { Card, CardBody, CardDivider } from `@wordpress/components`;
  *
diff --git a/packages/components/src/card/card-footer/component.tsx b/packages/components/src/card/card-footer/component.tsx
index 2f08f98a7471a4..576807444c3069 100644
--- a/packages/components/src/card/card-footer/component.tsx
+++ b/packages/components/src/card/card-footer/component.tsx
@@ -23,7 +23,6 @@ function UnconnectedCardFooter(
 /**
  * `CardFooter` renders an optional footer within a `Card`.
  *
- * @example
  * ```jsx
  * import { Card, CardBody, CardFooter } from `@wordpress/components`;
  *
diff --git a/packages/components/src/card/card-header/component.tsx b/packages/components/src/card/card-header/component.tsx
index f37cd8f99e6cc1..a055cf0966f52e 100644
--- a/packages/components/src/card/card-header/component.tsx
+++ b/packages/components/src/card/card-header/component.tsx
@@ -23,7 +23,6 @@ function UnconnectedCardHeader(
 /**
  * `CardHeader` renders an optional header within a `Card`.
  *
- * @example
  * ```jsx
  * import { Card, CardBody, CardHeader } from `@wordpress/components`;
  *
diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx
index 3a0472fbe8f091..57f9c6430c0c08 100644
--- a/packages/components/src/card/card/component.tsx
+++ b/packages/components/src/card/card/component.tsx
@@ -82,7 +82,6 @@ function UnconnectedCard(
  * `Card` also provides a convenient set of sub-components such as `CardBody`,
  * `CardHeader`, `CardFooter`, and more.
  *
- * @example
  * ```jsx
  * import {
  *   Card,

From 033f21e04d34a20c18dc33d95b4b396455eb369d Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Fri, 19 Aug 2022 01:50:24 +0900
Subject: [PATCH 17/20] add wrapper

---
 .../components/src/card/stories/index.tsx     | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/packages/components/src/card/stories/index.tsx b/packages/components/src/card/stories/index.tsx
index 71b521871d7df7..c771dc62cdbfe9 100644
--- a/packages/components/src/card/stories/index.tsx
+++ b/packages/components/src/card/stories/index.tsx
@@ -42,31 +42,33 @@ export default meta;
 
 const Template: ComponentStory< typeof Card > = ( args ) => {
 	return (
-		<Card { ...args }>
-			<CardHeader>
-				<Heading>CardHeader</Heading>
-			</CardHeader>
-			<CardBody>
-				<Text>CardBody</Text>
-			</CardBody>
-			<CardBody>
-				<Text>CardBody (before CardDivider)</Text>
-			</CardBody>
-			<CardDivider />
-			<CardBody>
-				<Text>CardBody (after CardDivider)</Text>
-			</CardBody>
-			<CardMedia>
-				<img
-					alt="Card Media"
-					src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
-				/>
-			</CardMedia>
-			<CardFooter>
-				<Text>CardFooter</Text>
-				<Button variant="secondary">Action Button</Button>
-			</CardFooter>
-		</Card>
+		<div style={ { maxWidth: '280px' } }>
+			<Card { ...args }>
+				<CardHeader>
+					<Heading>CardHeader</Heading>
+				</CardHeader>
+				<CardBody>
+					<Text>CardBody</Text>
+				</CardBody>
+				<CardBody>
+					<Text>CardBody (before CardDivider)</Text>
+				</CardBody>
+				<CardDivider />
+				<CardBody>
+					<Text>CardBody (after CardDivider)</Text>
+				</CardBody>
+				<CardMedia>
+					<img
+						alt="Card Media"
+						src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+					/>
+				</CardMedia>
+				<CardFooter>
+					<Text>CardFooter</Text>
+					<Button variant="secondary">Action Button</Button>
+				</CardFooter>
+			</Card>
+		</div>
 	);
 };
 

From 5d153172e69315e991c9971431638d4f0850afa9 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Sun, 21 Aug 2022 09:02:05 +0900
Subject: [PATCH 18/20] fix path

---
 packages/components/CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index b2b667bafe81de..ca8f948b7ee853 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -313,7 +313,7 @@ const ConnectedCard = contextConnect( Card, 'Card' );
 export default ConnectedCard;
 
 //=========================================================================
-// Simplified snippet from `packages/components/src/card/card-body/hook.js`
+// Simplified snippet from `packages/components/src/card/card-body/hook.ts`
 //=========================================================================
 import { useContextSystem } from '../../ui/context';
 

From 63b8b067a735ca76ed5a46210ca513179a1dcfbc Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Sun, 21 Aug 2022 09:02:47 +0900
Subject: [PATCH 19/20] rename snapshot

---
 .../src/card/test/__snapshots__/{index.js.snap => index.tsx.snap} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/components/src/card/test/__snapshots__/{index.js.snap => index.tsx.snap} (100%)

diff --git a/packages/components/src/card/test/__snapshots__/index.js.snap b/packages/components/src/card/test/__snapshots__/index.tsx.snap
similarity index 100%
rename from packages/components/src/card/test/__snapshots__/index.js.snap
rename to packages/components/src/card/test/__snapshots__/index.tsx.snap

From 9027ac7a387618a4168b764f4cceec531de6d565 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Tue, 23 Aug 2022 12:44:48 +0900
Subject: [PATCH 20/20] add CHANGELOG.md

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 0676541a232413..2809c8b0cd1882 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -44,6 +44,7 @@
 -   `Modal`: use `KeyboardEvent.code` instead of deprecated `KeyboardEvent.keyCode`. improve unit tests ([#43429](https://github.com/WordPress/gutenberg/pull/43429/)).
 -   `FocalPointPicker`: use `KeyboardEvent.code`, partially refactor tests to modern RTL and `user-event` ([#43441](https://github.com/WordPress/gutenberg/pull/43441/)).
 -   `CustomGradientPicker`: use `KeyboardEvent.code` instead of `KeyboardEvent.keyCode` ([#43437](https://github.com/WordPress/gutenberg/pull/43437/)).
+-   `Card`: Convert to TypeScript ([#42941](https://github.com/WordPress/gutenberg/pull/42941)).
 
 ### Experimental
 -   `FormTokenField`: add `__experimentalAutoSelectFirstMatch` prop to auto select the first matching suggestion on typing ([#42527](https://github.com/WordPress/gutenberg/pull/42527/)).