日程

我们将回顾 Storybook 的历史和演变，以及它对前端生态系统的影响。我们将探讨 Storybook 如何从一个用于隔离组件开发的工具，发展成为一个能促进开发者、设计师和产品经理之间协作的工具，甚至扩展到包含 UI 测试工作流程。

Storybook 7.0 是我们迄今为止最大的更新！它经过重新设计，性能更佳，可靠性更高，并带来了数百项增强功能。在此环节中，Michael 将讨论一些核心变更：设计焕新、组件 Story 格式 3 (CSF3) 和故事的改进类型安全。

从 7.0 版本开始，Storybook 将作为编译后的代码库交付，从而减少安装大小并加快启动速度。Storybook 7.0 还为 Vite 提供了第一等支持，提供自动配置。加入 Ian 的环节，了解预打包和 Vite Builder 的改进。

Storybook 7 让您的项目 UI 文档变得比以往更容易。凭借 MDX 2 支持、新的架构、精简的用户体验和现成的文档块，您可以快速创建和维护您的项目文档。

Storybook 允许您通过将 play 函数附加到故事来模拟用户行为，例如点击和输入。Yann 将演示如何编写这样的故事，并使用 Storybook 测试运行器将其转化为可执行测试。此外，您还将学习如何通过覆盖率报告发现未经测试的边缘情况。

Kyle 将介绍新的框架 API，它简化了集成。该 API 为更多工具解锁了零配置支持，允许软件包自动配置 Storybook，使其与 NextJS 和 SvelteKit 等流行的应用设置配合使用。

Storybook 7 是我们两年来第一次重大更新，带来了许多变更和新功能。为了使升级更容易，我们建立了一个“早期预警系统”，用于在广泛的配置矩阵下测试 Storybook。Michael 将解释 Storybook 团队如何使用这个生态系统 CI 来保护用户免受软件包升级的麻烦，并确保平稳迁移。

Storybook 拥有活跃的生态系统，包含用于样式、状态管理、测试、可访问性、设计工具、项目管理等的插件。Shaun 将概述我们如何通过 recipes 扩展这个生态系统。您还将发现 Storybook 如何与其他工具（如 Nx、Figma、Vite 和 Zeplin）合作以增强集成。

Monorepo 使您可以将多个软件包（例如您的应用程序和设计系统）存储在一个仓库中。这使得同时处理它们变得更容易。Katerina 将演示如何在由 Nx 管理的 monorepo 中使用 Storybook。您将了解 Nx-Storybook 插件，它可以在软件包中快速配置 Storybook。

成千上万的公司喜爱 Storybook。它被用于构建设计系统、测试 UI、发布开源库文档、进行设计评审以及收集利益相关者的反馈等多种用途。Lisa 将开启这个环节，介绍团队如何利用 Storybook。

在复杂的设计系统中，确定谁负责某个组件或组件在哪里使用可能非常具有挑战性。在 BBC，他们设计系统社区中的许多不同团队维护着组件，组件数量如此之多，这项任务几乎看似不可能。在此环节中，Natalia 解释了他们如何通过创建 ItDepends 来解决这个问题：这是一个自动生成组件依赖关系数据的插件。

Monday.com 的团队使用 Storybook 来管理单体应用、微前端和设计系统。每个微前端都有自己的 Storybook，通过 CI/CD 检查使用 Chromatic 运行，以帮助防止 bug 进入生产环境。在此环节中，Orr 解释了 Storybook 如何使 Monday.com 加速并增强他们的 UI 开发流程。

Intuit 构建的产品被全球超过 1 亿客户使用，例如 QuickBooks、TurboTax、Mint 和 Mailchimp。该平台建立在强大的微前端架构上，允许团队快速构建和发布独立的产品功能。Christopher 将向您展示他们如何利用 Storybook 在隔离环境中构建完整功能，帮助开发者快速修复 bug，模拟难以重现的场景（如服务器错误），并减少设置测试数据所需的大量时间。

您是否曾构建过独立看起来很棒但集成到消费应用中时面临样式挑战的组件？这种常见的样式污染问题可能导致耗时的 bug 查找和额外的开发成本。加入 Alex 的环节，了解 CSS Chaos Addon，这个工具可以改善组件的防御性样式，并增强在应用中使用这些组件的开发者体验。

加入 Oliver 的环节，他将分享《卫报》如何在产品和工程中使用 Storybook 和 Chromatic。您将学习如何使用 Storybook 来保护自己免受视觉回归的影响，以及如何将其用作平台，与 UX 和设计团队协作测试和评审变更。

在构建一个繁茂的 SVG 植物景观时，探索组件驱动开发和 Storybook 强大的功能。您将学习如何使用 Storybook 的基础知识来表达创意编程思想。我们的“数字花园”将由最小的故事（种子和萌芽）组成，然后组合在一起创建一个动画设计系统。