社区展示 #1

Storybook 社区正在快速发展！拥有超过 1440 位贡献者和 1.2 万名 Discord 成员，生态系统中最酷的项目大多来自您。

大家都在撰写文章、直播、构建插件和发明新的 Storybook 功能。但随着一切都在进行中，可能很难跟上。

这就是为什么我很高兴推出每月社区展示，以分享本月最受欢迎的资源、插件和公告。

预发布

Figma 内置 Storybook？

交叉引用编码的 UI 和设计一直很麻烦，因为它们存在于不同的工具中。借助 Storybook 的即将推出的 Figma 集成，您可以将故事嵌入 Figma 文件中。敬请关注未来两周内的 Beta 版发布！

交互测试现已进入 Beta 版！

热门观点： UI 测试应该在浏览器中运行。谁真的喜欢在他们的终端中使用 HTML blob 调试测试失败？

现在您可以编写交互脚本（单击、键入、拖动等）并在故事本身中编写断言。然后，Storybook 在浏览器中执行这些测试。如果测试失败，您可以使用浏览器开发人员工具对其进行调试。整个过程由 Jest、Playwright 和 Testing Library 提供支持。

观看维护者 Yann Braga 的演示视频。或者查看来自 Philipp Melab 关于 使用组件故事格式 3 进行交互测试的文章。

组件百科全书 Beta 版

我们的使命是编目世界上的 UI 组件。

为什么呢？ 将其视为组件时代的“查看源代码”。通过查看其他人正在做什么来学习更容易。

我们推出了包含 3,490 个组件和 44 个项目的 Beta 版。但是队列中还有数十个项目，还有更多我们甚至不知道的项目。我们需要您的帮助来对网站进行 QA 并提交更多项目。

插件

自从我们推出插件目录以来，已经整整一年了。在那段时间里，大家已经发布了超过 160 个新插件。

一些插件引入了新功能、工作流程或与您最喜欢的 JS 库集成。而另一些插件只是为 Storybook 带来了派对 🎶

SWC： SWC 是一种超快的基于 Rust 的编译和捆绑工具。Karibash 的插件通过将 Webpack 构建器换成 SWC 来加快 Storybook 构建时间。它由我们在 6.3 中发布的插件构建器 API 启用，该 API 允许您将默认构建器与 Vite、Snowpack 等下一代工具交换。

LaunchDarkly： 功能标志是 Beta 测试功能而不会破坏所有用户应用程序的绝佳方式。感谢 Kodia 的插件，您现在可以使用功能标志编写故事，并将这些功能标志传递到您的组件中。

Spotify： 有时一个故事需要一个配乐才能栩栩如生。Alessandro Rabitti’s Spotify 插件将 Spotify 播放列表、专辑、歌曲或播客剧集嵌入到 Storybook 面板中。

React Runner： Neo Nie’s 插件将您的故事变成一个实时的交互式游乐场——由 react-runner 提供支持。它可以非常简单地原型化 UI，而无需启动本地开发环境。试用 实时演示。

测量视口： 有时您只想知道视口的尺寸。这正是 Andrew Harvard's 插件所做的。将其打开即可查看视口的宽度和高度。

帮助您入门的资源

Storybook 入门指南 作者：Diego Salinas Gardón。它教您如何以故事思维思考，并涵盖所有核心概念，例如设置、配置 CSS 和编写故事。

您更喜欢视频教程而不是文本吗？来自 Jetbrains 的 Paul Everitt 在短短 5 分钟内涵盖了 Storybook 基础知识！查看 Storybook 开箱视频。

在 Women Who Code Portland，Tricia Leach 展示了跨职能团队（包括产品管理、设计、QA、开发）如何使用 Storybook 构建设计系统。Storybook 简介 研讨会涵盖了所有 Storybook 基础知识，并包括一个实时代码演示。

设计系统是 Storybook 的常见用例。您带来组件，Storybook 带来开发环境、文档生成和自动化测试。Purrfect.dev 的关于 构建和维护设计系统的播客讨论了常见的陷阱和误解。嘉宾包括 Michael Chan、Brittney Postma 和 Alex Patterson。

酷炫集成

1. 您是否正在尝试为进行 API 调用的组件或页面编写故事？大多数人使用 Mock Service Worker 来 模拟 网络请求。 Phelipe Teles 分解了如何将 Mock Service Worker 添加到 React Native 项目。
2. 对人工智能感到兴奋吗？您可能听说过 Tensorflow。Kate Inyeong Kim 在 InfiniteRed 启动了一个 Tensorflow + React + Storybook 库，展示了如何将 AI 引入前端。
3. 在 Microsoft，他们正在推出一个名为 FAST elements 的 Web 组件库。Burton Smith 已经将 FAST elements 与 Storybook 集成。
4. Storybook 开箱即用地附带了 NX，这是一种广泛使用的 Angular Monorepo 工具。您可以在 NX Angular + Storybook 演讲中了解如何设置它，演讲者是 Ankita Sood 和 Kyler Johnson。
5. 对于组件库作者，请查看 Rubén Rodríguez 关于 如何构建 Angular 组件库 的文章，或查看如何使用 Vanilla Extract + NX 构建设计系统，作者是 Ryosuke。
6. 还记得 Ember 吗？这个 UI 框架于 2011 年从 jQuery 和 Rails 生态系统中分离出来。11 年后，Ember 仍然是一个活跃的开源项目。在今年的 EmberFest 上，Djamel Bendaoud 发表了关于 Ember 和 Storybook 的会议演讲。

想在这里展示吗？在您的文章、视频和插件中提及 @storybookjs。