[Bug]: @storybook/addon-actions: Type 'Addon_DecoratorFunction<unknown>' is not assignable to type 'DecoratorFunction<ReactRenderer, {

[JeffreyStevens]

Describe the bug

Cannot use withActions from @storybook/addon-actions/decorator as it throws a type error:

ERROR in src/stories/components/routes/RouteNoteDialog.stories.tsx:89:18
TS2322: Type 'Addon_DecoratorFunction<unknown>' is not assignable to type 'DecoratorFunction<ReactRenderer, { showRouteNoteDialog: boolean; handleCancelNote: () => void; handleSaveNote: () => void; routeNote: IRouteNote | null; setRouteNote: (value: IRouteNote | null) => void; title: string; }>'.
  Types of parameters 'c' and 'c' are incompatible.
    Type 'StoryContext<ReactRenderer, { showRouteNoteDialog: boolean; handleCancelNote: () => void; handleSaveNote: () => void; routeNote: IRouteNote | null; setRouteNote: (value: IRouteNote | null) => void; title: string; }>' is not assignable to type 'StoryContext<Addon_ReturnTypeFramework<unknown>, Args>'.
      Type 'StoryContext<ReactRenderer, { showRouteNoteDialog: boolean; handleCancelNote: () => void; handleSaveNote: () => void; routeNote: IRouteNote | null; setRouteNote: (value: IRouteNote | null) => void; title: string; }>' is not assignable to type '{ hooks: unknown; viewMode: ViewMode$1; originalStoryFn: StoryFn<Addon_ReturnTypeFramework<unknown>, Args>; }'.
        Types of property 'originalStoryFn' are incompatible.
          Type 'StoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Addon_ReturnTypeFramework<unknown>, Args>'.
            Type 'LegacyStoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Addon_ReturnTypeFramework<unknown>, Args>'.
              Type 'LegacyStoryFn<ReactRenderer, Args>' is not assignable to type 'LegacyStoryFn<Addon_ReturnTypeFramework<unknown>, Args>'.
                Types of parameters 'context' and 'context' are incompatible.
                  Type 'StoryContext<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'StoryContext<ReactRenderer, Args>'.
                    Type 'StoryContext<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type '{ hooks: unknown; viewMode: ViewMode$1; originalStoryFn: StoryFn<ReactRenderer, Args>; }'.
                      Types of property 'originalStoryFn' are incompatible.
                        Type 'StoryFn<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'StoryFn<ReactRenderer, Args>'.
                          Type 'LegacyStoryFn<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'StoryFn<ReactRenderer, Args>'.
                            Type 'LegacyStoryFn<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'LegacyStoryFn<ReactRenderer, Args>'.
                              Types of parameters 'context' and 'context' are incompatible.
                                Type 'StoryContext<ReactRenderer, Args>' is not assignable to type 'StoryContext<Addon_ReturnTypeFramework<unknown>, Args>'.
                                  Type 'StoryContext<ReactRenderer, Args>' is not assignable to type '{ hooks: unknown; viewMode: ViewMode$1; originalStoryFn: StoryFn<Addon_ReturnTypeFramework<unknown>, Args>; }'.
                                    Types of property 'originalStoryFn' are incompatible.
                                      Type 'StoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Addon_ReturnTypeFramework<unknown>, Args>'.
                                        Type 'LegacyStoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Addon_ReturnTypeFramework<unknown>, Args>'.
    87 |     title: 'Admin Unit/RouteNoteDialog', // how to refer to the component in the sidebar (optional)
    88 |     component: RouteNoteDialogApp, // the component itself or a wrapper function
  > 89 |     decorators: [withActions, (story) => <ReduxProvider store={store}>{story()}</ReduxProvider>],

To Reproduce

Edit RouteNoteDialog.stories.tsx lines 74-76 to reproduce.

GitHub:
https://github.com/JeffreyStevens/addon-actions.git

Chromatic:
https://64527bd174e7442f19279395-jzhubeajpz.chromatic.com/?path=/story/admin-unit-routenotedialog--note

System

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 20.0.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Edge: 112.0.1722.68
    Safari: 16.4
  npmPackages:
    @storybook/addon-essentials: ^7.0.7 => 7.0.8 
    @storybook/addon-interactions: ^7.0.7 => 7.0.8 
    @storybook/addon-links: ^7.0.7 => 7.0.8 
    @storybook/blocks: ^7.0.7 => 7.0.8 
    @storybook/jest: ^0.1.0 => 0.1.0 
    @storybook/preset-create-react-app: ^7.0.7 => 7.0.8 
    @storybook/react: ^7.0.7 => 7.0.8 
    @storybook/react-webpack5: ^7.0.7 => 7.0.8 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

Started failing with 7.0.7 version.

[shilman]

@ndelangen this must be due to https://github.com/storybookjs/storybook/pull/22261/files

@kasperpeulen commented on it here #22261 (comment) and I also asked you about it when we chatted about it in person. If we had type tests, could we have avoided this?

[kasperpeulen]

I think we should definitely add a type test for this! Will look at it.

[kasperpeulen]

@shilman @ndelangen

The types added in #22261 are not working for code that is actually imported by users.

I thought approved that PR because I thought they were not actually used.

Making a correct type of a decorator that can be used for any renderer is tricky. This is sadly enough:

const withActions: DecoratorFunction<Renderer>;

Basically, you want something like:

declare const withActions<T extends Renderer>: DecoratorFunction<T>;

However, this is not a syntax that TS support. You basically have to inline the function type of DecoratorFunction, which looks like this:

const withActions: <T extends Renderer>(storyFn: PartialStoryFn<T>) => T['storyResult']

Added that in this PR:
#22455

This needs to be done for every decorator in this PR, that needs to be imported:
#22261

You can not annotate an array of decorators with this. It needs to be done for every individual decorator I believe.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.20 containing PR #22455 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future