@repobuddy/storybook 2.2.0 → 2.2.1

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
 /**
@@ -159,12 +172,11 @@ 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 id = generateKey("story-card");
 			setCards((cards$1) => [...cards$1, {
 				...card,
 				id
@@ -189,6 +201,22 @@ function StoryCardContainer({ children }) {
 		})
 	});
 }
+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" }
+});
 function StoryCardCollector({ Story, title, status, className, content }) {
 	const context = useContext(StoryCardContext);
 	const cardIdRef = useRef(null);
@@ -208,22 +236,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.1",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",

package/src/decorators/with_story_card.tsx

@@ -12,6 +12,7 @@ import {
 } from 'react'
 import type { DecoratorFunction, Renderer } from 'storybook/internal/csf'
 import { twMerge } from 'tailwind-merge'
+import { generateKey } from '../utils/generate_key'
 
 export type StoryCardProps = {
 	/**
@@ -144,22 +145,13 @@ 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 contextValue: StoryCardContextValue = useMemo(
 		() => ({
 			addCard(card) {
-				const id = `story-card-${crypto.randomUUID()}`
+				const id = generateKey('story-card')
 				setCards((cards) => [...cards, { ...card, id }])
 				return id
 			},
@@ -185,6 +177,30 @@ function StoryCardContainer({ children }: { children: ReactNode }) {
 	)
 }
 
+type StoryCardWithId = StoryCardProps & { id: string }
+
+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
+	)
+}
+
+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'
+	}
+})
+
 interface StoryCardCollectorProps extends StoryCardProps {
 	Story: ComponentType
 }
@@ -212,24 +228,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: StoryCardProps) => 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
+}