Dynamically loading multiple components while adding stories
arunstan opened this issue · 1 comments
arunstan commented
Is there a way to add the components dynamically rather than manually importing one each ? I am looking to create a single story for all the components
For eg rather than having
import Button from '/components/Button/'
import Link from '/components/Link/'
import Panel from '/components/Panel/'
import Header from '/components/Header/'
import Footer from '/components/Footer/'
storiesOf('Addon Chapters')
.addWithChapters(
'All Stories', {
subtitle: 'All Organisms',
chapters: [
{
sections: [
{
sectionFn: () => (<Button />)
},
{
sectionFn: () => (<Link />)
},
{
sectionFn: () => (<Panel />)
},
{
sectionFn: () => (<Header />)
},
{
sectionFn: () => (<Footer />)
}
// .. and so on
]
}
]
}
)
so that something like below could be written
const getSections = (comps) => comps.map(comp => { sectionFn: () => (<Comp />) })
storiesOf('Addon Chapters')
.addWithChapters(
'All Stories', {
subtitle: 'All Organisms',
chapters: [
{
sections: getSections(dynamicallyLoadedComponents)
}
]
}
)
Is it possible to dynamically import all components in sub directories and set it to dynamicallyLoadedComponents
?
brettgoss commented
Storybook v6 supports something like this using the Args feature.