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.