search

zeplin / connected-components-docs

Documentation for Connected Components
https://zpl.io/connected-components
142 stars 21 forks source link

"no preview" when open connected component in storybook #16

Closed SergeyKatugin closed 4 years ago

SergeyKatugin commented 4 years ago

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"
    ]
  }
 }
yuqu commented 4 years ago

Hi @SergeyKatugin,

Could you please share the following?

SergeyKatugin commented 4 years ago

@yuqu

yuqu commented 4 years ago

Thanks @SergeyKatugin,

%host%/?path=/story/helpers-classes--typography

This is strange because generating this kind of URL structure has been implemented in version 0.1.5 (released a couple of weeks ago).

I think the generated link is actually in form of `/?selectedKind={kind}&selectedStory={story} and when you click on the link in Zeplin, the browser tries to open that link. Storybook has backward compatibility for these URLs and tries to redirect you to the new one (that's the link you shared).

We were relying on the redirect functionality but we have got multiple errors like you have, and fixed it in 0.1.5.

Could you update the plugin to 0.1.5 and see if it works? Let me know if the problem persists.

SergeyKatugin commented 4 years ago

@yuqu After update @zeplin/cli-connect-storybook-plugin to version 0.1.5. command - zeplin connect not working.

Connecting components to Zeplin components failed.
There is a problem with the API request.

part of log

2020-04-14 11:08:23 - error - Connecting components to Zeplin components failed.    There is a problem with the API request.
2020-04-14 11:08:23 - debug - Error: Connecting components to Zeplin components failed.    There is a problem with the API request.    at ZeplinApi.<anonymous> (/Users/skatugin/.npm-global/lib/node_modules/@zeplin/cli/dist/src/api/index.js:81:27)    at Generator.throw (<anonymous>)    at rejected (/Users/skatugin/.npm-global/lib/node_modules/@zeplin/cli/dist/src/api/index.js:6:65)    at processTicksAndRejections (internal/process/task_queues.js:97:5)
2020-04-14 11:08:23 - debug - {"title":"Bad Request","message":"Please check out your request headers/params/body."}

After downgrade to 0.1.4 this command works, without any changes in config

yuqu commented 4 years ago

Hi @SergeyKatugin,

Some story names was causing an API error on our backend. I've just published version 0.1.6 to fix it. Could you try again with it?

SergeyKatugin commented 4 years ago

@yuqu command zeplin connect works, without error. but still have problem with "no preview".

zeplin opens link like this /?selectedKind={kind}&selectedStory={story} and storybook redirect as you said. I tried to update storybook to version 5.3.18. It wont help too.

yuqu commented 4 years ago

@SergeyKatugin Could you add the format parameter as shown below and try again?

  {
    "name": "@zeplin/cli-connect-storybook-plugin",
    "config": {
      "url": "MYURL",
      "format": "new"
    }
  }
SergeyKatugin commented 4 years ago

@yuqu yes. Works. Thank you very much. I glad to use connected components. Great feature.