@repobuddy/storybook 2.19.1 → 2.20.1

package/esm/index.d.ts

@@ -110,12 +110,12 @@ declare function StoryCard({
  * @param options - Options for the showDocSource decorator
  * @param options.showOriginalSource - Whether to show the original source code in a card
  * @param options.className - Class name to apply to the card
- * @param options.source - Source code to show if provided.
+ * @param options.source - Source code to show. Can be a string, or a function `(originalSource) => string` that receives the story's original source and returns the code to display.
  * @param options.placement - Where to show the source code relative to the story.
  * @returns A decorator function that shows the source code of a story above or below the rendered story
  */
 declare function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(options?: Pick<StoryCardProps, 'className'> & {
-  source?: string | undefined;
+  source?: ((source: string | undefined) => string) | string | undefined;
   showOriginalSource?: boolean | undefined;
   /**
    * Where to show the source code relative to the story.

package/esm/index.js

@@ -168,7 +168,7 @@ const channel = addons.getChannel();
 * @param options - Options for the showDocSource decorator
 * @param options.showOriginalSource - Whether to show the original source code in a card
 * @param options.className - Class name to apply to the card
-* @param options.source - Source code to show if provided.
+* @param options.source - Source code to show. Can be a string, or a function `(originalSource) => string` that receives the story's original source and returns the code to display.
 * @param options.placement - Where to show the source code relative to the story.
 * @returns A decorator function that shows the source code of a story above or below the rendered story
 */
@@ -181,7 +181,8 @@ function showDocSource(options) {
 			channel.on("DARK_MODE", setIsDark);
 			return () => channel.off("DARK_MODE", setIsDark);
 		}, []);
-		const code = options?.source ?? (options?.showOriginalSource ? docs?.source?.originalSource : docs?.source?.code ?? docs?.source?.originalSource);
+		const originalSource = options?.showOriginalSource ? docs?.source?.originalSource : docs?.source?.code ?? docs?.source?.originalSource;
+		const code = typeof options?.source === "function" ? options?.source(originalSource) : options?.source ?? originalSource;
 		const language = code === docs?.source?.originalSource ? void 0 : docs?.source?.language;
 		const isOriginalSource = code === docs?.source?.originalSource;
 		const sourceContent = /* @__PURE__ */ jsx(SyntaxHighlighter, {

package/esm/storybook-addon-tag-badges/index.js

@@ -104,7 +104,21 @@ const removeBadge = {
 			},
 			tooltip: version === "next" ? "Will be removed in the next major release" : `Will be removed in version ${version}`
 		};
-	}
+	},
+	display: { sidebar: [
+		{
+			type: "component",
+			skipInherited: false
+		},
+		{
+			type: "story",
+			skipInherited: false
+		},
+		{
+			type: "docs",
+			skipInherited: false
+		}
+	] }
 };
 /** Badge (⚠️) for stories that need updating. */
 const outdatedBadge = {
@@ -205,7 +219,13 @@ const sourceBadge = {
 		},
 		tooltip: "Source Code"
 	},
-	display: { mdx: false }
+	display: {
+		mdx: false,
+		sidebar: {
+			type: "story",
+			skipInherited: false
+		}
+	}
 };
 /** Badge (📸) for stories with snapshot tests. Shown in toolbar only, not in sidebar. */
 const snapshotBadge = {
@@ -234,7 +254,10 @@ const unitBadge = {
 		},
 		tooltip: "Unit Test"
 	},
-	display: { sidebar: true }
+	display: { sidebar: {
+		type: "story",
+		skipInherited: false
+	} }
 };
 /** Badge (🔗) for stories with integration tests. Hidden in sidebar. */
 const integrationBadge = {
@@ -247,7 +270,10 @@ const integrationBadge = {
 		},
 		tooltip: "Integration Test"
 	},
