From 51aec158f76e0c88c2df1023f4bb89ea4d2d7e27 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Fri, 7 May 2021 15:53:52 +0800
Subject: [PATCH] Add ComponentMeta React convenience type

---
 app/react/src/client/preview/types-6-3.ts           | 13 ++++++++++++-
 .../stories/demo/typed-button.stories.tsx           |  4 ++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/react/src/client/preview/types-6-3.ts b/app/react/src/client/preview/types-6-3.ts
index 657dbf2ce46..db34ed50a3c 100644
--- a/app/react/src/client/preview/types-6-3.ts
+++ b/app/react/src/client/preview/types-6-3.ts
@@ -1,8 +1,19 @@
 import { ComponentProps, JSXElementConstructor } from 'react';
-import type { Story } from './types-6-0';
+import type { Story, Meta } from './types-6-0';
 
 export * from './types-6-0';
 
+/**
+ * For the common case where a component's stories are simple components that receives args as props:
+ *
+ * ```tsx
+ * export default { ... } as ComponentMeta<typeof Button>;
+ * ```
+ */
+export type ComponentMeta<
+  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
+> = Meta<ComponentProps<T>>;
+
 /**
  * For the common case where a story is a simple component that receives args as props:
  *
diff --git a/examples/official-storybook/stories/demo/typed-button.stories.tsx b/examples/official-storybook/stories/demo/typed-button.stories.tsx
index 34a77577757..c5d7a44ee35 100644
--- a/examples/official-storybook/stories/demo/typed-button.stories.tsx
+++ b/examples/official-storybook/stories/demo/typed-button.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Story, ComponentStory } from '@storybook/react';
+import { ComponentMeta, Story, ComponentStory } from '@storybook/react';
 import TsButton from '../../components/TsButton';
 
 export default {
@@ -12,7 +12,7 @@ export default {
       </>
     ),
   ],
-} as Meta;
+} as ComponentMeta<typeof TsButton>;
 
 const Template: Story = (args) => <TsButton {...args} />;