Storybook 是行业标准的 UI 开发工作台，用于组件和页面开发。BBC、Netflix、Twitter 以及数千个其他团队都在使用它。我们的目标是让顶尖前端团队使用的工具和技术惠及所有人。

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

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

2022 年回顾

2022 年对 Storybook 来说是具有里程碑意义的一年。我们对性能、稳定性、兼容性、测试和文档进行了全面改进。最终以 7.0 beta 版本达到顶峰，该版本集成了数月来的改进，旨在让 UI 开发更愉快、更高效。

性能
Storybook 的按需架构，结合懒加载编译和依赖预打包，显著提高了开发启动时间。相比默认的 6.x 配置，Webpack 和 Vite 项目的速度应该能提升一倍。

稳定性
我们建立了一个“预警系统”，以在广泛的项目类型、依赖项和配置矩阵上测试 Storybook。这让您对 Storybook 的可用性充满信心——它能够正常工作，并且将继续与您喜欢的工具协同工作。

兼容性
我们发布了框架 API，以使集成更加直接且无需配置。这为 Vite 和 NextJS 提供了一流支持，SvelteKit 支持正在进行中，并且社区也在积极为 Remix、Remix、Qwik、SolidJS 等新框架做出贡献。

测试
当您编写 stories 时，您将免费获得测试。我们通过模拟用户行为（点击、悬停、键盘输入）的交互测试来演进 Storybook 的测试方法。这些测试在真实浏览器中并行运行，支持开发和 CI 环境。

尽管交互测试是 Storybook 的一项新功能，但它已经迅速普及。在过去一年中，addon-interactions 的每周 npm 下载量飙升至 100 万以上。同样，test runner 的每周下载量也增长到 10 万以上。

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

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

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。您可以通过监视模式在本地开发环境或 CI 中运行它。

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

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

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

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

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

组件百科
我们今年最大的社区发布是Component Encyclopedia，这是一个包含来自 Airbnb、Microsoft 和 Zendesk 等公司 6,000 多个组件的目录。它让您可以一窥顶级团队如何构建组件以及如何组织其 Storybook，以便您在构建自己的 UI 时可以参考。

2023 年的未来展望

我们在兼容性、文档和测试方面进行了重大改进，这些改进都建立在今年的工作基础之上。我们将继续优先考虑性能和稳定性，直到 Storybook 能够即时启动并且在升级过程中始终保持稳定。

7.0 发布和 Storybook Day
7.0 是我们两年来发布的首个主要版本。它包含了数百项改进、全新的设计，并对代码库的关键部分进行了性能和稳定性方面的优化。我们目前处于 beta 测试阶段。

为庆祝 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 不同，其发展步伐并不一致。在过去的几个月里，我们一直在幕后努力，将 7.0 的最佳功能带到 React Native：组件故事格式、自动生成的文档和控件、loaders/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