2021 October 28thUsing stories as components in Storybookstorybook,
Using stories as components in Storybook
One thing I've always wondered is if it's possible to re-use a Story, or use a Story as a component.
The scenario for me was having an All story that displayed each individual story I had for that component (in MDX you don't need an All story since you can preview multiple stories in a block). I didn't want to essentially write the same component twice.
I found the solution on this page:
// List.stories.js | List.stories.jsx
import React from 'react';
import List from './List';
//👇 Instead of importing ListItem, we import the stories
import { Unchecked } from './ListItem.stories';
export const OneItem = (args) => (
<List {...args}>
<Unchecked {...Unchecked.args} />
</List>
);
Applying it to my All scenario, here's an example of how it would look like:
const Template = (args) => <NavigationItem {...args} />;
export const All = () => {
return (
<>
<Active {...Active.args} label="Active Nav Item" tw="mb-4" />
<Inactive {...Inactive.args} label="Inactive Nav Item" />
</>
);
};
export const Active = Template.bind({});
Active.args = {
label: "Budget",
href: "#href",
current: true,
icon: HomeIcon,
};
export const Inactive = Template.bind({});
Inactive.args = {
...Active.args,
current: false,
};