Storybook 是业界标准的组件和页面 UI 开发工作坊。它被 BBC、Netflix、Twitter 以及数千个其他团队使用。我们的目标是将最优秀的前端团队使用的工具和技术提供给所有人。

如今，Storybook 已成为组件**开发**、**测试**和**文档**的最佳实践。它支持所有主流 Web 框架，由 1800 多名贡献者开发，并拥有数百个社区主导的集成。

本文预览了下一代改进，并回顾了 Storybook 在 2022 年的发展历程。

2022 年回顾

2022 年是 Storybook 具有里程碑意义的一年。我们全面改进了**性能**、**稳定性**、**兼容性**、**测试**和**文档**。这项工作在 7.0 beta 中达到顶峰，它总结了数月来的改进，旨在让 UI 开发更愉快、更高效。

性能
Storybook 的按需架构结合延迟编译和依赖预打包，大幅提高了开发启动时间。与默认的 6.x 配置相比，Webpack 和 Vite 项目的速度应能提升 2 倍。

稳定性
我们建立了一个“早期预警系统”，用于针对各种项目类型、依赖项和配置矩阵来测试 Storybook。这让您对 Storybook 与您喜爱的工具协同工作（并将继续协同工作）充满信心。

兼容性
我们推出了框架 API，使集成更加直接和零配置。这带来了一流的 Vite 和 NextJS 支持，SvelteKit 支持正在进行中，以及社区正在为 Remix、 Qwik、 SolidJS 等新框架进行的工作。

测试
当您编写 Story 时，您就免费获得了测试。我们通过模拟用户行为（点击、悬停、键盘）的交互测试来发展 Storybook 的测试方法。它们在真实浏览器中并行运行，无论是在开发环境还是 CI 中。

尽管 Storybook 测试是我们的工具箱中的一个新功能，但它很快流行起来。在过去的一年里，`addon-interactions` 的 npm 每周下载量飙升至 100 万以上。同样，`test runner` 也增长到每周 10 万以上的下载量。

我们甚至看到 Storybook 的测试功能在更广泛的生态系统中流行起来。最值得注意的是，流行的端到端测试工具 Nightwatch.JS 已采用 CSF 和 play 函数进行组件测试。

它被 Storybook 用户和 JS 生态系统中的其他工具广泛采用。

import { within, userEvent, findByRole } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { InboxScreen } from './InboxScreen';

export default {
  component: InboxScreen,
  title: 'InboxScreen',
};

export const PinTask = {
  args: {},
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    // Pin task
    const itemToPin = await canvas.findByRole('listitem', { name: 'Export logo' });
    const pinButton = await findByRole(itemToPin, 'button', { name: 'pin' });
    await userEvent.click(pinButton);
    // Check that the pin button is now a unpin button
    const unpinButton = within(itemToPin).getByRole('button', { name: 'unpin' });
    await expect(unpinButton).toBeInTheDocument();
  },
};

测试运行器和代码覆盖率
今年早些时候，我们发布了 Storybook Test Runner，这是一个基于 Jest + Playwright 的软件包，可在无头浏览器中并行测试您的所有 stories。您可以在本地开发环境中使用 watch 模式或在 CI 中运行它。

可调试性是 Storybook 方法的核心原则。当测试失败时，您可以在浏览器中重现它进行交互式调试。这意味着您可以在测试失败的同一执行上下文中进行调试：一个真实的浏览器。

在 Storybook 7.0 beta 中，我们添加了代码覆盖率报告。现在，您可以准确了解组件和库中的哪些代码行已通过 stories 进行测试。您还可以输出标准覆盖率报告，这些报告可以与您的其余测试基础设施集成。

文档
Storybook 是最受欢迎的 UI 文档工具，被数万个项目使用。我们将 Storybook 升级到 MDX 2，这是一种更清晰、更具表现力的方式来混合 markdown 和 JSX，以创建丰富的文档。

我们还简化了 stories（组件示例）在文档中的导入方式。这些是基础性的更改，将成为我们计划明年推出的下一代功能的基础。

社区
我们的社区正在蓬勃发展。Storybook monorepo 的 GitHub star 数量超过 75,000，使其成为有史以来最受欢迎的仓库之一。同时，超过 16,000 名社区成员正在我们的 Discord 服务器中分享技巧和提供支持。

