Fix a bunch of types

addons/docs/src/frameworks/angular/prepareForInline.ts

@@ -4,15 +4,15 @@ import { nanoid } from 'nanoid';
 
 import { AngularFramework, StoryContext } from '@storybook/angular';
 import { rendererFactory } from '@storybook/angular/renderer';
-import { StoryFn } from '@storybook/csf';
+import { PartialStoryFn } from '@storybook/csf';
 
 const limit = pLimit(1);
 
 /**
  * Uses the angular renderer to generate a story. Uses p-limit to run synchronously
  */
 export const prepareForInline = (
-  storyFn: StoryFn<AngularFramework>,
+  storyFn: PartialStoryFn<AngularFramework>,
   { id, parameters }: StoryContext
 ) => {
   return React.createElement('div', {

addons/docs/src/frameworks/angular/sourceDecorator.ts

@@ -1,5 +1,5 @@
 import { addons } from '@storybook/addons';
-import { StoryFn } from '@storybook/csf';
+import { PartialStoryFn } from '@storybook/csf';
 import { StoryContext, AngularFramework } from '@storybook/angular';
 import { computesTemplateSourceFromComponent } from '@storybook/angular/renderer';
 import prettierHtml from 'prettier/parser-html';
@@ -31,7 +31,10 @@ const prettyUp = (source: string) => {
  * @param storyFn Fn
  * @param context  StoryContext
  */
-export const sourceDecorator = (storyFn: StoryFn<AngularFramework>, context: StoryContext) => {
+export const sourceDecorator = (
+  storyFn: PartialStoryFn<AngularFramework>,
+  context: StoryContext
+) => {
   const story = storyFn();
   if (skipSourceRender(context)) {
     return story;

addons/docs/src/frameworks/html/prepareForInline.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { StoryFn } from '@storybook/csf';
+import { PartialStoryFn } from '@storybook/csf';
 
-export function prepareForInline(storyFn: StoryFn<any>) {
+export function prepareForInline(storyFn: PartialStoryFn<any>) {
   const html = storyFn();
   if (typeof html === 'string') {
     // eslint-disable-next-line react/no-danger

addons/docs/src/frameworks/html/sourceDecorator.ts

@@ -1,6 +1,6 @@
 /* global window */
 import { addons } from '@storybook/addons';
-import { ArgsStoryFn, StoryContext, StoryFn } from '@storybook/csf';
+import { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
 import dedent from 'ts-dedent';
 import { HtmlFramework } from '@storybook/html';
 
@@ -33,7 +33,7 @@ function applyTransformSource(source: string, context: StoryContext<HtmlFramewor
 }
 
 export function sourceDecorator(
-  storyFn: StoryFn<HtmlFramework>,
+  storyFn: PartialStoryFn<HtmlFramework>,
   context: StoryContext<HtmlFramework>
 ) {
   const story = context?.parameters.docs?.source?.excludeDecorators

addons/docs/src/frameworks/react/config.ts

@@ -1,4 +1,4 @@
-import { StoryFn } from '@storybook/csf';
+import { PartialStoryFn } from '@storybook/csf';
 import { ReactFramework } from '@storybook/react';
 
 import { extractArgTypes } from './extractArgTypes';
@@ -9,7 +9,7 @@ export const parameters = {
   docs: {
     inlineStories: true,
     // NOTE: that the result is a react element. Hooks support is provided by the outer code.
-    prepareForInline: (storyFn: StoryFn<ReactFramework>) => storyFn(),
+    prepareForInline: (storyFn: PartialStoryFn<ReactFramework>) => storyFn(),
     extractArgTypes,
     extractComponentDescription,
   },

addons/docs/src/frameworks/react/jsxDecorator.tsx

@@ -4,7 +4,7 @@ import dedent from 'ts-dedent';
 import deprecate from 'util-deprecate';
 
 import { addons } from '@storybook/addons';
-import { StoryContext, StoryFn, ArgsStoryFn } from '@storybook/csf';
+import { StoryContext, ArgsStoryFn, PartialStoryFn } from '@storybook/csf';
 import { logger } from '@storybook/client-logger';
 import { ReactFramework } from '@storybook/react';
 
@@ -172,7 +172,7 @@ const mdxToJsx = (node: any) => {
 };
 
 export const jsxDecorator = (
-  storyFn: StoryFn<ReactFramework>,
+  storyFn: PartialStoryFn<ReactFramework>,
   context: StoryContext<ReactFramework>
 ) => {
   const story = storyFn();

addons/docs/src/frameworks/vue/prepareForInline.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import Vue from 'vue';
-import { StoryFn, StoryContext } from '@storybook/csf';
+import { StoryContext, PartialStoryFn } from '@storybook/csf';
 import { VueFramework } from '@storybook/vue';
 
 // Inspired by https://github.com/egoist/vue-to-react,
@@ -11,7 +11,7 @@ const COMPONENT = 'STORYBOOK_COMPONENT';
 const VALUES = 'STORYBOOK_VALUES';
 
 export const prepareForInline = (
-  storyFn: StoryFn<VueFramework>,
+  storyFn: PartialStoryFn<VueFramework>,
   { args }: StoryContext<VueFramework>
 ) => {
   const component = storyFn();

addons/docs/src/frameworks/vue3/prepareForInline.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import * as Vue from 'vue';
-import { StoryFn, StoryContext } from '@storybook/csf';
+import { StoryContext, PartialStoryFn } from '@storybook/csf';
 import { app, VueFramework } from '@storybook/vue3';
 
 // This is cast as `any` to workaround type errors caused by Vue 2 types
 const { render, h } = Vue as any;
 
 export const prepareForInline = (
-  storyFn: StoryFn<VueFramework>,
+  storyFn: PartialStoryFn<VueFramework>,
   { args }: StoryContext<VueFramework>
 ) => {
   const component = storyFn();

addons/docs/src/frameworks/web-components/prepareForInline.ts

@@ -1,10 +1,10 @@
-import type { StoryFn } from '@storybook/csf';
+import type { PartialStoryFn } from '@storybook/csf';
 import { WebComponentsFramework } from '@storybook/web-components';
 import React from 'react';
 
 import { render } from 'lit-html';
 
-export const prepareForInline = (storyFn: StoryFn<WebComponentsFramework>) => {
+export const prepareForInline = (storyFn: PartialStoryFn<WebComponentsFramework>) => {
   class Story extends React.Component {
     wrapperRef = React.createRef<HTMLElement>();
 

addons/docs/src/frameworks/web-components/sourceDecorator.ts

@@ -1,6 +1,6 @@
 /* global window */
 import { render } from 'lit-html';
-import { ArgsStoryFn, StoryContext, StoryFn } from '@storybook/csf';
+import { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
 import { addons } from '@storybook/addons';
 import { WebComponentsFramework } from '@storybook/web-components';
 
@@ -30,7 +30,7 @@ function applyTransformSource(
 }
 
 export function sourceDecorator(
-  storyFn: StoryFn<WebComponentsFramework>,
+  storyFn: PartialStoryFn<WebComponentsFramework>,
   context: StoryContext<WebComponentsFramework>
 ) {
   const story = context?.parameters.docs?.source?.excludeDecorators

app/angular/src/client/preview/angular/helpers.ts

@@ -5,7 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { BrowserModule } from '@angular/platform-browser';
 import { Observable, ReplaySubject, Subscriber } from 'rxjs';
-import { StoryFn } from '@storybook/csf';
+import { PartialStoryFn } from '@storybook/csf';
 import { AppComponent } from './components/app.component';
 import { STORY } from './app.token';
 import { NgModuleMetadata, StoryFnAngularReturnType } from '../types';
@@ -133,7 +133,7 @@ const getExistenceOfComponentInModules = (
   });
 };
 
-const initModule = (storyFn: StoryFn<AngularFramework>) => {
+const initModule = (storyFn: PartialStoryFn<AngularFramework>) => {
   const storyObj = storyFn();
   const { component, template, props, styles, moduleMetadata = {} } = storyObj;
 
@@ -201,7 +201,7 @@ const draw = (newModule: DynamicComponentType): void => {
   }
 };
 
-export const renderNgApp = (storyFn: StoryFn<AngularFramework>, forced: boolean) => {
+export const renderNgApp = (storyFn: PartialStoryFn<AngularFramework>, forced: boolean) => {
   if (!forced) {
     draw(initModule(storyFn));
   } else {

app/angular/src/client/preview/decorateStory.ts

@@ -1,15 +1,15 @@
-import { DecoratorFunction, StoryContext, StoryFn } from '@storybook/csf';
+import { DecoratorFunction, LegacyStoryFn, StoryContext, StoryFn } from '@storybook/csf';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
 
 import { AngularFramework } from './types-6-0';
 
 export default function decorateStory(
-  mainStoryFn: StoryFn<AngularFramework>,
+  mainStoryFn: LegacyStoryFn<AngularFramework>,
   decorators: DecoratorFunction<AngularFramework>[]
-): StoryFn<AngularFramework> {
+): LegacyStoryFn<AngularFramework> {
   const returnDecorators = [cleanArgsDecorator, ...decorators].reduce(
-    (previousStoryFn: StoryFn<AngularFramework>, decorator) => (
+    (previousStoryFn: LegacyStoryFn<AngularFramework>, decorator) => (
       context: StoryContext<AngularFramework>
     ) => {
       const decoratedStory = decorator((update) => {

app/svelte/src/client/preview/decorators.ts

@@ -1,4 +1,4 @@
-import { StoryFn, DecoratorFunction, StoryContext } from '@storybook/csf';
+import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 import SlotDecorator from './SlotDecorator.svelte';
 import { SvelteFramework } from './types';
@@ -65,9 +65,10 @@ function prepareStory(context: StoryContext<SvelteFramework>, story: any, origin
 
 export function decorateStory(storyFn: any, decorators: any[]) {
   return decorators.reduce(
-    (previousStoryFn: StoryFn<SvelteFramework>, decorator: DecoratorFunction<SvelteFramework>) => (
-      context: StoryContext<SvelteFramework>
-    ) => {
+    (
+      previousStoryFn: LegacyStoryFn<SvelteFramework>,
+      decorator: DecoratorFunction<SvelteFramework>
+    ) => (context: StoryContext<SvelteFramework>) => {
       let story;
       const decoratedStory = decorator((update) => {
         story = previousStoryFn({

app/vue/src/client/preview/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 import Vue, { VueConstructor, ComponentOptions } from 'vue';
 import { start } from '@storybook/core/client';
-import { StoryFn, DecoratorFunction, StoryContext } from '@storybook/csf';
+import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
 import { ClientStoryApi, Loadable } from '@storybook/addons';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
@@ -61,11 +61,13 @@ function prepare(
 }
 
 function decorateStory(
-  storyFn: StoryFn<VueFramework>,
+  storyFn: LegacyStoryFn<VueFramework>,
   decorators: DecoratorFunction<VueFramework>[]
-): StoryFn<VueFramework> {
+): LegacyStoryFn<VueFramework> {
   return decorators.reduce(
-    (decorated: StoryFn<VueFramework>, decorator) => (context: StoryContext<VueFramework>) => {
+    (decorated: LegacyStoryFn<VueFramework>, decorator) => (
+      context: StoryContext<VueFramework>
+    ) => {
       let story;
 
       const decoratedStory = decorator((update) => {

app/vue3/src/client/preview/index.ts

@@ -1,7 +1,7 @@
 import type { ConcreteComponent, Component, ComponentOptions, App } from 'vue';
 import { h } from 'vue';
 import { start } from '@storybook/core/client';
-import { StoryFn, DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
+import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
 import { ClientStoryApi, Loadable } from '@storybook/addons';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
@@ -47,7 +47,7 @@ function prepare(
 }
 
 function decorateStory(
-  storyFn: StoryFn<VueFramework>,
+  storyFn: LegacyStoryFn<VueFramework>,
   decorators: DecoratorFunction<VueFramework>[]
 ): LegacyStoryFn<VueFramework> {
   return decorators.reduce(

lib/store/src/StoryStore.ts

@@ -6,6 +6,7 @@ import {
   AnyFramework,
   ProjectAnnotations,
   ComponentTitle,
+  StoryContext,
 } from '@storybook/csf';
 import mapValues from 'lodash/mapValues';
 import pick from 'lodash/pick';
@@ -322,12 +323,14 @@ export class StoryStore<TFramework extends AnyFramework> {
     const story = this.storyFromCSFFile({ storyId, csfFile });
     return {
       ...story,
-      storyFn: (context) =>
-        story.unboundStoryFn({
+      storyFn: (update) => {
+        const context = {
           ...this.getStoryContext(story),
           viewMode: 'story',
-          ...context,
-        }),
+        } as StoryContext<TFramework>;
+
+        return story.unboundStoryFn({ ...context, ...update });
+      },
     };
   }
 }

lib/store/src/types.ts

@@ -18,6 +18,7 @@ import {
   StrictArgTypes,
   StrictGlobalTypes,
   ComponentId,
+  PartialStoryFn,
 } from '@storybook/csf';
 
 export type Path = string;
@@ -63,7 +64,7 @@ export type Story<TFramework extends AnyFramework> = StoryContextForEnhancers<TF
 };
 
 export type BoundStory<TFramework extends AnyFramework> = Story<TFramework> & {
-  storyFn: LegacyStoryFn<TFramework>;
+  storyFn: PartialStoryFn<TFramework>;
 };
 
 export declare type RenderContext<TFramework extends AnyFramework> = StoryIdentifier & {
@@ -72,7 +73,7 @@ export declare type RenderContext<TFramework extends AnyFramework> = StoryIdenti
   showException: (err: Error) => void;
   forceRemount: boolean;
   storyContext: StoryContext<TFramework>;
-  storyFn: LegacyStoryFn<TFramework>;
+  storyFn: PartialStoryFn<TFramework>;
   unboundStoryFn: LegacyStoryFn<TFramework>;
 };