Question

Technologies:

javascript

Tolerim

8 hours ago

What is the method for incorporating a component's control options into a stories.mdx file?

In my Storybook, I am displaying a file called ..stories.mdx, which contains the following code:

import { Meta, Description } from '@storybook/addon-docs';
import {
  Story,
  Source,
  ArgsTable,
  Canvas,
} from '@storybook/addon-docs';
import dedent from 'ts-dedent';

import texten from './Abouten.md';


<Meta title="Icons" parameters={{ previewTabs: { canvas: { hidden: true }, 'storybook/docs/panel': { hidden: true }, 'usage-tab/panel': { hidden: true } } }} />


<Description markdown={text_en} />

<Canvas columns={2} withSource="open" >
  <Story id="components-icon--default"></Story>
</Canvas>

<ArgsTable id="components-icon--default" />

<ifx-icons-preview />

I am displaying an Icon component inside the canvas, and below that, I'm trying to show the control options for the Icon component using the ArgsTable component. However, the ArgsTable is displaying "Args unsupported" instead of the control options. I have tried using the <ArgsTable story="." /> code, but it only displays "Nothing found" instead of the control options. In my Icon.stories.ts file, the args look like this:

export default {
  title: 'Components/Icon',
  args: {
    icon: "c-check-16"
  }
}

I have also added the argTypes configuration, but that does not change anything. Can anyone suggest a solution to this problem?

Answers(1)

Accepted Answer

It looks like you are using Storybook with the @storybook/addon-docs addon to display your stories in an .mdx file. The Args unsupported message indicates that the ArgsTable addon is not able to display the control options for your Icon component. To display the control options, you need to provide argTypes for your Icon component in the story file (Icon.stories.ts), like this:

import { Story } from '@storybook/react';
import Icon, { IconProps } from './Icon';

export default {
  title: 'Components/Icon',
  component: Icon,
  argTypes: {
    icon: {
      control: {
        type: 'text',
      },
    },
  },
};

const Template: Story<IconProps> = (args) => <Icon {...args} />;

export const Default = Template.bind({});
Default.args = {
  icon: 'c-check-16',
};

In this example, the argTypes object includes a key for the icon prop, and the control option is set to 'text' to display a text input control for the prop. Once you provide argTypes for your Icon component in the story file, the ArgsTable addon should be able to display the control options in the .mdx file. You can use the id prop to specify the ID of the story for which to display the control options, like this:

<ArgsTable id="components-icon--default" />

Make sure that the ID matches the ID of the story defined in Icon.stories.ts.