randowize/storybook-zeplin

Storybook addon to view Zeplin resources in story panel

---

storybook-zeplin

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

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. This token needs to provided as an environment variable called STORYBOOK_ZEPLIN_TOKEN. You can create .env file in your project's root folder and define it in there or you can use your command line for it.

# .env
STORYBOOK_ZEPLIN_TOKEN="eyJhbGciOiJIUzI1N.."

⚠️ 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