Story docs do not get prop types of interfaces imported from node_modules

[ekremugur17]

Describe the bug When using React with TypeScript, component stories fetch props from interfaces when provided to function component arguments. But not all props of the interface are seen in the story docs. When you import an interface from a node module, in this case @material-ui, you will not see those props. You can only see the props of interfaces that you declared in that components file.

To Reproduce

1. Create a React function component.
2. Give an interface, which either extends an interface imported from a module or is combined with one via &, to that components prop type.
3. Create a story for that component.
4. You will not see the imported props in the docs tab of that story.

Expected behavior I expected to see props from the interface I imported and props of the interface in which I extended that earlier imported interface.

Screenshots https://imgur.com/a/XSgiPh0

Code snippets Alert/index.tsx

import MuiAlert, {AlertProps as MUIAlertProps} from "@material-ui/lab/Alert";
import {makeStyles} from "@material-ui/core/styles";

function CustomAlert(props) {
    return <MuiAlert elevation={6} {...props} />;
}

const useStyles = makeStyles((theme) => ({
    root: {
        width: "100%",
        marginBottom: theme.spacing(2),
        "& > * + *": {
            marginTop: theme.spacing(2),
        },
    },
}));

export interface AlertProps extends MUIAlertProps {
    message: string;
    lol: string;
}

const Alert = ({message, severity, variant, className, ...otherProps}: AlertProps) => {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            {/* eslint-disable-next-line react/no-children-prop */}
            <CustomAlert
                className={className}
                severity={severity}
                variant={variant}
                {...otherProps}
                children={message}
            />
        </div>
    );
};

Alert.defaultProps = {
    severity: "success",
    message: "Please provide a message",
    variant: "filled",
};

export default Alert;

Alert.stories.js

import Alert from "../components/Alert";

export default {
    title: "UI Elements/Alert",
    component: Alert,
    argTypes: {
        variant: {
            control: {
                type: "select",
                options: ["filled", "outlined"],
            },
        },
    },
};

const Template: any = (args) => <Alert {...args} />;

export const Success: any = Template.bind({});

System Environment Info:

System: OS: Windows 10 10.0.19041 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Binaries: Node: 12.18.3 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 87.0.4280.141 Edge: Spartan (44.19041.423.0), Chromium (87.0.664.75)

Additional context None

[kaiyoma]

I just noticed this problem too. For components that wrap other components - like a wrapper around a component from npm that adds some additional functionality - it's common to extend props. Here's an example of wrapping around Col from Ant Design:

import { ColProps } from 'antd/lib/col';

type ColSizeProps = Pick<ColProps, 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl'>;

interface Props extends ColSizeProps, Pick<ColProps, 'onMouseEnter' | 'onMouseLeave'> {
  (extra props here)
}

In the props table in Storybook, only the extra props are appearing. The extended/inherited props are not showing up.

[vladly]

I also encountered this problem, I think it is relevant.

Storybook 6.4.0-rc.3

[shilman]

You might be able to to customize this using the propFilter option of reactDocgenTypescriptOptions, but it's not supported out of the box: https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration

[shilman]

Can you try out the following canary in your project and let me know whether it resolves any of your issues (or generates new ones)? We're looking to switch the default docgen from react-docgen-typescript to react-docgen, which is much faster and may also fix some long-standing bugs. Many thanks!

Note that the change is currently only for Vite projects Instructions in the "how to test" section: 👉 https://github.com/storybookjs/storybook/pull/23825

[ekremugur17]

I do not have access to the original project but I tried to reproduce the same scenario with a fresh project and neither of the suggestions seem to change the situation.

[shilman]

@ekremugur17 thanks so much for trying it out. do you happen to have the reproduction handy? i'd love to take a look and try to figure out what's going on.

[cssinate]

Just for anyone looking at this still, here's exactly what I added in my main.ts file:

module.exports = {
  ...
  typescript: {
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: true,
    },
  },
}

This worked for me.