React: Fix several CSF factory bugs

code/core/src/csf/csf-factories.ts

@@ -204,7 +204,9 @@ function defineStory<
 
       const play =
         mountDestructured(this.play) || mountDestructured(testFunction)
-          ? async ({ context }: StoryContext<TRenderer>) => {
+          ? // mount needs to be explicitly destructured
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            async ({ mount, context }: StoryContext<TRenderer>) => {
               await this.play?.(context);
               await testFunction(context);
             }

code/core/src/preview-api/modules/store/csf/processCSFFile.ts

@@ -49,16 +49,16 @@ export function processCSFFile<TRenderer extends Renderer>(
 ): CSFFile<TRenderer> {
   const { default: defaultExport, __namedExportsOrder, ...namedExports } = moduleExports;
 
-  const firstStory = Object.values(namedExports)[0];
-  if (isStory<TRenderer>(firstStory)) {
+  const factoryStory = Object.values(namedExports).find((it) => isStory<TRenderer>(it));
+  if (factoryStory) {
     const meta: NormalizedComponentAnnotations<TRenderer> =
-      normalizeComponentAnnotations<TRenderer>(firstStory.meta.input, title, importPath);
+      normalizeComponentAnnotations<TRenderer>(factoryStory.meta.input, title, importPath);
     checkDisallowedParameters(meta.parameters);
 
     const csfFile: CSFFile<TRenderer> = { meta, stories: {}, moduleExports };
 
     Object.keys(namedExports).forEach((key) => {
-      if (isExportStory(key, meta)) {
+      if (isExportStory(key, meta) && isStory<TRenderer>(namedExports[key])) {
         const story: Story<TRenderer> = namedExports[key];
 
         const storyMeta = normalizeStory(key, story.input as any, meta);
@@ -82,7 +82,7 @@ export function processCSFFile<TRenderer extends Renderer>(
       }
     });
 
-    csfFile.projectAnnotations = firstStory.meta.preview.composed;
+    csfFile.projectAnnotations = factoryStory.meta.preview.composed;
 
     return csfFile;
   }

code/renderers/react/src/csf-factories.test.tsx

@@ -77,7 +77,7 @@ describe('Args can be provided in multiple ways', () => {
         args: { label: 'good' },
       });
       // @ts-expect-error disabled not provided ❌
-      const Basic = meta.story({});
+      const Basic = meta.story();
     }
     {
       const meta = preview.meta({ component: Button });
@@ -384,3 +384,20 @@ describe('Composed getters', () => {
     expect(renderSpy).toHaveBeenCalled();
   });
 });
+
+it('meta.input also contains play', () => {
+  const meta = preview.meta({
+    /** Title, component, etc... */
+    play: async ({ canvas }) => {
+      /** Do some common interactions */
+    },
+  });
+
+  const ExtendedInteractionsStory = meta.story({
+    play: async ({ canvas, ...rest }) => {
+      await meta.input.play?.({ canvas, ...rest });
+
+      /** Do some extra interactions */
+    },
+  });
+});

code/renderers/react/src/preview.tsx

@@ -38,6 +38,7 @@ export function __definePreview<Addons extends PreviewAddon<never>[]>(
   preview.meta = (_input) => {
     const meta = defineMeta(_input);
     const defineStory = meta.story.bind(meta);
+    // @ts-expect-error internal code that is hard to type
     meta.story = (__input: any) => {
       const story = defineStory(__input);
       // TODO: [test-syntax] Are we sure we want this? the Component construct was for
@@ -52,6 +53,12 @@ export function __definePreview<Addons extends PreviewAddon<never>[]>(
   return preview;
 }
 
+type InferArgs<
+  TArgs extends Args,
+  T extends AddonTypes,
+  Decorators extends DecoratorFunction<ReactTypes & T, any>,
+> = Simplify<TArgs & Simplify<RemoveIndexSignature<DecoratorsArgs<ReactTypes & T, Decorators>>>>;
+
 /** @ts-expect-error We cannot implement the meta faithfully here, but that is okay. */
 export interface ReactPreview<T extends AddonTypes> extends Preview<ReactTypes & T> {
   meta<
@@ -70,13 +77,13 @@ export interface ReactPreview<T extends AddonTypes> extends Preview<ReactTypes &
       'decorators' | 'component' | 'args' | 'render'
     >
   ): ReactMeta<
-    ReactTypes &
-      T & {
-        args: Simplify<
-          TArgs & Simplify<RemoveIndexSignature<DecoratorsArgs<ReactTypes & T, Decorators>>>
-        >;
-      },
-    { args: Partial<TArgs> extends TMetaArgs ? {} : TMetaArgs }
+    ReactTypes & T & { args: InferArgs<TArgs, T, Decorators> },
+    Omit<
+      ComponentAnnotations<ReactTypes & T & { args: InferArgs<TArgs, T, Decorators> }>,
+      'args'
+    > & {
+      args: Partial<TArgs> extends TMetaArgs ? {} : TMetaArgs;
+    }
   >;
 }
 
@@ -95,7 +102,7 @@ export interface ReactMeta<T extends ReactTypes, MetaInput extends ComponentAnno
           render: () => ReactTypes['storyResult'];
         }),
   >(
-    story?: TInput
+    story: TInput
   ): ReactStory<T, TInput extends () => ReactTypes['storyResult'] ? { render: TInput } : TInput>;
 
   story<
@@ -108,9 +115,19 @@ export interface ReactMeta<T extends ReactTypes, MetaInput extends ComponentAnno
       >
     >,
   >(
-    story?: TInput
+    story: TInput
     /** @ts-expect-error hard */
   ): ReactStory<T, TInput>;
+
+  // This overload matches meta.story(), but only when all args are optional
+  story(
+    ..._args: Partial<T['args']> extends SetOptional<
+      T['args'],
+      keyof T['args'] & keyof MetaInput['args']
+    >
+      ? []
+      : [never]
+  ): ReactStory<T, {}>;
 }
 
 export interface ReactStory<T extends ReactTypes, TInput extends StoryAnnotations<T, T['args']>>