How to add multiple components into one story using Storybook?

Question

I just started using storybook, and I need your help. I've git four components for the different icons, and I want to create one story for all of them instead of creating story for each of them.

I've AllIcons.stories.tsx file and in this file I've this:

The problem is that I don't know what component I need to add in my export default object.

export default {
  title: "Icon",
  component: ListIcons,
} as Meta;

export const InterviewEndIconStory = (args: InterviewEndIconProps) => (
  <InterviewEndIcon {...args} />
);

export const RunCodeIconStory = (args: RunCodeIconProps) => (
  <RunCodeIcon {...args} />
);

export const TemplateEditIconStory = (args: TemplateEditIconProps) => (
  <TemplateEditIcon {...args} />
);

export const VideoOffIconStory = (args: VideoOffIconProps) => (
  <VideoOffIcon {...args} />
);

Answer 1

You can simply render all the buttons into a single react fragment, so that all buttons are bundled into a single story:

export default {
  title: "Icon",
  component: ListIcons,
} as Meta;

export const BaseStory = (args: InterviewEndIconProps) => (
  <>
    <InterviewEndIcon {...args} />
    <RunCodeIcon {...args} />
    <TemplateEditIcon {...args} />
    <VideoOffIcon {...args} />
  </>
);

If you foresee addition arbitrary number of icons in the future, you can instead store those components name in an array and iterate through them, so you don't have to repeat {...args} all the time. Probably a micro-optimisation at this point though ;)

const iconComponents = [
  'InterviewEndIcon',
  'RunCodeIcon',
  'TemplateEditIcon',
  'VideoOffIcon'
];

export const BaseStory = (args: InterviewEndIconProps) => (
  <>
    {iconComponents.map(IconComponent => {
      return <IconComponent key={IconComponent} {...args} />
    })}
  </>
);