Zeplin

Storybook Zeplin 插件

Storybook 插件，它将 Zeplin 资源（例如屏幕和组件）嵌入插件面板中，以改善设计开发工作流程。

链接

• 演示
• 博客文章
• 突出显示组件

要求

• Storybook@>=5.0.0

此插件应与任何框架一起使用。如果您发现插件无法正常工作的情况，请提交问题。

入门

1. 安装

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

2. 在 main.js 中注册插件

// .storybook/main.js
module.exports = {
    addons: ["storybook-zeplin/register"],
};

如果您使用的是 [email protected]；

// .storybook/addons.js
import "storybook-zeplin/register";

3. 向您的故事添加 Zeplin 链接

Storybook Zeplin 将参数 zeplinLink 作为包含名称和链接的元素数组或仅作为链接字符串。对于链接，您可以使用 Zeplin 组件/屏幕的完整网页 URL 或应用程序 URI。

在文件中向所有故事添加 Zeplin 链接的示例

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 链接的示例

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 应用程序访问故事。更多信息：Zeplin Storybook 集成

许可证

MIT © Mert Kahyaoğlu