Support story id with ArgsTable in MDX

[ericmatthys]

Is your feature request related to a problem? Please describe

I would like to define my stories in tsx files for type safety and reference those stories in mdx. I can do this with the id attribute of <Story /> like so: <Story id="badge-badge--icons" />. However, <ArgsTable /> cannot reference a story by id in the same way. The <ArgsTable story="Icons" /> example only seems to work with stories named in the mdx file. If I try <ArgsTable story="badge-badge--icons" />, I see this error: Invalid name '', must include alphanumeric characters.

Describe the solution you'd like

<Canvas>
  <Story id="badge-badge--icons" />
</Canvas>

<ArgsTable storyId="badge-badge--icons" />

This would allow all stories and argTypes to be defined in TypeScript and referenced in the mdx documentation.

Describe alternatives you've considered

If I use the same title in the mdx <Meta /> and tsx meta, I can use <ArgsTable story={PRIMARY_STORY} /> and it works, but there is a duplicate title warning in the console: Duplicate title: 'Badge'. That led me to separating the mdx from the tsx with different names, <Meta title="Badge/Overview" component={Badge} /> and title: 'Badge/Badge' respectively. I can no longer get ArgsTable to work with the separate names though.

<ArgsTable of={Badge} /> does not use the argTypes customizations defined in the tsx file and it also doesn't allow the story to be changed with controls in the args table.

[ericmatthys]

This was fixed by not exporting meta at all from the tsx file and still using <ArgsTable story={PRIMARY_STORY} /> in the mdx file.

[nelsieborja]

This was fixed by not exporting meta at all from the tsx file and still using <ArgsTable story={PRIMARY_STORY} /> in the mdx file.

ArgsTable doesn't work with embedded story:

// MDX file
<Story name="check story" id="example-button--primary" />
<ArgsTable story="check story" />

This gives the following error:
"Cannot read property 'id' of undefined ..."