社区展示 #2

Storybook 拥有发展最快的开源社区之一。有超过 1440+ 位贡献者和 13k+ Discord 用户。生态系统的许多关键创新都来自像你这样的社区成员。

您正在参加会议、撰写文章、直播、创建新功能和发布 Storybook 插件。但在这所有热闹的背后，很难追踪正在发生的一切。

我很高兴宣布另一期社区展示。它带来了最新的资源、公告、插件和内容，以帮助您充分利用 Storybook。

Storybook 6.5 刚刚发布

Storybook 简化了您的前端工作流程。您为细粒度的 UI 状态编写故事，然后在开发、测试和审查期间重用它们。

Storybook 6.5 扩展了故事的功能。它在提高核心性能和兼容性的同时，增加了强大的交互测试和设计审查工作流程。

阅读完整公告 »

组件百科全书来了

学习如何构建 UI 的最佳方法是观察您的同行是如何做的。 10 年前，“查看源代码”帮助一代开发者学习了这门技艺。但现在是 2022 年，UI 是用数百个模块化组件构建的。

组件百科全书是组件时代的“查看源代码”。它在一个地方汇集了 85 个项目中的 5000 多个组件。这可以帮助您在自己的工作中浏览、参考和重用组件。学习 Shopify、Audi、WordPress 团队用来构建 UI 的技术

立即试用 »

Figma 插件用于设计评审

保持 UI 开发和设计同步是很棘手的，因为它们在不同的地方表达——设计工具和代码。

使用 Storybook Connect，您可以将您的 Storybook 故事直接嵌入到您的 Figma 文件中。使其更容易比较设计和实现，并加速交付。

• 🔗 将故事链接到组件变体
• 🕹 在 Figma 中使用实时实现
• 📌 突出显示要重用的组件
• 📐 将故事与规范进行比较
• 🔐 设置具有访问控制的私有项目

阅读文档

VSCode 版 Story Explorer

Story Explorer 是如果您正在使用 Storybook，则必备的 VSCode 扩展。由 Josh Bolduc 开发，它捆绑了一些方便的功能，以帮助您简化开发工作流程。开箱即用，您将获得

• ⚡️ 在 VSCode 中实时预览故事和文档
• 💡 故事标题的智能感知建议
• 🪀 按需启动 Storybook

插件

插件生态系统是开发者喜爱 Storybook 的原因之一。在来自我们充满活力的社区的 目录 中有 400 多个插件。开发者使用插件与流行的 JavaScript 库集成、自定义 Storybook 并引入全新的工作流程。查看以下最新插件。

CSS 自定义属性： CSS 变量有助于简化您的样式。 Gustavo Bissolli 的插件自动检测 UI 中的自定义 CSS 变量，并为您提供交互式控件以实时编辑它们。无需打开开发者工具或触摸任何代码行。

变体： 基于 props/types 自动生成每个组件变体不是很酷吗？ Aditya Agarwal 的插件扫描组件的 API，以在网格内显示每个现有变体，以实现快速开发和快速比较。

Recoil 插件： Recoil 是一个 React 状态管理库，允许您在应用程序中以很少或没有样板代码的方式共享状态。感谢 Neil Morrisson 的插件，您现在可以编写故事并在 Storybook 面板中监控应用程序的状态。

交互式代码编辑器： 有时，您只想在代码中进行实验，而无需切换到代码编辑器或开发者工具。 Jeremy Holcomb 的插件将您的 Storybook 故事变成一个编码沙箱。试试 在线演示。

帮助您入门的资源

React Native 和 NX 初学者指南 由 Emily Xiong 教您如何开始使用 NX 和 React Native，启用 Storybook，以及使用 Jest 进行单元测试。

使用 Storybook 构建可扩展的 NextJS 应用程序 由 Alex Eagleson 展示了使用 NextJS 构建可扩展、高性能应用程序、使用 Storybook 进行手动测试以及使用 TailwindCSS 进行自定义样式的完整工作流程。

在 Storybook 中测试可重用的 Angular 组件 由 Tsvetan Ganev 重点介绍了如何使用 Angular 的内容投影来创建灵活、可重用的组件，并使用 CSF3 在 Storybook 中测试它们。

精通 Storybook 由 Yann Braga 提供的课程从头开始教授 Storybook。您将从学习组件驱动的 UI 的基础知识开始，然后深入到复杂的工作流程，例如使用 MSW、Testing Library 和 Playwright 进行 UI 测试。

文档是设计系统的关键，因为它促进了组件在团队中的采用。 Florian Wachter 的文章指导您如何使用 Storybook 和 Figma 生成完美的文档，使团队能够保持同步。

酷炫的集成

1. 对 UI 的状态机感到好奇？ Nick Nisi 分解了 如何设置、编写和使用 Storybook 和 XState 的状态机。
2. 还记得 Drupal 吗？这个早在 2001 年发布的开源 CMS？它仍然存在，并且拥有活跃的社区。 Mateu Aguiló Bosch 启动了一个 Storybook + Drupal 库。它使用 Drupal 的渲染管道来提供更好的开发者体验。
3. AG Grid 是功能最丰富的数据网格库之一。 Tharaka Romesh 为您提供了 如何设置 Storybook 和 AG Grid 的内幕消息。
4. 在她 在 EmberConf 2022 上的演讲 中，Ava Wroten 介绍了 Storybook 的基本原理以及如何使用它们来改进 Ember 中的测试。

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