storybook 隐藏Web组件属性上的自动生成控件

xxe27gdn  于 3个月前  发布在  其他
关注(0)|答案(6)|浏览(29)

您的功能请求是否与问题相关?请描述

Storybook 显示了大量自动生成的控件,用于所有属性(包括甚至私有属性)、属性、插槽、CSS阴影部分和自定义元素的事件。这为测试组件带来了很多噪音。

描述您希望实现的解决方案

添加一个选项,以禁用自动生成控件的渲染。

描述您考虑过的替代方案

我所知道的唯一其他方法是在 parameters: { controls: { include: [ ... ] } } 中白名单所需的控件。但那会带来很多不必要的重复输入。

您是否能够协助将该功能变为现实?

oo7oh9g9

oo7oh9g91#

对于那些正在寻找解决方案的人,我在上面提供的解决方法上进行了一个小改进。
假设你有一个带有 args 属性的故事 MyComponent,添加:

MyComponent.parameters = {
    controls: {
        include: Object.keys(MyComponent.args),
    },
}

这将白名单并仅显示在 MyComponent.args 中定义的控件。

bpsygsoo

bpsygsoo2#

@tigrr — 很好的观点,尽管我的观点是,故事书中显示的属性可能被认为是相当好看的文档页面。我在寻找其他的东西:在UI中默认折叠所有不必要的表格——不幸的是,我没有找到一种简单的方法来做到这一点。也许值得在他们的Discord上询问关于这些可能性。

1yjd4xko

1yjd4xko3#

@tigrr 如果这些是web组件,那么我猜你已经从custom-elements.json生成了它们,并通过setCustomElementsManifest设置。
你可以在至少2个地方进行干预:

  • custom-elements.json级别(如何生成)
  • 通过在setCustomElementsManifest上执行 Package 器

在我的情况下,我做了两件事。
我通过@custom-elements-manifest/analyzer生成了custom-elements.json,所以我可以使用cem插件 - 这些都是公开可用的,以及一些我自己编写的自定义插件(它们相当容易编写)
setCustomElementsManifest的 Package 器上,我做了我在#15436中找到的一个变体(评论)
希望这些能帮助你实现你的目标:)

2w3rbyxf

2w3rbyxf4#

@jrencz ,这将完全移除这些属性。我希望它们(以及其他用途)出现在由Storybook自动生成的文档页面上。而@didnotwant ,这正是我想要所有属性都列出的地方,即文档页面,而不是故事控件。

j2qf4p5b

j2qf4p5b5#

好的,现在我明白了。

顺便说一下:从现在开始,我想换个Angular 来看待这个问题——我只想要文档页面上的基本信息和完整的集合(或者一个专门的子集)在故事中。

这似乎是一个既能满足你的需求,也能满足我的解决方案,它更像是一个“烹饪食谱”(可能是以某种形式应用于故事的高阶函数——装饰器?),而不是要融入storybook的一个功能。

jecbmhm3

jecbmhm36#

我想要重申通过推断的 argTypes 从组件中禁用自动生成控件的愿望。我的一些组件正在使用 MUI 组件,我想锁定这些属性,但 Storybook 会自动推断这些属性并将它们呈现给我们的故事,渲染出许多我不想让开发者或贡献者看到的控件。

在每个故事中设置几十个属性到 table: { disable: true } 确实不理想,所以能够关闭自动生成的控件将会很棒。更进一步的是,能够在故事级别上实现这种控制,而不是某种 preview.js/.ts 参数。

相关问题