zeplin/cli-connect-storybook-plugin

Storybook hosted on Chromatic

pascal-puetz opened this issue · 4 comments

pascal-puetz commented

Currently it is seems to be impossible to connect to a storybook that is hosted on chromatic.
The error thrown is "Zeplin CLI requires Storybook version at least 3.4" (we are using 5.3.9).

I strongly suspect this is due to Chromatic having a login mechanism (so Storybook is NOT publicly accessible) - hence, the plugin cannot find the global variable "STORYBOOK_CLIENT_API".

This error seems to origin in

cli-connect-storybook-plugin/src/storybook/extract.js

Line 47 in b7da108

if (!__STORYBOOK_CLIENT_API__) {

pascal-puetz commented

Seems I totally overlooked that you can use the local Storybook to collect the information but still link to the one hosted elsewhere...

petomi commented

Seems I totally overlooked that you can use the local Storybook to collect the information but still link to the one hosted elsewhere...

How did you end up solving this issue?
I am looking to connect Zeplin to Chromatic as well, but running
npx zeplin connect
causes the same error after switching my components.json to point to the Chromatic Storybook instance.

pascal-puetz commented

Seems I totally overlooked that you can use the local Storybook to collect the information but still link to the one hosted elsewhere...

How did you end up solving this issue?
I am looking to connect Zeplin to Chromatic as well, but running
npx zeplin connect
causes the same error after switching my components.json to point to the Chromatic Storybook instance.

In your components.json:

{
 ...
  plugins: [
    {
        "url": "http://localhost:6007", <- local storybook instance, served under :6007 in my case
        "startScript": "storybook", <- npm script name that starts your local storybook
        "targetUrl": "https://master--your-chromatic-ref.chromatic.com", <- Chromatic link, I used a fixed ref to master
        "format": "new" <- If you use Storybook >=v5
    }, 
    ...
  ],
  ...
}

This config will start your storybook locally, use it to generate the Zeplin connection but replaces the generated links inside Zeplin with the ones to your chromatic instance.

  • 👍1
petomi commented

"url": "http://localhost:6007", <- local storybook instance, served under :6007 in my case
"startScript": "storybook", <- npm script name that starts your local storybook
"targetUrl": "https://master--your-chromatic-ref.chromatic.com", <- Chromatic link, I used a fixed ref to master
"format": "new" <- If you use Storybook >=v5

This is fantastic. Thank you so much!

  • 😄1