您的功能请求是否与问题相关?请描述
最近自动生成标题的功能非常棒,对于维护数百个故事的代码库来说是一个巨大的缓解。然而,由于我们的文件结构,storybook目前生成的故事结构有点过于复杂。
假设我们的代码库如下:
- components
- componentA
- componentA.stories.tsx
- pages
- pageA
- components
- componentB
- componentB.stories.tsx
- folderA
- pageB
- components
- componentC
- componentC.stories.tsx
- componentD
- componentD.stories.tsx
// ...
起初我将我的storybook配置设置为:
module.exports = {
stories: [
{
directory: '../components',
titlePrefix: 'components',
files: '**/*.stories.*',
},
{
directory: '../pages',
titlePrefix: 'pages',
files: '**/*.stories.*',
},
],
}
现在的问题是,storybook实际上将每个文件层次结构解析为storybook。
- Components
- ComponentA
- ComponentA
- Pages
- PageA
- Components
- ComponentB
- ComponentB
- FolderA
- PageB
- Components
- ComponentC
- ComponentC
- ComponentD
- componentD
// ...
但我们认为更容易阅读和搜索的结构如下:
- Components
- ComponentA
- Pages
- ComponentB
- ComponentC
- ComponentD
如果标题可以通过可定制的函数生成,或者只能通过 <titlePrefix> + <filename>
生成,我认为它会非常有帮助。谢谢!
描述您希望添加到Storybook的解决方案
您希望在Storybook中看到什么来解决这个问题?
A表示可以通过自定义函数生成故事层次结构,而无需显式列出完整文件路径。描述您考虑过的替代方案
您考虑过的其他解决方案或功能。您是否能够协助将该功能变为现实?
no | yes, I can... 附加上下文
在此处添加有关此功能请求的其他上下文或屏幕截图。
5条答案
按热度按时间dfty9e191#
我希望能够从层次结构中移除一些文件夹。
我的问题和你的差不多,我有一个monorepo,所以有以下情况:
我希望使用正则表达式替换路径,以便从名称中移除src或组件。
t5zmwmid2#
我们有与上述评论相同的用例,是否可以通过某种自定义解析器轻松实现,还是需要贡献?
d4so4syb3#
我们通常不允许通过函数进行配置,因为这使得配置变得难以序列化/持久化或在代码mods中以编程方式更新。
我们可以为故事指定器添加一个选项。虽然它不是优雅的,但它很简单:
@storybookjs/core WDYT?
ckx4rj1h4#
我们和@Hideman85有相同的monorepo
src
问题 - 如果titleStripPath
修复了这个问题,那么我完全支持!这是我们目前的解决方法,我希望能够删除它:
pinkon5k5#
我们通常不允许通过函数进行配置,因为这使得配置变得难以序列化/持久化或在代码修改中以编程方式更新。
我们可以为故事指定一个选项。虽然这不是优雅的解决方案,但它很简单:
@storybookjs/core WDYT?
这听起来像是一个解决方案,也许我们可以定义一个深度级别,或者提供上面提到的配方,或者只是建议用户在类似的情况下手动覆盖标题。
总的来说,我们需要意识到自动标题需要用于不同的事情,包括测试运行器,它也需要支持所决定的内容。