From 5d605afaed8b55319f70651b9ce0c60f9c8fc24d Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Mon, 20 Oct 2025 11:22:51 +0200
Subject: [PATCH] Add manager-helpers example

---
 .storybook/manager.ts   | 15 +++++++++++++++
 package.json            |  4 +++-
 src/manager-helpers.tsx | 20 ++++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 .storybook/manager.ts
 create mode 100644 src/manager-helpers.tsx

diff --git a/.storybook/manager.ts b/.storybook/manager.ts
new file mode 100644
index 0000000..c4b2d88
--- /dev/null
+++ b/.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,
+  },
+});
diff --git a/package.json b/package.json
index 8b98b28..2a6ddc1 100644
--- a/package.json
+++ b/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",
diff --git a/src/manager-helpers.tsx b/src/manager-helpers.tsx
new file mode 100644
index 0000000..358329d
--- /dev/null
+++ b/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>
+  }
+}
\ No newline at end of file