[Bug]: Typescript argType inference is not working

[AdisonCavani]

Describe the bug

Bug: Storybook does not infer typescript types.

I'm using class-variance-authority in a similar way as shown in this Next.js showcase.

To Reproduce

Github: https://github.com/AdisonCavani/storybook-arg-types-bug
Published: https://stackblitz.com/github/AdisonCavani/storybook-arg-types-bug

System

Environment Info:
  System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (111.0.1661.54)
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-rc.8 => 7.0.0-rc.8
    @storybook/addon-interactions: ^7.0.0-rc.8 => 7.0.0-rc.8
    @storybook/addon-links: ^7.0.0-rc.8 => 7.0.0-rc.8
    @storybook/blocks: ^7.0.0-rc.8 => 7.0.0-rc.8
    @storybook/nextjs: ^7.0.0-rc.8 => 7.0.0-rc.8
    @storybook/react: ^7.0.0-rc.8 => 7.0.0-rc.8
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

No response

[shilman]

@kasperpeulen any idea what's going on here?

[AdisonCavani]

I think it might be related to #15334.
The reproduction uses React.forwardRef. I'll check if issue will occur without it.

[kasperpeulen]

@shilman This is docgen issue right? The TS type is correct, but the controls don't show the variants.

My guess is that it is similar to the problems @ethriel3695 had with MUI. I would need to heavily debug react-docgen-typescript to get a clue what is going on in those cases.

[nuxcodes]

Same issue here. Works well in Storybook 6, but broken after migrating to version 7.

[kasperpeulen]

Might be a regression in react-docgen-typescript or something @shilman ?

[Xiphe]

I also don't get any automatic argType inference with v7.0.2 was trying to replicate the "Setup automated documentation" assuming that i could add JSDoc to the props but nothing I document at the Button component is showing up in the docs.

Edit: Managed to have them show up for some components, no Idea what caused that, will report once I have a clue...

Edit2: Seems as if most of my issues stem from the component file exporting more then one component or use other fancy import/export schemes.

[shilman]

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

npx sb@next upgrade --tag future

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.3 containing PR #22024 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

[kiastorm]

I'm still getting this issue. I have a variant prop defined by cva, and it is being inferred incorrectly as a string, when it should be a string literal union, primary | secondary | tertiary.

Better year, even if I try to overrides this, it isn't applying. It is string no matter what I do - even if I explicitly defined options