Double post (thanks chrome). Please see: #29

It looks like I can't delete this issue once it has been created. Please feel free to delete it!

angular-v5-example

1. checkout this repo ...
2. cd angular/storybook-v5
3. yarn install
4. yarn storybook => fail

Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

to fix => tag version to
"@invisionapp/dsm-storybook": "0.0.132",

• using node v12.16.3
• process.env.STORYBOOK_DSM => undefined

Let me know if there's a better place to ask, but is there documentation anywhere on the json file used to create the properties and description (https://github.com/InVisionApp/dsm-storybook-example-library/blob/master/html/storybook-v6/src/components/button/button.docs.json)? What is displayName used for? Are there other properties available besides description, displayName, and props? Thanks.

As the .dsmrc file is a standard JSON file, I'm unsure how to add the authentication token as an environment variable. I don't want to expose the token in the repository and would rather have the CD pipeline to push the changes to DSM.

I'm aware that I could try workarounds, for example, I could maybe replace <authentication token> for the auth token via a shell script on the CI before running the dsm-storybook publish, but that seems a bit hacky to me and I was hoping for proper support.

Also, would it be possible to set the -c flag to the dsm-storybook publish script in order to set the custom .storybook directory? That's the current behavior of storybook's CLI.

Describe the bug
In some cases I'd like to say dsm where storybook folder is, because it is not in the root folder.

To Reproduce
Steps to reproduce the behavior:

1. Wrap .storybook in to another folder with name .config
2. Run dsm-storybook preview
3. There is an error, dsm can't find ./.storybook config

Expected behavior
It is possible to set storybookPath in the .dsmrc

Describe the bug
The dsm-storybook publish script fails when the path contains a space:

DSM =>    Creating Storybook bundle...
'C:\Users\Tom' is not recognized as an internal or external command,
operable program or batch file.
DSM =>  × Failed to build Storybook. For more details, try to run "build-storybook". For further assistance visit (https://support.invisionapp.com).

When the repository is moved to a path without space it works.

To Reproduce
Steps to reproduce the behavior:

1. Download example, e.g. react/dsm-demo-storybook-v5
2. Place it inside folder "de mo".
3. Make needed updates, e.g. update credentials file.
4. Run dsm-storybook publish and see it fail.
5. Rename folder to "demo".
6. Run dsm-storybook publish and see it succeed.

Expected behavior
I should be able to run the demo project.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Not relevant

Following up to #19, when you configure the storybook through initDsm, run yarn storybook and click on the "eject" button in the upper-right corner, the resulting iframe is empty. This breaks integrations with Chromatic and other tools.

Repro: https://github.com/shilman/dsm-test/

When running 'npm run storybook' and opening the application on IE11, a syntax error occurs, linking to the code:
.storybook/config.js

callback: () => {
// apply the custom options
// setCustomOptions();
configure(require.context('../src', true, /.stories.ts$/), module);
}
After replacing the arrow function with es5 function error disappears but another one comes out pointing at button.component.ts

Describe the bug
When I try to npm install the storybook-v6 example, npm outputs version conflicts for peer dependencies.

To Reproduce
Steps to reproduce the behavior:

1. git clone [email protected]:InVisionApp/dsm-storybook-example-library.git
2. cd dsm-storybook-example-library
3. cd react
4. npm install

Expected behavior
Dependencies install successfully.

Screenshots

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @storybook/[email protected]
npm ERR! node_modules/@storybook/addons
npm ERR!   @storybook/addons@"^6.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @storybook/addons@">= 4.1.11 < ^5.0.10" from @invisionapp/[email protected]
npm ERR! node_modules/@invisionapp/dsm-storybook
npm ERR!   @invisionapp/dsm-storybook@"latest" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Desktop (please complete the following information):

• OS: osx 10.14.6
• Browser: Chrome
• Version Version 86.0.4240.111 (Official Build) (x86_64)

Additional context
It looks like @storybook/addons is a peer dependency of @invisionapp/dsm-storybook, but the versions in this repo don't match.

It's working when I run dsm-storybook preview.

But when I run dsm-storybook publish the cli returns "No stories with DSM component container IDs were found"

import { Story, Meta } from '@storybook/react'
import { ButtonProps } from '@material-ui/core'
import { Button } from './Button'

export default {
  title: 'Atoms/Button',
  parameters: {
    component: Button,
    'in-dsm': {
      id: '5f8406f3b50e298dd216f0ba',
      versionFilePath: '../../../components/versionFile.json',
    },
  },
} as Meta

const Template: Story<ButtonProps> = (args) => <Button {...args} />

export const Primary = Template.bind({})
Primary.parameters = {
  'in-dsm': {
    id: '5f8406f3b50e298dd216f0ba',
    versionFilePath: '../../../components/versionFile.json',
  },
}
Primary.args = {
  variant: 'contained',
  color: 'primary',
  children: 'Primary Button',
}`

Does the plugin support storybook docs from Storybook 5.2?

Link: https://github.com/storybookjs/storybook/tree/master/addons/docs

I am getting parse errors
DSM => Analyzing file stories/docs/building/creating.stories.mdx
DSM => × Failed to parse story source file "stories/docs/building/creating.stories.mdx"

After following the tutorial, https://support.invisionapp.com/hc/en-us/articles/360028510211-Configuring-the-Storybook-DSM-Integration#generating-an-authentication-token

Trying to publish or preview results in:

'STORYBOOK_DSM' is not recognized as an internal or external command

Using angular 7.2.0
storybook 5.1.9

addons.js

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-notes/register';

import { registerDsm } from '@invisionapp/dsm-storybook/register';

registerDsm(process.env.STORYBOOK_DSM);

config.js

import { configure, addDecorator, addParameters } from '@storybook/angular';
import { initDsm } from '@invisionapp/dsm-storybook';

// automatically import all files ending in *.stories.ts
const req = require.context('../src/app', true, /\.stories\.ts$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

//Init Dsm
initDsm({
  addDecorator,
  addParameters,
  callback: () => configure(loadStories, module)
});

configure(loadStories, module);

At the beginning of the year Storybook update their configuration:
https://medium.com/storybookjs/declarative-storybook-configuration-49912f77b78

This changes a lot of how the configuration files are structured and their contents, and as a result the instructions in the DSM docs as well as the example repos unfortunately don't reflect the current way storybook is configured. Some changes are easy to port over, but others such as the ones in this section aren't very clear and I have yet to successfully get working.

It'd be great to get updated documentation and examples that use the new declarative configuration format.

Trying to debug a Chromatic customer issue & found unexpected behavior with a @invisionapp/dsm-storybook crash with error:

index.js:49 SyntaxError: Unexpected token _ in JSON at position 0
    at JSON.parse (<anonymous>)
    at setConfiguration (dsm-storybook.js:8)
    at dsm-storybook.js:8
    at index.js:195
    at Array.forEach (<anonymous>)
    at Channel.handleEvent (index.js:194)
    at PostmsgTransport.<anonymous> (index.js:85)
    at PostmsgTransport.handler (index.js:109)
    at PostmsgTransport.handleEvent (index.js:207)

What I did:

npx create-react-app dsm-test
cd dsm-test
npx -p @storybook/cli sb init
yarn add @invisionapp/dsm-storybook --dev
# edit .storybook/{config.js,addons.js} with partial setup
yarn storybook

You can see the full repro at: https://github.com/shilman/dsm-test/

My expectation is that initDsm will be a pass-through to configure when I'm running it outside of the dsm-storybook CLI, but it seems not to be.