zeplin/connected-components-docs

Documentation for Connected Components

connected-components-docs's Issues

"There is a problem with the API request."

I ran zeplin connect
and logged in using the access token
I get -

This is the log file
cli.log

"Could not find plugin [component-name] failed." when running zeplin connect

Following the readmes, I installed the following globally (npm install -g) and added them to the plugins in components.json

• zeplin-cli-connect-plugin-vue
• @zeplin/cli-connect-storybook-plugin

Zeplin CLI - v1.0.4

Connecting components to Zeplin components failed.

    Could not find plugin zeplin-cli-connect-plugin-vue failed.
    Please make sure that it's globally installed and try again.
        npm install -g zeplin-cli-connect-plugin-vue

(same for the other plugin)

this is my components.json

{
  "plugins": [{
      "name": "zeplin-cli-connect-plugin-vue"
    },
    {
      "name": "@zeplin/cli-connect-storybook-plugin",
      "config": {
        "url": "http://localhost:9009",
        "startScript": "storybook"
      }
    }
  ],
  "projects": ["actual id"],
  "styleguides": ["actual id"],
  "components": [{
    "path": "src/components/Test.vue",
    "zeplinNames": ["Test"]
  }]
}

The two plugins are definitely in my global node_modules

What am I doing wrong? (Running from Windows 10 command line, global npm registry is in the path)

Unable to connect to Storybook static website

Hi Guys

I'm using the config below to connect Zeplin with Storybook

{ "plugins": [ { "name": "@zeplin/cli-connect-react-plugin" }, { "name": "@zeplin/cli-connect-storybook-plugin", "config": { "url": "https://mybranch--xyz.chromatic.com" } } ], "projects": [ "myProjectID" ], "styleguides": [], "components": [ { "path": "MyPathi/src/Components/AppButton/AppButton.js", "zeplinIds": [ "MyZepID" ] } ], "github": { "repository": "repo/path" } }

I have installed all the necessary plugins references in the config , but when I run the command
zeplin connect

I get the following error

Obviously Storybook is indeed installed but checking the logs I can see Zeplin is looking for a file that does not exist in my node_modules

• 2021-05-30 14:38:08 - debug - connect options: {"configFiles":[],"devMode":false,"devModePort":9756,"devModeWatch":true,"plugins":[]}
• 2021-05-30 14:38:08 - debug - component config files: [{"plugins":[{"name":"@zeplin/cli-connect-react-plugin"},{"name":"@zeplin/cli-connect-storybook-plugin","config":{"command":"cd ./packages/shared-ui && yarn storybook"}}],"projects":["60b2f9d94a6dfa1550d529df"],"styleguides":[],"components":[{"path":"packages/shared-ui/src/Components/AppButton/AppButton.js","zeplinIds":["60b2f9eadcee6518e5419c47"]}],"github":{"repository":"channelaffairs/tooth-fairy-mono-repo"}}]
• 2021-05-30 14:38:09 - debug - Initializing @zeplin/cli-connect-react-plugin.
• 2021-05-30 14:38:09 - debug - @zeplin/cli-connect-react-plugin has init method. Initializing with undefined
• 2021-05-30 14:38:09 - debug - Initializing @zeplin/cli-connect-storybook-plugin.
• 2021-05-30 14:38:09 - debug - @zeplin/cli-connect-storybook-plugin has init method. Initializing with {"command":"cd ./packages/shared-ui && yarn storybook"}
• 2021-05-30 14:38:09 - debug - Running command: cd ./packages/shared-ui && yarn storybook
• 2021-05-30 14:38:09 - info - Waiting Storybook to start…
• 2021-05-30 14:38:09 - info - Detected Storybook at http://localhost:6006/iframe.html
• 2021-05-30 14:38:09 - info - The following problems were reported from Storybook:
• 2021-05-30 14:38:09 - error - Errors:
• =========================
• Error: Uncaught [Error: Module build failed: Error: ENOENT: no such file or directory, open 'MyPath/node_modules/@storybook/builder-webpack4/node_modules/webpack/buildin/global.js']
• =========================
• 2021-05-30 14:38:09 - warn - This may lead to some stories not working right or getting detected by Zeplin CLI
• We suggest you fix the errors, but we will continue anyway..
• =========================
• 2021-05-30 14:38:09 - debug - Error: Zeplin CLI requires Storybook version at least 3.4. Please update your Storybook!

This is what I see in Storybook node-modules

My environment is :

MacOS
VSCode
Zeplin CLI - v1.1.11
StoryBook-React - 6.2.6
Monorepo - Yes (Yarn WorkSpaces)

Can't find or create Zeplin global configuration file or components.json

Hi everyone, thank you for this excellent plugin!

I'm finding the documentation for getting Storybook hooked up with Zeplin to be very confusing. Most of the documentation refers to a .zeplin folder - I can not find this folder or file anywhere on my MacOS drive (I've even checked the Zeplin package in Applications). However, it must be somewhere because once the Zeplin extension is installed in VSCode and I've logged in, it allows me to find add my Zeplin projects, and the projects persist even when I uninstall+reinstall the Zeplin VSCode plugin.

The VSCode plugin did not prompt as promised to create the file, it apparently did it some other way (the command to create it also failed without error), and it is not at the root of my workspace or repository, so I can't find it to make the configuration additions for Storybook.

I've tried to create .zeplin and /components.json manually, but the plugin is not populating this file.

Overall, it seems like the documentation for these awesome features needs review, but for now I can't figure out where to make the Storybook component adjustments. Can anyone tell me where on my drive to find the configuration files? And how the files should be moved to my repo and properly hooked up to the plugin, so my team can have visibility when using Zeplin to begin feature development?

