@repobuddy/storybook 2.21.0 → 2.21.1

package/esm/index.d.ts

@@ -9,7 +9,7 @@ import { Args, DecoratorFunction, Renderer } from "storybook/internal/csf";
 import { Decorator, Meta, StoryContext, StoryObj, StrictArgs } from "@storybook/react-vite";
 export * from "@repobuddy/test";
 
-//#region src/arg-types/fn-to-arg-types.d.ts
+//#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.

package/esm/index.js

@@ -2,7 +2,7 @@
 import { isRunningInTest } from "@repobuddy/test";
 import { prettify } from "htmlfy";
 import { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { twJoin, twMerge } from "tailwind-merge";
 import { SyntaxHighlighter } from "storybook/internal/components";
@@ -108,6 +108,17 @@ const StoryCardScope = memo(function StoryCardScope(props) {
 	if (context === null) return /* @__PURE__ */ jsx(StoryCardContainer, { children: collector });
 	return collector;
 });
+/** Renders cards from registry state without re-rendering when only children change (avoids cascade). */
+const StoryCardList = memo(function StoryCardList({ cards }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: cards.map(({ content, key, ...rest }) => /* @__PURE__ */ jsx(StoryCard, {
+		...rest,
+		children: content
+	}, key)) });
+});
+/** Keeps container children from re-rendering when container state (cards) updates. */
+const StableScopeChildren = memo(function StableScopeChildren({ children }) {
+	return /* @__PURE__ */ jsx(Fragment, { children });
+});
 function StoryCardContainer({ children }) {
 	const [cards, setCards] = useState([]);
 	const contextValue = useMemo(() => ({
@@ -133,13 +144,13 @@ function StoryCardContainer({ children }) {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "rbsb:flex rbsb:flex-col rbsb:gap-2",
-			children: [cards.map(({ content, key, ...rest }) => /* @__PURE__ */ jsx(StoryCard, {
-				...rest,
-				children: content
-			}, key)), children]
+			children: [/* @__PURE__ */ jsx(StoryCardList, { cards }), /* @__PURE__ */ jsx(StableScopeChildren, { children })]
 		})
 	});
 }
+function entryPropsEqual(a, b) {
+	return a.Story === b.Story && a.title === b.title && a.status === b.status && a.appearance === b.appearance && a.className === b.className && a.content === b.content;
+}
 const StoryCardCollector = memo(function StoryCardCollector({ Story, title, status, appearance, className, content }) {
 	const context = useContext(StoryCardRegistryContext);
 	const cardIdRef = useRef(null);
@@ -169,7 +180,7 @@ const StoryCardCollector = memo(function StoryCardCollector({ Story, title, stat
 		if (cardIdRef.current !== null) context.update(cardIdRef.current, entry);
 	}, [context, entry]);
 	return /* @__PURE__ */ jsx(Story, {});
-}, (prev, next) => prev.Story === next.Story);
+}, entryPropsEqual);
 
 //#endregion
 //#region src/decorators/show_doc_source.tsx
