Have ideas to improve npm?Join in the discussion! »

    storybook-zeplin

    1.4.0 • Public • Published
    Zeplin Storybook Addon

    npm version Monthly download GitHub license Netlify Status


    Storybook Zeplin addon

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

    Zeplin Storybook Addon

    Links

    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

    Install

    npm i storybook-zeplin

    DownloadsWeekly Downloads

    10,102

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    29 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar