@repobuddy/storybook 2.2.0 → 2.2.2

package/esm/index.d.ts

@@ -4,7 +4,6 @@ import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ClassNameProps, StyleProps } from "@just-web/css";
 import { Args, DecoratorFunction, Renderer } from "storybook/internal/csf";
-import { ClassValue } from "class-variance-authority/types";
 import { Decorator, Meta, StoryContext, StoryObj, StrictArgs } from "@storybook/react-vite";
 export * from "@repobuddy/test";
 
@@ -56,9 +55,9 @@ type StoryCardProps = {
    * If a function is provided, it receives the card state and default className,
    * and should return the final className string.
    */
-  className?: ((state: Pick<StoryCardProps, 'status'> & {
+  className?: ((state: Required<Pick<StoryCardProps, 'status'>> & {
     defaultClassName: string;
-  }) => string) | ClassValue | undefined;
+  }) => string) | string | undefined;
   /**
    * Content to display in the card body.
    * Can be any React node (string, JSX, etc.).
@@ -137,6 +136,7 @@ type StoryCardProps = {
  */
 declare function withStoryCard<TRenderer extends Renderer = Renderer>({
   title,
+  status,
   content: contentProp,
   ...rest
 }?: StoryCardProps): DecoratorFunction<TRenderer>;

package/esm/index.js

@@ -70,6 +70,19 @@ function showDocSource() {
 	};
 }
 
+//#endregion
+//#region src/utils/generate_key.ts
+/**
+* Generates a key for React collections, falling back to a simple counter-based ID if crypto.randomUUID is unavailable.
+* crypto.randomUUID() requires a secure context (HTTPS, localhost, or 127.0.0.1).
+*
+* This can be moved to `@just-web` in the future.
+*/
+function generateKey(prefix) {
+	const randomId = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+	return prefix ? `${prefix}-${randomId}` : randomId;
+}
+
 //#endregion
 //#region src/decorators/with_story_card.tsx
 /**
@@ -137,7 +150,7 @@ function showDocSource() {
 *   or fall back to the component description.
 * - Cards are collected and displayed in the order they are defined in the decorators array.
 */
-function withStoryCard({ title, content: contentProp, ...rest } = {}) {
+function withStoryCard({ title, status = "info", content: contentProp, ...rest } = {}) {
 	return (Story, { parameters, viewMode }) => {
 		if (viewMode === "docs") return /* @__PURE__ */ jsx(Story, {});
 		const content = contentProp ?? parameters.docs?.description?.story ?? parameters.docs?.description?.component;
@@ -146,6 +159,7 @@ function withStoryCard({ title, content: contentProp, ...rest } = {}) {
 			Story,
 			content,
 			title,
+			status,
 			...rest
 		});
 	};
@@ -159,36 +173,48 @@ function StoryCardContainerWrapper({ Story, ...props }) {
 	if (context === null) return /* @__PURE__ */ jsx(StoryCardContainer, { children: collector });
 	return collector;
 }
-const StoryCardContext = createContext(null);
 function StoryCardContainer({ children }) {
 	const [cards, setCards] = useState([]);
 	const contextValue = useMemo(() => ({
 		addCard(card) {
-			const id = `story-card-${crypto.randomUUID()}`;
+			const key = generateKey("story-card");
 			setCards((cards$1) => [...cards$1, {
 				...card,
-				id
+				key
 			}]);
-			return id;
+			return key;
 		},
-		removeCard(id) {
-			setCards((cards$1) => cards$1.filter((card) => card.id !== id));
+		removeCard(key) {
+			setCards((cards$1) => cards$1.filter((card) => card.key !== key));
 		}
 	}), []);
 	return /* @__PURE__ */ jsx(StoryCardContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-2",
-			children: [cards.map(({ id, status, className, content, title }) => /* @__PURE__ */ jsxs("section", {
+			children: [cards.map(({ key, status, className, content, title }) => /* @__PURE__ */ jsxs("section", {
 				className: storyCardTheme({ status }, className),
 				children: [title && /* @__PURE__ */ jsx("h2", {
 					className: "text-lg font-bold",
 					children: title
 				}), content]
-			}, id)), children]
+			}, key)), children]
 		})
 	});
 }
