@repobuddy/storybook 2.0.1 → 2.1.1

package/esm/storybook-dark-mode/index.d.ts

@@ -1,3 +1,110 @@
-export * from './dark_mode_docs_container.js';
-export * from './define_dark_mode.js';
-export * from './with_dark_mode.js';
+import { DocsContextProps } from "@storybook/addon-docs/blocks";
+import { PropsWithChildren } from "react";
+import { ThemeVars } from "storybook/theming";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { CSSProperties } from "@just-web/css";
+import { DecoratorFunction } from "storybook/internal/types";
+
+//#region src/storybook-dark-mode/dark_mode_docs_container.d.ts
+
+/**
+ * Creates a `DocsContainer` for `storybook` that works with `@storybook-community/storybook-dark-mode`.
+ *
+ * @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
+ *
+ * @example
+ * ```ts
+ * // .storybook/preview.tsx
+ * const preview: Preview = {
+ *   parameters: {
+ *     docs: {
+ *       container: createDarkModeDocsContainer()
+ *     }
+ *   }
+ * }
+ * ```
+ */
+declare function createDarkModeDocsContainer(customThemes?: {
+  light?: ThemeVars | undefined;
+  dark?: ThemeVars | undefined;
+} | undefined): (props: PropsWithChildren<{
+  context: DocsContextProps;
+}>) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/storybook-dark-mode/define_dark_mode.d.ts
+/**
+ * Configuration parameters for `@storybook-community/storybook-dark-mode`.
+ */
+interface DarkModeParam {
+  /** The current theme ('dark' or 'light') */
+  current?: 'dark' | 'light' | undefined;
+  /**
+   * CSS class(es) to apply in dark mode.
+   */
+  darkClass?: string | string[] | undefined;
+  /**
+   * CSS style(s) to apply in dark mode.
+   *
+   * This only works when using `withStoryRoot`.
+   */
+  darkStyle?: CSSProperties | undefined;
+  /** CSS class(es) to apply in light mode */
+  lightClass?: string | string[] | undefined;
+  /**
+   * CSS style(s) to apply in light mode.
+   *
+   * This only works when using `withStoryRoot`.
+   */
+  lightStyle?: CSSProperties | undefined;
+  /** Dark theme variables */
+  dark?: ThemeVars;
+  /** Light theme variables */
+  light?: ThemeVars;
+  /** Element to apply theme classes to ('html' or 'body') */
+  classTarget?: 'html' | 'body' | undefined;
+  /** Whether to apply theme styles to preview iframe */
+  stylePreview?: boolean | undefined;
+}
+/**
+ * Defines `@storybook-community/storybook-dark-mode` parameters for Storybook stories.
+ *
+ * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+ * @returns An object containing the dark mode parameter configuration
+ *
+ * @example
+ * ```ts
+ * // ./storybook/preview.tsx
+ *
+ * export const preview = {
+ *   parameters: {
+ *     ...defineDarkModeParam({ darkClass: 'dark' })
+ *   }
+ * }
+ */
+declare function defineDarkModeParam(darkMode: DarkModeParam): {
+  darkMode: DarkModeParam;
+};
+//#endregion
+//#region src/storybook-dark-mode/with_dark_mode.d.ts
+/**
+ * Applies additional dark mode behavior.
+ *
+ * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+ * @returns A decorator function that applies additional dark mode behavior.
+ */
+declare function withDarkMode(options?: {
+  /**
+   * CSS class(es) to apply to the body element.
+   *
+   * Useful when using Tailwind CSS and `classTarget: 'html'`
+   */
+  bodyClass?: string | string[] | undefined;
+  /**
+   * CSS style(s) to apply to the body element.
+   *
+   * Useful when using Tailwind CSS and `classTarget: 'html'`
+   */
+  bodyStyle?: CSSProperties | undefined;
+} | undefined): DecoratorFunction<any, any>;
+//#endregion
+export { DarkModeParam, createDarkModeDocsContainer, defineDarkModeParam, withDarkMode };

package/esm/storybook-dark-mode/index.js