don't suggest global installs

Rather than npm install -g @zeplin/cli, it's probably safer to document how to set Zeplin up for an individual project, similar to CI or linting configs, especially for plugins (@zeplin/cli-connect-react-plugin) that will be referenced in a local config file.

Support for multiple `path` values

Hi! Thanks for implementing this useful feature! I have a support request:

My team is currently working on revamping our UI and making it consistent across mobile and web platforms, so we are using the same components and styleguide for multiple projects. Currently, each of the components only allow one path to be specified, which means only one repository can be connected. Would it be possible to support multiple paths to different repositories?

Ideally we want to be able to have multiple links here:

Use id instead of name to declare zeplin components

It would be really nice if an identifier array is used instead of zeplinNames array.
Our team decided to change its naming convention and we have to change each components' name in our components.json. It would be smoother if it's based on id. 🥂

feat: custom link without path

Is it possible to link a component directly to a web site page that reference it but without code source "path" ?

expected "path" not required.

Baptiste.

storybook appends --ci to script

I tried to implement the storybook plugin for the zeplin cli and he always append a --ci to the script.

Connecting components to Zeplin components failed.

    Script failed to start: 
    > [email protected] storybook:ui /home/max/code/blockframes
    > npx ng run ui:storybook "--ci"

    Unknown option: '--ci'
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] storybook:ui: `npx ng run ui:storybook "--ci"`

there is no --ci mention in my package.json, so I think it comes from the zeplin cli?

how to connect to a normal document file eg. markdown

Unable to use Zeplin names with wildcards

I'm not sure if I misunderstood the documentation, but I can't seem to use wildcards in the zeplinNames. I tried to convert this:

  "components": [
    {
      "path": "components/button.vue",
      "zeplinNames": [
        "Button-bare/TextButton/M/default",
        "Button-bare/TextButton/M/hover",
        "Button-bare/TextButton/M/active",
        "Button-bare/IconTextButton/M/default",
        "Button-bare/IconTextButton/M/hover",
        "Button-bare/IconTextButton/M/active",
        "Button-bare/IconTextButton/M/disabled",
        "Button-standard/TextButton/L/solid-primary/default",
        "Button-standard/TextButton/L/outline-primary/default"
      ]
    }

into this:

  "components": [
    {
      "path": "components/button.vue",
      "zeplinNames": [
        "Button-bare*",
        "Button-standard*"
      ]
    }

but the wildcards don't seem to work. Are there any limitations on the use of wildcards?

"no preview" when open connected component in storybook

Hi everyone.

When i try to open storybook component in zeplin i see "no preview", after reload page working and when i try to open in zeplin again - it works(only after reload and only for current page).
Url address is correct. When i open url directly(without zeplin) - it works

I Attached file with image of "no preview".

Config for adding component:

"plugins": [
  {
    "name": "@zeplin/cli-connect-angular-plugin",
    "config": {
      "useFullSnippet": true,
      "useFullDescription": true
    }
  },
  {
    "name": "@zeplin/cli-connect-storybook-plugin",
    "config": {
      "url": "MYURL"
    }
  }
],
{
  "path": "projects/ui/src/lib/ui/tsum.module.ts",
  "zeplinNames": [
      "All fonts"
  ],
  "storybook": {
    "kind": "Helpers|Classes",
    "stories": [
      "Typography"
    ]
  }
 }

Components are either 'not found' or 'loading...' depending on the syntax

I'm not succeeding in loading my components. The Storybook version is 6.0.21. My main.js looks like bellow.
Obs. The new Storybook config syntax doesn't seem to require the /register anymore, but alas, I've tried with and without it with the exact same results.

//main,js
module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",
    "@storybook/addon-storysource",
    "@storybook/preset-scss",
    "storybook-addon-designs",
    "storybook-zeplin/register", 
  ],
};

Depending on the syntax I get either Component not found or an endless Loading....

If zeplinLink is an array of strings or an object with name and link like the examples bellow, I get the latter. Checking the Inspector Network tab, there's a line __webpack_hmr for which Time keeps growing on Chrome or have a spinner on Safari. Never times out.

// array of strings
SomeStory.story = {
  args: {
    icon: "import_contacts",
    name: "Contacts",
    to: "#",
  },
  parameters: {
    zeplinLink: [
      "https://app.zeplin.io/project/5f2814056bbe442000933c39/styleguide/components?coid=xxxxx",
      "zpl://components?pid=xxxxx&coid=yyyyy",
    ],
  },
};

// object
AnotherStory.story = {
  args: {
    icon: "contact_phone",
    name: "Extensions",
    to: "#",
  },
  parameters: {
    zeplinLink: {
      name: "Name",
      link:
        "zpl://components?pid=xxxxx&coid=yyyyy",
    },
  },
};

Any other syntax variations I've tried result in Component not found.

Authentication seems to be working. If I use a bogus STORYBOOK_ZEPLIN_TOKEN, the stories reporting Component not found will complain about the invalid token. The stories stuck on Loading... won't change at all, which seems to imply those syntax shown above are not supported or working.

How can we further debug this?

feat: edit description

Is it possible to change the default text 'No description or code snipet'. ?

What is the best way to get the Zeplin ID for the component?

Our team has an unusual export convention from SB so I'm doing a lot of manual connecting. Only I can't figure out how to find the Zeplin ID - especially since I tried already several times to connect most of them and no longer see the "connect" option on the component in Zeplin. Hint?

Thank you so much guys, this is a great tool!

feat: hide the generated zeplin code

Add an option to not show the default code in zeplin

Stencil Integration?

Hi everyone! My team just started using zeplin and I was wondering if there was support for stencil.js web component libraries. Can't wait to hear from you.