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

[chrisj-skinner]

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]

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

[morgs32]

@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]

@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]

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?