storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.44k stars 9.28k forks source link

[Bug]: builtin event handler types are not supported well #22106

Open herzaso opened 1 year ago

herzaso commented 1 year ago

Describe the bug

to reproduce:

  1. create a new project (I used yarn create vite test-storybook --template react-ts)
  2. cd into it and init storybook (npx storybook@latest init - unfortunately, yarn dlx storybook@latest init doesn't work)
  3. go into the default Button component and change onClick from () => void to React.MouseEventHandler
  4. run storybook (yarn storybook)

in the docs for Button, you'll notice that onClick has a raw value of

_isMockFunction : true
getMockImplementation : () => this._ensureMockConfig(f).mockImpl
mock : {...} 5 keys
mockClear : () => { this._mockState.delete(f); return f; }
mockReset : () => { f.mockClear(); this._mockConfigRegistry.delete(f); return f; }
mockRestore : () => { f.mockReset(); return restore ? restore() : void 0; }
mockReturnValueOnce : (value) => f.mockImplementationOnce(() => value)
...

In the Primary story, you'll notice that the value of onClick is onClick : {}

Changing the type of onClick back to the default () => void fixes the problem (onClick is documented both in the docs and in the stories as -)

To Reproduce

I created a test repo: https://github.com/herzaso/test-storybook

System

Environment Info:

  System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.7.0 - /opt/homebrew/bin/node
    Yarn: 3.3.1 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Safari: 16.0

Additional context

No response

Crembot commented 8 months ago

Just noticed it here. Is there a solution to this, or am I going to have to manually mark each and every onSomething as {control: false}?