search

storybookjs / addon-designs

A Storybook addon that embeds Figma, websites, or images in the addon panel.
https://storybookjs.github.io/addon-designs
MIT License
878 stars 71 forks source link

Sketch Workspace integration #154

Closed gandradeglobal closed 2 years ago

gandradeglobal commented 2 years ago

I'm not sure why we're not able to use the iframe functionality to include components from sketch workspace, this would be an amazing feature to have.

As far as I understand they use oEmbed protocol, which works when embedding into Notion, so I don't understand why it can't be used here

pocka commented 2 years ago

Please use an issue template.

So did you try embedding it and that didn't work? I've never heard of Sketch Workspace, but you can embed it if it supports iframe embed.

Speaking to the oEmbed, it is possible only if Sketch Workspace oEmbed endpoint attaches CORS headers. However, I don't have a Sketch account so no way to check that... As far as I tested[0], not all platform supports CORS-enabled oEmbed.

[0]: CORS OK ... YouTube, SoundCloud, CORS NG ... Twitter, Flickr, Reddit

gandradeglobal commented 2 years ago

I tried embedding something like this: https://www.sketch.com/s/8b86f24e-3ef5-4f67-b74b-6b102e05e226/a/R2QAyl#Inspect And I can embed it into Notion as an example like so https://goncaloandrade.notion.site/Sketch-embed-example-34cdd7f5cb744f62a0df66d067eba7f9

However, if I try to include it into Storybook I get an error: https://629095abf15092004a4f6993-sfdbrlyrzn.chromatic.com/?path=/story/inputs-button--button-story

pocka commented 2 years ago

I couldn't find Sketch's oEmbed API endpoint (none of https://www.sketch.com/api/oembed https://www.sketch.com/services/oembed https://www.sketch.com/oembed worked). However, https://www.sketch.com/embed/s/8b86f24e-3ef5-4f67-b74b-6b102e05e226/a/R2QAyl, which is your first link but with an additional /embed at the root of the path, worked in an iframe. You can obtain the URL by adding /embed manually or using iframely.com as the Sketch official docs describe.

I'm not sure there is a reliable way to programmatically obtain an embed URL from Sketch's share URL. It seems they have neither developer reference for embedding nor public oEmbed document.

pocka commented 2 years ago

v7.0.0-alpha.2