咨询Storybook v7实现组件描述与属性的全文检索方案

可以实现对组件文档描述、属性等内容的关键词检索，以下是两种可行方案：

方案一：使用社区维护的 storybook-addon-search 插件 #

• 安装命令：

  npm install storybook-addon-search --save-dev
  # 或使用yarn
  yarn add storybook-addon-search -D
  

• 在 .storybook/main.js 中注册插件：

  module.exports = {
    addons: [
      // 保留已有的其他addons
      'storybook-addon-search'
    ]
  };
  

• 该插件默认会检索组件名称、文档描述、属性注释等内容，无需额外配置即可覆盖你的需求场景。

方案二：自定义实现检索逻辑（适合高度定制需求） #

利用Storybook的官方API手动实现全文检索：

1. 创建自定义addon，通过 useStorybookApi 获取所有组件的元数据（包括描述、属性等）
2. 实现搜索输入框，实时过滤匹配关键词的组件
3. 将过滤结果替换原导航树展示

• 核心代码示例（自定义addon面板）：

  import { useStorybookApi, useGlobals } from '@storybook/manager-api';
  import { useState } from 'react';
  
  export const SearchPanel = () => {
    const api = useStorybookApi();
    const [searchTerm, setSearchTerm] = useState('');
    const [, updateGlobals] = useGlobals();
  
    const handleSearch = (e) => {
      const term = e.target.value.trim();
      setSearchTerm(term);
      if (!term) {
        updateGlobals({ searchResults: null });
        return;
      }
      // 获取所有组件的完整数据
      const allStories = api.getStorybook();
      // 过滤匹配关键词的组件（覆盖名称、描述、属性）
      const filteredStories = allStories.filter(story => {
        const docDesc = story.parameters.docs?.description?.toLowerCase();
        const argsStr = Object.values(story.args || {}).map(arg => arg?.toString().toLowerCase()).join(' ');
        return story.name.toLowerCase().includes(term) || 
               (docDesc && docDesc.includes(term)) ||
               argsStr.includes(term);
      });
      updateGlobals({ searchResults: filteredStories });
    };
  
    return (
      <div style={{ padding: '16px' }}>
        <input 
          type="text" 
          value={searchTerm} 
          onChange={handleSearch} 
          placeholder="搜索组件描述、属性..."
          style={{ width: '100%', padding: '8px' }}
        />
      </div>
    );
  };
  

关于 @toptal/davinci-storybook-full-text-search-addon 失效的可能原因 #

• 该插件对Storybook v7兼容性不足，其设计适配的是旧版本Storybook
• 检查 .storybook/main.js 中插件是否正确注册，以及是否存在依赖版本冲突
• 可尝试删除 node_modules 和锁文件后重新安装依赖，排除缓存问题

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