Import all stories within a folder in Storybook RN

[idrakimuhamad]

Currently to load the stories based on the initialisation are something like below.

const getStories = () => {
  return {
    '../../../packages/ui/stories/components/Avatar.stories.tsx': require('../../../packages/ui/stories/components/Avatar.stories'),
    '../../../packages/ui/stories/components/Box.stories.tsx': require('../../../packages/ui/stories/components/Box.stories'),
    '../../../packages/ui/stories/components/Button.stories.tsx': require('../../../packages/ui/stories/components/Button.stories'),
  };
};

Is there any way that we can do this like the web, so I do not have to paste the path manually one by one? I understand it can find my stories during initialisation, but after that I have ti manually add any new story I have. Also the path of my stories my reside outside of the storybook app since its in a monorepo.

"stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    "../../../packages/ui/stories/**/*.stories.mdx",
    '../../../packages/ui/stories/**/*.stories.@(js|jsx|ts|tsx)'
  ]

[idrakimuhamad]

Okay after trying to generate a project using the starter project, I notice there's this script that will automation edit the getStories based on the stories path you set at the main.js.

sb-rn-get-stories --config-path .ondevice

It is called on each of the storybook script so whenever you. add a new one, just need to re-trigger it again.

So inside the main.js just add the path to more stories:

module.exports = {
  stories: [
    "../components/**/*.stories.?(ts|tsx|js|jsx)",
    "../../../packages/ui/stories/**/*.stories.mdx",
    '../../../packages/ui/stories/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    "@storybook/addon-ondevice-controls",
    "@storybook/addon-ondevice-actions",
    "@storybook/addon-ondevice-backgrounds",
    "@storybook/addon-ondevice-notes",
  ],
};

It will then pick up automatically. Thanks!