问题标签 [storybook-addon]

我创建的 Storybook 插件有问题。

当前情景

当从包含需要具有动态路径的 .md文件的其他函数（例如README.md文件）

库文件

这些动态要求将这些.md文件导入为README.md，由 Storybook 引擎在编译时执行。

奇怪的事实是，在 Storybook 的日志中，似乎执行了这个函数并读取了所有.md文件，其名称为README.md，存在于当前存储库中的任何地方，也在 node_modules 中，给出了准确数量的错误作为数量在当前存储库中找到的所有 README.md 文件。结果，Storybook 构建失败。

虽然此错误发生在 Storybook 的编译时，但在浏览器运行时会出现任何问题并且一切都按预期工作。

当前解决方案

当前解决该问题的解决方案（闻起来像钩子）是将此 lib.ts 拆分为不同的文件（例如lib-md.ts和lib-data.ts）。通过这种方式，Storybook 插件只包含lib-data.ts并且在这种方式下，编译时需要任何README.md文件，因此构建成功。

库数据.ts

lib-md.ts

有没有办法防止这个错误？

当我们加载一个故事书插件时，我们可以传递一些选项：

要编写我的插件，我使用插件 API：

我不知道如何从插件代码中获取开发人员选项。有官方方法吗？我没有从文档中得到明确的帮助。

我开始将故事书集成到我们的应用程序中，我想要实现的目标之一是：我们有一个深色和浅色主题，通过 sass 相应地更改 css 变量：

通常，我们有一个服务负责这个逻辑，但是 UI 组件不会自己注入它。现在我想知道是否有一种方法可以使用不属于特定组件的函数来执行类似的操作。我试过查看“storybook-dark-mode”（https://storybook.js.org/addons/storybook-dark-mode），这让我可以添加一个“dark-theme”类到故事书的文档，但不在应用程序本身中（在 iframe 内）。是否有可能做这样的事情：

并以某种方式在故事中使用toggleDarkTheme？

我在这个项目中使用了下一个 Js 和打字稿。

我想查看组件中的所有代码（checkboxSquare.tsx），但只有我能看到(args) => <CheckboxSquare {...args} />。

这是CheckboxSquare.stories.tsx

这是CheckboxSquare.tsx

我安装npm install @storybook/addon-storysource --dev所以在故事选项卡中 我只看到这个代码(args) => <CheckboxSquare {...args} /> 这是我的 .stroybook/main.js

此链接示例中的https://github.com/storybookjs/storybook/tree/master/addons/storysource显示 tsx 文件中的所有代码。怎么喜欢这个？？

我想在故事书面板中显示我的反应组件状态的转储。

是否有为此目的的故事书插件？