Components are exported twice

[aloifolia]

Whenever I import the generated stores.asketch.json into Sketch, every component is listed twice.

For example, the following code

storiesOf("Stuff", module).add("Button", () => (
  <button style={{ backgroundColor: "red", borderRadius: "4px" }}>
    you have to click me now
  </button>
));

yields the following result:

Also, the container around the button is drawn too small and there should be no line break. Any idea, what might cause this issue?

[chrisvxd]

Hey @aloifolia! That's because you're using the default viewports functionality - the one on the left is mobile, the one on the right is desktop, as denoted by the little 📱 and 🖥 . You can update your storybook.config.js file to configure this and set one viewport, if you need:

  viewports: {
    standard: {
      width: 1920,
      height: 1200,
      symbolPrefix: "Desktop/"
    }
  }

Regarding the button, can you show me a screenshot of what it should look like please?

[chrisvxd]

Closing