Add manager-helpers example

.storybook/manager.ts

@@ -0,0 +1,15 @@
+import { addons } from "storybook/manager-api";
+
+import { renderLabel } from "../dist/manager-helpers.js";
+
+/*
+ * This is an example of opt-in usage of addon exports. Your users can choose to
+ * import and use this helper, or not. Opt-in helpers should be exported in their
+ * own file rather than in `manager.tsx`, because importing `manager.tsx` multiple
+ * times can cause the addon registration code to run multiple times.
+ */
+addons.setConfig({
+  sidebar: {
+    renderLabel,
+  },
+});

package.json

@@ -23,6 +23,7 @@
     },
     "./preset": "./dist/preset.js",
     "./manager": "./dist/manager.js",
+    "./manager-helpers": "./dist/manager-helpers.js",
     "./package.json": "./package.json"
   },
   "files": [
@@ -74,7 +75,8 @@
   },
   "bundler": {
     "managerEntries": [
-      "src/manager.tsx"
+      "src/manager.tsx",
+      "src/manager-helpers.tsx"
     ],
     "previewEntries": [
       "src/preview.ts",

src/manager-helpers.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import type { API_HashEntry } from 'storybook/internal/types'
+import { ADDON_ID } from "./constants";
+
+/**
+ * This opt-in helper can be manually imported by your users who want to
+ * use it, and ignored by those who don't.
+ */
+export function renderLabel(item: API_HashEntry) {
+  if (
+    item.type !== 'story' &&
+    item.type !== 'docs'
+  ) {
+    return
+  }
+
+  if (item.title.startsWith(ADDON_ID)) {
+    return <span>🌟 {item.name}</span>
+  }
+}