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

Posted 2023-02-19

【中文标题】如何将故事书嵌套的 storiesOf api 转换为 CSF 格式

【英文标题】：How to convert storybook nested storiesOf api into CSF format

【发布时间】：2020-11-17 04:17:03

【问题描述】：

我目前正在将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 个示例，Input 包含 2 个选项，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...

【参考方案1】：

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

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

也可以参考 codemod 的官方文档：

注意：此转换的输出可能需要在运行转换后手动编辑。 storiesOf API 允许每个文件声明多个“种类”（组件），但 CSF 只允许每个文件使用一个组件。因此，如果您在输入故事中使用此功能，您将需要手动拆分结果输出。如果您需要手动编辑，您会在控制台看到警告。

Offical Docs