[Bug] Addon Controls Issue with CSF and MDX format in Angular 7

[akhilesh85]

Describe the bug

1. When the MDX template is used in Angular, controls are not functioning properly.

• The args are not read by the story.
• The documentation to set up and use controls was not present. I had a hard time to come up with a syntax that worked wit Angular
• The Default value does not show up, not sure how to configure a default value.
• When we edit the controls in the Canvas and Docs tabs it does not update the component - with the appropriate values.

2. When the CSF template is used in Angular, controls are not functioning properly.

• The documentation to set up and use controls was not present. I had a hard time to come up with a syntax that worked wit Angular
• The Default value does not show up, not sure how to configure a default value.
• When we edit the controls in the Docs tabs it does not update the component - with the appropriate values.
• Props appear only once for a particular default story, they do not appear for the stories such as "Emojis", "with an action" and "button to link to another story"

To Reproduce
Steps to reproduce the behavior:

1. Create a Default Angular workspace either Angular 7 or latest
2. Install the story, controls, compodoc, and docs with @next npm annotation.
3. Configure the main.js and preview.js as per the addon controls and docs documentation.
4. Start the storybook, you can see the issue highlighted in the screenshots section under CSF Format.
5. Create an MDX file in angular and pass args.
6. Go to the storybook, the control options don't work with other issues highlighted above.

Expected behavior

1. Controls should show up in the edit mode in both Canvas and Docs and we should be able to alter the content under both the tabs in both the modes .ts and .mdx.
2. Props should appear for other stories as well in CSF and MDX format.
3. Default Values should appear.
4. There should be proper documentation with regard to Controls usage for Angular for both CSF and MDX.

Screenshots

CSF Format

CSF Format Props appears only for the main story

MDX Format

Code snippets

Please find all the files attached. These are the files that are auto-generated by the storybook. I just amended to add more configuration to test the scenarios.

1-Button.stories.mdx.txt
1-Button.stories.ts.txt
button.component.ts.txt
documentation.json.txt

System:
Tried in below OS under different versions of Angular.

Mac OSX (Angular 7.0.2)
"@storybook/addon-controls": "^6.0.0-beta.44",
"@storybook/addon-docs": "^6.0.0-beta.44",
"@storybook/addon-actions": "^6.0.0-beta.44",
"@storybook/addon-links": "^6.0.0-beta.44",
"@storybook/angular": "^6.0.0-beta.44",
"@compodoc/compodoc": "^1.1.8",

Windows (Angular 9.0.7)
"@compodoc/compodoc": "^1.1.11",
"@storybook/addon-controls": "^6.0.0-beta.45",
"@storybook/addon-docs": "^6.0.0-beta.45",
"@storybook/addon-actions": "^6.0.0-beta.45",
"@storybook/addon-links": "^6.0.0-beta.45",
"@storybook/angular": "^6.0.0-beta.45",

[akhilesh85]

Hi @shilman,

Sorry for updating the content of the bug multiple times. I wanted t cover all the issues together. Please have a look at them. I have also added a gif that can give you more insights on the issue. Hope this would help your team :)

One more question, I am starting to use Storybook hence want to understand that as part of the future releases which story format we should adopt CSF, StoriesOf API, or MDX. What is the recommendation? I don't want to end up using a format that might be deprecated in the coming months. Please let me know, thanks :)

Regards,
Akhilesh

[shilman]

@akhilesh85 Thanks for the issue, I will take a look in the next few days.

Re: formats, you should use either CSF or MDX. CSF is the "safest" one because it's core. MDX compiles to CSF internally, and should be getting v2 improvements soon and we will support that for documentation-rich scenarios. storiesOf was our external API for years, and is now our internal API. At some point in the future we may place restrictions on using it. For now, we just discourage people from using it directly.

[akhilesh85]

Hi @shilman ,

Thank you for your inputs. May I know when would be args and argTypes available in the Angular MDX version? If it is already there could you please provide a reference code snippet for the same. Thanks.

Regards,
Akhilesh

[shilman]

Here's an MDX example for Vue. it should be straightforward to adapt the example to angular: https://raw.githubusercontent.com/storybookjs/storybook/next/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx

[akhilesh85]

Here's an MDX example for Vue. it should be straightforward to adapt the example to angular: https://raw.githubusercontent.com/storybookjs/storybook/next/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx

Sure, let me try it tomorrow. Thanks.

[akhilesh85]

Here's an MDX example for Vue. it should be straightforward to adapt the example to angular: https://raw.githubusercontent.com/storybookjs/storybook/next/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx

Sure, let me try it tomorrow. Thanks.

Hi @shilman

Thank you fr the reference the approach worked for angular. Thanks. But the Issues associated with MDX and CSF with docs addon still exists.

1. Under the docs section, the default values don't show up
2. Under the docs section, the control do not alter the component shown in the preview.
3. In case of MDX version the story source and the show code section in the docs tab don't show the actual code, the information shown does not give more insights as it does in the case of CSF templates.

Please refer to the screenshot and the MDX Angular version code snippet.

Code Snippet

1-Button.stories.mdx.txt
1-Button.stories.ts.txt
button.component.ts.txt

Screenshot

Environment Info

System: (The behaviour is the same on Mac OS as well)
OS: Windows 10 10.0.18362
CPU: (4) x64 Intel(R) Core(TM) i5 CPU M 460 @ 2.53GHz
Binaries:
Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 83.0.4103.116
Edge: Spartan (44.18362.449.0)
npmPackages:
@storybook/addon-actions: ^6.0.0-rc.13 => 6.0.0-rc.13
@storybook/addon-controls: ^6.0.0-rc.13 => 6.0.0-rc.13
@storybook/addon-docs: ^6.0.0-rc.13 => 6.0.0-rc.13
@storybook/addon-links: ^6.0.0-rc.13 => 6.0.0-rc.13
@storybook/addon-storysource: ^6.0.0-rc.13 => 6.0.0-rc.13
@storybook/angular: ^6.0.0-rc.13 => 6.0.0-rc.13

[shilman]

Closing as duplicate to #11908