@repobuddy/storybook 2.0.1 → 2.1.1

package/esm/index.js

@@ -1,12 +1,251 @@
-export * from "@repobuddy/test";
-export * from "./components/show_html.tsx";
-export * from "./decorators/show_doc_source.tsx";
-export * from "./parameters/define_actions_param.ts";
-export * from "./parameters/define_backgrounds_param.ts";
-export * from "./parameters/define_docs_param.ts";
-export * from "./parameters/define_layout_param.ts";
-export * from "./parameters/define_parameters.ts";
-export * from "./parameters/define_test_param.ts";
-export * from "./parameters/define_viewport_param.ts";
-export * from "./parameters/story_sort.ts";
-export * from "./testing/decorators/when_running_in_test.tsx";
+import { isRunningInTest } from "@repobuddy/test";
+import { prettify } from "htmlfy";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SyntaxHighlighter } from "storybook/internal/components";
+import { addons } from "storybook/preview-api";
+import { ThemeProvider, convert, themes } from "storybook/theming";
+
+export * from "@repobuddy/test"
+
+//#region src/components/show_html.tsx
+/**
+* A component that displays the HTML of a subject element.
+* Uses `htmlfy` internally to format and prettify the HTML output.
+*
+* @param selector - CSS selector to find the subject element. Defaults to '[data-testid="subject"]'
+* @param config - Configuration options passed to htmlfy's prettify function
+* @param props - Additional props (className, style) passed to the pre element
+* @returns A pre element containing the formatted HTML
+*/
+function ShowHtml({ selector = "[data-testid=\"subject\"]", config, ...props }) {
+	const [html, setHtml] = useState("");
+	useEffect(() => {
+		const subject = document.querySelector(selector);
+		if (subject) setHtml(prettify(subject.outerHTML, {
+			tag_wrap: 40,
+			...config
+		}));
+		else setHtml("No subject found");
+	}, [selector]);
+	return /* @__PURE__ */ jsx("pre", {
+		...props,
+		children: html
+	});
+}
+
+//#endregion
+//#region src/decorators/show_doc_source.tsx
+const channel = addons.getChannel();
+/**
+* A decorator that shows the source code of a story above the rendered story.
+* The source code is taken from the story's `parameters.docs.source.code`.
+*/
+function showDocSource() {
+	return (Story, { parameters: { docs, darkMode } }) => {
+		const storedItem = window.localStorage.getItem("sb-addon-themes-3");
+		const current = typeof storedItem === "string" ? JSON.parse(storedItem).current : darkMode?.current;
+		const [isDark, setIsDark] = useState((darkMode?.stylePreview && current === "dark") ?? false);
+		useEffect(() => {
+			channel.on("DARK_MODE", setIsDark);
+			return () => channel.off("DARK_MODE", setIsDark);
+		}, []);
+		return /* @__PURE__ */ jsx(ThemeProvider, {
+			theme: convert(docs?.theme ?? (isDark ? themes.dark : themes.light)),
+			children: /* @__PURE__ */ jsxs("section", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: "1rem"
+				},
+				children: [/* @__PURE__ */ jsx(SyntaxHighlighter, {
+					language: docs?.source?.language,
+					children: docs?.source?.code
+				}), /* @__PURE__ */ jsx(Story, {})]
+			})
+		});
+	};
+}
+
+//#endregion
+//#region src/parameters/define_actions_param.ts
+/**
+* Defines actions parameters for Storybook stories.
+*
+* @see https://storybook.js.org/docs/essentials/actions#parameters
+*
+* @param actions - Configuration for actions parameters
+* @returns An object containing the actions parameter configuration
+*/
+function defineActionsParam(actions) {
+	return { actions };
+}
+
+//#endregion
+//#region src/parameters/define_backgrounds_param.ts
+/**
+* Defines backgrounds parameters for Storybook stories.
+*
+* @param backgrounds - The backgrounds configuration
+* @returns An object containing the backgrounds parameter configuration
+*/
+const defineBackgroundsParam = (backgrounds) => ({ backgrounds });
+
+//#endregion
+//#region src/parameters/define_docs_param.ts
+/**
+* Defines docs parameters for Storybook stories.
+*
+* @param docs - Configuration for docs parameters including options for:
+* - Controls display and sorting
+* - Story rendering (autoplay, height, inline vs iframe)
+* - And other docs-related settings
+* @returns An object containing the docs parameter configuration
+*
+* @example
+* ```ts
+* import { defineDocsParam } from '@repobuddy/storybook'
+*
+* export default {
+*   parameters: defineDocsParam({
+*     controls: {
+*       sort: 'alpha',
+*       exclude: ['internal*']
+*     },
+*     story: {
+*       inline: true,
+*       height: '400px'
+*     }
+*   })
+* }
+* ```
+*/
+function defineDocsParam(docs) {
+	return { docs };
+}
+
+//#endregion
+//#region src/parameters/define_layout_param.ts
+/**
+* Helper function to define the layout parameter for a story
+*
+* @see https://storybook.js.org/docs/api/parameters#layout
+*
+* @param layout - The layout type to use ('padded', 'fullscreen', or 'centered')
+* @returns An object containing the layout parameter
+* @example
+* ```ts
+* export const MyStory = {
+*   parameters: defineLayoutParam('centered')
+* }
+* ```
+*/
+const defineLayoutParam = (layout) => ({ layout });
+
+//#endregion
+//#region src/parameters/define_parameters.ts
+/**
+* Defines parameters for Storybook stories, combining built-in parameters with custom ones.
+*
+* @param parameters - Configuration object containing both built-in Storybook parameters and custom parameters
+* @returns The combined parameters object
+*
+* @example
+* ```ts
+* import { defineParameters } from '@repobuddy/storybook'
+*
+* export default {
+*   parameters: defineParameters({
+*     // Built-in parameters
+*     layout: 'centered',
+*     backgrounds: {
+*       default: 'light',
+*       values: [
+*         { name: 'light', value: '#ffffff' },
+*         { name: 'dark', value: '#333333' }
+*       ]
+*     },
+*     // Custom parameters
+*     myCustomParam: {
+*       someValue: true
+*     }
+*   })
+* }
+* ```
+*/
+function defineParameters(param, ...rest) {
+	return rest.reduce((acc, param$1) => Object.assign(acc, param$1), param);
+}
+
+//#endregion
+//#region src/parameters/define_test_param.ts
+/**
+* Defines test parameters for Storybook stories.
+*
+* @see https://storybook.js.org/docs/api/parameters#test
+*
+* @param test - Configuration for test parameters
+* @returns An object containing the test parameter configuration
+*
+* @example
+* defineTestParam({
+*   clearMocks: true,
+*   mockReset: true,
+*   restoreMocks: true,
+*   dangerouslyIgnoreUnhandledErrors: true
+* })
+*/
+function defineTestParam(test) {
+	return { test };
+}
+
+//#endregion
+//#region src/parameters/define_viewport_param.ts
+/**
+* Defines viewport parameters for Storybook stories.
+*
+* @see https://storybook.js.org/docs/api/parameters#viewport
+*
+* @param viewport - Configuration for viewport parameters including:
+* - viewports: Custom viewport definitions
+* - defaultViewport: The default viewport to use
+* - defaultOrientation: Default orientation (landscape/portrait)
+* - disabled: Whether viewport controls are disabled
+* @returns An object containing the viewport parameter configuration
+*
+* @example
+* ```ts
+* defineViewportParam({
+*   viewports: {
+*     mobile: {
+*       name: 'Mobile',
+*       styles: { width: '320px', height: '568px' },
+*       type: 'mobile'
+*     }
+*   },
+*   defaultViewport: 'mobile',
+*   defaultOrientation: 'portrait'
+* })
+* ```
+*/
+function defineViewportParam(viewport) {
+	return { viewport };
+}
+
+//#endregion
+//#region src/testing/decorators/when_running_in_text.ctx.ts
+const ctx = { isRunningInTest };
+
+//#endregion
+//#region src/testing/decorators/when_running_in_test.tsx
+/**
+* executes the specified decorator or handler if the code is running in test.
+*/
+function whenRunningInTest(decoratorOrHandler) {
+	return function RunInTest(Story, context) {
+		return ctx.isRunningInTest() ? decoratorOrHandler(Story, context) ?? /* @__PURE__ */ jsx(Story, {}) : /* @__PURE__ */ jsx(Story, {});
+	};
+}
+
+//#endregion
+export { ShowHtml, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineTestParam, defineViewportParam, showDocSource, whenRunningInTest };

