Support Storybook v5

[gabriel-kohen-by]

It seems like the latest supported is v4.
Most new updates to storybook are done to v5

[njradford]

@chrisvxd - Storybook v4 to v5 seemed to be a less severe jump than 3 to 4. Do you have an idea of what aspects of story2sketch would break in an upgrade to 5?

(Awesome project by the way.)

[FarisSum]

Hi @gabriel-kohen-jdas
I was able to export a JSON, even with Storybook 6.0 alpha.

However, when importing into sketch, all I get is a "Stories" layer with nothing inside.

What do you think could be the issue?

[jakub-bujakowski]

Any progress with this issue? I'm using Storybook 5 and can generate the json file, but Sketch throws and error that layers couldn't be imported :/

[jrwpatterson]

Are there any updates to this, I would hate to have to download storybook for this software?

[jrwpatterson]

Partly because I can't even find the documentation for v4.x.x

[jrwpatterson]

@jakub-bujakowski did you find an issue as I have the same problem

[FarisSum]

@jrwpatterson @jakub-bujakowski @njradford @gabriel-kohen-jdas

The below works for me in 6.0 alpha actually:

1. npm run build-storybook
2. npm run story2sketch (looks to the index.html INPUT that's generated in step 1) **
3. The OUTPUT is a JSON file **

** story2sketch.config.js is required, where the INPUT and OUTPUT directories are specified.

Make sure the above commands work in your package.json scripts:
Script 1: https://storybook.js.org/docs/basics/exporting-storybook/
Script 2: "story2sketch": "story2sketch "

[merryt]

@FarisSum Would you mind sharing your story2sketch.config.js?

I was able to duplicate @FarisSum solution with the following config in 6.0.0-beta.0 but you do need to build storybook first, then run against the built version

module.exports = { output: "dist/great-ui.asketch.json", stories: "all", input: "storybook-static/iframe.html" };

Although this does "work" I then get the errors from #59 ... could be related, could be just me

[FarisSum]

@merryt

Instead of using stories: "all", try utilizing the layoutBy + specify the individual stories in story2sketch.config.js:

...
layoutBy: 'group',
stories: [
    {
      group: 'Buttons',
      stories: [
        {
          name: 'Large Button',
        }
        {
          name: 'Small Button',
        }
      ]
    }
]
...

You can also try groupBy, which will create multiple JSON files.

Perhaps you will find if any particular story it the root cause of the layer errors.

Curious what you get...

[jrwpatterson]

@merryt yup thats my issue the #59

[merryt]

I was able to get it to work by rolling sketch back to v63.1 , YMMV, but my issue was caused by html-sketchapp/html-sketchapp#191 not #59

[Ellzer]

Any update on this ?

[itsderek23]

I was able to get this running with Sketch v69.2 and Storybook v6 by using the updated asketch2sketch plugin that is available in html-sketchapp v4.4.1. Without this update, no layers could be imported. For background on this fix, see html-sketchapp/html-sketchapp#196.

My commands:

yarn run build-storybook
yarn run story2sketch --input storybook-static/iframe.html --output stories.asketch.json

I did get a remainingTimeoutError: Navigation Timeout Exceeded: 30000ms exceeded error with the following, but I didn't debug futher (maybe it goes away if I increase the timeout) and decided to just use the built version:

yarn run story2sketch --url http://localhost:6006/iframe.html --output stories.asketch.json

Screenshot:

[chrisvxd]

Closed by #103, thanks again @itsderek23!

[chrisvxd]

Landed officially in v1.7.1