In a custom MDX documentation page, how can i link an arg table to a story

[gurdilou]

Hello,

I am following this pattern : https://storybook.js.org/docs/react/writing-docs/docs-page#with-mdx-documentation.
I have a .stories.tsx file that defines a MDX documentation page:

//MyTiles.stories.mdx
import CustomMDXDocumentation from "./MyTiles.mdx";
export default {
    title: 'Components/MyTilesView',
    component: MyTilesView,
    parameters: {
        docs: {
            page: CustomMDXDocumentation,
        }
    }
} as Meta;

In MDX file I would like to attach arg table a specific story :

<Canvas>
  <Story id={"components-mytilesview--one-line"}/>
</Canvas>
<ArgsTable ???/>

I tried following setups, but none work:

<Story id={"components-mytilesview--one-line"}/>
<ArgsTable story={"components-mytilesview--one-line"}/>

import {OneLineStory} from "./MyTiles.stories";
<Story name={"OneLine"} story={OneLineStory}/>
<ArgsTable story={"OneLine"}/>

Any idea to achieve this ?

Thank you !

[bytelabsco]

I had the same issue, and I clumsily stumbled upon an answer while looking through issues.

in my component.stories.tsx:

import mdx from './component.mdx';

export default {
    title: 'Component',
    component: 'my-component',
    argTypes: {
       // Your argTypes Here
    },
    parameters: {
        docs: {
            page: mdx
        }
    }
}
...

then in component.mdx:

import {Title, Description, Primary, ArgsTable, Stories} from '@storybook/addon-docs';

import readme from './readme.md';

<Title />
<Description>{readme}</Description>
<Primary />
<Stories />
<ArgsTable story="." />

The trick was adding . as the story name

[gurdilou]

Hello,
I tried this too but it is always linked to the currently selected story.

Try this, have two arg tables linked to two different stories and having some customization on each arg table.
Both of them will point out to the same story 😢

In same way, you may use <ArgsTable story="^" /> but it will point out to component arg table, not the story one.