社区案例展示 #5

三月和四月是 Storybook 社区的两个里程碑式的月份！我们一同参加了 Storybook Day，发布了两年来的最大版本（Storybook 7.0），并享受了用户带来的海量新工具、内容和更新。

在此第五期社区精选中，回顾一下 Storybook 的最新和最好消息。

🥳 Storybook 7.0 来了！

您一直期待的更新：Storybook 7.0 现已发布！

最新的 Storybook 带来了改进的方方面面，极大地提升了 Storybook 的开发体验，解锁了您前所未有地构建和发布更精美 UI 的潜力。从焕然一新的设计到更好的测试和文档，再到与一些最流行框架的改进的零配置集成，Storybook 7.0 对前端开发者来说是革命性的。

Storybook 7.0

下一代组件开发和测试

Storybook 博客Michael Shilman

⏪ 回顾 Storybook Day

3 月 14 日，我们一同参加了 Storybook 的首次线上会议：Storybook Day！来自 BBC、The Guardian 和 Monday.com 等组织的顶级开发者分享了他们如何使用 Storybook 来发布 UI，同时 Storybook 的维护者们也介绍了 Storybook 7.0 中所有令人兴奋的新功能。观看完整回放 »

舞台 | Storybook Day

一个关于 Storybook UI 开发未来的免费线上会议。了解 7.0 的新特性，并与世界级的开发者交流。

Storybook Day

📱 Storybook React Native

Storybook 7.0 并不是社区上个月唯一的重大发布。我们还迎来了 Storybook React Native 6.5 的发布。这显著缩小了 Storybook 核心版本与 Storybook React Native 之间的差距，带来了诸如组件故事格式（Component Story Format）、支持控件和参数（controls and args）等特性，并提升了桌面和设备上的性能和易用性。

非常感谢 Daniel Williams 实现这一切。

Storybook for React Native (6.5)

性能改进、支持组件故事格式、Controls 和 Args。此外，还新增了配置文件的格式，以与 Storybook 核心保持一致。

Storybook 博客Daniel Williams

🚀 插件

样式插件

长期以来，在 Storybook 中设置样式工具一直困扰着开发者。在 Storybook 7.0 发布之前，我们交付了解决方案：Storybook 的样式插件。它集成了最流行的样式工具的配置模板，包括 Tailwind、Material UI、Chakra、SASS 和 PostCSS。可以在 Storybook 中包含主题，在它们之间切换，并使用自定义参数在组件或故事级别覆盖它们。

Styling Addon：在 Storybook 中配置样式和主题

使用 Styling Addon 配置你的样式工具并为你的 UI 组件提供主题。

Storybook 博客Shaun Evening

插件套件 — 现已更新支持 Storybook 7.0

Storybook 坐拥蓬勃发展的插件生态系统的核心，为您的构建带来了极大的灵活性和活力。随着 Storybook 7.0 的发布，这种优势将得到进一步增强，我们已经更新了插件套件以支持这一点。

查看更新后的 Storybook 7.0 插件套件.

🙌 聚会

🇺🇸 2023 年 5 月 17 日，西雅图
诚邀西雅图地区的所有 Storybook 用户！我们邀请您参加 5 月 17 日在西雅图举行的前端开发者和设计系统爱好者交流活动/欢乐时光，由 Chromatic 和 Friends of Figma 主办。

这是 活动页面，包含更多详情。务必回复 RSVP，以便我们将您的名字加入抽奖！

🧑‍💻 参与进来

Storybook 是一个开源项目和社区，您总有可以参与贡献的方式！

如果您渴望提供帮助但不确定从何开始，这里有一些我们希望您能帮忙解决的问题。

• GitHub Issue 22176 - 帮助我们的维护者为 Storybook monorepo 添加更严格的类型定义
• 您使用 Vue 吗？您是否在 Storybook 中设置了 Vue 和 Pinia，或者有兴趣帮助我们学习如何做？如果是，请通过 Storybook Discord 服务器 的 #contributing 频道联系我们，并说明您有兴趣参与。
• 查看 GitHub issues 和 Discord 中分享的支持查询，看看您是否能够提供帮助。

对如何开始作为贡献者有疑问？在 Discord 中与社区交流。

📝 资源

Storybook 为前端开发者提供了许多不同的用途。 在 Heyjin Kim 的这篇文章中了解其中一些用例。

想了解更多关于使用装饰器（decorators）的信息但不知从何入手？ Chantastic 在我们的装饰器速成课程中为您解答。了解如何编写和组合装饰器，并了解它们在更广泛的组件驱动设计体系中的作用。

Storybook 7 的众多新特性 在 María Simo 的博客综述中得到了精彩而深入的介绍。 访问 英文版 或 西班牙文版 阅读。

无障碍测试对于构建满足尽可能多用户需求的应用程序至关重要。 Yann Braga 介绍了如何通过 Storybook 和 Storybook 的 a11y 插件来实现这一点。

想重温 Storybook 的知识吗？ 通过 Niamh McCooey 在 JSWorld 上的精彩演讲，回到基础知识。从编写自己的故事开始，Niamh 分享了 Storybook 如何减少障碍、改善协作并提高构建质量。

Storybook 和 Figma 的结合，通过一种良性的单一事实来源，构成了强大的工作流程。 加入 Sophie Boulaaouli 的学习，了解 escape 团队如何利用这一点来开发他们的设计系统。

此外，将 Figma 和 Storybook 结合起来，极大地消除了设计和开发之间的障碍。 通过 Matthew Rea 的文章获得启发，探讨如何使用 GitHub Actions 结合这两个工具来自动化生成设计令牌（design tokens）。