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，该参数可以是一个包含名称和链接的元素数组，或者只是一个链接字符串。对于链接，您可以使用 Zeplin 组件/屏幕的完整 web URL 或 app 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