@@ -1,3 +1,102 @@
-export * from "./dark_mode_docs_container.js";
-export * from "./define_dark_mode.js";
-export * from "./with_dark_mode.js";
+import { DARK_MODE_EVENT_NAME, useDarkMode } from "@storybook-community/storybook-dark-mode";
+import { DocsContainer } from "@storybook/addon-docs/blocks";
+import { useEffect, useState } from "react";
+import { themes } from "storybook/theming";
+import { jsx } from "react/jsx-runtime";
+import { toDOMStyle } from "@just-web/css";
+
+//#region src/storybook-dark-mode/dark_mode_docs_container.tsx
+/**
+* Creates a `DocsContainer` for `storybook` that works with `@storybook-community/storybook-dark-mode`.
+*
+* @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
+*
+* @example
+* ```ts
+* // .storybook/preview.tsx
+* const preview: Preview = {
+*   parameters: {
+*     docs: {
+*       container: createDarkModeDocsContainer()
+*     }
+*   }
+* }
+* ```
+*/
+function createDarkModeDocsContainer(customThemes) {
+	return function DarkModeDocsContainer(props) {
+		const [isDark, setDark] = useState(true);
+		useEffect(() => {
+			props.context.channel.on(DARK_MODE_EVENT_NAME, setDark);
+			return () => props.context.channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+		}, [props.context.channel]);
+		return /* @__PURE__ */ jsx(DocsContainer, {
+			...props,
+			theme: isDark ? customThemes?.dark ?? themes.dark : customThemes?.light ?? themes.light,
+			children: props.children
+		});
+	};
+}
+
+//#endregion
+//#region src/storybook-dark-mode/define_dark_mode.ts
+/**
+* Defines `@storybook-community/storybook-dark-mode` parameters for Storybook stories.
+*
+* @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+* @returns An object containing the dark mode parameter configuration
+*
+* @example
+* ```ts
+* // ./storybook/preview.tsx
+*
+* export const preview = {
+*   parameters: {
+*     ...defineDarkModeParam({ darkClass: 'dark' })
+*   }
+* }
+*/
+function defineDarkModeParam(darkMode) {
+	return { darkMode };
+}
+
+//#endregion
+//#region src/storybook-dark-mode/with_dark_mode.tsx
+/**
+* Applies additional dark mode behavior.
+*
+* @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+* @returns A decorator function that applies additional dark mode behavior.
+*/
+function withDarkMode(options) {
+	return function darkModeDecorator(Story, { parameters }) {
+		const darkMode = parameters.darkMode;
+		if (!darkMode) return /* @__PURE__ */ jsx(Story, {});
+		const dark = useDarkMode();
+		const target = darkMode.classTarget === "html" ? document.documentElement : document.body;
+		if (dark) {
+			removeStyle(target, darkMode.lightStyle);
+			addStyle(target, darkMode.darkStyle);
+		} else {
+			removeStyle(target, darkMode.darkStyle);
+			addStyle(target, darkMode.lightStyle);
+		}
+		if (options?.bodyClass) addClass(document.body, options.bodyClass);
+		if (options?.bodyStyle) addStyle(document.body, options.bodyStyle);
+		return /* @__PURE__ */ jsx(Story, {});
+	};
+}
+function addClass(target, className) {
+	if (!className) return;
+	if (typeof className === "string") target.classList.add(...className.split(" "));
+	else if (Array.isArray(className)) target.classList.add(...className);
+}
+function addStyle(target, style) {
+	if (style) for (const [key, value] of Object.entries(toDOMStyle(style))) target.style.setProperty(key, value);
+}
+function removeStyle(target, style) {
+	if (style) for (const key of Object.keys(toDOMStyle(style))) target.style.removeProperty(key);
+}
+
+//#endregion
+export { createDarkModeDocsContainer, defineDarkModeParam, withDarkMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -38,15 +38,7 @@
     "./storybook-dark-mode": {
       "types": "./esm/storybook-dark-mode/index.d.ts",
       "default": "./esm/storybook-dark-mode/index.js"
-    },
-    "./variants": {
-      "import": {
-        "types": "./esm/variants/index.d.ts",
-        "default": "./esm/variants/index.js"
-      }
-    },
-    "./variants/package.json": "./esm/variants/package.json",
-    "./variants/preset": "./esm/variants/preset.js"
+    }
   },
   "files": [
     "cjs",
@@ -81,7 +73,7 @@
     "storybook": "^10.0.8",
     "storybook-addon-tag-badges": "^3.0.2",
     "tailwindcss": "^4.1.17",
-    "unbuild": "^3.6.1",
+    "tsdown": "^0.16.6",
     "vite": "^7.2.2",
     "vitest": "^4.0.9"
   },
