有没有办法为故事书提供“主文件”？

Posted 2023-02-19

【中文标题】有没有办法为故事书提供“主文件”？

【英文标题】：Is there a way to have 'master file' for storybook?

【发布时间】：2020-04-30 02:50:24

【问题描述】：

我一直在想是否有办法为故事书创建一个“主”文件？

这是我想象的文件层次结构的样子：

•
└── stories
    └── button
        ├── Button.js
        └── Button.stories.js
    └── SearchBox
        └──  SearchBox.js
        └──  SearchBox.story.js
    index.stories.js

index.stories.js 将包含所有其他的导入 故事。

---

Button.stories.js

import React from 'react''

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      ???? ???? ???? ????
    </span>
  </Button>
);

export default  title: 'Button' ;

现在，如果我将代码粘贴到 index.stories.js 中，这将起作用，但我只想将单独的故事导入到主文件中，但我不知道该怎么做。我试过以下无济于事：

index.stories.js

import React from 'react'
import Button from './button/Button.stories'

export const Main = <Button/>
export default =  title: 'Main-Testing' 

但这不起作用，只会导致babel-loader 解析错误。当我应该在这里导入故事时，导入React.Component 感觉也不正确。

---

PS：我知道我可以在 preview.js 或 main.js 中单独导入所有故事文件，但我正在考虑特定的解决方案 拥有一个“主”文件。

那么，应该如何实现呢？

【参考方案1】：

您可以尝试将每个故事变体作为其自己的故事文件中的命名导出导出，然后将它们中的每一个导入 index.stories.js，然后从那里再次将它们一起导出。

例如：

index.stories.js：

import React from 'react';
import  First, Second  from './components/component.stories.js';
// First and Second are named exports from their own stories

export default 
  title: 'Show All Stories Here'


const AllComponents = () => <div><First /><Second /></div>

export  First, Second, AllComponents; 
// export all components individually, and then export them all together

故事书 UI 中的结果结构将是：

- Show All Stories Here
   - First // First would be displayed here
   - Second // Second would be displayed here
   - Allstuff // both First and Second would be displayed here