package/esm/manager/index.d.ts

@@ -1 +1,38 @@
-export * from './brand_title.js';
+//#region src/manager/brand_title.d.ts
+interface BrandTitleOptions {
+  /**
+   * The title to display in the brand title.
+   * It can be a simple string or raw HTML.
+   */
+  title: string;
+  /**
+   * The logo to display in the brand title.
+   * It can be a simple string or raw HTML (e.g. `<svg>`).
+   */
+  logo?: string | undefined;
+}
+/**
+ * Creates a brand title element for the Storybook manager UI.
+ *
+ * @param options - The options for customizing the brand title
+ * @param options.title - The title text or HTML to display
+ * @param options.logo - Optional logo HTML to display before the title
+ * @returns An HTML string containing the brand title element
+ *
+ * @example
+ *
+ * ```ts
+ * import { brandTitle } from '@repobuddy/storybook'
+ * import { addons } from 'storybook/manager-api'
+ *
+ * addons.setConfig({
+ *   brandTitle: brandTitle({
+ *     title: 'My Storybook',
+ *     logo: '<img src="logo.png" alt="Logo" width="24" height="24">'
+ *   })
+ * })
+ * ```
+ */
+declare function brandTitle(options: BrandTitleOptions): string;
+//#endregion
+export { BrandTitleOptions, brandTitle };

