Storybook Contentful 预览插件

使用 Contentful 数据预览您的组件。将您的 Storybook 连接到 Contentful 并实时预览您的组件及真实数据。

安装

首先，安装软件包。

npm install -D storybook-addon-contentful-preview

然后，将其注册为插件，位于 .storybook/main.{js|ts}中。

export default {
  addons: ['storybook-addon-contentful-preview'],
};

用法

插件

注册后，此插件会自动为您的 Storybook 添加所需的装饰器。然后您可以使用 contentfulPreview 参数将您的 Storybook 连接到 Contentful。如果未设置 contentfulPreview 参数，则会忽略这些装饰器。

手动

如果您想对行为有更多控制权，也可以手动使用这些装饰器。

参数

此插件为 Storybook 提供了以下参数，位于 contentfulPreview 命名空间下

名称	类型	描述	必需
spaceId	string	您的 Contentful 空间的 ID	是
accessToken	string	您的 Contentful 空间的访问令牌	是
entryId	string	您要预览的内容的条目 ID	是
locale	string	您要预览的内容的区域设置	否
host	string	Contentful API 的主机（默认为 api.contentful.com）	否
livePreview	boolean	启用实时预览 SDK	否
argsMutator	function	已加载条目数据的修改器。默认情况下，所有字段将变为故事的顶级参数。	否

定义参数

您可以通过将 contentfulPreview 参数添加到您的 .storybook/preview.js 文件的 globals 对象中，来全局设置参数（示例）。

import type {Preview} from "@storybook/react";

const preview: Preview = {
  parameters: {
    globals: {
      contentfulPreview: {
        space: "<space-id>",
        accessToken: "<access-token>",
        host: 'preview.contentful.com',
      }
    }
  },
};

export default preview;

您也可以为每个故事设置参数，只需将 contentfulPreview 参数添加到故事中（示例）

export default {
  title: 'Button',
  parameters: {
    contentfulPreview: {
      spaceId: 'your-space',
    }
  }
}

在故事级别上设置的参数将覆盖全局参数。

装饰器

withContentful

当您想使用 Contentful 数据预览组件时，可以使用 withContentful 装饰器。此装饰器将从 Contentful 获取数据并将其传递给您的组件。

import {withContentful} from 'storybook-addon-contentful-preview';

export default {
  title: 'Button',
  decorators: [withContentful],
  parameters: {
    contentfulPreview: {
      spaceId: 'your-space',
      accessToken: 'your-access-token',
      entryId: 'your-entry-id',
    }
  }
};

withContentfulLivePreview

当您想使用 Contentful 数据预览组件时，可以使用 withContentfulLivePreview 装饰器来启用实时预览 SDK。此装饰器将从 Contentful 获取数据，并在 Contentful UI 中渲染时将其传递给您的组件。

import {withContentful, withLivePreview} from 'storybook-addon-contentful-preview';

export default {
  title: 'Button',
  decorators: [withLivePreview, withContentful],
  parameters: {
    contentfulPreview: {
      spaceId: 'your-space',
      accessToken: 'your-access-token',
      entryId: 'your-entry-id',
      livePreview: true,
    }
  }
};

仅结合 withContentful 装饰器进行过测试

withEntryArgMutator

当您想修改已加载的条目数据时，可以使用 withEntryArgMutator 装饰器。已加载的条目将作为 args.contentful_entry 提供。您可以使用此装饰器在将已加载的条目数据传递给您的组件之前进行修改，以匹配您的组件 props。当作为插件使用时，默认行为是将所有 fields 作为故事的顶级参数填充。

import {withContentful, withEntryArgMutator} from 'storybook-addon-contentful-preview';

export default {
  title: 'Button',
  decorators: [withEntryArgMutator, withContentful],
  parameters: {
    contentfulPreview: {
      spaceId: 'your-space',
      accessToken: 'your-access-token',
      entryId: 'your-entry-id',
      livePreview: true,
      // optionally, you can use the argsMutator param to modify the default behaviour
      argsMutator: (entry, args) => {
        return {
          ...args,
          // ...entry.fields  <-- default behaviour
          headline: entry.fields.title
        }
      }
    }
  }
};

Contentful 预览

要在 Contentful 应用中预览组件，最好使用 Storybook 的全屏模式。

• 在浏览器中打开 Storybook
• 打开全屏模式
• 复制 URL
• 打开 Contentful
• 前往“Contentful Preview”的设置
• 粘贴 URL 到（添加参数）

“Contentful Preview”面板将为您提供组件的匹配 URL，包括所有动态参数。

开发

开发脚本

• npm run start 在 watch 模式下运行 babel 并启动 Storybook
• npm run build 构建和打包您的插件代码