Sketch cannot import generated layers

vgpena commented 5 years ago

Hi! I've been testing this out an am running into export/import issues with my generated layers.

story2sketch version: 1.4.0 storybook/react version: 4.0.7 Sketch version: 52.5

When I run story2sketch, story2sketch finds my stories (1 component, 2 stories) and generates mobile/desktop for each, for 4 layers total. This all looks correct:

Input URL: file:///<path>/.out/iframe.html}
Output File: /<path>/stories.asketch.json

Detecting stories...
Getting sketch page...
Processing 2 stories...
✓ Exported Button/Dark
✓ Exported Button/Light
Success! 2 stories written to /<path>/stories.asketch.json

But when I import the file into Sketch, I get this error:

captura de pantalla 2018-12-12 a la s 5 02 39 p m

I have been looking at the JSON output some and one important part seems to be my frame dimensions:

      "clippingMaskMode": 0,
      "hasClippingMask": false,
      "frame": {
        "_class": "rect",
        "constrainProportions": false,
        "width": null,
        "height": null,
        "x": 0,
        "y": 0
      },

Changing these null values to actual numbers allows the layers to be imported, but they still don't have any contents.

I have tested with this sample Storybook I found linked in another issue in this repo and I am able to export/import this one correctly, with all layers and content.

Other things I've tested:

find stories at URL using the node-server Storybook (http://localhost:9001/iframe.html)
find stories at input path using static Storybook (.out/iframe.html)
remove @storybook-knobs decorator and re-run
explicitly set viewport widths/heights

Please let me know if this is a known issue and/or reproducible on your end. Thanks!

chrisvxd commented 5 years ago

Hi @vgpena! Thanks for the detailed ticket! 🙏

This is definitely reproducible and a common issue. Are you able to share your source? That will help me to identify the issue.

I think the problems causing this issue are probably in the core html-sketchapp dependency, and the error you're seeing occurs under a variety of circumstances where html-sketchapp is failing to convert the markup to sketch nodes for various reasons. Unfortunately those failing cases haven't been documented yet.

I've set up #60 to track this since I don't want to pollute your ticket with too much information.

gavmck commented 4 years ago

Just diving in here in case anyone else experiences this. I have an Angular storybook which uses storybook-dynamic-app-root at the base. As this is a custom component, HTML treats it as inline and it has no inherent width/height (renders as 0x0 in the browser).

I added some css to set it to display: block; and that has stopped it outputting width and height as null and fixed the sketch import.

Hope that helps someone!

SuneRadich commented 4 years ago

@gavmck This solved my issues of importing. I am also using an Angular Storybook (5.3.8), and it seems to do the trick for all my stories

Paul-Hebert commented 4 years ago

I needed to solve a couple issues to solve this:

If I don't set a font family and use the browser defaults the import will fail. Setting the font-family to a locally installed font fixed this error
I had background shapes. html-sketchapp was giving them a border of thickness null. Changing the thickness to 0 solved that issue.

By making those 2 changes I was able to get imports to work correctly. Hopefully this is helpful 🙂

chrisvxd / story2sketch

Sketch cannot import generated layers #59