package/esm/manager/index.js

@@ -1 +1,32 @@
-export * from "./brand_title.js";
+//#region src/manager/brand_title.ts
+/**
+* Creates a brand title element for the Storybook manager UI.
+*
+* @param options - The options for customizing the brand title
+* @param options.title - The title text or HTML to display
+* @param options.logo - Optional logo HTML to display before the title
+* @returns An HTML string containing the brand title element
+*
+* @example
+*
+* ```ts
+* import { brandTitle } from '@repobuddy/storybook'
+* import { addons } from 'storybook/manager-api'
+*
+* addons.setConfig({
+*   brandTitle: brandTitle({
+*     title: 'My Storybook',
+*     logo: '<img src="logo.png" alt="Logo" width="24" height="24">'
+*   })
+* })
+* ```
+*/
+function brandTitle(options) {
+	return `<span style="display: flex; align-items: center; gap: 2px;">
+		${options.logo ?? ""}
+		${options.title}
+	</span>`;
+}
+
+//#endregion
+export { brandTitle };

package/esm/storybook-addon-tag-badges/index.d.ts

@@ -1,2 +1,95 @@
-export * from './tag_badges.js';
-export type * from './types.js';
+import { TagBadgeParameters } from "storybook-addon-tag-badges/manager-helpers";
+import { Args, Meta as Meta$1, StoryObj as StoryObj$1 } from "@storybook/react-vite";
+
+//#region src/storybook-addon-tag-badges/tag_badges.d.ts
+type TagBadgeParameter = TagBadgeParameters[0];
+/**
+ * Type representing the names of predefined tags used in Storybook stories.
+ */
+type TagNames = 'editor' | 'new' | 'beta' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal';
+/**
+ * Configuration for story tag badges that appear in the Storybook sidebar.
+ * Each badge is associated with a specific tag and displays an emoji with a tooltip.
+ *
+ * The badges help visually identify stories with certain characteristics:
+ * - ✏️ Editor - Stories with live editor
+ * - 🆕 New - Recently added stories
+ * - 🅱️ Beta - Stories for features in beta
+ * - 🪦 Deprecated - Stories for deprecated features
+ * - ⚠️ Outdated - Stories that need updating
+ * - 🚨 Danger - Stories demonstrating dangerous patterns
+ * - 📋 Todo - Stories marked as todo/incomplete
+ * - 📝 Code Only - Stories without visual examples
+ * - 📸 Snapshot - Stories with snapshot tests
+ * - 🧪 Unit - Stories with unit tests
+ * - 🔗 Integration - Stories with integration tests
+ *
+ * Also includes the default version badge from `storybook-addon-tag-badges`.
+ */
+declare const editorBadge: TagBadgeParameter;
+declare const newBadge: TagBadgeParameter;
+declare const betaBadge: TagBadgeParameter;
+declare const propsBadge: TagBadgeParameter;
+declare const deprecatedBadge: TagBadgeParameter;
+declare const outdatedBadge: TagBadgeParameter;
+declare const dangerBadge: TagBadgeParameter;
+declare const todoBadge: TagBadgeParameter;
+declare const codeOnlyBadge: TagBadgeParameter;
+declare const snapshotBadge: TagBadgeParameter;
+declare const unitBadge: TagBadgeParameter;
+declare const integrationBadge: TagBadgeParameter;
+declare const keyboardBadge: TagBadgeParameter;
+declare const internalBadge: TagBadgeParameter;
+declare const tagBadges: TagBadgeParameters;
+//#endregion
+//#region src/types.d.ts
+/**
+ * Extends the Storybook Meta type with custom tag types
+ * @template TCmpOrArgs - The component or args type
+ * @template M - The base Meta type
+ * @template E - The extension type containing tagType
+ *
+ * @example
+ * ```ts
+ * // Create a generic Meta type for a project
+ * type Meta<TCmpOrArgs = Args> = ExtendMeta<TCmpOrArgs, Meta<TCmpOrArgs>, { tagType: 'tag1' | 'tag2' }>
+ *
+ * // Create a specific Meta type for a component
+ * type Meta = ExtendMeta<typeof Component, Meta<typeof Component>, { tagType: 'tag1' | 'tag2' }>
+ * ```
+ */
+type ExtendMeta<TCmpOrArgs, M extends Meta$1<TCmpOrArgs>, E extends {
+  tag: string;
+}> = Omit<M, 'tags'> & {
+  tags?: Array<E['tag'] | (string & {})> | undefined;
+};
+/**
+ * Extends the Storybook StoryObj type with custom tag types
+ * @template TMetaOrCmpOrArgs - The meta, component or args type
+ * @template S - The base StoryObj type
+ * @template E - The extension type containing tagType
+ *
+ * @example
+ * ```ts
+ * // Create a generic StoryObj type for a project
+ * type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryObj<TMetaOrCmpOrArgs>, { tagType: 'tag1' | 'tag2' }>
+ *
+ * // Create a specific StoryObj type for a component
+ * type StoryObj = ExtendStoryObj<typeof Component, StoryObj<typeof Component>, { tagType: 'tag1' | 'tag2' }>
+ * ```
+ */
+type ExtendStoryObj<TMetaOrCmpOrArgs, S extends StoryObj$1<TMetaOrCmpOrArgs>, E extends {
+  tag: string;
+}> = Omit<S, 'tags'> & {
+  tags?: Array<E['tag'] | (string & {})> | undefined;
+};
+//#endregion
+//#region src/storybook-addon-tag-badges/types.d.ts
+type Meta<TCmpOrArgs = Args> = ExtendMeta<TCmpOrArgs, Meta$1<TCmpOrArgs>, {
+  tag: TagNames;
+}>;
+type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryObj$1<TMetaOrCmpOrArgs>, {
+  tag: TagNames;
+}>;
+//#endregion
+export { Meta, StoryObj, TagNames, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, tagBadges, todoBadge, unitBadge };

