Nested composition

[chpalac]

Summary

Hey all 👋🏻

I have a storybook which only serves as a kind of wrapper for other storybooks I have, so I have set it up to be using composition. Let's say for example:

const config: StorybookConfig = {
  framework: '@storybook/react',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  refs: {
    components: {
      title: 'Components',
      url: '...',
    },
    designSystem: {
      title: 'Design System',
      url: '...',
    },
    prototypes: {
      title: 'Prototypes',
      url: '...',
    },
  },
};

Everything good so far, but then I got the need to visually classify/separate the storybooks. So my first thought was to use something similar as we do for stories with the title structure that will render folders...

const config: StorybookConfig = {
  framework: '@storybook/react',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  refs: {
    components: {
      title: 'Shared Component/Components',
      url: '...',
    },
    designSystem: {
      title: 'Shared Component/Design System',
      url: '...',
    },
    prototypes: {
      title: 'Experiments/Prototypes',
      url: '...',
    },
  },
};

So I expected that this would render 2 folders Shared Components and Experiments and each of this folders would have the storybooks. That clearly didn't work, that just added Shared Components in the title in the sidebar.

My second alternative was then to 3 "wrappers" one for the Shared Components, one for the Prototypes and a the third which was basically what we have which is the Root Wrapper. So something similar to:

Shared components

const config: StorybookConfig = {
  framework: '@storybook/react',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  refs: {
    components: {
      title: 'Components',
      url: '...',
    },
    designSystem: {
      title: 'Design System',
      url: '...',
    },
  },
}; 

Experiments

const config: StorybookConfig = {
  framework: '@storybook/react',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  refs: {
    prototypes: {
      title: 'Prototypes',
      url: '...',
    },
  },
};

Root Wrapper

const config: StorybookConfig = {
  framework: '@storybook/react',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  refs: {
    sharedComponents: {
      title: 'Shared Components',
      url: '...',
    },
    experiments: {
      title: 'Experiments',
      url: '...',
    },
  },
};

But the result of that is not rendering any of the storybooks when I run the Root Wrapper, although I can see the storybooks composition for each of them when I click on "See this storybook externally".

Is there anything I can do to achieve this? Is there any other way to visually separate the storyboks that are using composition?

Additional information

No response

Create a reproduction

No response