Zeplin

Storybook Zeplin 擴充功能

Storybook 擴充功能，可將 Zeplin 資源（例如螢幕和元件）嵌入擴充功能面板中，以實現更好的設計開發工作流程。

連結

• 示範
• 部落格文章
• 重點元件

需求

• Storybook@>=5.0.0

此擴充功能應適用於任何框架。如果您發現有擴充功能無法運作的情況，請開啟 issue。

開始使用

1. 安裝

npm install --save-dev storybook-zeplin
# yarn add -D storybook-zeplin

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

Storybook Zeplin 接受參數 zeplinLink 作為一個包含名稱和連結的元素陣列，或是僅作為連結的字串。對於連結，您可以使用完整的網頁 URL 或 Zeplin 元件/螢幕的應用程式 URI。

將 Zeplin 連結新增至檔案中所有 stories 的範例

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 專案或樣式指南連結新增至您的全域參數

當提供專案或樣式指南連結作為 zeplinLink 時，擴充功能會顯示已連線的元件。如果您正在使用 Zeplin 的連線元件功能，您可以像以下範例中一樣全域提供連結。

//.storybook/preview.js
export const parameters = {
    zeplinLink: "https://app.zeplin.io/project/5e7a6d478204d59183a1c76b",
};

5. 設定 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 應用程式可以存取 stories。如需更多資訊：Zeplin Storybook 整合

授權

MIT © Mert Kahyaoğlu