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 上 Star 数排名第 55 位的项目。这使我们与 TensorFlow、Django 和 Rust 等令人难以置信的项目并驾齐驱。

品牌焕新

Storybook 的外观和感觉焕然一新，以迎接即将到来的 7.0 版本。我们借鉴了 7.0 设计更新的设计模式。你会注意到新的动画、图标和精致的设计细节。

动画

每个核心工作流程都有一个新的动画，告诉你它是如何工作的。Storybook 赋予开发人员超能力，但仅用文字或静态图像来解释这一点可能很棘手。视频帮助我们阐明工作流程中的细微差别。

图标焕新

Storybook 拥有一套 200 个自定义图标，这些图标在整个开源项目中使用。我们从头开始重新绘制每个图标以提高视觉敏锐度，然后优化矢量路径以减轻重量。

技术栈

Storybook

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

我们为新网站使用了组件驱动的方法。首先，我们构建了原子组件，然后将它们组合在一起以组装页面。一旦所有 UI 都在隔离环境中构建完成，就可以直接将其连接到数据源。在此处浏览我们的 Storybook here。

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 带来