[Feature Request]: Storybook composition support

[kubijo]

The problem

I would like to use storybook-composition in our storybook instance to be able to seamlessly browse your reference instance.

When I, however, try that by adding the following section to our storybook config…

module.exports = {
    ...config,
    refs: {
        'design-system': {
            title: 'Carbon Design System',
            url: 'https://react.carbondesignsystem.com',
            expanded: false,
        }
    }
}

…I only get this error

• Clicking on the first entry in the popup takes me to your storybook instance and it renders fine
• Our storybook version is 7.0.2

The solution

I would like the feature to work as described in https://storybook.js.org/docs/react/sharing/storybook-composition

Examples

No response

Application/PAL

No response

Business priority

None

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[kubijo]

For what it's worth, I have noticed that when I do that setup, it tries to load the following files, so it might just be about enabling the json catalog build & possibly some CORS related tweak…

• https://react.carbondesignsystem.com/index.json
• https://react.carbondesignsystem.com/stories.json

[tay1orjones]

@kubijo Interesting, do you know if composition supports different storybook versions? We're still on v6.5, I see you're on v7.

[kubijo]

I have just discovered this feature too, so I cannot claim any deeper knowledge of it... But from what I can gather just by the behaviour mentioned, it should suffice if the deployment includes a correct JSON file so that the embedding sites can render a menu with links for the iframe...

If you can enable the buildStoriesJson flag (that you should have available), we should be able to test it easily.