Storybook Addon Headless

Storybook Addon Headless 允许你在 Storybook 中的 stories 里预览来自无头 CMS 的数据。它借助 Axios 和 Apollo Client 分别支持 Restful 和 GraphQL API。每个查询都可以处理使用 Ajv 验证的变量。

升级到 v2

依赖项 Storybook@6 和 Apollo@3 已经发布！

请注意 Storybook story 参数的更改，StoryContext（访问 data 的地方）现在是第二个参数。

示例

查看示例和详细文档

• https://storybook-addon-headless.netlify.com/?path=/story/examples
• https://github.com/ArrayKnight/storybook-addon-headless/tree/master/src/examples
• https://medium.com/arrayknight/how-to-get-real-data-into-storybook-8915f5371b6

无头	故事

入门

安装

首先，你需要将 Headless 作为开发依赖项安装到你的项目中。

npm install --save-dev storybook-addon-headless

注册

然后，通过将其添加到你的 addons.js 文件（位于 Storybook 配置目录中）来将其配置为插件。

import 'storybook-addon-headless'

或者添加到你的 main.js 文件（位于 Storybook 配置目录中）中的 addons 参数。

module.exports = {
    addons: ['storybook-addon-headless'],
    ...,
}

装饰器

根据你项目的需要，你可以添加 withHeadless 装饰器

• 全局添加到 config.js 中，通过 addDecorator(withHeadless({ ... }))
• 局部添加，通过 storiesOf('Name', module).addDecorator(withHeadless({ ... }))
• 通过 CSF 局部添加到 story

export default {
    ...,
    decorators: [withHeadless({ ... })],
    ...,
}

你可以通过 HeadlessOptions 文档和 文档网站 找到选项的详细信息。

选项

{
    graphql?: GraphQLOptionsTypes
    restful?: RestfulOptionsTypes
    jsonDark?: ReactJsonViewThemeKey
    jsonLight?: ReactJsonViewThemeKey
}

此插件底层使用 Axios 处理 Restful 查询，使用 Apollo Client 处理 GraphQL 查询。这些配置是可选的，但你可能希望使用其中一个或两个。这些配置也将与通过参数传递的可选配置合并。

参数

参数通过以下方式局部添加

• storiesOf('Name', module).addParameters({ headless: { ... } })
• add(name, storyFn, { headless: { ... } })
• 通过 CSF

export default {
    ...,
    parameters: {
        headless: { ... }
    },
    ...,
}

你可以在 HeadlessParameters 文档和 文档网站 找到参数的详细信息。

{
    headless: {
        [name]: HeadlessParameter,
        ...,
    }
}

name 是表示查询和数据的字符串。它将显示在查询的标签页中，并作为 story context 中数据对象的访问器。

HeadlessParameter 表示几种不同的可能选项

• string：Restful URL
• PackedDocumentNode：一个 pack 过的 GraphQL Tag DocumentNode
• GraphQLParameters：一个 对象，包含一个作为查询的 PackedDocumentNode 和一些可选参数
• RestfulParameters：一个 对象，包含一个作为查询的 Restful URL 字符串和一些可选参数

由于 DocumentNode 转换为 JSON 的方式，为了保持原始源查询，请使用 pack 实用方法。

组件

为了提供更好的用户体验，插件提供了 Prompt 和 Loader 两个辅助组件。

这些组件完全可选，但可以在必要时帮助引导用户到 Headless 标签页，并提供活动 API 请求状态的反馈。

你可以在示例中找到基本用法。

实验性 （注意：未经测试）

对于不使用 React 但希望使用这些辅助组件的用户，还提供了两种方法。useHeadlessPrompt 和 useHeadlessLoader 将把 React 组件渲染为独立的应用程序，但你必须提供一个由你选择的框架渲染和挂载的 HTML 元素引用。

由 GenUI 制作

这个插件是在我受雇于 GenUI 时开发的，GenUI 是一家位于美国华盛顿州西雅图的软件产品开发公司。有兴趣了解更多、启动新项目或与我们合作吗？请访问 https://www.genui.com/