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 集成查看链接到您的 stories 的 Zeplin 组件。
使用 Zeplin Web 链接
//.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：手动链接单个 stories
Storybook Zeplin 将参数 zeplinLink 作为一个元素数组，每个元素包含一个名称和链接，或者仅包含链接字符串。对于链接，您可以使用 Zeplin 组件/屏幕的完整 Web URL 或应用 URI。
在一个文件中为所有 stories 添加 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",
};
为一个 story 添加多个 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 访问令牌
要访问您的 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
