如何通过storySort将Storybook组件的Docs页面移至末尾？

你之前的storySort配置错误在于把['*', 'Docs']放在了顶层目录的排序规则里，这只会影响一级目录的顺序，无法作用到每个组件组内部。要让每个组件的「Docs」页面移到故事列表最后，有两种可行方案：

方案一：针对指定分类配置嵌套排序规则 #

这种方式适合你已经明确划分Atoms/Molecules/Organisms层级的场景，给每个顶层分类单独设置内部排序规则：

storySort: {
  order: [
    'Atoms',
    ['*', 'Docs'],
    'Molecules',
    ['*', 'Docs'],
    'Organisms',
    ['*', 'Docs'],
  ],
},

这里的['*', 'Docs']是嵌套在对应分类下的规则，表示该分类下的所有组件组（*匹配所有）里，「Docs」页面排在最后。

方案二：全局自定义排序函数 #

如果你的组件分类较多，或者需要全局统一规则，用自定义排序函数更灵活：

storySort: (a, b) => {
  // 标记Docs页面，让它排在同组件的其他故事后面
  const aIsDocs = a[1].id.includes('docs');
  const bIsDocs = b[1].id.includes('docs');

  if (aIsDocs && !bIsDocs) return 1;
  if (!aIsDocs && bIsDocs) return -1;

  // 非Docs页面按默认名称排序
  return a[1].kind.localeCompare(b[1].kind);
}

这个函数会检查每个故事的ID（自动生成的Docs页面ID包含docs关键字），强制让Docs页面排在同组的其他故事之后，其余故事按名称自然排序。

注意：确保你的Storybook版本在6.0及以上，这两个方案都需要该版本及以上的storySort支持。

内容的提问来源于stack exchange，提问作者ZecKa