Storybook 新网站

每隔几年，我们都会刷新 Storybook 的网站，以展示新功能和新兴工作流程。这为新用户提供了生态系统的最新概览，也让我们有机会庆祝社区的成就。双赢。

我很高兴分享 Storybook 的新网站。本文重点介绍了主要变化，并深入探讨了网站的构建方式。请继续阅读或前往网站。

• 🏠 主页改版
• 🤲🏻 社区页面全面改版
• 🎨 品牌焕新
• 📚 技术栈

主页改版

改版后的主页突出了 Storybook 的持续演进以及使其成为可能的蓬勃发展的生态系统。

经过 5 年多每周多次的补丁发布，Storybook 比以往任何时候都更加强大。新主页旨在清晰有趣地传达这些功能。

隔离开发 UI

Storybook 提供了一个工作区，用于隔离构建 UI。它帮助您开发难以触及的状态和边缘情况，而无需运行整个应用程序。

以更少的努力和更稳定地测试 UI

Stories 捕获了 UI 组件的“已知良好”状态。它们是一种实用、可重现的方式来跟踪 UI 边缘情况。

为您的团队记录 UI 以便重用

Storybook 将 UI、示例和文档集中在一个地方。这有助于您的团队采用现有的 UI 模式。

分享 UI 的实际工作方式

Stories 展示了 UI 的实际工作方式，而不仅仅是它们应该如何工作的静态设计。这有助于让所有人了解当前正在生产中的内容。

自动化 UI 工作流程

将 Storybook 添加为 CI 步骤，以自动化 UI 开发工作流程。这有助于您以更少的手工工作更快地交付。

社区页面全面改版

在考虑一个开源项目时，开发者不仅关注功能，还押注其生命力。如果没有活跃社区的支持，项目很快就会销声匿迹。

Storybook 是前端领域增长最快的社区之一。短短几年内，我们已拥有 1,848 名贡献者、400 个集成和数万名用户。 新社区页面列出了您可以参与的所有方式。

更重要的是，我们社区的活力最近将我们推至 GitHub 星标项目排行榜的第 55 位。这使我们与 TensorFlow、Django 和 Rust 等优秀项目并驾齐驱。

品牌焕新

Storybook 的外观和感觉在即将到来的 7.0 版本发布前进行了更新。我们借鉴了 7.0 设计更新中的设计模式。您会注意到新的动画、图标和精致的设计细节。

动画

每个核心工作流程都有一个新的动画，告诉你它是如何工作的。Storybook 为开发者提供了超能力，但仅用文字或静态图像很难解释清楚。视频帮助我们阐明工作流程中的细微之处。

图标更新

Storybook 有一套自定义的 200 个图标，用于整个开源项目。我们从头开始重新绘制了每个图标，以提高视觉清晰度，然后优化了矢量路径以减小大小。

技术栈

Storybook

像我们网站这样的内容站点非常适合Storybook。您可以**隔离**开发内容类型、视口和用户偏好的每种组合，而无需启动后端。每个变体都保存为一个 story，以便在开发和 QA 期间重新查看。

我们为新网站采用了组件驱动 (Component Driven) 方法。首先，我们构建原子组件，然后将它们组合起来组装页面。一旦所有 UI 都隔离构建完成，将其连接到数据源就变得非常简单。您可以在此处浏览我们的 Storybook。

Chromatic

Chromatic 自动化 UI 测试和审查。它在多个浏览器和视口中对每个 story 进行可视化测试，以查找视觉错误。这让我们有信心相信 UI 看起来正确，并且随着时间的推移保持不变。

Gatsby 和 NextJS

Storybook.js.org 作为静态站点交付。每个页面都在服务器上预构建。当用户导航到该页面时，他们将获得一个缓存在 CDN 中的静态文档。实际上，您会获得更快的用户体验，因为无需等待服务器动态构建页面。

我们在网站上同时使用了Gatsby 和NextJS（是的，没错）。每个站点都从我们的设计系统中拉取一组通用组件，因此无论底层框架如何，访问者都能获得流畅的体验。

Framer Motion

Framer Motion 是一个 JavaScript 动画库，允许您以声明方式实现动画。也就是说，您声明动画的关键状态，库会自动处理关键状态之间的过渡动画。

如果您像我一样曾经实现过动画，您可能也曾为命令式地将动画串联起来而苦恼。动画越复杂，调试每个步骤就越麻烦。Framer Motion 解决了这个问题（就像 🪦 Adobe Flash 中的“补间动画”）。

Emotion CSS-in-JS

CSS-in-JS 支持组件级别的样式封装。这在组合组件时可以防止样式冲突，因为样式被分配了唯一的哈希值。它还有助于我们避免由未限定范围的全局样式引起的意外样式污染。

接下来是什么？

我们认为 Storybook 不仅仅是一个工具，它还是一个由维护者、贡献者、用户和工具组成的社区。我们很想听听您对新网站的想法和体验。请在 GitHub 上报告问题。在 Discord #design 频道与维护者聊天。

• 前往新网站
• GitHub: storybookjs/frontpage

由以下人员倾力呈现：@winkervsbecks @domyen(我!) @kylegach @xapaxa @yannbraga