@repobuddy/storybook 2.22.0 → 2.23.0

package/esm/index.d.ts

@@ -85,6 +85,10 @@ type StoryCardProps = {
    * Can be any React node (string, JSX, etc.).
    */
   children?: ReactNode | undefined;
+  /**
+   * Test identifier for the card.
+   */
+  'data-testid'?: string | undefined;
 };
 type StoryCardThemeState = Pick<StoryCardProps, 'status' | 'appearance'> & {
   defaultClassName: string;
@@ -106,7 +110,7 @@ declare const StoryCard: react.NamedExoticComponent<StoryCardProps>;
  * @property showOriginalSource - When true, use the story's original (untransformed) source instead of the rendered source.
  * @property placement - Where to show the source code relative to the story. Defaults to `'before'`.
  */
-type ShowSourceOptions = Pick<StoryCardProps, 'className'> & {
+type ShowSourceOptions = Pick<StoryCardProps, 'className' | 'data-testid'> & {
   source?: ((source: string | undefined) => string) | string | undefined;
   showOriginalSource?: boolean | undefined;
   placement?: 'before' | 'after' | undefined;
@@ -122,7 +126,13 @@ type ShowSourceOptions = Pick<StoryCardProps, 'className'> & {
  * @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 showSource<TRenderer extends Renderer = Renderer, TArgs = Args>(options?: ShowSourceOptions): DecoratorFunction<TRenderer, TArgs>;
+declare function showSource<TRenderer extends Renderer = Renderer, TArgs = Args>({
+  className,
+  placement,
+  showOriginalSource,
+  source,
+  ...options
+}?: ShowSourceOptions): DecoratorFunction<TRenderer, TArgs>;
 //#endregion
 //#region src/decorators/show_doc_source.d.ts
 /**

package/esm/index.js

@@ -64,7 +64,7 @@ const storyCardVariants = cva("rbsb:py-3 rbsb:px-4 rbsb:rounded rbsb:border rbsb
 * @param props - StoryCard component props
 * @returns A section element containing the card content
 */
-const StoryCard = memo(function StoryCard({ status, appearance, className, children, title }) {
+const StoryCard = memo(function StoryCard({ status, appearance, className, children, title, ...rest }) {
 	const resolvedAppearance = resolveAppearance(appearance, status);
 	return /* @__PURE__ */ jsxs("section", {
 		className: storyCardTheme({
@@ -72,6 +72,7 @@ const StoryCard = memo(function StoryCard({ status, appearance, className, child
 			appearance: resolvedAppearance,
 			defaultClassName: storyCardVariants({ appearance: resolvedAppearance })
 		}, className),
+		...rest,
 		children: [title && /* @__PURE__ */ jsx("h2", {
 			className: "rbsb:text-lg rbsb:font-bold",
 			children: title
@@ -196,7 +197,7 @@ const channel = addons.getChannel();
 * @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
 */
-function showSource(options) {
+function showSource({ className, placement, showOriginalSource, source, ...options } = {}) {
 	if (isRunningInTest()) return (Story) => /* @__PURE__ */ jsx(Story, {});
 	return (Story, { parameters: { docs, darkMode } }) => {
 		const storedItem = window.localStorage.getItem("sb-addon-themes-3");
@@ -206,8 +207,8 @@ function showSource(options) {
 			channel.on("DARK_MODE", setIsDark);
 			return () => channel.off("DARK_MODE", setIsDark);
 		}, []);
-		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 originalSource = showOriginalSource ? docs?.source?.originalSource : docs?.source?.code ?? docs?.source?.originalSource;
+		const code = typeof source === "function" ? source(originalSource) : source ?? originalSource;
 		const language = code === docs?.source?.originalSource ? void 0 : docs?.source?.language;
 		const isOriginalSource = code === docs?.source?.originalSource;
 		const sourceContent = useMemo(() => /* @__PURE__ */ jsx(SyntaxHighlighter, {
@@ -215,15 +216,14 @@ function showSource(options) {
 			language,
 			children: code
 		}), [code, language]);
-		const showBefore = (options?.placement ?? "before") === "before";
+		const showBefore = (placement ?? "before") === "before";
 		const sourceCardClassName = useCallback((state) => {
 			const modifiedState = {
 				...state,
 				defaultClassName: twJoin(state.defaultClassName, isOriginalSource && "rbsb:bg-transparent rbsb:dark:bg-transparent")
 			};
-			const className = options?.className;
 			return typeof className === "function" ? className(modifiedState) : twJoin(modifiedState.defaultClassName, className);
-		}, [options?.className, isOriginalSource]);
+		}, [className, isOriginalSource]);
 		const theme = convert(docs?.theme ?? (isDark ? themes.dark : themes.light));
 		function DocSourceCard({ children }) {
 			return /* @__PURE__ */ jsx("div", { children });
@@ -238,6 +238,12 @@ function showSource(options) {
 			className: sourceCardClassName,
 			appearance: "source"
 		});
+		const storyCard = /* @__PURE__ */ jsx(StoryCard, {
+			className: sourceCardClassName,
+			appearance: "source",
+			...options,
+			children: /* @__PURE__ */ jsx(DocSourceCard, { children: sourceContent })
+		});
 		return /* @__PURE__ */ jsx(ThemeProvider, {
 			theme,
 			children: /* @__PURE__ */ jsxs("section", {
@@ -246,11 +252,7 @@ function showSource(options) {
 					flexDirection: "column",
 					gap: "1rem"
 				},
-				children: [/* @__PURE__ */ jsx(Story, {}), /* @__PURE__ */ jsx(StoryCard, {
-					className: sourceCardClassName,
-					appearance: "source",
-					children: /* @__PURE__ */ jsx(DocSourceCard, { children: sourceContent })
-				})]
+				children: [/* @__PURE__ */ jsx(Story, {}), storyCard]
 			})
 		});
 	};

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
     "testing",
     "documentation"
   ],
+  "homepage": "https://github.com/repobuddy/storybook",
+  "bugs": {
+    "url": "https://github.com/repobuddy/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/repobuddy/storybook.git",
+    "directory": "libs/storybook"
+  },
   "license": "MIT",
   "author": {
     "name": "Homa Wong",

package/readme.md

@@ -78,31 +78,33 @@ addons.setConfig({
 If you use [`storybook-addon-tag-badges`][`storybook-addon-tag-badges`],
 we provide a different set of badges that uses emojis (order: first match wins):
 
-- 🆕 `new` - Recently added stories
-- 🔴 `alpha` - Features in alpha
-- 🟡 `beta` - Features in beta
-- 🔵 `rc` - Release candidate
-- 🗑️ `deprecated` - Deprecated features
-- ☠️ `remove` or `remove:next` (same) or `remove:<version>` - Will be removed in the next or specified version
-- ⚠️ `outdated` - Stories that need updating
-- 🚨 `danger` - Dangerous or cautionary patterns
-- 🎯 `use-case` - Specific use case or scenario
-- ✨ `example` - Example or demo stories
-- ⚡ `perf` - Performance (stories that demonstrate or test performance)
-- ⌨️ `keyboard` - Keyboard interaction
-- `</>` `source` - Source-code-focused stories
-- `<T>` `type` - TypeScript types (shown in MDX)
-- `ƒ(x)` `func` - Functions (shown in MDX)
-- `var` `var` - Variables (shown in MDX)
-- 🔧 `props` - Props or configuration
-- 📋 `todo` - Todo or incomplete stories
-- 🧪 `unit` - Unit tests
-- 🔗 `integration` - Integration tests (hidden in sidebar)
-- ✏️ `editor` - Live editor stories (with [`storybook-addon-code-editor`][`storybook-addon-code-editor`])
-- 📝 `code-only` - Stories without visual examples (hidden in MDX)
-- Version indicators (unchanged)
-- 🔒 `internal` - Internal or private-use-only stories
-- 📸 `snapshot` - Snapshot tests (toolbar only, not sidebar)
+| Badge   | Tag                                                      | Description                                                                               |
+| :-----  | :------------------------------------------------------- | :---------------------------------------------------------------------------------------- |
+| 🆕      | `new`                                                    | Recently added stories                                                                    |
+| 🔴      | `alpha`                                                  | Features in alpha                                                                         |
+| 🟡      | `beta`                                                   | Features in beta                                                                          |
+| 🔵      | `rc`                                                     | Release candidate                                                                         |
+| 🗑️      | `deprecated`                                             | Deprecated features                                                                       |
+| ☠️      | `remove`<br/>`remove:next` (same)<br/>`remove:<version>` | Will be removed in the next or specified version                                          |
+| ⚠️      | `outdated`                                               | Stories that need updating                                                                |
+| 🚨      | `danger`                                                 | Dangerous or cautionary patterns                                                          |
+| 🎯      | `use-case`                                               | Specific use case or scenario                                                             |
+| ✨      | `example`                                                | Example or demo stories                                                                   |
+| ⚡      | `perf`                                                   | Performance (stories that demonstrate or test performance)                                |
+| ⌨️      | `keyboard`                                               | Keyboard interaction                                                                      |
+| `</>`   | `source`                                                 | Source-code-focused stories                                                               |
+| `<T>`   | `type`                                                   | TypeScript types (shown in MDX)                                                           |
+| `ƒ(x)`  | `func`                                                   | Functions (shown in MDX)                                                                  |
+| `var`   | `var`                                                    | Variables (shown in MDX)                                                                  |
+| 🔧      | `props`                                                  | Props or configuration                                                                    |
+| 📋      | `todo`                                                   | Todo or incomplete stories                                                                |
+| 🧪      | `unit`                                                   | Unit tests                                                                                |
+| 🔗      | `integration`                                            | Integration tests (hidden in sidebar)                                                     |
+| ✏️      | `editor`                                                 | Live editor stories (with [`storybook-addon-code-editor`][`storybook-addon-code-editor`]) |
+| 📝      | `code-only`                                              | Stories without visual examples (hidden in MDX)                                           |
+|         | Version indicators                                       | (unchanged)                                                                               |
+| 🔒      | `internal`                                               | Internal or private-use-only stories                                                      |
+| 📸      | `snapshot`                                               | Snapshot tests (toolbar only, not sidebar)                                                |
 
 To use them, add them to your `.storybook/manager.ts`:
 

package/src/components/story_card.tsx

@@ -48,6 +48,10 @@ export type StoryCardProps = {
 	 * Can be any React node (string, JSX, etc.).
 	 */
 	children?: ReactNode | undefined
+	/**
+	 * Test identifier for the card.
+	 */
+	'data-testid'?: string | undefined
 }
 
 export type StoryCardThemeState = Pick<StoryCardProps, 'status' | 'appearance'> & { defaultClassName: string }
@@ -90,7 +94,14 @@ const storyCardVariants = cva(
  * @param props - StoryCard component props
  * @returns A section element containing the card content
  */
-export const StoryCard = memo(function StoryCard({ status, appearance, className, children, title }: StoryCardProps) {
+export const StoryCard = memo(function StoryCard({
+	status,
+	appearance,
+	className,
+	children,
+	title,
+	...rest
+}: StoryCardProps) {
 	const resolvedAppearance = resolveAppearance(appearance, status)
 	const state: StoryCardThemeState = {
 		status,
@@ -98,7 +109,7 @@ export const StoryCard = memo(function StoryCard({ status, appearance, className
 		defaultClassName: storyCardVariants({ appearance: resolvedAppearance })
 	}
 	return (
-		<section className={storyCardTheme(state, className)}>
+		<section className={storyCardTheme(state, className)} {...rest}>
 			{title && <h2 className="rbsb:text-lg rbsb:font-bold">{title}</h2>}
 			{children}
 		</section>

package/src/decorators/show_source.tsx

@@ -18,7 +18,7 @@ const channel = addons.getChannel()
  * @property showOriginalSource - When true, use the story's original (untransformed) source instead of the rendered source.
  * @property placement - Where to show the source code relative to the story. Defaults to `'before'`.
  */
-export type ShowSourceOptions = Pick<StoryCardProps, 'className'> & {
+export type ShowSourceOptions = Pick<StoryCardProps, 'className' | 'data-testid'> & {
 	source?: ((source: string | undefined) => string) | string | undefined
 	showOriginalSource?: boolean | undefined
 	placement?: 'before' | 'after' | undefined
@@ -35,9 +35,13 @@ export type ShowSourceOptions = Pick<StoryCardProps, 'className'> & {
  * @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 showSource<TRenderer extends Renderer = Renderer, TArgs = Args>(
-	options?: ShowSourceOptions
-): DecoratorFunction<TRenderer, TArgs> {
+export function showSource<TRenderer extends Renderer = Renderer, TArgs = Args>({
+	className,
+	placement,
+	showOriginalSource,
+	source,
+	...options
+}: ShowSourceOptions = {}): DecoratorFunction<TRenderer, TArgs> {
 	if (isRunningInTest()) {
 		return (Story) => <Story />
 	}
@@ -54,12 +58,11 @@ export function showSource<TRenderer extends Renderer = Renderer, TArgs = Args>(
 			return () => channel.off('DARK_MODE', setIsDark)
 		}, [])
 
-		const originalSource = options?.showOriginalSource
+		const originalSource = showOriginalSource
 			? docs?.source?.originalSource
 			: (docs?.source?.code ?? docs?.source?.originalSource)
 
-		const code =
-			typeof options?.source === 'function' ? options?.source(originalSource) : (options?.source ?? originalSource)
+		const code = typeof source === 'function' ? source(originalSource) : (source ?? originalSource)
 
 		const language = code === docs?.source?.originalSource ? undefined : docs?.source?.language
 
@@ -74,7 +77,7 @@ export function showSource<TRenderer extends Renderer = Renderer, TArgs = Args>(
 			[code, language]
 		)
 
-		const showBefore = (options?.placement ?? 'before') === 'before'
+		const showBefore = (placement ?? 'before') === 'before'
 
 		const sourceCardClassName = useCallback(
 			(state: Pick<StoryCardProps, 'status' | 'appearance'> & { defaultClassName: string }) => {
@@ -86,12 +89,11 @@ export function showSource<TRenderer extends Renderer = Renderer, TArgs = Args>(
 					)
 				}
 
-				const className = options?.className
 				return typeof className === 'function'
 					? className(modifiedState)
 					: twJoin(modifiedState.defaultClassName, className)
 			},
-			[options?.className, isOriginalSource]
+			[className, isOriginalSource]
 		)
 
 		const theme = convert(docs?.theme ?? (isDark ? themes.dark : themes.light))
@@ -116,7 +118,7 @@ export function showSource<TRenderer extends Renderer = Renderer, TArgs = Args>(
 		}
 
 		const storyCard = (
-			<StoryCard className={sourceCardClassName} appearance="source">
+			<StoryCard className={sourceCardClassName} appearance="source" {...options}>
 				<DocSourceCard>{sourceContent}</DocSourceCard>
 			</StoryCard>
 		)