package/esm/storybook-addon-tag-badges/index.js

@@ -1 +1,207 @@
-export * from "./tag_badges.js";
+import { defaultConfig } from "storybook-addon-tag-badges/manager-helpers";
+
+//#region src/storybook-addon-tag-badges/tag_badges.ts
+const [, , , , , , versionBadge] = defaultConfig;
+/**
+* Configuration for story tag badges that appear in the Storybook sidebar.
+* Each badge is associated with a specific tag and displays an emoji with a tooltip.
+*
+* The badges help visually identify stories with certain characteristics:
+* - ✏️ Editor - Stories with live editor
+* - 🆕 New - Recently added stories
+* - 🅱️ Beta - Stories for features in beta
+* - 🪦 Deprecated - Stories for deprecated features
+* - ⚠️ Outdated - Stories that need updating
+* - 🚨 Danger - Stories demonstrating dangerous patterns
+* - 📋 Todo - Stories marked as todo/incomplete
+* - 📝 Code Only - Stories without visual examples
+* - 📸 Snapshot - Stories with snapshot tests
+* - 🧪 Unit - Stories with unit tests
+* - 🔗 Integration - Stories with integration tests
+*
+* Also includes the default version badge from `storybook-addon-tag-badges`.
+*/
+const editorBadge = {
+	tags: "editor",
+	badge: {
+		text: "✏️",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Editor"
+	},
+	display: { sidebar: {
+		type: "story",
+		skipInherited: false
+	} }
+};
+const newBadge = {
+	tags: "new",
+	badge: {
+		text: "🆕",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "New"
+	}
+};
+const betaBadge = {
+	tags: "beta",
+	badge: {
+		text: "🅱️",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Beta"
+	}
+};
+const propsBadge = {
+	tags: "props",
+	badge: {
+		text: "🔧",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Props"
+	}
+};
+const deprecatedBadge = {
+	tags: "deprecated",
+	badge: {
+		text: "🪦",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Deprecated"
+	}
+};
+const outdatedBadge = {
+	tags: "outdated",
+	badge: {
+		text: "⚠️",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Outdated"
+	}
+};
+const dangerBadge = {
+	tags: "danger",
+	badge: {
+		text: "🚨",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Dangerous"
+	}
+};
+const todoBadge = {
+	tags: "todo",
+	badge: {
+		text: "📋",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Todo"
+	}
+};
+const codeOnlyBadge = {
+	tags: "code-only",
+	badge: {
+		text: "📝",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Code Only"
+	}
+};
+const snapshotBadge = {
+	tags: "snapshot",
+	badge: {
+		text: "📸",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Snapshot Test"
+	},
+	display: {
+		sidebar: false,
+		toolbar: ["story"]
+	}
+};
+const unitBadge = {
+	tags: "unit",
+	badge: {
+		text: "🧪",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Unit Test"
+	},
+	display: { sidebar: false }
+};
+const integrationBadge = {
+	tags: "integration",
+	badge: {
+		text: "🔗",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Integration Test"
+	},
+	display: { sidebar: false }
+};
+const keyboardBadge = {
+	tags: "keyboard",
+	badge: {
+		text: "⌨️",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Keyboard Interaction"
+	}
+};
+const internalBadge = {
+	tags: "internal",
+	badge: {
+		text: "🔒",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Internal"
+	}
+};
+const tagBadges = [
+	editorBadge,
+	unitBadge,
+	integrationBadge,
+	keyboardBadge,
+	newBadge,
+	betaBadge,
+	deprecatedBadge,
+	outdatedBadge,
+	dangerBadge,
+	propsBadge,
+	todoBadge,
+	codeOnlyBadge,
+	internalBadge,
+	snapshotBadge,
+	versionBadge
+];
+
+//#endregion
+export { betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, tagBadges, todoBadge, unitBadge };