storybook Story文档不会获取从node_modules导入的接口的prop类型,

lskq00tm  于 4个月前  发布在  其他
关注(0)|答案(7)|浏览(83)

描述bug

在使用React和TypeScript时,当将接口作为函数组件参数提供给组件故事时,会从接口中获取属性。但是在故事文档中看不到接口的所有属性。当你从一个模块导入接口(例如@material-ui)时,你将看不到这些属性。你只能看到在该组件文件中声明的接口的属性。

重现步骤

  1. 创建一个React函数组件。
  2. 将接口(可以是导入的模块中的接口,也可以是通过&与之前导入的接口组合的接口)作为该组件的prop类型。
  3. 为该组件创建一个故事。
  4. 在故事文档的标签页中,你将看不到导入的属性。

预期行为

我希望在故事文档中看到我导入的接口的属性以及我之前扩展的那个导入接口的接口的属性。

截图

https://imgur.com/a/XSgiPh0

代码片段

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({});

系统信息

环境信息:
系统:Windows 10 10.0.19041
CPU:(12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
二进制文件:
Node: 12.18.3 - C:\Program Files
odejs
ode.EXE
Yarn: 1.22.4 - ~\AppData\Roaming
pm\yarn.CMD
npm: 6.14.6 - C:\Program Files
odejs
pm.CMD
浏览器:Chrome 87.0.4280.141;Edge Spartan (44.19041.423.0),Chromium (87.0.664.75)

9avjhtql

9avjhtql1#

我也注意到了这个问题。对于 Package 其他组件的组件 - 例如,一个 Package 来自npm的组件,为其添加一些额外功能 - 通常会扩展props。以下是使用Ant Design的Col组件进行 Package 的示例:

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)
}

在Storybook中的props表中,只显示了额外的props。扩展/继承的props没有显示出来。

abithluo

abithluo2#

I also encountered this problem, I think it is relevant.
Storybook 6.4.0-rc.3

krcsximq

krcsximq3#

你可能可以通过reactDocgenTypescriptOptionspropFilter选项来自定义这个,但是它不是开箱即用的:https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration

pes8fvy9

pes8fvy94#

你能在你的项目中尝试以下的金丝雀,并让我知道它是否解决了你的问题(或者产生了新的问题)吗?我们正在将默认的docgen从react-docgen-typescript切换到react-docgen,这会快得多,也可能修复一些长期存在的bug。非常感谢!

注意,目前这个改变只适用于Vite项目。在“如何测试”部分的说明:👉 #23825

luaexgnf

luaexgnf5#

我无法访问原始项目,但我尝试在一个新的项目中重现相同的场景,这两个建议似乎都没有改变情况。

irtuqstp

irtuqstp6#

@ekremugur17 非常感谢你尝试。你有复制品吗?我很想看看并试着弄清楚发生了什么。

velaa5lx

velaa5lx7#

对于任何正在查看此内容的人,这是我在我的 main.ts 文件中添加的内容:

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

这对我有效。

相关问题