新的组件查找器和侧边栏

组件越多，越难找到所需的内容。

Storybook 是组织组件库的行业标准。但随着团队转向组件驱动的 UI，现在从组件到完整页面的所有内容都在 Storybook 中构建。

管理数百个组件和数千个故事集变得很麻烦。6.1 版本中的新组件查找器和侧边栏是专门为帮助开发者导航大型组件库而构建的。

• 🔍 使用模糊搜索快速查找组件
• 🔄 在最近打开的组件之间跳转
• 🔭 展开和折叠所有节点
• ⚡️ 更流畅的 UI 和键盘导航

为何是现在？

Storybook 最初是为小型组件库设计的。当它在 2016 年发布时，React、Vue 和 Angular 都是新的。构建和管理组件的最佳实践尚未出现。

多年来，Storybook 不断发展。它成为设计系统最流行的工具。被 Adobe、Shopify 和 GitHub 等公司使用。

如今，团队使用 Storybook 隔离构建整个 UI：从组件开始，到页面结束。BBC 和 The Guardian 等全球品牌维护着数千个故事集。Storybook 的开发者体验需要随之扩展。

更快地查找组件

6.1 版本引入了重新设计的搜索体验。大型组件库难以导航，因为你可能会迷失组件的位置。

查找器通过索引组件的名称和路径来帮助你找到组件。

结果会随着你的输入而显示。当结果匹配你的查询时，Storybook 会高亮显示匹配的字符串。如果存在拼写错误，“模糊匹配”仍然会向你显示正确的结果。

查看最近打开的组件

通过“最近打开”视图在你正在处理的组件之间跳转。Storybook 会保留你打开的组件历史记录，并在你打开查找器时显示它们以便快速访问。

开发者通常会查看一个组件及其依赖项以检查错误。例如，在开发 CreditCardForm 时，你也会想检查它在 BillingPage 上的集成。这些组件现在只需点击一下即可访问。

展开和折叠组件树

展开给定“根目录”（组件组织的顶级）中的所有嵌套文件夹。高级团队使用文件夹来组织 Storybook。但在大型库中，逐个打开文件夹来查看其内容非常繁琐。现在你可以一键递归打开所有文件夹。

当存在许多子文件夹时，这尤其有用。例如，以前需要点击 4 次才能到达此路径的末尾： /screens/../../AboutScreen。现在只需点击两次。

此外，键盘导航可以帮助你在不离开当前位置的情况下浏览组件。

立即尝试

升级到 Storybook 6.1 即可尝试新的查找器和侧边栏。

npx sb upgrade

参与其中

专业的 UI 开发者每天都依赖 Storybook。我们的目标是简化常用流程，以便你事半功倍。

新的侧边栏由 Gert Hengeveld 和 Norbert de Langen 开发。设计由 Dominic Nguyen（我本人！）完成。感谢 Yann Braga 进行了质量保证。

Storybook 由 1,176+ 名开源贡献者维护，并由顶级维护者组成的指导委员会指导。如果你有兴趣贡献，请在 GitHub 上查看 Storybook，创建一个 issue，或提交一个 pull request。在 Open Collective 上捐赠。在 Discord 与我们聊天——通常会有维护者在线。

通过Twitter 和订阅我们的邮件列表，随时了解 Storybook 的最新消息。