@@ -335,6 +346,7 @@ function showDocSource(options) {
 function withStoryCard({ title, status, appearance, content: contentProp, className, ...rest } = {}) {
 	if (isRunningInTest()) return (Story) => /* @__PURE__ */ jsx(Story, {});
 	return (Story, { parameters, viewMode }) => {
+		if (viewMode === "docs") return /* @__PURE__ */ jsx(Story, {});
 		const storyCardParam = parameters.storyCard;
 		const finalTitle = title ?? storyCardParam?.title;
 		const finalAppearance = appearance ?? storyCardParam?.appearance ?? status ?? storyCardParam?.status ?? "info";
@@ -342,7 +354,8 @@ function withStoryCard({ title, status, appearance, content: contentProp, classN
 		const finalContent = contentProp ?? storyCardParam?.content;
 		const finalClassName = className ?? storyCardParam?.className;
 		const content = finalContent ?? parameters.docs?.description?.story ?? parameters.docs?.description?.component;
-		const scopeProps = useMemo(() => ({
+		if (!content && !finalTitle) return /* @__PURE__ */ jsx(Story, {});
+		return /* @__PURE__ */ jsx(StoryCardScope, {
 			Story,
 			content,
 			title: finalTitle,
@@ -350,18 +363,7 @@ function withStoryCard({ title, status, appearance, content: contentProp, classN
 			appearance: finalAppearance,
 			className: finalClassName,
 			...rest
-		}), [
-			Story,
-			content,
-			finalTitle,
-			finalStatus,
-			finalAppearance,
-			finalClassName,
-			rest
-		]);
-		if (viewMode === "docs") return /* @__PURE__ */ jsx(Story, {});
-		if (!content && !finalTitle) return /* @__PURE__ */ jsx(Story, {});
-		return /* @__PURE__ */ jsx(StoryCardScope, { ...scopeProps });
+		});
 	};
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -120,7 +120,7 @@
     "build:code": "tsdown",
     "build:css": "tailwindcss -i ./tailwind.css -o ./styles.css",
     "clean": "rimraf .turbo coverage cjs esm storybook-static *.tsbuildinfo",
-    "coverage": "vitest run --coverage",
+    "cov": "vitest run --coverage",
     "sb": "storybook dev -p 6006",
     "sb:build": "storybook build",
     "test": "vitest run",

package/src/contexts/_story_card_scope.tsx

@@ -24,6 +24,24 @@ export const StoryCardScope = memo(function StoryCardScope(props: StoryCardScope
 	return collector
 })
 
+/** Renders cards from registry state without re-rendering when only children change (avoids cascade). */
+const StoryCardList = memo(function StoryCardList({ cards }: { cards: StoryCardEntryWithKey[] }) {
+	return (
+		<>
+			{cards.map(({ content, key, ...rest }) => (
+				<StoryCard key={key} {...rest}>
+					{content}
+				</StoryCard>
+			))}
+		</>
+	)
+})
+
+/** Keeps container children from re-rendering when container state (cards) updates. */
+const StableScopeChildren = memo(function StableScopeChildren({ children }: { children: ReactNode }) {
+	return <>{children}</>
+})
+
 function StoryCardContainer({ children }: { children: ReactNode }) {
 	const [cards, setCards] = useState<StoryCardEntryWithKey[]>([])
 
@@ -47,12 +65,8 @@ function StoryCardContainer({ children }: { children: ReactNode }) {
 	return (
 		<StoryCardRegistryContext.Provider value={contextValue}>
 			<div className="rbsb:flex rbsb:flex-col rbsb:gap-2">
-				{cards.map(({ content, key, ...rest }) => (
-					<StoryCard key={key} {...rest}>
-						{content}
-					</StoryCard>
-				))}
-				{children}
+				<StoryCardList cards={cards} />
+				<StableScopeChildren>{children}</StableScopeChildren>
 			</div>
 		</StoryCardRegistryContext.Provider>
 	)
@@ -62,35 +76,50 @@ type StoryCardEntryWithKey = StoryCardEntry & { key: string }
 
 interface StoryCardCollectorProps extends StoryCardScopeProps {}
 
-const StoryCardCollector = memo(
-	function StoryCardCollector({ Story, title, status, appearance, className, content }: StoryCardCollectorProps) {
-		const context = useContext(StoryCardRegistryContext)!
-		const cardIdRef = useRef<string | null>(null)
-
-		const entry = useMemo(
-			() => ({ title, status, appearance, className, content }),
-			[title, status, appearance, className, content]
-		)
-
-		// Register on mount, unregister on unmount only
-		useLayoutEffect(() => {
-			cardIdRef.current = context.add(entry)
-			return () => {
-				if (cardIdRef.current !== null) {
-					context.remove(cardIdRef.current)
-					cardIdRef.current = null
-				}
-			}
-		}, [context])
+function entryPropsEqual(a: StoryCardCollectorProps, b: StoryCardCollectorProps): boolean {
+	return (
+		a.Story === b.Story &&
+		a.title === b.title &&
+		a.status === b.status &&
+		a.appearance === b.appearance &&
+		a.className === b.className &&
+		a.content === b.content
+	)
+}
+
+const StoryCardCollector = memo(function StoryCardCollector({
+	Story,
+	title,
+	status,
+	appearance,
+	className,
+	content
+}: StoryCardCollectorProps) {
+	const context = useContext(StoryCardRegistryContext)!
+	const cardIdRef = useRef<string | null>(null)
 
-		// Update registry when entry changes (avoids remove+add churn)
-		useLayoutEffect(() => {
+	const entry = useMemo(
+		() => ({ title, status, appearance, className, content }),
+		[title, status, appearance, className, content]
+	)
+
+	// Register on mount, unregister on unmount only
+	useLayoutEffect(() => {
+		cardIdRef.current = context.add(entry)
+		return () => {
 			if (cardIdRef.current !== null) {
-				context.update(cardIdRef.current, entry)
+				context.remove(cardIdRef.current)
+				cardIdRef.current = null
 			}
-		}, [context, entry])
+		}
+	}, [context])
+
+	// Update registry when entry changes (avoids remove+add churn)
+	useLayoutEffect(() => {
+		if (cardIdRef.current !== null) {
+			context.update(cardIdRef.current, entry)
+		}
+	}, [context, entry])
 
-		return <Story />
-	},
-	(prev, next) => prev.Story === next.Story
-)
+	return <Story />
+}, entryPropsEqual)

package/src/decorators/with_story_card.tsx

@@ -1,5 +1,5 @@
 import { isRunningInTest } from '@repobuddy/test'
-import { type ReactNode, useMemo } from 'react'
+import type { ReactNode } from 'react'
 import type { DecoratorFunction, Renderer } from 'storybook/internal/csf'
 import type { StoryCardProps, StoryCardStatus } from '../components/story_card.js'
 import { StoryCardScope } from '../contexts/_story_card_scope.js'
@@ -124,6 +124,8 @@ export function withStoryCard<TRenderer extends Renderer = Renderer>({
 		return (Story) => <Story />
 	}
 	return (Story, { parameters, viewMode }) => {
+		if (viewMode === 'docs') return <Story />
+
 		// Get story card config from parameters if available
 		const storyCardParam = (parameters as Partial<StoryCardParam>).storyCard
 		// Decorator props override parameter values
@@ -137,22 +139,18 @@ export function withStoryCard<TRenderer extends Renderer = Renderer>({
 		// Fallback to docs description if no content provided
 		const content = finalContent ?? parameters.docs?.description?.story ?? parameters.docs?.description?.component
 
-		const scopeProps = useMemo(
-			() => ({
-				Story,
-				content,
-				title: finalTitle,
-				status: finalStatus,
-				appearance: finalAppearance,
-				className: finalClassName,
-				...rest
-			}),
-			[Story, content, finalTitle, finalStatus, finalAppearance, finalClassName, rest]
-		)
-
-		if (viewMode === 'docs') return <Story />
 		if (!content && !finalTitle) return <Story />
 
-		return <StoryCardScope {...scopeProps} />
+		return (
+			<StoryCardScope
+				Story={Story}
+				content={content}
+				title={finalTitle}
+				status={finalStatus}
+				appearance={finalAppearance}
+				className={finalClassName}
+				{...rest}
+			/>
+		)
 	}
 }

package/src/index.ts

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

package/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme {
   :root, :host {