Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

storybook-zeplin

1.1.1 • Public • Published
Zeplin Storybook Addon

npm version Monthly download GitHub license


storybook-zeplin

Storybook addon that embeds Zeplin resources such as screens and components in the addon panel for better design-development workflow.

Zeplin Storybook Addon

Demo

Requirements

  • Storybook@>=5.0.0

This addon should work with any framework. If you find a case that the addon does not work, please open an issue.

Getting started

1. Install

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

2. Add Zeplin access token to your environment variables

In order to access your Zeplin resources, you need to provide your access token. You can create one from https://app.zeplin.io/profile/developer.

# .env 
STORYBOOK_ZEPLIN_TOKEN=<zeplin_token>

⚠️ Disclaimer

Please note that this token can be accessed from client side. For security reasons, it would be safe to use this addon on localhost or internal network.

3. Register the addon in main.js

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

If you're using Storybook@5.0.x;

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

4. Add a Zeplin link to your story

Storybook Zeplin takes parameter zeplinLink as an array of elements containing a name and a link or just a string for the link. For the link, you can use full web URL or app URI of Zeplin components/screens.

Example of adding Zeplin link to all stories in a file:

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",
};

Example of adding multiple Zeplin links to a 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",
            },
        ],
    },
};

Development

Run following commands in separate tabs to start development

npm run watch
npm run storybook

License

MIT © Mert Kahyaoğlu

Install

npm i storybook-zeplin

DownloadsWeekly Downloads

425

Version

1.1.1

License

MIT

Unpacked Size

18.4 kB

Total Files

13

Last publish

Collaborators

  • avatar