search

morgs32 / storybook-addon-xd-designs

For adobe XD. Demo at https://morgs32.github.io/storybook-addon-xd-designs
MIT License
42 stars 6 forks source link

Not working with latest Angular cli 9 & Storybook 6.0.0-beta.20 #14

Open chrisj-skinner opened 4 years ago

chrisj-skinner commented 4 years ago

Hi,

I used this addon with v5.3.18 of storybook with angular cli v9 and it worked fine using the below approach. However now with v6.0.0-beta.20 I get the following message in the XD addon tab.

Invalid config type That design config is not valid. Please check the documentation

I'm adding the addon in the main.js as per the migration docs.

main.js

module.exports = {
  stories: ["../src/**/*.stories.@(ts|mdx)"],
  addons: [
    "storybook-addon-xd-designs/register",
    "@storybook/addon-docs"
  ],
};

playground.stories.ts

import { PlaygroundComponent } from "./playground.component";
import { withXD } from "storybook-addon-xd-designs";

export default {
  title: "Playground/Button",
  component: PlaygroundComponent,
  parameters: {
    componentSubtitle: `Desc`,
    docs: {
      iframeHeight: 100,
    },
    design: {
      artboardUrl:
        "https://xd.adobe.com/view/ae7472ea-b4ac-47c4-4eb9-7aff91446d91-d845/screen/ca95c951-f010-498f-84c6-1cf10f344616/",
    },
  },
  decorators: [withXD],
};

Env Environment Info:

System: OS: macOS High Sierra 10.13.6 CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz Binaries: Node: 10.15.1 - /usr/local/bin/node npm: 6.14.4 - /usr/local/bin/npm Browsers: Chrome: 83.0.4103.97 Firefox: 76.0.1 Safari: 13.0.4 npmPackages: @storybook/addon-a11y: ^6.0.0-beta.20 => 6.0.0-beta.20 @storybook/addon-actions: ^6.0.0-beta.20 => 6.0.0-beta.20 @storybook/addon-controls: ^6.0.0-beta.20 => 6.0.0-beta.20 @storybook/addon-docs: ^6.0.0-beta.20 => 6.0.0-beta.20 @storybook/addon-jest: ^6.0.0-beta.20 => 6.0.0-beta.20 @storybook/addon-links: ^6.0.0-beta.20 => 6.0.0-beta.20 @storybook/addon-storyshots: ^6.0.0-beta.20 => 6.0.0-beta.20 @storybook/addon-viewport: ^6.0.0-beta.20 => 6.0.0-beta.20 @storybook/addons: ^6.0.0-beta.20 => 6.0.0-beta.20 @storybook/angular: ^6.0.0-beta.20 => 6.0.0-beta.20 @storybook/components: ^5.3.19 => 5.3.19 @storybook/storybook-deployer: ^2.8.6 => 2.8.6 @storybook/theming: ^5.3.19 => 5.3.19

morgs32 commented 4 years ago

Things must've changed in the beta. I'll check it out now.

morgs32 commented 4 years ago

@chrisj-skinner I think it was just that you didn't copy that artboardUrl exactly right. It needs /Desktop at the end. Which is the name of the screen in XD.

    design: {
      artboardUrl: 'https://xd.adobe.com/view/ae7472ea-b4ac-47c4-4eb9-7aff91446d91-d845/screen/ca95c951-f010-498f-84c6-1cf10f344616/Desktop',
    }

Let me know if that checks out?

chrisj-skinner commented 4 years ago

@morgs32 Nice catch 👍 Thanks - working very nicely now.

On another note, any plans to incorporate the following zoom functionality shown here.

It would be a nice additional.

morgs32 commented 4 years ago

I think you're right that'd be worth having - You'd have to export your XD designs to PDF and host them on your own, right?