Cannot see the zeplin tab in the pannel

[yahma25]

Hello guys. First of all, thank you for creating zeplin addon.

I am in trouble setting up the addon because I cannot see zeplin tab of the addons panel in the storybook. Also, I read the article and watched video.

Can you check what I mistake?

main.js

module.exports = {
    ...
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@etchteam/storybook-addon-css-variables-theme',
        '@storybook/addon-viewport',
        'storybook-zeplin/register'
    ];
}

package.json

"devDependencies": {
  ...
  "@etchteam/storybook-addon-css-variables-theme": "1.0.1",
  "@storybook/addon-actions": "6.3.6",
  "@storybook/addon-essentials": "6.3.6",
  "@storybook/addon-links": "6.3.6",
  "@storybook/addon-viewport": "6.3.6",
  "@storybook/builder-webpack5": "6.3.6",
  "@storybook/client-api": "6.3.6",
  "@storybook/manager-webpack5": "6.3.6",
  "@storybook/react": "6.3.6",
  "@storybook/storybook-deployer": "2.8.10",
  "storybook-zeplin": "1.6.0",
  ...
}

sample component.tsx

import React from 'react';
import {ComponentMeta, ComponentStory} from '@storybook/react';

import ButtonView, {ButtonType, ButtonViewProps} from '@shared/common/view/components/ButtonView';

export default {
    title: 'shared/Button',
    component: ButtonView,
    parameters: {
        zeplinLink: 'https://app.zeplin.io/project/5b86356302fbaba21920bf75/styleguide/components?coid=6194d7c54f46cfad2869a7aa'
        // zeplinLink: 'zpl://components?pid=5b86356302fbaba21920bf75&coids=6194d7c54f46cfad2869a7aa'
    }
} as ComponentMeta<typeof ButtonView>;

const Template: ComponentStory<typeof ButtonView> = (args) =>
    <ButtonView {...args} >버튼</ButtonView>;

export const Primary = Template.bind({});
Primary.args = {
    buttonType: ButtonType.PRIMARY,
    style: {width: '100px'}
} as ButtonViewProps;

Also, I used with another way like this:

// ...
Primary.parameters = {
    zeplinLink: 'https://app.zeplin.io/project/5b86356302fbaba21920bf75/styleguide/components?coid=6194d7c54f46cfad2869a7aa'
}

In the zeplin app, I set to link to localhost (ex. http://localhost:6006) I tested two zeplinLinks(web, app). I could check to link between the storybook and the zeplin by clicking open in the storybook in the zeplin. No console error in the storybook.

ps. I cannot see `zeplin tab' in the official demo

[mertkahyaoglu]

Hi @yahma25. You should've seen the tab when you installed the addon. It's displayed whether you define zeplin links or not. Do you see any error in the console? Also could you try running storybook with --no-manager-cache flag?

[yahma25]

@mertkahyaoglu Thank you for your answer 😃 I solved it with --no-manager-cache 🎉 I have been forgotten CLI options

[mertkahyaoglu]

Glad you solved it 😄