如何将故事书嵌套的 storiesOf api 转换为 CSF 格式

Question

我目前正在将 storybook.js 从 StoriesOf 格式转换为 Component Story Format (CSF)。

目前，我有一个文件夹，所有表单组件都使用 storiesOf 结构。例如：

storiesOf('Forms/Input', module)
  .add('with defaults', () => (
    <Input type="text" input={{ name: 'x' }} />
  ))
  .add('with disabled', () => (
    <Input type="text" input={{ name: 'x' }} disabled />
  ));

storiesOf('Forms/Checkbox', module).add('with defaults', () => (
  <Checkbox input={{ name: 'x' }} />
));

上面包含 2 个示例，一个包含 2 个选项的 Input 和一个仅包含默认值的 Checkbox。 CSF 格式在顶部有一个默认导出，如下所示：

export default { title: 'Forms' }

但是每个文件只能有 1 个默认导出，那么如何在同一个文件中同时导出 Input 和 Checkbox？

作为旁注 - storybooks.js 有一个迁移脚本，可用于自动将所有故事转换为新格式。但是，每当我运行脚本时，它都会很快停止，我还没有找到解决这个问题的方法。

下面是输出：

➜ ✗ npx -p @storybook/cli sb migrate storiesof-to-csf --glob "**/*.stories.js" 
=> Applying storiesof-to-csf: 120 files
Processing 120 files... 
Spawning 11 workers...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 10 files to free worker...

我也用 1 个文件尝试了同样的方法，但效果并不好。

➜ ✗ npx -p @storybook/cli sb migrate storiesof-to-csf --glob "./path-to-file/components/button/button.stories.js"
=> Applying storiesof-to-csf: 1 files
Processing 1 files... 
Spawning 1 workers...
Sending 1 files to free worker...

Answer 1

您将无法同时导出和导入 Checkbox 和 Input。您需要为 Checkbox 和 Input 创建单独的文件。如果您使用最新版本的codemod，它要求我们做同样的事情。

WARN Found 2 'storiesOf' calls, PLEASE FIX BY HAND: 'src/components/elements/Button.stories.js'

同样参考codemod的官方文档：

NOTE: The output of this transformation may require manual editing after running the transformation. storiesOf API allows multiple "kinds" (components) to be declared per file, but CSF only allows a single component per file. Therefore, if you use this feature in your input stories, you will need to split up the resulting outputs by hand. You'll see a warning at the console if you need to hand edit.

Offical Docs

如何将故事书嵌套的 storiesOf api 转换为 CSF 格式

How to convert storybook nested storiesOf api into CSF format

javascript

components

reactjs

styled-components

storybook