[Bug]: 7.6.4 - Module '"@storybook/addon-actions/decorator" "Type 'unknown' cannot be assigned to type 'StoryFnHtmlReturnType'"

[Gabriel-Lara-del-Olmo]

Describe the bug

I´ve migrated storybook addons to latest version 7.6.4 and the decorator wihtActions have been broken by the update, and can´t compile the storybook.
It looks like the last version broke the package.

To Reproduce

It reproduces with version 7.6.4 of @storybook/addon-actions/decorator, but not with 7.5.X of less.

System

I´ve using storybook 7.6.4 in Stencil project with version 4.4.0. It reproduces in any operative system.

Additional context

No response

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

[Gabriel-Lara-del-Olmo]

Yeah i can provide it, i need few hours thanks. But investigated the problem, i think is the same here: #22384

But with the @storybook/html plugin and not /react

Type '(storyFn: PartialStoryFn<T, Args>) => T["storyResult"]' is not assignable to type
'DecoratorFunction<HtmlRenderer, typeof UiButton>'.Type 'unknown' is not assignable to type
'StoryFnHtmlReturnType'.

 L75:    },
 L76:    decorators: [withActions],
 L77:  };

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[jiayike]

I'm facing the same issue with storybook v7.6.10 and able to replicate it in the v8.0.0-alpha.13.

Seems to be happening after PartialStoryFn type is copied from @storybook/types to decorator.d.ts of addon-actions is causing the issue. Not exactly sure why though

Reproduction repo here:
https://stackblitz.com/edit/github-ytftux?file=src%2Fstories%2FButton.stories.ts&preset=node

[m-akinc]

Also ran into this. In every story with decorators: [withActions], I get the error:

TS2322: Type '<T extends Renderer>(storyFn: PartialStoryFn<T, Args>) => T["storyResult"]' is not assignable to type 'DecoratorFunction<HtmlRenderer, { open: boolean; title: string; text: string; severity: "error" | "information" | "default" | "warning"; action: ActionType; preventDismiss: boolean; titleHidden: boolean; toggle: unknown; usedLabels: null; }>'.
  Type 'unknown' is not assignable to type 'StoryFnHtmlReturnType'.

History:

While trying to fix a bug about a missing lib/types/dist module, @ndelangen added a type to the withActions decorator. I believe from that point on, this problem has existed (see this comment reporting the type error for the first time). @kasperpeulen seems to have made an attempt to fix this by changing the type, but as far as I can tell, that only changed the wording of the error message.

From what I can tell, the issue is that withActions used to be implicitly typed as (...args: any) => any (a.k.a MakeDecoratorResult), and that was compatible with DecoratorFunction<HtmlRenderer, ...>. But later,withActions was given an explicit type where the generic type parameter defaults to Renderer. This is not compatible with DecoratorFuction<HtmlRenderer, ...>.

I've found two ways to avoid the error:

1. Provide the renderer type when specifying the decorator:

decorators: [withActions<HtmlRenderer>]

2. Redefine withActions. You do not even have to change the type.

import { withActions as withActionsOriginal } from '@storybook/addon-actions/decorator';
const withActions: <T extends Renderer>(
    storyFn: PartialStoryFn<T>
) => T['storyResult'] = withActionsOriginal;

I don't understand how 2 is any different than doing nothing, but it works.

[kasperpeulen]

@m-akinc I can not reproduce this in the latest v8 release:

import type { StoryObj, Meta } from '@storybook/html';
import { withActions } from '@storybook/addon-actions/decorator';
import { fn } from '@storybook/test';
import type { ButtonProps } from './Button';
import { createButton } from './Button';

const meta: Meta<ButtonProps> = {
  title: 'Example/Button',
  tags: ['autodocs'],
  render: (args) => {
    return createButton(args);
  },
  decorators: [withActions],
  args: { onClick: fn() },
};

export default meta;
type Story = StoryObj<ButtonProps>;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

tsc doesn't give any errors, can you make a repro for me against v8?

[r3dDoX]

For people running into this and searching a workaround in a WebComponents project, the correct generic type is:
decorators: [withActions<WebComponentsRenderer>]

[m-akinc]

@kasperpeulen Looks like it is fixed in the 8.0.0 release. Great!

[kasperpeulen]

@m-akinc Thanks for checking!