新的组件查找器和侧边栏
快速导航组件库
组件越多，就越难找到您需要的组件。
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 新闻，并通过注册我们的邮件列表保持最新状态。