使用导入的类型时,Storybook不会呈现控件和文档中的所有React属性

b1zrtrql  于 2022-10-29  发布在  React
关注(0)|答案(8)|浏览(213)

描述Bug

Storybook未显示控件和文档中的所有属性。当我从另一个文件导入Typescript类型时发生这种情况。

重现

1.创建一个文件并键入一些内容:

// colors.ts
export type TextColor = 'red' | 'blue';

1.然后在组件中使用创建的类型

// Text.tsx
import React, { FC } from 'react';
import TextColor from './colors';

export type Props = {
  textColor: TextColor;
  text: string;
};

const Text: FC<Props> = ({ textColor, text }) => (
  <div style{{ color: textColor }}>{ text }</div>
)

如果我这样做,只有text出现在控件和文档中。

预期行为

所有的道具都应该出现在控制面板和文档面板中。

屏幕截图

这是我的道具定义:

这是控件中出现的内容。它缺少iconColorcolor

这是出现在文档中的内容。还缺少iconColorcoloricon没有说明。

以下是IconsTextColorButtonColor的类型:

x1c4d 1x指令集

程式码片段

见重现章节

系统:

系统:
操作系统:Windows 10操作系统
CPU:4个x64英特尔®酷睿™ i7- 4500 U CPU,主频1.80 GHz
二进制文件:
节点:12.13.0 - C:\程序文件\节点\节点. EXE
npm:6.12.0 - C:\程序文件\节点\npm.CMD
浏览器:
铬合金:85.0.4183.102
边缘:斯巴达(44.19041.423.0),铬(85.0.564.51)
npm全局程序包:
@故事书/客户端:6.0.21

r9f1avp5

r9f1avp51#

你能分享你的.storybook/main.js配置吗?或者,更好的是,一个公共的repro repo?

dhxwm5r4

dhxwm5r42#

你能分享你的.storybook/main.js配置吗?或者,更好的是,一个公共的repro repo?
嘿@希尔曼!这是.storybook/main.js

module.exports = {
  stories: [
    '../**/*.stories.mdx',
    '../**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: ['@storybook/addon-essentials'],
};

抱歉,回购是私人的,但如果有什么需要我很乐意帮助。

wmtdaxz3

wmtdaxz33#

大家好!看起来最近这一期没有太多进展。如果还有问题、评论或错误,请随时继续讨论。很遗憾,我们没有时间讨论每一期。我们随时欢迎投稿,所以如果您愿意提供帮助,请向我们发送拉取请求。不活跃的问题将在30天后关闭。谢谢!

e5njpo68

e5njpo684#

我也遇到了同样的问题,看起来其他人也是。请参阅#13548。我们可以重新激活这个吗?

lpwwtiir

lpwwtiir5#

你有一个repro repo你可以分享吗?

rkkpypqq

rkkpypqq6#

@shilman谢谢你的回复。原来我的问题是关于从外部库导入的组件,我在这里找到了一个修复程序。我相信这个问题可以解决。

lh80um4z

lh80um4z7#

我有这个问题,我所有的其他组件工作正常,但突然这个新的不??我不知道为什么。

// storybook
import React from 'react'
import { ComponentStory } from '@storybook/react'

import IconText from '../../components/theme/Diageo/DIconText'
import LocationIcon from '../../components/icons/LocationIcon'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Base/IconText',
  component: IconText,
}

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof IconText> = (args) => <IconText {...args} />

export const Base = Template.bind({})
// IconText component
import React from 'react'

type IconTextProps = {
  icon: JSX.Element
  text: string
  reversed?: boolean
  className?: string
}

export default function IconText({ icon, text, reversed, className, ...props }: IconTextProps) {
  return (
    <div className={`icon-text ${className} ${reversed ? 'icon-text-reversed' : null}`} {...props}>
      <span className="icon-text-icon">{icon}</span>
      <span className="icon-text-text">{text}</span>
    </div>
  )
}

输出:

sqxo8psd

sqxo8psd8#

我认为一个很好的解决方法是在故事的默认导出中添加另一个字段,以便添加道具接口,而不是试图从组件本身找到它。
对我来说,它似乎没有拿起扩展类型。

import {
    ColorProps,
    ExtendedFlexboxProps,
    LayoutProps
} from "@aw-web-design/styled-system";

export type StyledButtonProps = ColorProps & ExtendedFlexboxProps & LayoutProps;

export interface ButtonProps extends StyledButtonProps {
    children: ReactNode;
}

故事书只包含子控件,但不包含其他接口中的任何控件

相关问题