社区展示 #2

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

你参加会议、撰写文章、进行直播、创建新功能并发布 Storybook 插件。但在如此活跃的情况下，很难跟踪所有正在发生的事情。

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

Storybook 6.5 刚刚发布

Storybook 简化了你的前端工作流程。你为细粒度的 UI 状态编写 stories，然后在开发、测试和评审过程中重复使用它们。

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

阅读完整公告 »

组件百科全书来了

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

组件百科全书是组件时代的“查看源代码”。它将来自 85 个项目的 5000 多个组件汇集到一处。这有助于你在自己的工作中浏览、参考和重用组件。学习 Shopify、奥迪、WordPress 等团队构建 UI 的技术。

今天就试试 »

用于设计评审的 Figma 插件

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

借助 Storybook Connect，你可以将 Storybook stories 直接嵌入到 Figma 文件中。这使得比较设计和实现更容易，并加快交付速度。

• 🔗 将 stories 链接到组件变体
• 🕹 在 Figma 中体验实时实现
• 📌 高亮显示可重用组件
• 📐 将 story 与规范进行比较
• 🔐 设置带访问控制的私有项目

阅读文档

用于 VSCode 的 Story Explorer

如果你在使用 Storybook，Story Explorer 是一个必备的 VSCode 扩展。它由 Josh Bolduc 开发，内置了一些便捷功能，可帮助你简化开发工作流程。开箱即用，你可以获得

• ⚡️ 在 VSCode 内实时预览 stories 和文档
• 💡 story 标题的智能提示建议
• 🪀 按需启动 Storybook

插件

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

CSS Custom Properties（CSS 自定义属性）： CSS 变量有助于简化你的样式。由 Gustavo Bissolli 开发的插件会自动检测 UI 中的自定义 CSS 变量，并提供交互式控件供你实时编辑。无需打开开发者工具或修改一行代码。

Variants（变体）： 如果能根据 props/types 自动生成每个组件变体，岂不是很酷？由 Aditya Agarwal 开发的插件会扫描组件的 API，在一个网格中显示所有现有变体，以便快速开发和比较。

Recoil 插件： Recoil 是一个 React 状态管理库，它允许你在应用程序中共享状态，几乎无需或只需很少的样板代码。感谢 Neil Morrisson 开发的插件，你现在可以在 Storybook 面板中编写 stories 并监控应用程序的状态。

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

帮助你入门的资源

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

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

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

由 Yann Braga 制作的精通 Storybook 是一门从零开始教授 Storybook 的课程。你将从学习组件驱动型 UI 的基础知识开始，然后进阶到复杂的工作流程，例如使用 MSW、Testing Library 和 Playwright 进行 UI 测试。

文档是设计系统的关键，因为它促进了组件在团队间的采用。由 Florian Wachter 撰写的文章指导你如何使用 Storybook 和 Figma 生成完善的文档，使团队保持同步。

炫酷集成

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

想在这里露面吗？在你的文章、视频和插件中提及 @storybookjs。