Storybook Zeplin 擴充功能
Storybook 擴充功能，將 Zeplin 資源（例如螢幕和元件）嵌入擴充功能面板中，以改善設計開發工作流程。
連結
需求
Storybook Zeplin 擴充功能 v3 與 Storybook 8 和 Node 版本 >18 相容。對於 Storybook 版本 5-7，請使用 Storybook Zeplin 擴充功能 v2.0.3
開始使用
1. 安裝
適用於 Storybook 8
npm install --save-dev storybook-zeplin
# yarn add -D storybook-zeplin
適用於 Storybook 版本 5-7
npm install --save-dev storybook-zeplin@2.0.3
# yarn add -D storybook-zeplin@2.0.3
2. 在 main.js 中註冊擴充功能
// .storybook/main.js
module.exports = {
addons: ["storybook-zeplin/register"],
};
如果您使用 Storybook@5.0.x
// .storybook/addons.js
import "storybook-zeplin/register";
3. 連結元件
有兩種方式可以執行此操作，您可以將整個 Zeplin 專案或樣式指南連結到您的全域 story 參數（建議），或者逐一連結個別元件。
選項 A：連結整個專案或樣式指南（建議）
將 zeplinLink 新增到 .storybook/preview.js 檔案。此值是指向 Zeplin 中包含相應設計的專案或樣式指南的連結，如下列範例所示。
當提供此參數時，您將使用 Storybook 整合自動檢視連結到您 story 的 Zeplin 元件在擴充功能面板上。
使用 Zeplin 網頁連結
//.storybook/preview.js
export const parameters = {
zeplinLink: "https://app.zeplin.io/project/5e7a6d478204d59183a1c76b",
};
使用 Zeplin 應用程式連結
//.storybook/preview.js
export const parameters = {
zeplinLink: "zpl://project?pid=61f164b064e363a52fbb295f",
};
當擴充功能設定完成後，請檢視以下文章，以了解有關如何在 Zeplin 上初始化 Storybook 整合的更多資訊。
選項 B：手動連結個別 story
Storybook Zeplin 採用 zeplinLink 參數作為包含名稱和連結的元素陣列，或者僅作為連結的字串。對於連結，您可以使用 Zeplin 元件/螢幕的完整網頁 URL 或應用程式 URI。
將 Zeplin 連結新增到檔案中所有 story 的範例
export default {
title: "Button",
component: Button,
parameters: {
zeplinLink: "https://app.zeplin.io/project/5e7a6d478204d59183a1c76b/styleguide/components?coid=5eac833c5f1f2f1cb19f4f19",
},
};
export const Default = () => <Button>Click me</Button>;
export const Secondary = () => <Button secondary>Click me</Button>;
Default.story = {
name: "Primary Button",
};
Secondary.story = {
name: "Secondary Button",
};
將多個 Zeplin 連結新增到 story 的範例
export default {
title: "Button",
component: Button,
};
export const Default = () => <Button>Click me</Button>;
export const Secondary = () => <Button secondary>Click me</Button>;
Default.story = {
name: "Responsive Button",
parameters: {
zeplinLink: [
{
name: "Desktop",
link: "zpl://components?pid=pid1&coid=coid1",
},
{
name: "Tablet",
link: "zpl://components?pid=pid1&coid=coid2",
},
{
name: "Mobile",
link: "zpl://components?pid=pid1&coid=coid3",
},
],
},
};
4. 設定 Zeplin 存取權杖
若要存取您的 Zeplin 資源，您需要提供具有您 Zeplin 帳戶權限的存取權杖。您可以從個人資料頁面的「開發人員」索引標籤建立一個。
當您開啟擴充功能的索引標籤時，擴充功能會提示您設定權杖。此權杖會保留在瀏覽器儲存中，因此每位使用者都需要建立並設定自己的權杖才能透過 Storybook 存取 Zeplin 資源。
（選用）使用環境變數設定存取權杖
如果您想要略過為每位使用者建立權杖，您可以將存取權杖作為名為 STORYBOOK_ZEPLIN_TOKEN 的環境變數提供。您可以在專案的根資料夾中建立 .env 檔案，或者您可以在建置或動態執行 Storybook 時提供環境變數作為命令列參數。
⚠️ 免責聲明
請注意，如果您使用環境變數設定，則任何有權存取 Storybook 執行個體的人都可以檢視存取權杖。為了安全起見，如果第三方可以存取 Storybook 執行個體，請勿使用環境變數。
# .env
STORYBOOK_ZEPLIN_TOKEN="eyJhbGciOiJIUzI1N.."
開發
在個別索引標籤中執行下列命令以開始開發
npm run watch
npm run storybook
注意事項
- 此擴充功能會擷取 Storybook 資料並傳送到父框架，以使 Zeplin 應用程式可以存取 story。如需更多資訊：Zeplin Storybook 整合
授權
MIT © Mert Kahyaoğlu