组件百科全书
今年我们最大的社区发布是组件百科全书，它是一个包含来自 Airbnb、Microsoft 和 Zendesk 等公司 6000 多个组件的目录。它让您了解顶级团队如何构建组件以及如何组织他们的 Storybooks，供您在构建自己的 UI 时参考。

2023 年的后续计划

我们将在今年工作的基础上进行重大的兼容性、文档和测试改进。我们将继续优先考虑性能和稳定性，直到 Storybook 能够即时启动并在所有升级过程中保持稳定。

7.0 发布以及 Storybook Day
7.0 是我们两年来发布的第一个主要版本。它包含数百项改进、全新的设计，并重构了代码库的关键部分，以提高性能和稳定性。我们目前处于测试版。

为了庆祝 7.0 的发布，我们将在 2023 年 3 月 14 日举办有史以来第一次用户大会 Storybook Day。 我们将汇聚全球社区，向维护者和专家用户学习新的工作流程和最佳实践。

🎟 ️获取 Storybook Day 免费门票 »

通过注解服务器实现更快启动
目前，Storybook 在打包组件和 stories 时会对其进行分析。这样做有历史原因，但给打包过程带来了不必要的开销。我们接下来的重大改变是将这项工作从构建流程中移出，放入一个独立的服务器中，这将加快启动时间并提高与不同构建器的兼容性。

使用 Turbopack 和 Vite 实现更快构建
我们的构建器生态系统持续发展。其中一个最大的新成员是 Webpack 的继任者 Turbopack。我们正在与 Turbopack 团队合作，在 2023 年添加支持。同时，我们将继续投入精力改进 Storybook 对 Vite 的支持，这项支持在 2022 年取得了长足进步。

通过 Ecosystem CI 提高稳定性
在稳定性方面，我们将 Ecosystem CI 测试套件集成到 Storybook 的各个领域。我们首先增加了更多渲染器、构建器和包管理器的组合进行测试。这保证了 Storybook 能够与您的前端技术栈“即插即用”。

可移植的组件文档
Storybook Docs 最初的愿景包括“可移植文档块”，可以将 Storybook 中编写的组件文档嵌入到任何文档系统中。我们正在开发 新一代 Storybook Docs，以实现这一愿景。

可访问性测试
Storybook 已经支持自动化可访问性测试，既可以是交互式插件，也可以通过自动化测试进行。在 2023 年，我们计划统一这两种方法，以持续审计组件的可访问性。

全页面测试
Storybook 被认为是用于独立组件开发和设计系统的工具，但它也可以用于开发连接组件甚至全栈应用程序。我们正在从测试的角度对这些场景进行更多投入。这为开发者提供了一种强大的方式来演练完整的应用程序用户流程，同时享受 Storybook 独立环境的速度和可靠性。

兼容万物
增加集成数量同时确保其稳定性通常是相互竞争的目标。一流的框架支持兼顾了这两点。我们正在改进对现有框架的维护和支持，并添加新的框架以适应不断发展的 JavaScript 生态系统。我们很快还将发布令人兴奋的 TypeScript 公告。

React Native
React Native 是 Storybook 中首批支持的框架之一。但由于工具链与 Web 不同，它的发展速度并未与 Web 保持同步。在过去的几个月里，我们在幕后努力将 7.0 的最佳功能带给 React Native：组件故事格式、自动生成的文档和控件、加载器/play 函数等等。

学习和文档全面改进
随着功能越来越多，用户很难理解如何最好地使用 Storybook。我们正在投入更多资源来制作学习内容，例如 API 文档和代码片段，同时也在建设基础设施，以帮助自动保持所有内容最新。

会议、活动和工作坊
我们有史以来第一次用户大会，Storybook Day，将于 2023 年 3 月 14 日举行。我们计划加倍努力，与社区一起举办更多线下活动。您也将在您附近的活动中找到 Storybook 维护者发表演讲。

谢谢！

自 Storybook 诞生以来，每一年都比前一年更壮大。“前端工作坊”的概念在 2017 年闻所未闻。如今，越来越多的开发者认识到隔离开发 UI 的好处。

我们非常感谢我们的用户、贡献者和维护者一路同行。拥有 1800 多名贡献者，Storybook 在简化现有工作流程、探索新功能以及紧跟 JavaScript 生态系统的最新创新方面处于有利地位。我特别为我们今年取得的进展感到自豪。

