addon-docs: No props for component in node_modules

Describe the bug

I’ve created a mono repo which holds a component package and a cra+stroybook+ts project. The storybook project installs and imports the component package in its stories, but docs does not show the props of the component.

• component package correctly builds dist and types
• if I create a component inside the storybook project, it shows the props

Screenshots

set component to Component from my pacakge

set component to Component inside the storybook project

System:

    "typescript": "^4.0.2",
    "@storybook/react": "^6.0.16",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/addon-actions": "^6.0.16",
    "@storybook/addon-links": "^6.0.15",
    "@storybook/addon-essentials": "^6.0.16",
    "@storybook/addons": "^6.0.16",

[0xDing]

@shilman @zhaoyao91

It’s work for me as an alternative solution:

import AntButton from "antd/es/button"
import type { ButtonProps as AntdButtonProps } from "antd/es/button"
import React from 'react'

export interface ButtonProps extends AntdButtonProps{}
export const Button: React.FC<ButtonProps> = AntButton

and

 reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => ( prop.parent ? !/node_modules\/(?!ant).*/.test(prop.parent.fileName) : true),
    }

[cgreene-st]

For anyone else who stumbles across this issue and is in the situation where they’re having this problem with .js files in a linked package rather than .ts (and hence the fix above won’t work), adding your linked package’s path to the include array in the default rule makes things work (find the right rule either by index or matching against the test pattern):

config.module.rules[<whatever>].include.push(
    fs.realpathSync(path.resolve(path.join(__dirname, '..', 'node_modules', '<your_package>', '<etc>')))
)

I was in a similar situation to @sehv where I was trying to pass components from a package to <ArgsTable of={Component} /> (without Typescript just pure JS + PropTypes), and it still wasn’t working.

The solution above got me half the way there. Storybooks webpack config seems to exclude: /node_modules/ by default so what worked for me was to modify the exclude:

config.module.rules[<whatever>].exclude = {
  and: [path.resolve(path.join(__dirname, '..', 'node_modules'))],
  // Exclude the following from the exclusion
  not: [path.resolve(path.join(__dirname, '..', 'node_modules', '<your_package>', 'etc'))]
}

NOTE: It’s important for it to still ignore node_modules for everything else otherwise the build will grind to a halt.