@@ -98,7 +90,7 @@
     }
   },
   "scripts": {
-    "build": "unbuild",
+    "build": "tsdown",
     "clean": "rimraf .turbo coverage cjs esm storybook-static *.tsbuildinfo",
     "coverage": "vitest run --coverage",
     "sb": "storybook dev -p 6006",

package/cjs/components/show_html.d.ts

@@ -1,16 +0,0 @@
-import type { ClassNameProps, StyleProps } from '@just-web/css';
-import { type UserConfig } from 'htmlfy';
-export type ShowHtmlProps = ClassNameProps & StyleProps & {
-    selector?: string | undefined;
-    config?: UserConfig | undefined;
-};
-/**
- * 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
- */
-export declare function ShowHtml({ selector, config, ...props }: ShowHtmlProps): import("react").JSX.Element;

package/cjs/components/show_html.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ShowHtml = ShowHtml;
-var _htmlfy = require("htmlfy");
-var _react = require("react");
-function ShowHtml({
-  selector = '[data-testid="subject"]',
-  config,
-  ...props
-}) {
-  const [html, setHtml] = (0, _react.useState)("");
-  (0, _react.useEffect)(() => {
-    const subject = document.querySelector(selector);
-    if (subject) {
-      setHtml((0, _htmlfy.prettify)(subject.outerHTML, {
-        tag_wrap: 40,
-        ...config
-      }));
-    } else {
-      setHtml("No subject found");
-    }
-  }, [selector]);
-  return /* @__PURE__ */React.createElement("pre", {
-    ...props
-  }, html);
-}

package/cjs/decorators/show_doc_source.d.ts

@@ -1,6 +0,0 @@
-import type { Args, DecoratorFunction, Renderer } from 'storybook/internal/csf';
-/**
- * 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`.
- */
-export declare function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(): DecoratorFunction<TRenderer, TArgs>;

package/cjs/decorators/show_doc_source.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.showDocSource = showDocSource;
-var _react = require("react");
-var _components = require("storybook/internal/components");
-var _previewApi = require("storybook/preview-api");
-var _theming = require("storybook/theming");
-const channel = _previewApi.addons.getChannel();
-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] = (0, _react.useState)((darkMode?.stylePreview && current === "dark") ?? false);
-    (0, _react.useEffect)(() => {
-      channel.on("DARK_MODE", setIsDark);
-      return () => channel.off("DARK_MODE", setIsDark);
-    }, []);
-    return /* @__PURE__ */React.createElement(_theming.ThemeProvider, {
-      theme: (0, _theming.convert)(docs?.theme ?? (isDark ? _theming.themes.dark : _theming.themes.light))
-    }, /* @__PURE__ */React.createElement("section", {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "1rem"
-      }
-    }, /* @__PURE__ */React.createElement(_components.SyntaxHighlighter, {
-      language: docs?.source?.language
-    }, docs?.source?.code), /* @__PURE__ */React.createElement(Story, null)));
-  };
-}

package/cjs/index.d.ts

@@ -1,13 +0,0 @@
-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';
-export type * from './types.ts';

package/cjs/index.js

@@ -1,137 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _test = require("@repobuddy/test");
-Object.keys(_test).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _test[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _test[key];
-    }
-  });
-});
-var _show_html = require("./components/show_html.tsx");
-Object.keys(_show_html).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _show_html[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _show_html[key];
-    }
-  });
-});
-var _show_doc_source = require("./decorators/show_doc_source.tsx");
-Object.keys(_show_doc_source).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _show_doc_source[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _show_doc_source[key];
-    }
-  });
-});
-var _define_actions_param = require("./parameters/define_actions_param.ts");
-Object.keys(_define_actions_param).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _define_actions_param[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _define_actions_param[key];
-    }
-  });
-});
-var _define_backgrounds_param = require("./parameters/define_backgrounds_param.ts");
-Object.keys(_define_backgrounds_param).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _define_backgrounds_param[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _define_backgrounds_param[key];
-    }
-  });
-});
-var _define_docs_param = require("./parameters/define_docs_param.ts");
-Object.keys(_define_docs_param).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _define_docs_param[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _define_docs_param[key];
-    }
-  });
-});
-var _define_layout_param = require("./parameters/define_layout_param.ts");
-Object.keys(_define_layout_param).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _define_layout_param[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _define_layout_param[key];
-    }
-  });
-});
-var _define_parameters = require("./parameters/define_parameters.ts");
-Object.keys(_define_parameters).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _define_parameters[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _define_parameters[key];
-    }
-  });
-});
-var _define_test_param = require("./parameters/define_test_param.ts");
-Object.keys(_define_test_param).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _define_test_param[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _define_test_param[key];
-    }
-  });
-});
-var _define_viewport_param = require("./parameters/define_viewport_param.ts");
-Object.keys(_define_viewport_param).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _define_viewport_param[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _define_viewport_param[key];
-    }
-  });
-});
-var _story_sort = require("./parameters/story_sort.ts");
-Object.keys(_story_sort).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _story_sort[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _story_sort[key];
-    }
-  });
-});
-var _when_running_in_test = require("./testing/decorators/when_running_in_test.tsx");
-Object.keys(_when_running_in_test).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _when_running_in_test[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _when_running_in_test[key];
-    }
-  });
-});

