
社群展示 #5
回顾所有近期激动人心的更新。此外,还有社区提供的精彩新学习资源!

三月和四月是 Storybook 社区的两个里程碑式的月份!我们齐聚 Storybook Day,发布了两年来的最大版本 (Storybook 7.0),并享用了来自用户的海量新工具、内容和更新。
在这第五期社区展示中,赶快了解 Storybook 世界中最好最新的消息吧。
🥳 Storybook 7.0 来了!
这是大家一直等待的更新:Storybook 7.0 终于来了!
最新的 Storybook 带来了改进,几乎提升了 Storybook 开发者体验的方方面面,释放了您构建和交付比以往更精致的 UI 的潜力。从焕然一新的设计到更好的测试和文档,再到与一些最流行框架的改进和零配置集成,Storybook 7.0 对于前端开发者来说是颠覆性的。

⏪ 回顾 Storybook Day
3 月 14 日,我们齐聚 Storybook 首次在线大会:Storybook Day!世界一流的开发者分享了他们如何在 BBC、The Guardian 和 Monday.com 等组织中使用 Storybook 交付 UI,而 Storybook 维护者则重点介绍了 Storybook 7.0 中所有令人兴奋的内容。观看完整回放 »

📱 Storybook React Native
Storybook 7.0 并非上个月社区唯一的重大发布。我们还迎来了 Storybook React Native 6.5。这有力地缩小了 Storybook 核心版本与 Storybook React Native 之间的差距,带来了 Component Story Format 等特性,引入了对 controls 和 args 的支持,并增强了在桌面和设备上的性能和易用性。
特别感谢 Daniel Williams 将其变为现实。

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

插件套件 — 现已更新支持 Storybook 7.0
Storybook 位于蓬勃发展的插件生态系统的核心,它为您的构建带来了极大的多样性和活力。Storybook 7.0 将进一步深化这一点,我们已经更新了插件套件以使其成为可能。
🙌 线下活动
🇺🇸 西雅图,2023 年 5 月 17 日
诚邀所有西雅图地区的 Storybook 用户!我们邀请您参加由 Chromatic 和 Friends of Figma 于 5 月 17 日在西雅图举办的前端开发者和设计系统爱好者的交流活动 / 欢乐时光。
这是包含更多详细信息的活动页面。请务必 RSVP,以便我们将您的名字加入抽奖名单!
🧑💻 参与贡献
Storybook 是一个开源项目和社区,您总有方法可以参与贡献!
如果您热心提供帮助,但不确定从何开始,这里有一些我们希望您提供帮助的问题。
- GitHub Issue 22176 - 帮助我们的维护者为 Storybook monorepo 添加更严格的类型定义
- 您使用 Vue 吗?您是否在 Storybook 中设置了 Vue 和 Pinia,或者您有兴趣帮助我们学习如何设置吗?如果是,请通过Storybook Discord 服务器中的 #contributing 频道联系我们,并说明您有兴趣参与贡献
- 查看 GitHub issues 和 Discord 中分享的支持查询,看看您是否能提供帮助
关于如何开始作为贡献者有问题吗?在 Discord 中与社区聊天。
📝 资源
Storybook 对前端开发者有许多不同的用途。在 Heyjin Kim 的这篇文章中了解其中一些用例。
想了解更多关于使用 decorators 的信息但不知道从何开始?Chantastic 在我们的 decorators 速成课中为您解答。了解如何编写和组合 decorators,并了解它们在更广泛的组件驱动设计体系中所扮演的角色。
Storybook 7 的众多新特性在 María Simo 的博客概述中得到了深入的介绍。查看英文版或西班牙文版。
可访问性测试对于构建满足尽可能多用户需求的应用程序至关重要。Yann Braga 介绍了如何通过 Storybook 和 Storybook 的 a11y 插件进行此操作。
想温习 Storybook 的知识吗?通过 Niamh McCooey 在 JSWorld 上精彩的演示回到基础。从编写自己的 stories 开始,Niamh 分享了 Storybook 如何减少阻碍、改善协作并提高构建质量。
Storybook 和 Figma 的结合支撑起一个强大的工作流程,拥有良性的单一事实来源。与 Sophie Boulaaouli 一起了解 escape 团队如何利用这一点来开发他们的新设计系统。
此外,将 Figma 和 Storybook 结合使用可以大大减少设计和开发之间的障碍。从 Matthew Rea 的文章中获取灵感,探索如何将这两个工具与 GitHub Actions 结合使用,以自动化设计 token 的生成。