时间戳

首页 > 解决方案 > 是否可以让 README 文档首先出现在 Storybook 导航中，然后是所有故事？

javascript - 是否可以让 README 文档首先出现在 Storybook 导航中，然后是所有故事？

问题描述

我将所有 Storybook 故事都嵌套在“Docs”标题下。每个组件都有一个 README mdx 文件，然后是必要的故事。我希望自述文件总是首先出现在导航中，然后故事可以自然地排序。

这是我想要的排序：

Docs
│
├─ Button
│  │
│  ├─ README
│  ├─ Button Story One
│  ├─ Button Story Two
│  └─ Button Story One
│
└─ Grid
   │
   ├─ README
   │
   ├─ Column
   │  │
   │  ├─ README
   │  ├─ Column Story One
   │  ├─ Column Story Two
   │  └─ Column Story Three
   │
   └─ Row
      │
      ├─ README
      ├─ Row Story One
      ├─ Row Story Two
      └─ Row Story Three

您会注意到有 3 个级别，但根据组件的复杂性，可能有多达 4 个级别，每个级别都有一个 README。

这种自定义排序是否可行？如果是这样，怎么做？

这是推荐的排序算法：

return a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });

Wherea[1]和b[1]are 具有以下结构的对象：

{
  "id": "docs-grid-column-examples--default-story",
  "kind": "Docs/Grid/Column/Examples",
  "name": "default",
  "story": "default"
}

标签： javascriptreactjsstorybook

解决方案

试试下面...

storyBookArray.sort( ( a, b ) => {

  let aPath = a.kind.replace( /\/README$/, '/' );
  let bPath = b.kind.replace( /\/README$/, '/' );
  
  return aPath.localeCompare( bPath );
    
} );

简而言之，这会将路径末尾的任何“/README”替换为“/”，这意味着一个空文件名，从而在localeCompare对两个路径执行时将“README”放在该路径内列表的开头在排序期间。

这假设如果 storyBookArray 除了文件之外还跟踪目录，那么这些目录被指定为，比如说，'Docs/Grid'，没有尾部斜杠......

推荐阅读