7.0 设计 alpha 版

Storybook 支持所有主流视图层、无数工作流程和大量前端开发人员。尽管在过去几年中功能实现了巨大飞跃，但自 5.0 版本以来，核心用户体验一直没有改变。直到现在。

上个月，我分享了 Storybook 7.0 设计的先睹为快，该设计简化了开发人员每天使用的核心 UI 模式。我很高兴地宣布，这些更新现已在 alpha 版本中提供（说明见下方）。

• 📐 布局边缘到边缘
• 🛠 工具栏已重新组织
• ✍️ 200 个重新绘制的图标
• 🔢 表单元素已优化
• ⚡️ 预捆绑应用程序以提高速度

嗯，为什么？

我们相信，随着时间的推移，小的符合人体工程学的改进会带来巨大的生产力提升。成千上万的团队使用 Storybook 在世界各地交付 UI。从 Shopify 和 Microsoft 等全球公司到荷兰、英国和意大利的政府服务部门。

在过去的 3 年中，我们的功能不断扩展，以满足不断增长的社区的需求。Storybook 现在用于 UI 开发以及测试和文档。7.0 改进了 Storybook 的人体工程学，将这些工作流程集成到一个无缝体验中。

请放心，我们正在并行更新设计，同时致力于性能、稳定性和捆绑包大小，这符合主要版本升级的要求。注册邮件列表，以尽早获得这些功能。

布局更新

7.0 alpha 版本将画布尺寸扩展到边缘。这为您提供了更多空间来构建和记录您的 UI。每个专用于开发的像素都使 Storybook 更方便使用。

侧边栏也进行了刷新。您会发现一个新的、更微妙的菜单，以及间距的改进，以增加搜索栏的可点击区域。所有这些都同时保留了您对开发人员工具的信息密度期望。

用于调试 CSS 和对齐的工具栏

Storybook 附带了一组工具，可帮助您调试 UI 外观和布局。7.0 重新组织了这些工具，以减少您必须移动鼠标（或键盘用户按 Tab 键）的次数。

• 🔄 重新挂载：重新挂载当前选定的 story。
• 🔍 缩放：放大和缩小以检查每个像素。
• 🪟 视口：循环浏览预设视口尺寸（也可自定义）
• 📏 测量：测量像素中的尺寸和间距
• ⌧ 网格：在画布 iframe 中显示网格以进行对齐
• ⤴ 轮廓：轮廓化 DOM 元素以进行对齐
• 🖼 背景：更改画布 iframe 的背景

“文档”选项卡在哪里？
“文档”选项卡正在移至侧边栏，以提高可发现性。如果您启用了文档或文档页面，您将在组件 story 旁边找到可自定义的“文档”项。

由于社区的反馈，文档将在 7.0 版本中进行全面修订。这篇文章没有足够的空间来涵盖所有改进。注册邮件列表，以便在宣布时抢先了解（MDX2、嵌入等等）。

200 多个新图标，更清晰

Storybook 拥有一套 200 个自定义图标，这些图标在整个开源项目中使用。我们从头开始重新绘制每个图标路径，以提高视觉敏锐度，然后对其进行优化以减轻重量。这意味着图标对人眼来说更清晰，加载速度也更快。

预捆绑以提高速度和避免依赖冲突

在 7.0 版本中，我们重新评估了 Storybook 的基本架构。在早期版本中，运行 Storybook 涉及两个步骤：捆绑 Storybook 应用程序和构建您的组件代码。

每次您在本地计算机上运行时，Storybook 应用程序都会按需捆绑。这使人们可以更好地控制和了解捆绑过程及其中的依赖项。但是也存在缺点：运行这两个步骤需要更多时间，尤其是在您为 Storybook 构建更多 UI 组件时。

Storybook 7.0 预捆绑了 Storybook 应用程序。它作为编译后的代码库而不是一组您必须自己编译的指令来交付。

好处是巨大的：即时应用程序启动时间。是的，您仍然需要像往常一样构建组件代码，但即使这样也可以使用最新的 Vite 和 Webpack 5 集成（目前正在更新到 7.0 版本）来加速。

此外，预捆绑完全避免了依赖冲突，因为它消除了在代码库中安装 Storybook 依赖项的需要。例如，Vue 和 Angular 应用程序不需要安装 React（Storybook 在底层使用）。

试用 7.0 alpha 版

新设计现已在 7.0 alpha 版本中提供。在项目根目录运行以下命令

npx storybook@future upgrade --prerelease

注意：7.0 是主要版本发布的 alpha 版本，这意味着可能存在重大更改。更复杂的集成（如 Vite-builder）尚不支持（即将推出！）。我建议您在演示项目上试用一下。

注册以获得早期访问权限

7.0 设计正在积极开发中——alpha 版本中的内容只是第一笔。我们计划全面修订核心 UI 模式，如选项卡、菜单、表单和颜色。在接下来的几个月中，我们将通过 alpha 版本发布更多设计改进。注册下面的 Storybook 邮件列表以获取更新。

想帮助改进 Storybook 的用户界面吗？加入我们的 Storybook Discord 聊天 #design。我们欢迎新开发人员和资深人士的贡献。

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