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 [email protected]
# yarn add -D [email protected]
2. 在 main.js 中注册插件
// .storybook/main.js
module.exports = {
addons: ["storybook-zeplin/register"],
};
如果您使用的是 [email protected]
// .storybook/addons.js
import "storybook-zeplin/register";
3. 链接组件
有两种方法可以做到这一点，您可以将整个 Zeplin 项目或样式指南链接到您的全局故事参数（推荐）或逐个链接单个组件。
选项 A：链接整个项目或样式指南（推荐）
将 zeplinLink 添加到 .storybook/preview.js 文件中。此值是到包含 Zeplin 中相应设计的项目或样式指南的链接，如下例所示。
提供此参数后，您将自动在插件面板上查看链接到故事的 Zeplin 组件，使用 Storybook 集成。
使用 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：手动链接单个故事
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 访问令牌
要访问您的 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
