'How to add multiple components into one story using Storybook?
I just started using storybook, and I need your help. I've 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} />
);
Solution 1:[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} />
})}
</>
);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 |