社区展示 #4

十月充满了有趣的会议。我们在 ViteConf 上宣布了 Storybook 与 Vite 的更紧密集成。我们还在伦敦的 React advanced 会议上见到了许多你们。但我们及时赶回，分享我们通常的文章、视频、插件和工具汇总。

欢迎来到展示 #4！

Storybook 7 之路 — CSF 3

Storybook 7.0 即将到来，随之而来的是组件故事格式 (CSF) 3 将成为默认。CSF3 是我们用于使用 ES 模块声明式编写故事的开放格式的最新版本。它显著减少了样板代码并改进了人体工程学。

Chantastic 整理了一个关于最新标准的 7 分钟速成课程。
立即观看 »

Storybook 中的一流 Vite 支持

Storybook 7.0 还带来了更紧密的 Vite 集成：零配置设置，无需 Webpack，以及更小的安装包大小。

阅读公告 or 观看 Ian 在 ViteConf 上的演讲

使用 Storybook 测试运行器进行代码覆盖

Storybook 测试运行器使您能够使用 play functions 测试组件逻辑。您可以模拟用户点击和按键，并运行断言。

测试运行器现在可以生成覆盖率报告，帮助您找到未测试的边界情况。查看本指南开始使用 »

插件

LTR/RTL 插件 允许您快速切换 HTML dir 属性在 LTR 和 RTL 之间。Mayo Tobita 的插件还使您能够根据地区同步文本方向。

NextAuth.js Mock 插件: NextAuth.js 是一个用于 Next.js 应用的身份验证库。组件可以使用其 useSession hook 访问会话状态。Tom Freudenberg 的插件使您能够在故事中控制此会话状态。

加速 Storybook 工作流的工具

New Story 是一个方便的 CLI 工具，用于为您的组件生成故事。Mohammed Hussam 的 工具接受通过标志传递的 prop 变体，并为每个变体创建故事。

Storybook 片段 是一个 VSCode 扩展，用于快速生成 Stories 脚手架。Jayanta Samaddar 的工具提供 CSF 2 和 3 格式的代码片段。

帮助您入门的资源

Shaun Lloyd 的使命是向您展示如何在 JavaScript 生态系统中使用 Storybook 与各种工具集成。十月份，他发布了两个指南

• 在 Storybook 中使用 Material UI: 演示了如何配置 Storybook 来加载 Material UI 组件并与其 API 进行动态交互。
• 使用 Storybook 进行国际化 (I18n): 向您展示如何使用 Storybook 测试 UI 本地化，以及如何将地区切换器添加到工具栏

设计驱动的全栈开发: 在本次演讲中，David Price（RedwoodJS 的联合创始人）向您展示了如何使用 Storybook 创建组件，然后使用 Redwood Directives 和 Auth 在全栈应用中将它们连接起来。

想说服队友使用 Storybook 吗？ Jerry Hogan 为您提供了帮助。他们最新的文章涵盖了 Storybook 的全部内容。

为 Storybook 添加多主题支持 作者 Yann Braga 撰写的本文是一份详细指南，介绍了如何使用 Storybook 和 Chromatic 测试多种主题。它涵盖了从通过 decorator 加载主题到同时渲染多种主题并运行可视化测试的所有内容。

Storybook 和 Next.js 入门: Daniel Williams 和 Eddie Jaoude 一起，逐步讲解了如何在 Next.js 应用中设置 Storybook，并为 Eddie 的 LinkFree 仓库编写一些故事。

很棒的集成

Shopify Hydrogen + Vite + Storybook？ Hydrogen 是 Shopify 基于 React 构建无头店面的框架。这份 Drew Garrat 撰写的分步指南向您展示了如何将其与 Storybook 结合使用。

Django 是一个流行的基于 Python 的 Web 框架。在 DjangoCon EU 上，Thibaud Colas 谈到了 使用 Django 进行组件驱动开发。在演讲中，他们分享了为 Django 模板编写故事的工作流。

为 British Medical Journal 开发设计系统 是 Paula Cristeam 和 Sean van Oossanen 的案例研究。他们讨论了他们的方法、工具选择和挑战。

在 Web 应用和原生应用中使用相同的 React 组件？Daniel Williams 创建了一个 demo 仓库，展示了如何使用 Next.js + react-native (expo) 构建通用应用。当然，还展示了如何使用 Storybook 隔离构建这些组件。

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