feat: support storybook composition

[RobbyRabbitman]

Hi, thanks for the great addon!

I wonder if displaying the badges in a storybook composition setup is possible - probably not because the host just queries the metadata of the components and stories of the other storybook instances right?

[Sidnioulz]

Hi @RobbyRabbitman!

For sure, tagBadges addons defined on the composed Storybooks would not load (https://storybook.js.org/docs/sharing/storybook-composition says somewhere that composed addons do not get loaded).

I don't know if addons defined on the Storybook instance that loads external stories run everywhere. I also don't know if the sidebar entries go through the same code, and that's something I'd need to try out.

If you have a public repo set up with composition already configured, feel free to share it. It'll save me some time to repro and test.

[RobbyRabbitman]

Thanks for the reply, I will try it out in the next couple of days but i cannot share it 😄

[Sidnioulz]

Thanks! I'm assigning this to you so I know I'm waiting to hear back from you :)

[RobbyRabbitman]

Observation: the badges are shown when the config is also set on the host storybook instance - however I wonder why the output is different. Left=host and Right=Child. Both instances use the framework @storybook/web-components-vite and set exactly the same config, because its in a shared package. I haven't got the time to debug it yet.

export const createHdiComponentTagConfig = (
  ...config: TagBadgeParameters
): {
  [STORYBOOK_ADDON_TAG_BADGES_CONFIG_KEY]: TagBadgeParameters;
} => ({
  [STORYBOOK_ADDON_TAG_BADGES_CONFIG_KEY]: [
    {
      tags: ['preview'] satisfies HdiComponentTag[],
      badge: {
        text: 'Preview',
      },
    },
    ...config,
    ...defaultConfig,
  ],
});

[Sidnioulz]

Could you please check lock files for both projects to check they use the same version? Just to eliminate the matter of a recent update I did that changes display conditions for stories badges.

[Sidnioulz]

Looking back on this, I believe that when you host Storybook instances, it's the config of the host instance that is applied to addons throughout. This might explain why you have a different outcome when composing in a host vs directly loading those stories.

[marksy]

@RobbyRabbitman did you get this working? If so, how please?

[RobbyRabbitman]

No, it does not work, but I did not spend time debugging it. We will soon go to sb9 - maybe it just works with the new major

[Sidnioulz]

@RobbyRabbitman if you can share a repro repository, I could check if sidebar items in composed stories vs the host instance:

• have the same item types
• have tags loaded properly
• have parent - child relationships loaded properly

I think the explanation lies in how Storybook composes portable stories. I do not believe Storybook 9 should be any different from 8.6 in that regard.

[RobbyRabbitman]

I cant share the repo because were not open source, but thanks for your offer to help! This issue is not a high prio for us atm. Also, if we are the only ones, the cause may be a miss configuration.