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 等）所做的工作。

测试
当您编写 stories 时，您将免费获得测试。我们通过模拟用户行为（点击、悬停、键盘）的交互测试改进了 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。在本地开发环境或 CI 中通过 watch 模式运行它。

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

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

文档
Storybook 是最流行的 UI 文档工具，被成千上万的项目使用。我们将 Storybook 升级到 MDX 2，这是一种更简洁、更具表现力的方式，用于混合 markdown 和 JSX 以获得丰富的文档。

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

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

组件百科全书
我们今年最大的社区发布是 组件百科全书，这是一个来自 Airbnb、微软和 Zendesk 等公司的 6,000 多个组件的目录。它可以让您了解顶级团队如何构建组件并构建他们的 Storybooks，供您在构建自己的 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 不同，因为工具链与 Web 不同。在过去的几个月中，我们一直在幕后努力将 7.0 的最佳功能引入 React Native：组件 Story Format、自动生成的文档和控件、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 (me!), 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