Merge pull request #15558 from storybookjs/feat/csf3-types

CSF: Add CSF3 typings
storybookjs · Jul 13, 2021 · c88e0aa · c88e0aa
2 parents 085e86c + 07c3053
commit c88e0aa
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/examples/react-ts/src/AccountForm.stories.tsx b/examples/react-ts/src/AccountForm.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { AccountForm, AccountFormProps } from './AccountForm';
@@ -14,7 +14,7 @@ export default {
 // export const Standard = (args: AccountFormProps) => <AccountForm {...args} />;
 // Standard.args = { passwordVerification: false };
 
-export const Standard = {
+export const Standard: ComponentStory<typeof AccountForm> = {
   // render: (args: AccountFormProps) => <AccountForm {...args} />,
   args: { passwordVerification: false },
 };
@@ -51,7 +51,7 @@ export const StandardFailHover = {
   },
 };
 
-export const Verification = {
+export const Verification: ComponentStory<typeof AccountForm> = {
   args: { passwordVerification: true },
 };
 

diff --git a/lib/addons/src/types.ts b/lib/addons/src/types.ts
@@ -197,6 +197,14 @@ export interface BaseAnnotations<Args, StoryFnReturnType> {
    * @see [Decorators](https://storybook.js.org/docs/addons/introduction/#1-decorators)
    */
   decorators?: BaseDecorators<StoryFnReturnType>;
+  /**
+   * Define a custom render function for the story(ies). If not passed, a default render function by the framework will be used.
+   */
+  render?: (args: Args, context: StoryContext) => StoryFnReturnType;
+  /**
+   * Function that is executed after the story is rendered.
+   */
+  play?: Function;
 }
 
 export interface Annotations<Args, StoryFnReturnType>
@@ -228,6 +236,8 @@ export interface BaseMeta<ComponentType> {
    *
    * Stories can be organized in a nested structure using "/" as a separator.
    *
+   * Since CSF 3.0 this property is optional.
+   *
    * @example
    * export default {
    *   ...
@@ -236,7 +246,7 @@ export interface BaseMeta<ComponentType> {
    *
    * @see [Story Hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy)
    */
-  title: string;
+  title?: string;
 
   /**
    * The primary component for your story.
@@ -263,11 +273,17 @@ export interface BaseMeta<ComponentType> {
   subcomponents?: Record<string, ComponentType>;
 }
 
-export interface BaseStory<Args, StoryFnReturnType> {
-  (args: Args, context: StoryContext): StoryFnReturnType;
-
+type BaseStoryObject<Args, StoryFnReturnType> = {
   /**
    * Override the display name in the UI
    */
   storyName?: string;
-}
+};
+
+type BaseStoryFn<Args, StoryFnReturnType> = {
+  (args: Args, context: StoryContext): StoryFnReturnType;
+} & BaseStoryObject<Args, StoryFnReturnType>;
+
+export type BaseStory<Args, StoryFnReturnType> =
+  | BaseStoryFn<Args, StoryFnReturnType>
+  | BaseStoryObject<Args, StoryFnReturnType>;