MDX documentation ArgsTable: "Args table with interactive controls couldn't be auto-generated"

[bobrovnikovaSelfridges]

Facing the same issue in almost every somehow unique component.

All possible args are enabled. Tried: with arg, with argTypes, with both of them, without any at all - still doesn't work. Tried to remove and add each after another argument - no results. Tried to define types both in mdx and in story.
Code:

<ArgsTable of={RadioButtonStory} />

<Meta
  title='RadioButton doc'
  of={RadioButtonStory}
  argTypes={ 
    {name: {
      control: 'text',
     },
    options: {
      control: 'object',
      description: 'An array of options here.',
    },
    onChange: {
       action: 'changed',
      description: 'Callback here',
    },
    orientation: {
      control: 'radio',
      options: ['A', 'B'],
      description: 'ABC...',
    }}}
/>

Even the message confuses me -- Args table with interactive controls couldn't be auto-generated? But why for some components it works? What does it mean interactive controls? I thought all controls are interactive.
Would be glad to get an advice <3

[lqzhgood]

maybe about to #24618 ?

[yuchiu]

Try installing this package @storybook/components, or update it to @storybook/[email protected] if it's an older version. This resolves my issue.

#24738 (reply in thread)

[centigrade-julian-lang]

For me it was stupidly simple - the table wasn’t generated because there was nothing to document.

The component behind the story exposed no public inputs and outputs and the referenced story’s meta.args was empty. As a result, Storybook had no data to render for <ArgTypes />. Although there were public methods (some Angular life-cycle hooks), it seems like compodoc needs at least an input or output in order to list the public life-cycle hooks of angular as well.

I use Compodoc and confirmed it by looking at the component’s entry in documentation.json - it contained no inputs (inputsClass property) or outputs (outputsClass property), so the table could not be generated.

Example:

<!-- my-story.mdx -->
import { Meta, ArgTypes } from '@storybook/blocks';
import * as MyStories from '../stories/my-story';

<Meta of={MyStories} />
<ArgTypes />

@Component({ ... })
export class MyStoryComponent implements OnInit, OnDestroy {
   // no inputs, outputs and public class members besides the angular hooks
   ngOnInit() { ... }

   ngOnDestroy() { ... }
}

// my.stories.ts
const meta: Meta<MyStory> = {
  component: MyStoryComponent,
  args: {}, // nothing to document
};

export default meta;