Storybook: Typescript extended props not show v6

[Quadriphobs1]

Describe the bug
Define typescript props for component with extending other props, doesn't show the extended props.

For example a component with

interface TProps extends ComponentPropsWithoutRef<"input"> {
  label?: string;
  state?: InputState;
  helper?: string | React.ReactElement;
}

export const TextField = forwardRef(
  (
    { label, placeholder, state, helper, ...rest }: TProps,
    ref: Ref<HTMLInputElement>
  ) => (
    ...
  )
);

Produces the following

Expected behavior
Its suppose to show all the props valid for the component such as type, max, min e.t.c

System:

Environment Info:
  Binaries:
    Node: 14.2.0 - ~/.nvm/versions/node/v14.2.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v14.2.0/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 77.0.1
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-docs: ^6.0.6 => 6.0.6 
    @storybook/addon-essentials: ^6.0.6 => 6.0.6 
    @storybook/addon-knobs: ^6.0.6 => 6.0.6 
    @storybook/addon-links: ^6.0.6 => 6.0.6 
    @storybook/addon-notes: ^5.3.19 => 5.3.19 
    @storybook/addon-storysource: ^6.0.6 => 6.0.6 
    @storybook/addon-viewport: ^6.0.6 => 6.0.6 
    @storybook/addons: ^6.0.6 => 6.0.6 
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.6 => 6.0.6

[petermikitsh]

Try adding this to main.js:

  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      },
    }
  }

[shilman]

@petermikitsh should either of those options be made default?

[Quadriphobs1]

It seems like just having this works, so it must some misconfiguration internally

typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
    }
  }

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

These are the defaults. It's probably because it's excluding node_modules by default:

https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/config/defaults.js#L4-L8

I think excluding node_modules is the right default, at least until we have something like https://github.com/storybookjs/storybook/pull/9110

Perhaps we need to make it easier to enable that, as a flag? Or just improve the documentation? What do you think?

[awkale]

Try adding this to main.js:

  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      },
    }
  }

Does the above go inside of
module.exports = {}

I don't see any props that have been extended.

[shilman]

@awkale yes

[jonniebigodes]

A recent pull request #12841 was created to adjust the documentation and include a bit more of context regarding the issue.

Let me know if you're ok with it and any additional feedback is welcome.

Stay safe