Storybook 无头插件

Storybook 无头插件允许您在 Storybook 的故事中预览来自无头 CMS 的数据。它借助 Axios 和 Apollo Client 分别支持 Restful 和 GraphQL API。每个查询都可以处理变量，这些变量使用 Ajv 进行验证。

升级到 v2

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

请注意 Storybook 故事参数的变化，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 中本地应用于故事

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 是表示查询和数据的字符串。它将在查询的选项卡中显示，并在故事上下文中作为数据对象上的访问器。

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

• string：Restful URL
• PackedDocumentNode：一个 packed 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/ 了解详情。