[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

[signor-pedro]

Same here and the bug still makes argType inference unusable. Is there any way we could get this working please?

[mkal1375]

In my case, I just needed to set the correct reactDocgen value for it:

const config = {
	stories: ['../app/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../app/**/stories.ts', '../app/**/*.mdx'],
	addons: [
		'@storybook/addon-onboarding',
		'@storybook/addon-essentials',
		'@chromatic-com/storybook',
		'@storybook/addon-interactions',
	],
	typescript: {
		reactDocgen: 'react-docgen-typescript',
	},
	framework: {
		name: '@storybook/nextjs',
		options: {},
	},
	staticDirs: ['../public'],
};