{"id":13343928,"url":"https://github.com/zeplin/storybook-zeplin","last_synced_at":"2025-04-12T09:36:52.406Z","repository":{"id":42537755,"uuid":"260968655","full_name":"zeplin/storybook-zeplin","owner":"zeplin","description":"Storybook addon to view Zeplin resources in story panel","archived":false,"fork":false,"pushed_at":"2024-07-19T08:41:41.000Z","size":1535,"stargazers_count":116,"open_issues_count":17,"forks_count":16,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-26T04:34:32.685Z","etag":null,"topics":["storybook","storybook-addon","zeplin"],"latest_commit_sha":null,"homepage":"https://storybook-zeplin.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zeplin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"storybook-zeplin"}},"created_at":"2020-05-03T16:08:42.000Z","updated_at":"2024-09-15T13:49:36.000Z","dependencies_parsed_at":"2024-03-21T13:30:39.559Z","dependency_job_id":"917b7bf9-9ad5-4c6f-aa9a-4163db604bb0","html_url":"https://github.com/zeplin/storybook-zeplin","commit_stats":null,"previous_names":["mertkahyaoglu/storybook-zeplin"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeplin%2Fstorybook-zeplin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeplin%2Fstorybook-zeplin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeplin%2Fstorybook-zeplin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeplin%2Fstorybook-zeplin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeplin","download_url":"https://codeload.github.com/zeplin/storybook-zeplin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248547120,"owners_count":21122450,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["storybook","storybook-addon","zeplin"],"created_at":"2024-07-29T19:32:05.463Z","updated_at":"2025-04-12T09:36:52.385Z","avatar_url":"https://github.com/zeplin.png","language":"TypeScript","funding_links":["https://opencollective.com/storybook-zeplin"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003cimg src=\"https://raw.githubusercontent.com/mertkahyaoglu/storybook-zeplin/master/logo.png\" width=\"280\" alt=\"Zeplin Storybook Addon\"/\u003e\n  \u003cbr/\u003e\n  \u003cbr/\u003e\n\n[![npm version](https://badge.fury.io/js/storybook-zeplin.svg)](https://badge.fury.io/js/storybook-zeplin)\n[![Monthly download](https://img.shields.io/npm/dm/storybook-zeplin.svg)](https://www.npmjs.com/package/storybook-zeplin)\n[![GitHub license](https://img.shields.io/github/license/mertkahyaoglu/storybook-zeplin.svg)](https://github.com/mertkahyaoglu/storybook-zeplin/blob/master/LICENSE)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/d8195739-51da-46b6-b786-780b156b1025/deploy-status)](https://app.netlify.com/sites/storybook-zeplin/deploys)\n[![Open Collective](https://img.shields.io/opencollective/backers/storybook-zeplin)](https://opencollective.com/storybook-zeplin)\n\n\u003c/div\u003e\n\n\u003chr/\u003e\n\n## Storybook Zeplin addon\n\n[Storybook](https://github.com/storybooks/storybook) addon that embeds Zeplin resources such as screens and components in the addon panel for better design-development workflow.\n\n  \u003cimg src=\"https://raw.githubusercontent.com/mertkahyaoglu/storybook-zeplin/master/screenshot.png\" width=\"100%\" alt=\"Zeplin Storybook Addon\"/\u003e\n\n## Links\n\n- [Demo](https://storybook-zeplin.netlify.app)\n- [Blog Post](https://blog.zeplin.io/storybook-and-zeplin-a-new-integration-228951e336e9)\n- [Highlight Components](https://blog.zeplin.io/announcing-improved-storybook-integration-highlight-components)\n\n## Requirements\n\nStorybook Zeplin addon v3 is compatible with Storybook 8 and Node Version \u003e18. \nFor Storybook versions 5-7, please use Storybook Zeplin addon v2.0.3\n\n## Getting started\n\n### 1. Install\n\nFor using Storybook 8:\n```sh\nnpm install --save-dev storybook-zeplin\n# yarn add -D storybook-zeplin\n```\n\nFor using Storybook version 5-7:\n```sh\nnpm install --save-dev storybook-zeplin@2.0.3\n# yarn add -D storybook-zeplin@2.0.3\n```\n\n### 2. Register the addon in `main.js`\n\n```js\n// .storybook/main.js\nmodule.exports = {\n    addons: [\"storybook-zeplin/register\"],\n};\n```\n\nIf you're using Storybook@5.0.x:\n\n```js\n// .storybook/addons.js\nimport \"storybook-zeplin/register\";\n```\n\n### 3. Linking components\n\nThere are two ways to do this, you can link your entire Zeplin project or styleguide to your global story parameters (recommended) or link individual components one by one.\n\n#### Option A: Linking entire project or styleguide (Recommended)\n\nAdd `zeplinLink` to `.storybook/preview.js` file. This value is a link to the project or styleguide that contains correspondent designs in Zeplin as shown below examples.\n\nWhen this parameter is provided, you will automatically view Zeplin components linked to your stories on the addon panel using the Storybook integration.\n\nUsing a Zeplin web link\n```js\n//.storybook/preview.js\nexport const parameters = {\n    zeplinLink: \"https://app.zeplin.io/project/5e7a6d478204d59183a1c76b\",\n};\n```\n\nUsing a Zeplin app link\n```js\n//.storybook/preview.js\nexport const parameters = {\n    zeplinLink: \"zpl://project?pid=61f164b064e363a52fbb295f\",\n};\n```\n\nWhen the addon setup is done, go and check out below articles to learn more about how to initialize Storybook integration on Zeplin.\n- [Connecting your Storybook instance with Zeplin](https://support.zeplin.io/en/articles/5674596-connecting-your-storybook-instance-with-zeplin)\n- [Linking your components in Zeplin with stories in Storybook](https://support.zeplin.io/en/articles/5679812-linking-your-components-in-zeplin-with-stories-in-storybook).\n\n#### Option B: Linking individual stories manually\n\nStorybook Zeplin takes parameter `zeplinLink` as an array of elements containing a name and a link or just a string for the link.\nFor the link, you can use full web URL or app URI of Zeplin components/screens.\n\nExample of adding Zeplin link to all stories in a file:\n\n```jsx\nexport default {\n    title: \"Button\",\n    component: Button,\n    parameters: {\n        zeplinLink: \"https://app.zeplin.io/project/5e7a6d478204d59183a1c76b/styleguide/components?coid=5eac833c5f1f2f1cb19f4f19\",\n    },\n};\n\nexport const Default = () =\u003e \u003cButton\u003eClick me\u003c/Button\u003e;\nexport const Secondary = () =\u003e \u003cButton secondary\u003eClick me\u003c/Button\u003e;\n\nDefault.story = {\n    name: \"Primary Button\",\n};\n\nSecondary.story = {\n    name: \"Secondary Button\",\n};\n```\n\nExample of adding multiple Zeplin links to a story:\n\n```jsx\nexport default {\n    title: \"Button\",\n    component: Button,\n};\n\nexport const Default = () =\u003e \u003cButton\u003eClick me\u003c/Button\u003e;\nexport const Secondary = () =\u003e \u003cButton secondary\u003eClick me\u003c/Button\u003e;\n\nDefault.story = {\n    name: \"Responsive Button\",\n    parameters: {\n        zeplinLink: [\n            {\n                name: \"Desktop\",\n                link: \"zpl://components?pid=pid1\u0026coid=coid1\",\n            },\n            {\n                name: \"Tablet\",\n                link: \"zpl://components?pid=pid1\u0026coid=coid2\",\n            },\n            {\n                name: \"Mobile\",\n                link: \"zpl://components?pid=pid1\u0026coid=coid3\",\n            },\n        ],\n    },\n};\n```\n\n### 4. Set Zeplin access token\n\nTo access your Zeplin resources, you need to provide an access token with your Zeplin account permissions.\nYou can create one from [Developer](https://app.zeplin.io/profile/developer) tab in your profile page.\n\nThe addon prompts to set the token when you open the addon's tab. This token is kept in the browser storage, so each user needs to create and set their own token to access Zeplin resources via Storybook.\n\n\u003cimg src=\"./token-screenshot.png\" width=\"100%\" alt=\"Setting Access Token\"/\u003e\n\n#### (Optional) Setting the access token using environment variable\n\nIf you want to skip creating tokens for each user,\nyou can provide the access token as an environment variable called `STORYBOOK_ZEPLIN_TOKEN`.\nYou can create `.env` file in your project's root folder, or you can provide the environment variable as a command line parameter when building or dynamically running Storybook.\n\n#### ⚠️ Disclaimer\n\n**Please note that access token can be viewed by anyone with access to the Storybook instance if you set it using environment variable.\nFor security reasons, never use the environment variable, if the Storybook instance can be accessed by 3rd parties.**\n\n```shell\n# .env\nSTORYBOOK_ZEPLIN_TOKEN=\"eyJhbGciOiJIUzI1N..\"\n```\n\n## Development\n\nRun following commands in separate tabs to start development\n\n```shell\nnpm run watch\nnpm run storybook\n```\n\n## Notes\n- This addon extracts the Storybook data and sends to parent frame to make stories reachable from Zeplin apps. For more information: [Zeplin Storybook integration](https://zpl.io/article/storybook-integration)\n\n## License\n\nMIT © [Mert Kahyaoğlu](https://mert-kahyaoglu.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeplin%2Fstorybook-zeplin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeplin%2Fstorybook-zeplin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeplin%2Fstorybook-zeplin/lists"}