Merge pull request #14780 from storybookjs/feat/react-component-story

React: Add ComponentStory convenience type

app/react/src/client/index.ts

@@ -10,7 +10,7 @@ export {
   forceReRender,
 } from './preview';
 
-export * from './preview/types-6-0';
+export * from './preview/types-6-3';
 
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();

app/react/src/client/preview/types-6-3.ts

@@ -0,0 +1,26 @@
+import { ComponentProps, JSXElementConstructor } from 'react';
+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:
+ *
+ * ```tsx
+ * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
+ * ```
+ */
+export type ComponentStory<
+  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
+> = Story<ComponentProps<T>>;

examples/official-storybook/stories/demo/typed-button.stories.tsx

@@ -1,5 +1,5 @@
-import React, { ComponentProps } from 'react';
-import { Meta, Story } from '@storybook/react';
+import React from '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} />;
 
@@ -22,8 +22,7 @@ Basic.args = {
   children: 'basic',
 };
 
-type ButtonProps = ComponentProps<typeof TsButton>;
-const TypedTemplate: Story<ButtonProps> = (args) => <TsButton {...args} />;
+const TypedTemplate: ComponentStory<typeof TsButton> = (args) => <TsButton {...args} />;
 
 export const Typed = TypedTemplate.bind({});
 Typed.args = {