package/cjs/manager/brand_title.d.ts

@@ -1,35 +0,0 @@
-export 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">'
- *   })
- * })
- * ```
- */
-export declare function brandTitle(options: BrandTitleOptions): string;

package/cjs/manager/brand_title.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.brandTitle = brandTitle;
-function brandTitle(options) {
-  return `<span style="display: flex; align-items: center; gap: 2px;">
-		${options.logo ?? ""}
-		${options.title}
-	</span>`;
-}

package/cjs/manager/index.d.ts

@@ -1 +0,0 @@
-export * from './brand_title.js';

package/cjs/manager/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _brand_title = require("./brand_title.js");
-Object.keys(_brand_title).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _brand_title[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _brand_title[key];
-    }
-  });
-});

package/cjs/parameters/define_actions_param.d.ts

@@ -1,24 +0,0 @@
-export interface ActionsParam {
-    actions: {
-        argTypesRegex?: string | undefined;
-        disable?: boolean | undefined;
-        handles?: string[] | undefined;
-        [k: string]: unknown;
-    };
-}
-/**
- * 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
- */
-export declare function defineActionsParam(actions: ActionsParam['actions']): {
-    actions: {
-        [k: string]: unknown;
-        argTypesRegex?: string | undefined;
-        disable?: boolean | undefined;
-        handles?: string[] | undefined;
-    };
-};

package/cjs/parameters/define_actions_param.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.defineActionsParam = defineActionsParam;
-function defineActionsParam(actions) {
-  return {
-    actions
-  };
-}

package/cjs/parameters/define_backgrounds_param.d.ts

@@ -1,45 +0,0 @@
-export interface BackgroundsParam {
-    backgrounds: {
-        default?: string | undefined;
-        values?: Array<{
-            name: string;
-            value: string;
-        }>;
-        disable?: boolean | undefined;
-        grid?: {
-            cellAmount?: number | undefined;
-            cellSize?: number | undefined;
-            disable?: boolean | undefined;
-            offsetX?: number | undefined;
-            offsetY?: number | undefined;
-            opacity?: number | undefined;
-        } | undefined;
-        [k: string]: unknown;
-    };
-}
-export interface GlobalApiBackgroundsParam {
-    backgrounds: {
-        default?: string | undefined;
-        options?: Array<{
-            name: string;
-            value: string;
-        }>;
-        disabled?: boolean | undefined;
-        grid?: {
-            cellAmount?: number | undefined;
-            cellSize?: number | undefined;
-            disable?: boolean | undefined;
-            offsetX?: number | undefined;
-            offsetY?: number | undefined;
-            opacity?: number | undefined;
-        } | undefined;
-        [k: string]: unknown;
-    };
-}
-/**
- * Defines backgrounds parameters for Storybook stories.
- *
- * @param backgrounds - The backgrounds configuration
- * @returns An object containing the backgrounds parameter configuration
- */
-export declare const defineBackgroundsParam: (backgrounds: BackgroundsParam["backgrounds"] | GlobalApiBackgroundsParam["backgrounds"]) => BackgroundsParam;

package/cjs/parameters/define_backgrounds_param.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.defineBackgroundsParam = void 0;
-const defineBackgroundsParam = backgrounds => ({
-  backgrounds
-});
-exports.defineBackgroundsParam = defineBackgroundsParam;