Fix composeStories for new TS types

Author: kasperpeulen

.vscode/settings.json

@@ -7,5 +7,6 @@
   "prettier.printWidth": 100,
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
-  "deepscan.enable": true
+  "deepscan.enable": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

example/tsconfig.json

@@ -30,6 +30,6 @@
     "noEmit": true
   },
   "include": [
-    "src"
+    "src", "../../dist"
   ]
 }

src/index.ts

@@ -1,10 +1,10 @@
 import { defaultDecorateStory, combineParameters, addons, applyHooks, HooksContext, mockChannel } from '@storybook/preview-api';
 import type { ReactRenderer, Args } from '@storybook/react';
-import type { ComponentAnnotations, StoryContext } from '@storybook/types';
+import type { ComponentAnnotations, Store_CSFExports, StoryContext } from '@storybook/types';
 import { isExportStory } from '@storybook/csf';
 
 export { StoriesWithPartialProps } from './types';
-import type { GlobalConfig, StoriesWithPartialProps, StoryFile, TestingStory, TestingStoryPlayContext } from './types';
+import type { GlobalConfig, StoriesWithPartialProps, TestingStory, TestingStoryPlayContext } from './types';
 import { getStoryName, globalRender, isInvalidStory, objectEntries } from './utils';
 
 // Some addons use the channel api to communicate between manager/preview, and this is a client only feature, therefore we must mock it.
@@ -152,8 +152,9 @@ export function composeStory<GenericArgs extends Args>(
   }
 
   const boundPlay = ({ ...extraContext }: TestingStoryPlayContext<GenericArgs>) => {
+    const playFn = meta.play ?? story.play ?? (() => {});
     // @ts-expect-error (just trying to get this to build)
-    return story.play?.({ ...context, ...extraContext });
+    return playFn({ ...context, ...extraContext });
   }
 
   composedStory.storyName = story.storyName || story.name
@@ -190,19 +191,17 @@ export function composeStory<GenericArgs extends Args>(
  * @param storiesImport - e.g. (import * as stories from './Button.stories')
  * @param [globalConfig] - e.g. (import * as globalConfig from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files.
  */
-export function composeStories<
-  TModule extends StoryFile
->(storiesImport: TModule, globalConfig?: GlobalConfig) {
-  const { default: meta, __esModule, ...stories } = storiesImport;
+export function composeStories<TModule extends Store_CSFExports<ReactRenderer>>(storiesImport: TModule, globalConfig?: GlobalConfig) {
+  const { default: meta, __esModule, __namedExportsOrder, ...stories } = storiesImport;
 
-  // This function should take this as input: 
+  // This function should take this as input:
   // {
   //   default: Meta,
   //   Primary: Story<ButtonProps>, <-- Props extends Args
   //   Secondary: Story<OtherProps>,
   // }
 
-  // And strips out default, then return composed stories as output: 
+  // And strips out default, then return composed stories as output:
   // {
   //   Primary: ComposedStory<Partial<ButtonProps>>,
   //   Secondary: ComposedStory<Partial<OtherProps>>,
@@ -229,5 +228,5 @@ export function composeStories<
 
   // @TODO: the inferred type of composedStories is correct but Partial.
   // investigate whether we can return an unpartial type of that without this hack
-  return composedStories as unknown as Omit<StoriesWithPartialProps<TModule>, keyof StoryFile>;
+  return composedStories as unknown as Omit<StoriesWithPartialProps<TModule>, keyof Store_CSFExports>;
 }

src/types.ts

@@ -1,10 +1,12 @@
-import type { Addon_BaseStoryFn as OriginalBaseStoryFn, BaseAnnotations, ProjectAnnotations, StoryContext, Args, StoryAnnotations, AnnotatedStoryFn } from '@storybook/types';
-import type { StoryFn as OriginalStoryFn, Meta, ReactRenderer } from '@storybook/react';
-import type { ReactElement } from 'react';
+import type {
+  AnnotatedStoryFn,
+  Args,
+  PlayFunction, PlayFunctionContext,
+  ProjectAnnotations,
+  StoryAnnotations,
+} from '@storybook/types';
+import type { ReactRenderer } from '@storybook/react';
 
-type StoryFnReactReturnType = ReactElement<unknown>;
-
-export type BaseStoryFn<Args> = OriginalBaseStoryFn<Args, StoryFnReactReturnType> & BaseAnnotations<ReactRenderer, Args>;
 /**
  * Object representing the preview.ts module
  *
@@ -13,22 +15,18 @@ export type BaseStoryFn<Args> = OriginalBaseStoryFn<Args, StoryFnReactReturnType
  */
 export type GlobalConfig = ProjectAnnotations<ReactRenderer>;
 
-export type TestingStory<T = Args> = AnnotatedStoryFn<ReactRenderer, T> | StoryAnnotations<ReactRenderer, T>;
-
-export type StoryFile = { default: Meta<any>, __esModule?: boolean }
-
-export type TestingStoryPlayContext<T = Args> = Partial<StoryContext<ReactRenderer, T>> & Pick<StoryContext, 'canvasElement'>
+export type TestingStory<T = Args> = StoryAnnotations<ReactRenderer, T>;
 
-export type TestingStoryPlayFn<TArgs = Args> = (context: TestingStoryPlayContext<TArgs>) => Promise<void> | void;
+export type TestingStoryPlayContext<T = Args> = Partial<PlayFunctionContext<ReactRenderer, T>> & Pick<PlayFunctionContext, 'canvasElement'>
 
-export type StoryFn<TArgs = Args> = OriginalStoryFn<TArgs> & { play: TestingStoryPlayFn<TArgs> }
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactRenderer, TArgs> & { play: PlayFunction<ReactRenderer, TArgs> }
 
 /**
  * T represents the whole es module of a stories file. K of T means named exports (basically the Story type)
  * 1. pick the keys K of T that have properties that are Story<AnyProps>
  * 2. infer the actual prop type for each Story
  * 3. reconstruct Story with Partial. Story<Props> -> Story<Partial<Props>>
  */
-export type StoriesWithPartialProps<T> = { 
-  [K in keyof T as T[K] extends TestingStory<any> ? K : never]: T[K] extends TestingStory<infer P> ? StoryFn<Partial<P>> : unknown 
-}
+export type StoriesWithPartialProps<T> = {
+  [K in keyof T]: T[K] extends StoryAnnotations<ReactRenderer, infer P> ? StoryFn<Partial<P>> : number
+}