2022 年核心团队

Michael Arestad, Yann Braga, João Cardoso, Michael Chan, Tom Coleman, Norbert de Langen, Shaun Evening, Kyle Gach, Gert Hengeveld, Dom Nguyen, Valentin Palkovic, Kasper Peulen, Jeppe Reinhold, Kai Röder, Michael Shilman (我！), Varun Vachhar, Ian Van Schooten, Daniel Williams, Josh Wooding

2022 年贡献者

@7rulnik @abrahambrookes @acdr @acusti @agarun @alexguja @all-self-taught @andarist @ang-yc @ankon @apeltop @ariperkkio @aritrakoley @armujahid @b2y4n @benmccann @bisubus @blackthread @blakegearin @bovandersteene @bryanjtc @burhanuday @bytrangle @cabbiepete @camsteffen @ch3coo2ca @chakas3 @chalbert @clentfort @clintandrewhall @cocco3 @coly010 @coofzilla @curtvict @danielamram @dannyhw @daraphista @darenbt @darleendenno @dartess @ddalpange @delagen @dmattia @domyen @donotlb @donskelle @dovydasnavickas @duncan-c @edo-san @eirslett @elob @estebanfelipep @ethriel3695 @evad1n @evancharlton @ezmnysniper7 @fabioatcorreia @fbredius @flyingsquirrel-dev @franz-bendezu @fraserisland @frassinier @friederbluemle @gaetanmaisse @ganhinglong0423 @geisterfurz007 @georgialoper @geromegrignon @ghengeveld @giladtamam @gitstart @greglahaye @guilledf @halkeye @hayawata3626 @hiro0218 @huyenltnguyen @iagopiimenta @ianvs @imgbotapp @inokawa @integrayshaun @interphased @italoteix @ittaibaratz @j3rem1e @jacobia21 @jahrock @jarvis1010 @javier-arango @jdgomezb @jeangregorfonrose @jeroenhabets @jodiwarren @johnalbin @jonathankolnik @jonbeller @jonniebigodes @josh-degraw @josh-the-dev @joshwooding @jpzwarte @jreinhold @jsflor @jsomsanith @julo01 @justrhysism @kasperpeulen @kingdutch @kk3939 @konsalex @kosai106 @kqito @kroeder @krofdrakula @kylegach @kylemeenehan @lalanthawi @laughnan @lbbo @leosvelperez @lesha1201 @lhew @lifeiscontent @lonyele @lubnafathima @lucacras @luciana-mendonca @mandarini @marioarnt @mariocadenas @marklb @matanbobi @matheo @mattevenson @matthew-smith @matthewborgman @merceyz @messenjer @michaelarestad @mihkeleidast @minimalsm @mranyx @mrhappyma @mrturck @muratcorlu @murphyslaw @nam-hle @ndelangen @neogeek @nguyenyou @nightvision53 @nix6839 @nxtivision @nxtpge @ohana54 @okonet @oligafner @oliviavoler @pankali @passbyval @patrick-mcdougle @paulaxisabel @pd4d10 @pepijnk12 @petermakowski @pewtro @platiplus @pocka @prashantpalikhe @projektgopher @quickgiant @raptor0929 @redbugz @reech-florian @renbaoshuo @rendez @richardnorton @rmariuzzo @rnilss47 @roottool @ropereralk @rvrvrv @sabrinajess @saiichihashimoto @saseungmin @saunved @sebastiankapunkt @shariqx5 @shilman @shippokun @silversonicaxel @simenb @sjwilczynski @smores @sosensible @soso-15315 @souppower @spaceribs @squarism @sriram-km @srmagura @sruthigithub @stefan-schweiger @sterashima78 @sueperstar @sulthannk @sun0day @symmetriq @the-code-monkey @thebuilder @theemattoliver @thibaudav @timur-svoboda @tmeasday @tomastomaslol @tooppaaa @valentinpalkovic @vanessahenderson @vinodkumarsharma276 @vmalay @wesleyboar @winkervsbecks @wivsw @wkich @yahma25 @yanick @yannbf @yhor1e @yngvebn @youngboy @yuri-scarbaci-lenio @zhyd1997