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	字串	您的 contentful 空間的空間 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 的形式提供。您可以使用此裝飾器修改載入的條目資料，然後再將其傳遞給您的元件，以符合您的元件 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 預覽」的設定
• 將 URL 貼到（新增參數）

「Contentful 預覽」面板將為您提供元件的相符 URL，包含所有動態參數。

開發

開發指令碼

• npm run start 以監看模式執行 babel 並啟動 Storybook
• npm run build 建置並封裝您的擴充功能程式碼