-	display: { sidebar: false }
+	display: { sidebar: {
+		type: "story",
+		skipInherited: false
+	} }
 };
 /** Badge (⌨️) for stories that demonstrate or test keyboard interaction. */
 const keyboardBadge = {
@@ -283,7 +309,11 @@ const useCaseBadge = {
 			borderColor: "transparent"
 		},
 		tooltip: "Use Case"
-	}
+	},
+	display: { sidebar: {
+		type: "story",
+		skipInherited: false
+	} }
 };
 /** Badge (✨) for example or demo stories. */
 const exampleBadge = {
@@ -295,7 +325,11 @@ const exampleBadge = {
 			borderColor: "transparent"
 		},
 		tooltip: "Example"
-	}
+	},
+	display: { sidebar: {
+		type: "story",
+		skipInherited: false
+	} }
 };
 /**
 * Configuration for story tag badges that appear in the Storybook sidebar.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.19.1",
+  "version": "2.20.1",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -100,12 +100,16 @@
   "peerDependencies": {
     "@storybook-community/storybook-dark-mode": "^7.0.0",
     "@storybook/addon-docs": "^10.2.4",
+    "@types/react": ">= 16",
     "storybook-addon-tag-badges": "^3.0.2"
   },
   "peerDependenciesMeta": {
     "@storybook-community/storybook-dark-mode": {
       "optional": true
     },
+    "@types/react": {
+      "optional": true
+    },
     "storybook-addon-tag-badges": {
       "optional": true
     }

package/src/decorators/show_doc_source.tsx

@@ -16,13 +16,13 @@ const channel = addons.getChannel()
  * @param options - Options for the showDocSource decorator
  * @param options.showOriginalSource - Whether to show the original source code in a card
  * @param options.className - Class name to apply to the card
- * @param options.source - Source code to show if provided.
+ * @param options.source - Source code to show. Can be a string, or a function `(originalSource) => string` that receives the story's original source and returns the code to display.
  * @param options.placement - Where to show the source code relative to the story.
  * @returns A decorator function that shows the source code of a story above or below the rendered story
  */
 export function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(
 	options?: Pick<StoryCardProps, 'className'> & {
-		source?: string | undefined
+		source?: ((source: string | undefined) => string) | string | undefined
 		showOriginalSource?: boolean | undefined
 		/**
 		 * Where to show the source code relative to the story.
@@ -44,11 +44,12 @@ export function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Arg
 			return () => channel.off('DARK_MODE', setIsDark)
 		}, [])
 
+		const originalSource = options?.showOriginalSource
+			? docs?.source?.originalSource
+			: (docs?.source?.code ?? docs?.source?.originalSource)
+
 		const code =
-			options?.source ??
-			(options?.showOriginalSource
-				? docs?.source?.originalSource
-				: (docs?.source?.code ?? docs?.source?.originalSource))
+			typeof options?.source === 'function' ? options?.source(originalSource) : (options?.source ?? originalSource)
 
 		const language = code === docs?.source?.originalSource ? undefined : docs?.source?.language
 

package/src/storybook-addon-tag-badges/tag_badges.ts

@@ -152,6 +152,22 @@ export const removeBadge: TagBadgeParameter = {
 			tooltip:
 				version === 'next' ? 'Will be removed in the next major release' : `Will be removed in version ${version}`
 		}
+	},
+	display: {
+		sidebar: [
+			{
+				type: 'component',
+				skipInherited: false
+			},
+			{
+				type: 'story',
+				skipInherited: false
+			},
+			{
+				type: 'docs',
+				skipInherited: false
+			}
+		]
 	}
 }
 
@@ -270,7 +286,11 @@ export const sourceBadge: TagBadgeParameter = {
 		tooltip: 'Source Code'
 	},
 	display: {
-		mdx: false
+		mdx: false,
+		sidebar: {
+			type: 'story',
+			skipInherited: false
+		}
 	}
 }
 
@@ -303,7 +323,10 @@ export const unitBadge: TagBadgeParameter = {
 		tooltip: 'Unit Test'
 	},
 	display: {
-		sidebar: true
+		sidebar: {
+			type: 'story',
+			skipInherited: false
+		}
 	}
 }
 
@@ -319,7 +342,10 @@ export const integrationBadge: TagBadgeParameter = {
 		tooltip: 'Integration Test'
 	},
 	display: {
-		sidebar: false
+		sidebar: {
+			type: 'story',
+			skipInherited: false
+		}
 	}
 }
 
@@ -359,6 +385,12 @@ export const useCaseBadge: TagBadgeParameter = {
 			borderColor: 'transparent'
 		},
 		tooltip: 'Use Case'
+	},
+	display: {
+		sidebar: {
+			type: 'story',
+			skipInherited: false
+		}
 	}
 }
 
@@ -372,6 +404,12 @@ export const exampleBadge: TagBadgeParameter = {
 			borderColor: 'transparent'
 		},
 		tooltip: 'Example'
+	},
+	display: {
+		sidebar: {
+			type: 'story',
+			skipInherited: false
+		}
 	}
 }