Storybook 5.2
世界一流的设计系统基础设施
Storybook 为诸如 Shopify Polaris、IBM Carbon、Salesforce Lightning、Auth0 Cosmos、Airbnb Lunar 等设计系统提供组件开发支持，并且被超过 25,000 个公共 GitHub 项目使用。
Storybook 5.2 为所有 Storybook 用户简化了组件文档。我们的目标是让像上面那些知名设计系统中普遍存在的最佳实践文档，变得对所有 Storybook 项目都易于实现。我们的第一步是：
📚 DocsPage：零配置组件文档
📝 MDX：统一 stories 和长篇文档
📦 Component Story Format：简单、可移植的组件示例
🖼 Storybook Design System：最佳实践的实践
它还带来了数百项各层面的改进，包括新的插件 API、原生 TypeScript 类型、新的预设、自定义 story 排序、一流的 hooks 支持、性能提升等等。
请继续阅读，了解改进概览、升级说明和项目更新。
设计系统文档，我们来了
今年早些时候，我们设定了一个雄心勃勃的目标，旨在彻底改进组件文档。
“使用 Storybook Docs，您可以快速生成设计系统文档，按需定制，并将最佳实践分享给您的团队。”
5.2 引入了对 Storybook Docs 的官方支持。与 Storybook 的其他部分一样，Docs 支持所有主流框架，包括 React、Vue、Angular、HTML Web Components、Svelte 等等。
DocsPage
5.2 的核心是 DocsPage，这是一个零配置模板，可以从您现有的 stories 自动生成最佳实践的组件文档。
Storybook 的价值主张在于它允许您独立开发 UI 组件。开发者构建stories（示例）来捕获组件的关键状态，而无需担心复杂的依赖关系或不稳定的数据 API。
DocsPage 背后的关键洞察是，这些 stories，作为现代前端团队开发过程中自然产生的数百个成果，可以用来生成出色的文档。与会过时的传统文档不同，stories 是可执行的、可测试的，并且始终与生产代码同步。
DocsPage 自动整合您的 stories、代码注释和组件 props 表，生成漂亮的页面，这些页面融入了设计系统的最佳实践……您无需任何额外的配置！
在DocsPage 发布博文中了解所有详情。
MDX
DocsPage 是免费获得出色文档的绝佳方式。如果您想要更多控制权，MDX 是一种在同一文件中灵活地并排编写 stories 和长篇文档的方式。
下面是如何在 MDX 中编写 stories。这些 stories 与整个 Storybook 生态系统完全兼容。
import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { Badge } from './Badge';
<Meta title="Demo/Badge" component={Badge} />
# Badge
With `MDX` we write longform markdown documentation for our `Badge` component and embed Doc Blocks inline.
<Props of={Badge} />
<Story name="positive">
<Badge status="positive">Positive</Badge>
</Story>MDX 将markdown 文档的便捷性和简洁性与任意JSX 结合起来，这意味着您可以配置组件文档的任意内容和布局。我们还提供丰富的“Doc Blocks”库，用于常见的文档任务，如显示组件 props、颜色面板、排版样本和其他设计标记。
MDX 支持已在 5.2 中可用，正式版本目前在 Storybook 5.3-rc 中发布。要了解更多信息，请参阅Storybook MDX 发布博文。
组件故事格式
为了支持 MDX stories，我们彻底重构了 Storybook 的 story 格式。Component Story Format (CSF) 是一种可移植的开放标准，用于在纯 ES6 模块中编写 Storybook stories。
如果您使用过早期版本的 Storybook，您可能熟悉“经典”的 storiesOf API。
import { storiesOf } from '@storybook/react';
storiesOf('atoms/Button', module)
.add('text', () => <Button>Hello</Button>)
.add('emoji', () => <Button>😀😎👍💯</Button>);在 CSF 中，相同的示例如下所示：
export default { title: 'atoms/Button' };
export const text = () => <Button>Hello</Button>;
export const emoji = () => <Button>😀😎👍💯</Button>;CSF 支持 storiesOf API 的所有功能，但它… 好太多了。它是一种您已经熟悉并喜爱的干净、标准的格式。CSF stories 没有 Storybook 特定的依赖项，这意味着这些 stories 可以移植到任何支持 ES6 的环境。想象一下，能够在整个设计/开发堆栈中无缝重用组件示例：在您的设计工具、文档中，甚至在您的测试套件中！我们正在积极实现这一目标。
作为一个纯声明性标准，MDX 或 Github-flavored Markdown (GFM) 等更高级别的格式可以透明地编译成 CSF。这使得 Storybook 社区能够在保留与整个生态系统兼容性的同时，尝试替代的 story 编写方式。
CSF 是 Storybook 5.2 的默认格式。当您将 Storybook 添加到新项目时，它现在会生成 CSF 格式的模板代码，而不是旧的 storiesOf 格式。当然，考虑到有数万个项目依赖 storiesOf，我们将在可预见的未来继续支持它。
要了解更多信息，请参阅CSF 发布博文。
Storybook 设计系统
将所有这些工作联系在一起的是 Storybook Design System (SDS)。该设计系统构建于改进三个高流量 Storybook 网站的组件复用之上，同时也是使用、内部测试并最终展示 Storybook Docs 可能性的起点。
SDS 源于统一三个不同网站的零散组件的需求：Storybook 网站、Learn Storybook 教程，以及Chromatic（Storybook 维护者提供的视觉测试服务）。
它包含了 25 个生产级功能性 UI 组件和 95 个 stories，Storybook 品牌的设计标记，以及组件/库文档。
SDS 将使 Storybook 社区更容易开发和维护新的营销和文档站点。但它也起到了次要作用：它是 Storybook Docs 本身的设计驱动者和公开参考实现！在这里，您可以找到关于如何开发组件 stories、文档化、测试和发布的最佳实践。
要了解更多信息，请浏览Storybook Design System 或阅读设计系统发布博文。
终于，文档轻松搞定！
Storybook 已经是设计系统工程的首选工具。通过添加 DocsPage、MDX、Component Story Format 和新的 Design System，我们正在改变组件文档，并将设计系统最佳实践带给所有使用 Storybook 的项目。立即在 5.2 中开始使用这些改进，并关注 5.3 版本中更多激动人心的全方位更新。
再（一百个）事
一个拥有750+ 贡献者的蓬勃发展的社区项目最神奇的地方在于，系统在每个层面都在持续改进。
5.2 的其他亮点包括：
✅ 插件 API。Storybook 以其丰富的插件生态系统而闻名，得益于Norbert de Langen 和Filipp Riabchun 基于 hooks 的新 API，在 5.2 中编写插件变得容易多了。新 API 遵循React hooks 模式，使状态管理和通信更简单、更简洁。改进在此处文档化。
✅ TypeScript 支持。TypeScript 最近在 Storybook 的代码库中已经超越了 JavaScript，5.2 包含了大多数包的“原生”TypeScript 类型。我们很快会发布正式公告，但在此期间，您可以在大多数常见情况下摆脱 DefinitelyTyped。感谢Kai Röder、Gaëtan Maisse、Norbert de Langen 以及许多其他积极进行转换的贡献者。
✅ React hooks 支持。得益于微小的修复，Michael Shilman 和Atanas Stoyanov 的工作，Storybook 5.2 在 stories 中为 React hooks 提供了第一类支持。
✅ Story 排序。应广大用户要求，Storybook 现在支持一个 story 排序函数，用于控制导航面板中 story 的顺序。由Robert Snow 贡献，并得到Tom Coleman 的协助。
✅ 性能。Storybook 的 story 切换和大型 storybook 的搜索性能得到了显著提升（约 1000ms => 约 50ms），这得益于Kevin Weber 重现的性能下降问题，以及Michael Shilman 的优化。
✅ 独立模式。Storybook 仍然基于 Webpack，但现在可以通过连接 UI 到外部服务器来实现，这得益于RP Deshaies 的工作，以及Tom Coleman 和Michael Shilman 的协助。我们已经原型化了一个在Parcel bundler 中运行的 5.2 版本 Storybook 实例。这为未来许多有趣的事情奠定了基础。Storybook for Rails，有人吗？
✅ 新的预设。Storybook 5.1 引入了预设：用于 babel、webpack 和插件的一行配置。Storybook 5.2 添加了一个由Igor Davydkin 提供的SCSS 预设，以及一个由Brody McKee 提供的 Beta 版Create-React App 预设，大大改进了 Storybook 内置的 CRA 支持。
升级到 Storybook 5.2
Storybook 5.2 充满了新功能，但据我所知，没有包含任何破坏性更改。如果您是从 3.x/4.x 版本升级，我们有一个5.0 升级指南。如果您已经在使用 5.x 版本，升级非常简单。
npx npm-check-updates '/storybook/' -u
npm install # or yarn如果您是 Storybook 新手，现在是开始的最佳时机。请查看Storybook 教程，了解 React/Angular/Vue 的分步指南。或者直接开始。
cd my-project
npx -p @storybook/cli sb init
yarn storybook一旦您升级到 5.2，为您的项目添加 DocsPage 将非常容易。
npm install @storybook/addon-docs --save-dev # or yarn然后在您的 .storybook/presets.js 文件中添加以下行：
module.exports = ['@storybook/addon-docs/react/preset'];将 react 替换为您选择的框架。有关配置 DocsPage 的更多信息，请阅读addon-docs安装说明。
参与进来
Storybook 的基石是其令人难以置信的开发者和用户社区。该项目最近获得了 41,000 多个 GitHub 星标，这使我们与Rails 和Bitcoin 等传奇项目相提并论。我们共同正在构建组件开发的未来。
我们非常欢迎您的参与，无论您的经验水平如何。如果 Storybook 让您的 UI 开发工作流程变得更容易，请帮助 Storybook 变得更好。您可以贡献新功能、修复 bug 或改进文档。加入我们的 Discord，在 Open Collective 上支持我们，或者直接在 Github 上参与。请👏 鼓掌以支持此帖子，并分享它以帮助更多人发现它。
Storybook 5.2 代码贡献者
@8beeeaaat @adamdoyle @atanasster @autarc @baraalex @benoitdion @bqrichards @chaseadamsio @chris-dura @christianliebel @christoph-fricke @christophehurpeau @codebyalex @crimx@ctavan @danielduan @danrha @darondel-yoobic @debel27 @dogafincan @domyen @dylanpiercey @edumoreira1506 @elliotlarson @emilio-martinez @enagy27 @enuvid @ewgenius @expe-lbenychou @fabianmarinog-turner @fabiradi @forbeslindesay @gaetanmaisse @ghengeveld @gnujim @gongreg @graup @hipstersmoothie @hypnosphi @indigolain @jamesgeorge007 @jballin @jeffgukang @jendowns @jessica-koch @jimmydalecleveland @joeycozza @jounqin @jsomsanith-tlnd @juliamitchelmore @kaelig @kamahl19 @kroeder @leoyli @libetl @lonyele @lucasterra @mariocadenas @matt-tingen @matthewlehner @mrmckeb @ndelangen @ndom91 @nzacca @pascaliske @piperchester @pksunkara @pocka @rembrandtreyes @resource11 @richardtorres314 @robaxelsen @roydipti23 @rwoverdijk @sakito21 @shilman @simenb @smasontst @stephanemw @stereodenis @testerez @thebuilder @tylerlee @wa4-fearless-otter @xyshaokang @zkochan @zol