@repobuddy/storybook 2.19.1 → 2.20.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.19.1",
+  "version": "2.20.0",
   "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