+function storyCardTheme(state, className) {
+	const defaultClassName = storyCardVariants(state);
+	if (!className) return defaultClassName;
+	return typeof className === "function" ? className({
+		...state,
+		defaultClassName
+	}) : twMerge(defaultClassName, className);
+}
+const storyCardVariants = cva("flex flex-col gap-1 py-3 px-4 rounded text-black dark:text-gray-100", { variants: { status: {
+	error: "bg-red-100 dark:bg-red-900",
+	warn: "bg-yellow-100 dark:bg-yellow-900",
+	info: "bg-sky-100 dark:bg-sky-900"
+} } });
 function StoryCardCollector({ Story, title, status, className, content }) {
 	const context = useContext(StoryCardContext);
 	const cardIdRef = useRef(null);
@@ -208,22 +234,7 @@ function StoryCardCollector({ Story, title, status, className, content }) {
 	}, []);
 	return /* @__PURE__ */ jsx(Story, {});
 }
-const storyCardTheme = (state, className) => {
-	const defaultClassName = storyCardVariants(state);
-	if (!className) return defaultClassName;
-	return twMerge(defaultClassName, typeof className === "function" ? className({
-		...state,
-		defaultClassName
-	}) : className);
-};
-const storyCardVariants = cva("flex flex-col gap-1 py-3 px-4 rounded text-black dark:text-gray-100", {
-	variants: { status: {
-		error: "bg-red-100 dark:bg-red-900",
-		warn: "bg-yellow-100 dark:bg-yellow-900",
-		info: "bg-sky-100 dark:bg-sky-900"
-	} },
-	defaultVariants: { status: "info" }
-});
+const StoryCardContext = createContext(null);
 
 //#endregion
 //#region src/parameters/define_actions_param.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -54,14 +54,15 @@
     "@repobuddy/test": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "htmlfy": "^1.0.0",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.4.0",
