npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

storybook-zeplin

v3.0.0

Published

Zeplin addon for Storybook

Downloads

65,918

Readme

npm version Monthly download GitHub license Netlify Status Open Collective

Storybook Zeplin addon

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

Links

Requirements

Storybook Zeplin addon v3 is compatible with Storybook 8 and Node Version >18. For Storybook versions 5-7, please use Storybook Zeplin addon v2.0.3

Getting started

1. Install

For using Storybook 8:

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

For using Storybook version 5-7:

npm install --save-dev [email protected]
# yarn add -D [email protected]

2. Register the addon in main.js

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

If you're using [email protected]:

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

3. Linking components

There 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.

Option A: Linking entire project or styleguide (Recommended)

Add 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.

When this parameter is provided, you will automatically view Zeplin components linked to your stories on the addon panel using the Storybook integration.

Using a Zeplin web link

//.storybook/preview.js
export const parameters = {
    zeplinLink: "https://app.zeplin.io/project/5e7a6d478204d59183a1c76b",
};

Using a Zeplin app link

//.storybook/preview.js
export const parameters = {
    zeplinLink: "zpl://project?pid=61f164b064e363a52fbb295f",
};

When the addon setup is done, go and check out below articles to learn more about how to initialize Storybook integration on Zeplin.

Option B: Linking individual stories manually

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

4. Set Zeplin access token

To access your Zeplin resources, you need to provide an access token with your Zeplin account permissions. You can create one from Developer tab in your profile page.

The 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.

(Optional) Setting the access token using environment variable

If you want to skip creating tokens for each user, you can provide the access token as an environment variable called STORYBOOK_ZEPLIN_TOKEN. You 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.

⚠️ Disclaimer

Please note that access token can be viewed by anyone with access to the Storybook instance if you set it using environment variable. For security reasons, never use the environment variable, if the Storybook instance can be accessed by 3rd parties.

# .env
STORYBOOK_ZEPLIN_TOKEN="eyJhbGciOiJIUzI1N.."

Development

Run following commands in separate tabs to start development

npm run watch
npm run storybook

Notes

  • This addon extracts the Storybook data and sends to parent frame to make stories reachable from Zeplin apps. For more information: Zeplin Storybook integration

License

MIT © Mert Kahyaoğlu