Storybook 7.0 设计抢先看

每天早晨，成千上万的开发者启动 Storybook 开始工作。Storybook 是 Netflix、Adobe 和欧盟前端工作流程的基础。

但随着使用量的增长，用户体验的边缘案例和不一致性也更多地暴露出来。在过去的 3 年里，我们研究了可用性并收集了用户体验反馈。

我很高兴分享 Storybook 7.0 设计的先睹为快。它刷新了核心 UI 模式，让您可以用更少的点击、更短的鼠标移动和更少的等待构建更多内容。

• 📐 布局扩展以增加可用空间
• 🛠 工具栏组织以便于发现
• ✍️ 图标集重新绘制并减轻重量
• 🔢 表单元素优化
• ⚡️ 性能全面提升

为什么现在？

在我们开始之前，值得一提的是 7.0 并没有重新发明轮子。Storybook 的受欢迎程度证明了当前经过实战检验的开发者体验。团队不会做任何破坏这种体验的事情。

Storybook 的设计上次改版是在 2019 年，由我和Norbert de Langen完成。那时，它只是一个用于隔离构建 UI 组件的工具。随着社区的蓬勃发展，Storybook 在 UI 文档和测试方面的能力也随之增强。

如今，无数团队（如 Microsoft、Shopify 和 Monday.com）依靠 Storybook 在全球范围内交付持久的 UI。

但随着 Storybook 功能的扩展，社区多年来难免会遇到视觉不一致和细微的错误。7.0 的设计解决了这些累积的反馈，并为 Storybook 的未来奠定了基础 UI 模式。

作为用户，您将在熟悉的工作流程之上获得全新的、精致的用户体验。

认识 7.0 的新外观

7.0 将更多屏幕空间分配给 Canvas——组件在其中隔离开发的 iframe。Canvas 尺寸增加了 3.5%，让您可以更自由地表达 UI 的所有维度。

当您像我一样在 Storybook 中花费数小时时，分配给开发的像素越多，完成工作就越高效。

Canvas 工具栏包含帮助您快速检查 UI 实现的工具。这些工具现在被组织起来，将类似的操作分组在一起，从而减少了您必须移动鼠标（或键盘用户使用 `tab` 键）的距离。

我们还添加了一个“重新加载”工具，用于重新加载当前选定的 story。当您想要重新加载组件而无需刷新整个浏览器时，这非常有用。

Storybook 7.0 配备了浅色和深色主题。我们的主题 API 保持不变，因此从 6.X 到 7.0 的主题变量的任何调整也是可移植的。

为您重用而打造

自定义是 Storybook 受欢迎的主要原因之一。社区中有超过 400 个插件。在 7.0 中，集成者将可以更多地访问我们用于开发 Storybook 本身的设计模式。

7.0 包含 196 个图标，供您在自己的项目中重用。每个图标都从头开始重新绘制，以提高清晰度和可识别性。该图标集还扩展了 20 个图标，以捕捉来自社区的新兴功能。完整的图标集轻了 46%。

诸如 `Toggle` 和 `Slider` 之类的表单组件都遵循更新的设计语言。您会在 Controls 插件中最为注意到这一点。通过从 `@storybook/components` 导入这些组件，在您自己的插件中重用它们。

性能驱动设计

Storybook 7.0 不仅看起来焕然一新，感觉也焕然一新。加速开发工作流程最有效的方法是增强 Storybook 本身的功能。

7.0 预捆绑了 Storybook，为您提供即时启动时间和避免依赖冲突。每个依赖项都经过审核，以进一步减小捆绑包大小。

结合 6.X 版本（如下）中的性能改进，7.0 启动速度快，并且始终保持快速——即使团队编写数千个 stories。

• 7.0 即时启动： 预捆绑管理器并优化依赖项
• 6.5 更快的模块重新加载： Webpack 5 懒加载编译和官方 Vite 构建器
• 6.4 更快的加载时间： 为已发布的 Storybook 进行代码拆分
• 6.3 面向未来： ESM 支持和稳定的 Webpack 5
• 6.2 可扩展： 重新架构 Storybook 以支持现代构建器，例如 Webpack 5 和 Vite
• 6.1 更快的启动： 删除了 Webpack DLL 并开始预构建和缓存管理器

注册抢先体验

7.0 设计正在积极开发中——这里先睹为快的内容只是初步的。我们需要您的帮助和反馈，以便将设计变为现实，尤其是在抢先体验期间。请在下面注册 Storybook 的邮件列表，以获取项目更新通知。

对 Storybook 的用户界面有想法吗？加入我们的 Storybook Discord 聊天频道 #design。我们欢迎新开发者和资深人士的贡献。

7.0 设计由 Michael Arestad 和 Dominic Nguyen（我！）开发，并得到了整个 Storybook 社区的反馈。