+    "type-plus": "8.0.0-beta.7"
   },
   "devDependencies": {
     "@repobuddy/vitest": "^2.0.0",
     "@storybook-community/storybook-dark-mode": "^7.0.2",
-    "@storybook/addon-docs": "^10.0.7",
-    "@storybook/addon-vitest": "^10.0.7",
-    "@storybook/react-vite": "^10.0.7",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
     "@tailwindcss/cli": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
     "@vitest/browser": "^4.0.16",
@@ -72,7 +73,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rimraf": "^6.1.0",
-    "storybook": "^10.0.8",
+    "storybook": "^10.1.10",
     "storybook-addon-tag-badges": "^3.0.2",
     "tailwindcss": "^4.1.17",
     "tsdown": "^0.18.0",
@@ -81,7 +82,7 @@
   },
   "peerDependencies": {
     "@storybook-community/storybook-dark-mode": "^7.0.0",
-    "@storybook/addon-docs": "^10.0.0",
+    "@storybook/addon-docs": "^10.1.10",
     "storybook-addon-tag-badges": "^3.0.2"
   },
   "peerDependenciesMeta": {

package/src/decorators/with_story_card.tsx

@@ -1,5 +1,4 @@
 import { cva } from 'class-variance-authority'
-import type { ClassValue } from 'class-variance-authority/types'
 import {
 	createContext,
 	useContext,
@@ -12,6 +11,8 @@ import {
 } from 'react'
 import type { DecoratorFunction, Renderer } from 'storybook/internal/csf'
 import { twMerge } from 'tailwind-merge'
+import type { RequiredPick } from 'type-plus'
+import { generateKey } from '../utils/generate_key.js'
 
 export type StoryCardProps = {
 	/**
@@ -34,8 +35,8 @@ export type StoryCardProps = {
 	 * and should return the final className string.
 	 */
 	className?:
-		| ((state: Pick<StoryCardProps, 'status'> & { defaultClassName: string }) => string)
-		| ClassValue
+		| ((state: Required<Pick<StoryCardProps, 'status'>> & { defaultClassName: string }) => string)
+		| string
 		| undefined
 	/**
 	 * Content to display in the card body.
@@ -116,6 +117,7 @@ export type StoryCardProps = {
  */
 export function withStoryCard<TRenderer extends Renderer = Renderer>({
 	title,
+	status = 'info',
 	content: contentProp,
 	...rest
 }: StoryCardProps = {}): DecoratorFunction<TRenderer> {
@@ -125,11 +127,11 @@ export function withStoryCard<TRenderer extends Renderer = Renderer>({
 		const content = contentProp ?? parameters.docs?.description?.story ?? parameters.docs?.description?.component
 		if (!content && !title) return <Story />
 
-		return <StoryCardContainerWrapper Story={Story} content={content} title={title} {...rest} />
+		return <StoryCardContainerWrapper Story={Story} content={content} title={title} status={status} {...rest} />
 	}
 }
 
-interface StoryCardContainerWrapperProps extends StoryCardProps {
+interface StoryCardContainerWrapperProps extends RequiredPick<StoryCardProps, 'status'> {
 	Story: ComponentType
 }
 
@@ -144,27 +146,18 @@ function StoryCardContainerWrapper({ Story, ...props }: StoryCardContainerWrappe
 	return collector
 }
 
-interface StoryCardContextValue {
-	addCard: (card: StoryCardProps) => string
-	removeCard: (id: string) => void
-}
-
-const StoryCardContext = createContext<StoryCardContextValue | null>(null)
-
-type StoryCardWithId = StoryCardProps & { id: string }
-
 function StoryCardContainer({ children }: { children: ReactNode }) {
-	const [cards, setCards] = useState<StoryCardWithId[]>([])
+	const [cards, setCards] = useState<StoryCardWithKey[]>([])
 
 	const contextValue: StoryCardContextValue = useMemo(
 		() => ({
 			addCard(card) {
-				const id = `story-card-${crypto.randomUUID()}`
-				setCards((cards) => [...cards, { ...card, id }])
-				return id
+				const key = generateKey('story-card')
+				setCards((cards) => [...cards, { ...card, key }])
+				return key
 			},
-			removeCard(id) {
-				setCards((cards) => cards.filter((card) => card.id !== id))
+			removeCard(key) {
+				setCards((cards) => cards.filter((card) => card.key !== key))
 			}
 		}),
 		[]
@@ -173,8 +166,8 @@ function StoryCardContainer({ children }: { children: ReactNode }) {
 	return (
 		<StoryCardContext.Provider value={contextValue}>
 			<div className="flex flex-col gap-2">
-				{cards.map(({ id, status, className, content, title }) => (
-					<section key={id} className={storyCardTheme({ status }, className)}>
+				{cards.map(({ key, status, className, content, title }) => (
+					<section key={key} className={storyCardTheme({ status }, className)}>
 						{title && <h2 className="text-lg font-bold">{title}</h2>}
 						{content}
 					</section>
@@ -185,7 +178,27 @@ function StoryCardContainer({ children }: { children: ReactNode }) {
 	)
 }
 
-interface StoryCardCollectorProps extends StoryCardProps {
+type StoryCardWithKey = RequiredPick<StoryCardProps, 'status'> & { key: string }
+
+function storyCardTheme(state: Required<Pick<StoryCardProps, 'status'>>, className: StoryCardProps['className']) {
+	const defaultClassName = storyCardVariants(state)
+	if (!className) return defaultClassName
+	return typeof className === 'function'
+		? className({ ...state, defaultClassName })
+		: twMerge(defaultClassName, className)
+}
+
+const storyCardVariants = cva('flex flex-col gap-1 py-3 px-4 rounded text-black dark:text-gray-100', {
+	variants: {
+		status: {
+			error: 'bg-red-100 dark:bg-red-900',
+			warn: 'bg-yellow-100 dark:bg-yellow-900',
+			info: 'bg-sky-100 dark:bg-sky-900'
+		}
+	}
+})
+
+interface StoryCardCollectorProps extends RequiredPick<StoryCardProps, 'status'> {
 	Story: ComponentType
 }
 
@@ -212,24 +225,9 @@ function StoryCardCollector({ Story, title, status, className, content }: StoryC
 	return <Story />
 }
 
-const storyCardTheme = (state: Pick<StoryCardProps, 'status'>, className: StoryCardProps['className']) => {
-	const defaultClassName = storyCardVariants(state)
-	if (!className) return defaultClassName
-	return twMerge(
-		defaultClassName,
-		typeof className === 'function' ? className({ ...state, defaultClassName }) : className
-	)
+interface StoryCardContextValue {
+	addCard: (card: RequiredPick<StoryCardProps, 'status'>) => string
+	removeCard: (id: string) => void
 }
 
-const storyCardVariants = cva('flex flex-col gap-1 py-3 px-4 rounded text-black dark:text-gray-100', {
-	variants: {
-		status: {
-			error: 'bg-red-100 dark:bg-red-900',
-			warn: 'bg-yellow-100 dark:bg-yellow-900',
-			info: 'bg-sky-100 dark:bg-sky-900'
-		}
-	},
-	defaultVariants: {
-		status: 'info'
-	}
-})
+const StoryCardContext = createContext<StoryCardContextValue | null>(null)

package/src/utils/generate_key.ts

@@ -0,0 +1,14 @@
+/**
+ * Generates a key for React collections, falling back to a simple counter-based ID if crypto.randomUUID is unavailable.
+ * crypto.randomUUID() requires a secure context (HTTPS, localhost, or 127.0.0.1).
+ *
+ * This can be moved to `@just-web` in the future.
+ */
+export function generateKey(prefix?: string | undefined): string {
+	const randomId =
+		typeof crypto !== 'undefined' && crypto.randomUUID
+			? crypto.randomUUID()
+			: `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
+
+	return prefix ? `${prefix}-${randomId}` : randomId
+}