@repobuddy/storybook 2.5.0 → 2.7.0

package/esm/index.d.ts

@@ -2,12 +2,24 @@
 import { UserConfig } from "htmlfy";
 import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { AnyFunction, CreateTuple, IsStringLiteral, Properties, Tail } from "type-plus";
 import { ClassNameProps, StyleProps } from "@just-web/css";
 import { Args, DecoratorFunction, Renderer } from "storybook/internal/csf";
 import { Decorator, Meta, StoryContext, StoryObj, StrictArgs } from "@storybook/react-vite";
-import { IsStringLiteral } from "type-plus";
 export * from "@repobuddy/test";
 
+//#region src/arg-types/fn-to-arg-types.d.ts
+/**
+ * Converts a function's parameter types to `Args` type for Storybook.
+ * Each name maps to the parameter type at the same index in F.
+ *
+ * @example
+ * type F = (a: number, b: string) => void
+ * 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;
+//#endregion
 //#region src/components/show_html.d.ts
 type ShowHtmlProps = ClassNameProps & StyleProps & {
   selector?: string | undefined;
@@ -67,9 +79,11 @@ type StoryCardProps = {
  * @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.
  * @returns A decorator function that shows the source code of a story above the rendered story
  */
 declare function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(options?: Pick<StoryCardProps, 'className'> & {
+  source?: string | undefined;
   showOriginalSource?: boolean | undefined;
 }): DecoratorFunction<TRenderer, TArgs>;
 //#endregion
@@ -786,4 +800,4 @@ type ExtendsStoryObj<S extends {
   tags?: ExtractStringLiterals<NonNullable<S['tags']>[number]> extends infer MT ? IsStringLiteral<MT> extends true ? Array<(string & {}) | MT | E['tag']> | undefined : Array<(string & {}) | E['tag']> | undefined : never;
 };
 //#endregion
-export { ActionsParam, BackgroundsParam, DocsParam, ExtendMeta, ExtendStoryObj, ExtendsMeta, ExtendsStoryObj, GlobalApiBackgroundsParam, GlobalApiViewportParam, LayoutParam, ShowHtml, ShowHtmlProps, SourceProps, StorySortParam, StorybookBuiltInParams, TestParam, Viewport, ViewportParam, WithStoryCardProps, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineTestParam, defineViewportParam, showDocSource, whenRunningInTest, withStoryCard };
+export { ActionsParam, BackgroundsParam, DocsParam, ExtendMeta, ExtendStoryObj, ExtendsMeta, ExtendsStoryObj, FnToArgTypes, GlobalApiBackgroundsParam, GlobalApiViewportParam, LayoutParam, ShowHtml, ShowHtmlProps, SourceProps, StorySortParam, StorybookBuiltInParams, TestParam, Viewport, ViewportParam, WithStoryCardProps, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineTestParam, defineViewportParam, showDocSource, whenRunningInTest, withStoryCard };

package/esm/index.js

@@ -81,6 +81,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.
 * @returns A decorator function that shows the source code of a story above the rendered story
 */
 function showDocSource(options) {
@@ -92,7 +93,7 @@ function showDocSource(options) {
 			channel.on("DARK_MODE", setIsDark);
 			return () => channel.off("DARK_MODE", setIsDark);
 		}, []);
-		const code = 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);
 		const language = code === docs?.source?.originalSource ? void 0 : docs?.source?.language;
 		const isOriginalSource = code === docs?.source?.originalSource;
 		const content = /* @__PURE__ */ jsx(SyntaxHighlighter, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -55,7 +55,7 @@
     "class-variance-authority": "^0.7.1",
     "htmlfy": "^1.0.0",
     "tailwind-merge": "^3.4.0",
-    "type-plus": "8.0.0-beta.7"
+    "type-plus": "8.0.0-beta.8"
   },
   "devDependencies": {
     "@repobuddy/vitest": "^2.0.0",

package/src/arg-types/fn-to-arg-types.ts

@@ -0,0 +1,24 @@
+import type { AnyFunction, CreateTuple, Properties, Tail } from 'type-plus'
+
+/**
+ * Converts a function's parameter types to `Args` type for Storybook.
+ * Each name maps to the parameter type at the same index in F.
+ *
+ * @example
+ * type F = (a: number, b: string) => void
+ * type R = FnToArgTypes<F, ['x', 'y']>  // { x: number; y: string }
+ */
+export 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

package/src/decorators/show_doc_source.tsx

@@ -15,10 +15,12 @@ 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.
  * @returns A decorator function that shows the source code of a story above the rendered story
  */
 export function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(
 	options?: Pick<StoryCardProps, 'className'> & {
+		source?: string | undefined
 		showOriginalSource?: boolean | undefined
 	}
 ): DecoratorFunction<TRenderer, TArgs> {
@@ -34,9 +36,11 @@ export function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Arg
 			return () => channel.off('DARK_MODE', setIsDark)
 		}, [])
 
-		const code = 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))
 
 		const language = code === docs?.source?.originalSource ? undefined : docs?.source?.language
 

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from '@repobuddy/test'
+export type * from './arg-types/fn-to-arg-types.ts'
 export * from './components/show_html.tsx'
 export * from './decorators/show_doc_source.tsx'
 export * from './decorators/with_story_card.tsx'