Contensis 條目選擇器 - Storybook 擴充功能

使用 React、TypeScript、Storybook、Babel 和我們的 Contensis Delivery API 建構而成

我們的 Storybook Contensis 條目選擇器可讓您查看您的自訂 Storybook 元件如何使用來自 CMS 條目的真實資料。

安裝

您可以使用以下指令將 Contensis 條目選擇器擴充功能新增至您的專案：

npm install --save-dev @zengenti/contensis-entry-picker-storybook-addon

或者

yarn add @zengenti/contensis-entry-picker-storybook-addon -D

然後將以下程式碼新增至您的 .storybook/main.js 檔案中

module.exports  =  {
 addons: [
 '@zengenti/contensis-entry-picker-storybook-addon',
],

設定

.ENV

請確保您的 .env 已設定好，這樣我們用於取得條目的自訂 Hook 才知道從哪裡取得這些條目。您的 .env 檔案應具有以下屬性：ACCESS_TOKEN、PUBLIC_URL 和 PROJECT。

在您的 Storybook 元件中，我們需要從 global 變數中取得 entryId - 若要了解更多關於全域變數的資訊，請前往 這裡。

export  const  Template:  ComponentStory<typeof Example>  = (
args:  Props, 
{ globals:  {  entryId  }  }
) =>  {...};

取得這個之後，我們可以使用自訂 Hook 從這個 entryId 取得條目。我們可以這樣做：

務必將物件展開，以便元件可以使用所有 props。請記得從 @zengenti/contensis-entry-picker-storybook-addon 匯入 useGetEntryByEntryId

import  { useGetEntryByEntryId }  from  '@zengenti/contensis-entry-picker-storybook-addon';

export  const  Template:  ComponentStory<typeof Example>  = (
args:  Props,
{ globals:  {  entryId  }  }
) =>  {
const  entry  =  useGetEntryByEntryId(entryId);
return  <Example  {...{  ...args,  ...entry }}  />;
};

很好，您的 Storybook 元件快完成了，我們現在可以使用 Template.args 來指定我們想要傳回的 entries。我們使用 contentTypes arg 來做到這一點。

重要的是 contentTypes arg 必須是字串陣列

Template.args =  {
 contentTypes: ['blogPost', 'pot', 'plant'],
}

現在我們都設定好了，可以繼續執行 Storybook，使用 npm run storybook 或 yarn storybook。當這在瀏覽器中開啟時，前往 Contensis 條目選擇器標籤。在這裡您將看到一個下拉式選單，可供您選擇條目。點擊其中一個會讓您的元件可以使用它的資料。🎉