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 参数，装饰器将被忽略。

手动

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

参数

此附加组件在 contentfulPreview 命名空间下为 Storybook 贡献以下参数

名称	类型	描述	必需
spaceId	字符串	您的 Contentful 空间的 Space ID	是
accessToken	字符串	您 Contentful 空间的访问令牌	是
entryId	字符串	您要预览的内容的条目 ID	是
locale	字符串	您要预览的内容的区域设置	否
host	字符串	Contentful API 的主机（默认为 api.contentful.com	否
livePreview	布尔值	启用实时预览 SDK	否
argsMutator	函数	已加载条目数据的变异器。默认情况下，所有字段将被填充为故事的顶层参数	否

定义参数

您可以通过将 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 UI 内呈现时从 Contentful 获取数据并将其传递给您的组件。

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 提供。您可以使用此装饰器在将已加载的条目数据传递给您的组件之前修改它，以匹配您的组件道具。当用作插件时，默认行为是将所有 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 预览”的设置
• 将 URL 粘贴到（添加参数）

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

开发

开发脚本

• npm run start 以观察模式运行 babel 并启动 Storybook
• npm run build 构建和打包您的附加组件代码