Storybook 7 如何实现导航面板类别与组件的字母排序？

Storybook 7 重构了storySort的API，不再使用数组形式的参数，改为传入包含故事元数据的对象。以下是适配React项目的自定义排序实现，可实现右侧导航面板的类别和组件按字母排序：

// .storybook/preview.ts
export const parameters = {
  storySort: (a, b) => {
    // 先按类别（title）进行字母排序
    const categoryCompare = a.title.localeCompare(b.title, undefined, {
      sensitivity: 'base',
    });
    if (categoryCompare !== 0) {
      return categoryCompare;
    }

    // 同一类别下，优先按文件名排序；无文件名则按id排序
    const getSortKey = (item: typeof a) => {
      if (item.fileName) {
        // 清理文件名中的路径符号，只保留纯文件名
        return item.fileName.replace(/\.\/|\\/g, '');
      }
      return item.id;
    };

    return getSortKey(a).localeCompare(getSortKey(b), undefined, {
      numeric: true,
      sensitivity: 'base',
    });
  },
};

代码说明 #

• 首先对比故事的title（对应原API中的kind，即导航面板的类别），实现类别按字母排序
• 同一类别内，优先使用清理后的文件名排序；若没有文件名，则使用故事的id排序，同时开启numeric选项处理带数字的命名
• sensitivity: 'base'确保排序不区分大小写，保持排序结果的一致性

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