社区展示 #1

Storybook 社区发展迅速！拥有超过1440名贡献者和12k名 Discord 成员，生态系统中许多最酷的项目都源于你们。

你们正在撰写文章、进行直播、构建插件以及创造新的 Storybook 功能。但在这一切进行的同时，很难跟上进度。

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

预发布

Figma 中内置 Storybook？

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

交互测试现已进入 Beta 阶段！

热门观点： UI 测试应该在浏览器中运行。谁喜欢在终端中调试带有大量 HTML 的测试失败呢？

现在您可以在 Storybook 本身中编写交互脚本（点击、输入、拖拽等）并编写断言。Storybook 然后在浏览器中执行这些测试。如果测试失败，您可以使用浏览器开发者工具进行调试。这一切都由 Jest、Playwright 和 Testing Library 提供支持。

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

组件百科 Beta 版

我们的使命是编目全球的 UI 组件。

为什么？把它想象成组件时代的“查看源代码”。通过查看别人的做法，学习起来更容易。

我们发布了一个包含 3,490 个组件和 44 个项目的 Beta 版本。但还有几十个项目在排队中，以及许多我们甚至不知道的项目。我们需要您的帮助来测试网站并提交更多项目。

插件

自我们推出插件目录以来已经整整一年了。在此期间，你们共发布了超过 160 个新插件。

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

SWC：SWC 是一个基于 Rust 的超快速编译和打包工具。Karibash 的插件通过将 Webpack 构建器替换为 SWC 来加快 Storybook 的构建时间。这得益于我们在 6.3 中发布的插拔式构建器 API，它允许您用 Vite、Snowpack 等下一代工具替换默认构建器。

LaunchDarkly：功能标志是 Beta 测试功能的绝佳方式，而不会影响所有用户。感谢 Kodia 的插件，您现在可以使用功能标志编写 Storybook，并将这些功能标志传递给您的组件。

Spotify：有时，一个故事需要配乐才能生动起来。Alessandro Rabitti 的 Spotify 插件可以将 Spotify 歌单、专辑、歌曲或播客剧集嵌入到 Storybook 面板中。

React Runner：Neo Nie 的插件将您的 Storybook 故事变成一个实时交互式游乐场——由 react-runner 提供支持。它使得无需启动本地开发环境即可轻松进行 UI 原型设计。试试实时演示。

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

帮助您入门的资源

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 调用的组件或页面编写 Storybook 故事？大多数人使用 Mock Service Worker 来模拟网络请求。Phelipe Teles 详细介绍了如何将 Mock Service Worker 添加到 React Native 项目。
2. 对人工智能感到兴奋？您可能听说过 Tensorflow。InfiniteRed 的 Kate Inyeong Kim 创建了一个 Tensorflow + React + Storybook 库，展示了如何将 AI 应用于前端。
3. 在微软，他们正在推出一个名为 FAST elements 的 Web 组件库。Burton Smith 已经将 FAST elements 与 Storybook 集成。
4. Storybook 内置支持 NX，这是一个广泛使用的 Angular 单仓工具。您可以在 Ankita Sood 和 Kyler Johnson 的 NX Angular + Storybook 演讲中了解如何设置。
5. 对于组件库作者，请查看 Rubén Rodríguez 关于 如何构建 Angular 组件库 的文章，或者查看 Ryosuke 如何使用 Vanilla Extract + NX 构建设计系统。
6. 还记得 Ember 吗？这个 UI 框架于 2011 年从 jQuery 和 Rails 生态系统中脱颖而出。11 年后，Ember 仍然是一个活跃的开源项目。在今年的 EmberFest 上，Djamel Bendaoud 发表了关于 Ember 和 Storybook 的会议演讲。

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