[Bug]: Using intersection types on a component breaks automatic arg table population [Storybook 8.0.0-beta.3]

[abuchohan]

Describe the bug

Hi, I've an issue when upgrading storybook from v7.x -> v8

When a component has a intersection type the arg table is not populated correctly.

I've modified button.tsx slightly to add an intersection type to the component.

/**
 * Primary UI component for user interaction
 */
export const Button: FC<ButtonProps> & {} = ({
  primary = false,
  size = "medium",
  backgroundColor,
  label,
  ...props
}) => {
  const mode = primary
    ? "storybook-button--primary"
    : "storybook-button--secondary";
  return (
    <button
      type="button"
      className={["storybook-button", `storybook-button--${size}`, mode].join(
        " ",
      )}
      style={{ backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

Expected:

Result:

To Reproduce

https://stackblitz.com/edit/github-zgvzev

System

No response

Additional context

No response

[abuchohan]

Hi @shilman , Any updates on this issue?

[shilman]

Please try configuring your Storybook to use the legacy docgen to analyze your components. Does that fix it?

// .storybook/main.js

export default {
  // stories, addons, etc.
  typescript: {
    reactDocgen: 'react-docgen-typescript'
  }
}

[abuchohan]

Thank you! This has solved it

Is there any implications switching to legacy docgen?

[abuchohan]

Hi @shilman - This option doesn't seem to exist on StorybookConfig interface.

I've recreated in a fresh storybook -> https://stackblitz.com/edit/github-gmhwes?file=.storybook%2Fmain.ts&preset=node

Any solutions to adding legacy docgen with TS?

Thanks in advance

[shilman]

@abuchohan the new default, react-docgen, is much faster. But it can't handle complex Typescript types. So that's the tradeoff