Dynamically loading multiple components while adding stories

[arunstan]

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]

Storybook v6 supports something like this using the Args feature.