storybook-addon-tag-badges/dist/manager.js

Display Storybook tags as badges in the sidebar and toolbar.

import { matchTags, getBadgeProps, ADDON_ID, EVENTS, renderLabel, KEY, TOOL_ID, defaultConfig, useBadgesToDisplay, WithBadge } from './chunk-VQKJDI6E.js';
import React from 'react';
import { addons, types } from 'storybook/manager-api';
import memoizerific from 'memoizerific';
import { styled } from 'storybook/theming';

var Separator = styled.div`
  content: ' ';
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 2px;
  margin-right: 2px;
  display: inline-block;
`;
var Root = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;

  &:last-child div:last-child {
    display: none;
  }
`;
var Tool = function Tool2({ api }) {
  const { [KEY]: parameters } = addons.getConfig();
  const storyData = api.getCurrentStoryData();
  const { tags, type } = storyData ?? {};
  const badgesToDisplay = useBadgesToDisplay({
    context: "toolbar",
    parameters,
    tags,
    type
  });
  return badgesToDisplay.length ? /* @__PURE__ */ React.createElement(Root, { key: TOOL_ID }, badgesToDisplay.map(({ badge, tag }) => /* @__PURE__ */ React.createElement(
    WithBadge,
    {
      config: badge,
      context: "toolbar",
      entry: storyData,
      key: tag,
      tag
    }
  )), /* @__PURE__ */ React.createElement(Separator, null)) : "";
};

// src/manager.tsx
function readConfig(config = addons.getConfig()) {
  return config?.tagBadges ?? defaultConfig;
}
var computeBadgeData = memoizerific(100)((tags, context, config) => {
  return config.flatMap((config2) => {
    const matchedTags = matchTags(tags, config2.tags);
    return matchedTags.map((tag) => {
      const badge = getBadgeProps(config2.badge, void 0, tag, context);
      return { tag, badge };
    });
  });
});
addons.register(ADDON_ID, (api) => {
  api.on(
    EVENTS.REQUEST_MDX_BADGE_RENDER,
    (data) => {
      const { tags, context, requestId } = data;
      const config = readConfig();
      const badgeData = computeBadgeData(tags, context, config);
      api.emit(EVENTS.MDX_BADGE_RENDER_RESPONSE, {
        requestId,
        badges: badgeData
      });
    }
  );
  addons.setConfig({
    [KEY]: readConfig(),
    sidebar: { renderLabel, ...addons.getConfig()?.sidebar }
  });
  addons.add(TOOL_ID, {
    type: types.TOOL,
    title: "Tag Badges",
    render: () => /* @__PURE__ */ React.createElement(Tool, { api })
  });
});