storybook CSF3自动生成标题是否排除文件路径作为层次结构?

ni65a41a  于 3个月前  发布在  其他
关注(0)|答案(5)|浏览(35)

您的功能请求是否与问题相关?请描述

最近自动生成标题的功能非常棒,对于维护数百个故事的代码库来说是一个巨大的缓解。然而,由于我们的文件结构,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... 附加上下文
在此处添加有关此功能请求的其他上下文或屏幕截图。

dfty9e19

dfty9e191#

我希望能够从层次结构中移除一些文件夹。
我的问题和你的差不多,我有一个monorepo,所以有以下情况:

- packages
  - module-a
    - src
      - components
        - Button
  - module-b
    - src
      - components
        - Something

我希望使用正则表达式替换路径,以便从名称中移除src或组件。

t5zmwmid

t5zmwmid2#

我们有与上述评论相同的用例,是否可以通过某种自定义解析器轻松实现,还是需要贡献?

d4so4syb

d4so4syb3#

我们通常不允许通过函数进行配置,因为这使得配置变得难以序列化/持久化或在代码mods中以编程方式更新。
我们可以为故事指定器添加一个选项。虽然它不是优雅的,但它很简单:

{
      directory: '../pages',
      files: '**/*.stories.*',
      titlePrefix: 'pages',
      titleStripPath: true,
    },

@storybookjs/core WDYT?

ckx4rj1h

ckx4rj1h4#

我们和@Hideman85有相同的monorepo src问题 - 如果titleStripPath修复了这个问题,那么我完全支持!
这是我们目前的解决方法,我希望能够删除它:

// Get all directory names in ../packages.
const filename = fileURLToPath(import.meta.url);
const packagesDir = path.join(filename, "..", "..", "packages");
const packageNames = fs
  .readdirSync(packagesDir)
  .filter((name) => !name.startsWith("."))
  // We need to filter these out or else Storybook will print a bunch of
  // warnings on startup.
  .filter((name) => directoryHasStories(path.join(packagesDir, name, "src")));

export default {
  // We'd prefer to just say:
  //
  //   stories: ["../packages/*/src/**/*.stories.@(ts|tsx)"],
  //
  // But then, Storybook's auto-titles would put "src/" in the title, which
  // we don't want. So we have to do this instead:
  stories: packageNames.map((name) => ({
    directory: `../packages/${name}/src`,
    files: "**/*.stories.tsx",
    titlePrefix: `${name}/`,
  })),
  //
  // (Further config omitted)
  //
} satisfies StorybookConfig;

// Do a recursive search through the given directory for any files with
// ".stories" in their name.
function directoryHasStories(directory: string): boolean {
  const files = fs.readdirSync(directory);

  for (const file of files) {
    const filePath = path.join(directory, file);

    if (file.endsWith(".stories.tsx")) {
      return true;
    } else if (fs.statSync(filePath).isDirectory()) {
      if (directoryHasStories(filePath)) {
        return true;
      }
    }
  }

  return false;
}
pinkon5k

pinkon5k5#

我们通常不允许通过函数进行配置,因为这使得配置变得难以序列化/持久化或在代码修改中以编程方式更新。
我们可以为故事指定一个选项。虽然这不是优雅的解决方案,但它很简单:

{
      directory: '../pages',
      files: '**/*.stories.*',
      titlePrefix: 'pages',
      titleStripPath: true,
    },

@storybookjs/core WDYT?
这听起来像是一个解决方案,也许我们可以定义一个深度级别,或者提供上面提到的配方,或者只是建议用户在类似的情况下手动覆盖标题。
总的来说,我们需要意识到自动标题需要用于不同的事情,包括测试运行器,它也需要支持所决定的内容。

相关问题