描述错误
我有一个 <Button>
组件,我已经创建了 Button.stories.ts
。Button.stories.ts
中的一个条目叫做 BrokenStory
。
我不想在侧边栏中显示这个故事,所以我把它添加到包含配置的 Button.stories.ts
默认导出中 - excludeStories: ["BrokenStory"],
。
然而,我想让这个示例在我的文档文件中的 <Canvas>
上呈现为 <Canvas of={ButtonStories.BrokenStory} />
,但是我得到了一个错误:
Invalid value passed to the 'of' prop. The value was resolved to a 'component or unknown' type but the only types for this block are: story.
以前,我会像这样使用 <Canvas>
:
<Canvas>
... my code example here...
</Canvas>
但是自从 Storybook 7 以来,我需要引用 <Canvas of={ButtonStories.BrokenStory} />
将 BrokenStory
移动到 Button.stories.ts
意味着它会自动在侧边栏中渲染,这是不希望看到的
重现问题
https://stackblitz.com/edit/github-oxjaxt?file=stories%2FButton.stories.ts,stories%2FButton.mdx
与自动生成的默认值的不同之处:
新文件:Button.mdx
修改:Button.stories.ts 在 meta
中有 excludeStories
,并且 tags: ['autodocs']
已注解掉
系统
- 无响应*
其他上下文
我找到的解决方法是在 MDX 中以如下方式渲染 BrokenStory
:<ButtonStories.BrokenStory />
而不是像这样:<Canvas of={ButtonStories.BrokenStory} />
这样 autodocs 仍然为 BrokenStory
生成条目,但可以通过 excludeStories: ["BrokenStory"]
在 Button.stories.ts
中排除它。这样就不会破坏。缺点是组件不会在 <Canvas>
上渲染
3条答案
按热度按时间chhkpiq41#
是的,我们确实需要添加过滤功能。希望在第四季度实现!
zd287kbt2#
@josephmarkus,
excludeStories
函数的作用是根本不将某些指定的导出视为故事,也不会从侧边栏中移除它们,因此你看到的就是这种行为。我们将添加一个功能,允许你在侧边栏中过滤故事,所以我已经将这个问题添加到那个项目中。在此期间,如果你想在文档中使用它,你需要在侧边栏中保留那个故事。j9per5c43#
感谢@shilman回复我。也许可以在文档中澄清这个特性的意图。在迁移到v7之前,我的文档包含了示例用例,以便让某人更容易地复制/粘贴代码片段。这是与侧边栏中的代码示例一起包含的。
示例侧边栏:
<Button>
1.1 主要
1.2 次要
文档将包含如何使用CSS模块或CSS-in-JS为
<Button>
设置样式的示例。这个用例在迁移到v7后需要排除后者的故事,这将在所有命名导出上生效。