@repobuddy/storybook 2.19.0 → 2.20.0

package/esm/index.d.ts

@@ -18,7 +18,7 @@ export * from "@repobuddy/test";
  * type R = FnToArgTypes<F, ['x', 'y']>  // { x: number; y: string }
  */
 type FnToArgTypes<F extends AnyFunction, Names extends CreateTuple<Parameters<F>['length'], string> = CreateTuple<Parameters<F>['length'], string>> = Properties<ReduceToRecord<Parameters<F>, Names>>;
-type ReduceToRecord<Params extends Array<any>, Names extends Array<any>> = Names['length'] extends 0 ? unknown : Names['length'] extends 1 ? Names extends [infer K extends string] ? { [I in K]: Params[0] } : never : Names extends [infer K extends string, ...infer Rest] ? { [I in K]: Params[0] } & ReduceToRecord<Tail<Params>, Rest> : never;
+type ReduceToRecord<Params extends Array<any>, Names extends Array<any>> = Names['length'] extends 0 ? unknown : Names['length'] extends 1 ? Names extends [infer K extends string] ? { [I in K]: Params[0] } : never : Names extends [infer K extends string, ...infer Rest] ? { [I in K]: Params[0] } & ReduceToRecord<Tail<Params>, Rest> : Record<string, any>;
 //#endregion
 //#region src/components/show_html.d.ts
 type ShowHtmlProps = ClassNameProps & StyleProps & {
@@ -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.0",
+  "version": "2.20.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -24,7 +24,10 @@
   },
   "exports": {
     ".": {
-      "types": "./esm/index.d.ts",
+      "types": [
+        "./esm/index.d.ts",
+        "./src/index.ts"
+      ],
       "default": "./esm/index.js"
     },
     "./manager": {
@@ -32,11 +35,17 @@
       "default": "./esm/manager/index.js"
     },
     "./storybook-addon-tag-badges": {
-      "types": "./esm/storybook-addon-tag-badges/index.d.ts",
+      "types": [
+        "./esm/storybook-addon-tag-badges/index.d.ts",
+        "./src/storybook-addon-tag-badges/index.ts"
+      ],
       "default": "./esm/storybook-addon-tag-badges/index.js"
     },
     "./storybook-dark-mode": {
-      "types": "./esm/storybook-dark-mode/index.d.ts",
+      "types": [
+        "./esm/storybook-dark-mode/index.d.ts",
+        "./src/storybook-dark-mode/index.ts"
+      ],
       "default": "./esm/storybook-dark-mode/index.js"
     },
     "./tailwind": {
@@ -65,11 +74,11 @@
     "type-plus": "8.0.0-beta.8"
   },
   "devDependencies": {
-    "@repobuddy/vitest": "^2.0.0",
-    "@storybook-community/storybook-dark-mode": "^7.0.2",
-    "@storybook/addon-docs": "^10.2.4",
-    "@storybook/addon-vitest": "^10.1.10",
-    "@storybook/react-vite": "^10.2.4",
+    "@repobuddy/vitest": "^2.1.1",
+    "@storybook-community/storybook-dark-mode": "^7.1.0",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/addon-vitest": "^10.2.8",
+    "@storybook/react-vite": "^10.2.8",
     "@tailwindcss/cli": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
     "@vitest/browser": "^4.0.16",
@@ -80,8 +89,9 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rimraf": "^6.1.0",
-    "storybook": "^10.1.10",
-    "storybook-addon-tag-badges": "^3.0.2",
+    "storybook": "^10.2.8",
+    "storybook-addon-code-editor": "^6.1.3",
+    "storybook-addon-tag-badges": "^3.0.6",
     "tailwindcss": "^4.1.17",
     "tsdown": "^0.20.0",
     "vite": "^7.3.0",
@@ -90,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/arg-types/fn-to-arg-types.ts

@@ -21,4 +21,4 @@ type ReduceToRecord<Params extends Array<any>, Names extends Array<any>> = Names
 			: never
 		: Names extends [infer K extends string, ...infer Rest]
 			? { [I in K]: Params[0] } & ReduceToRecord<Tail<Params>, Rest>
-			: never
+			: Record<string, any>

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