@repobuddy/storybook 1.0.0 → 2.0.0

package/cjs/storybook-dark-mode/with_dark_mode.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withDarkMode = withDarkMode;
+var _css = require("@just-web/css");
+var _storybookDarkMode = require("@storybook-community/storybook-dark-mode");
+function withDarkMode(options) {
+  return function darkModeDecorator(Story, {
+    parameters
+  }) {
+    const darkMode = parameters.darkMode;
+    if (!darkMode) return /* @__PURE__ */React.createElement(Story, null);
+    const dark = (0, _storybookDarkMode.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__ */React.createElement(Story, null);
+  };
+}
+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((0, _css.toDOMStyle)(style))) {
+      target.style.setProperty(key, value);
+    }
+  }
+}
+function removeStyle(target, style) {
+  if (style) {
+    for (const key of Object.keys((0, _css.toDOMStyle)(style))) {
+      target.style.removeProperty(key);
+    }
+  }
+}

package/cjs/testing/decorators/when_running_in_test.d.ts

@@ -0,0 +1,5 @@
+import type { Decorator, StrictArgs } from '@storybook/react-vite';
+/**
+ * executes the specified decorator or handler if the code is running in test.
+ */
+export declare function whenRunningInTest<TArgs = StrictArgs>(decoratorOrHandler: ((...args: Parameters<Decorator<TArgs>>) => ReturnType<Decorator<TArgs>> | undefined | void) | (() => ReturnType<Decorator<TArgs>> | undefined | void)): Decorator<TArgs>;

package/cjs/testing/decorators/when_running_in_test.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.whenRunningInTest = whenRunningInTest;
+var _when_running_in_textCtx = require("./when_running_in_text.ctx.ts");
+function whenRunningInTest(decoratorOrHandler) {
+  return function RunInTest(Story, context) {
+    return _when_running_in_textCtx.ctx.isRunningInTest() ? decoratorOrHandler(Story, context) ?? /* @__PURE__ */React.createElement(Story, null) : /* @__PURE__ */React.createElement(Story, null);
+  };
+}

package/cjs/testing/decorators/when_running_in_text.ctx.d.ts

@@ -0,0 +1,3 @@
+export declare const ctx: {
+    isRunningInTest: any;
+};

package/cjs/testing/decorators/when_running_in_text.ctx.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ctx = void 0;
+var _test = require("@repobuddy/test");
+const ctx = exports.ctx = {
+  isRunningInTest: _test.isRunningInTest
+};

package/cjs/types.d.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+/**
+ * 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' }>
+ * ```
+ */
+export type ExtendMeta<TCmpOrArgs, M extends Meta<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' }>
+ * ```
+ */
+export type ExtendStoryObj<TMetaOrCmpOrArgs, S extends StoryObj<TMetaOrCmpOrArgs>, E extends {
+    tag: string;
+}> = Omit<S, 'tags'> & {
+    tags?: Array<E['tag'] | (string & {})> | undefined;
+};

package/cjs/types.js

@@ -0,0 +1 @@
+"use strict";

package/cjs/variants/index.d.ts

@@ -0,0 +1 @@
+export declare const empty: {};

package/cjs/variants/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.empty = void 0;
+console.info("variants.index.ts.load");
+const empty = exports.empty = {};

package/cjs/variants/package.json

@@ -0,0 +1,3 @@
+{
+	"type": "module"
+}

package/cjs/variants/preset.d.ts

@@ -0,0 +1,11 @@
+/**
+ * User specifies `@repobuddy/storybook/variants/addon` in the `.storybook/main.ts`.
+ *
+ * Storybook loads it on the server side.
+ *
+ * It provides a default export (or in CJS, `module.exports =`) that contains:
+ *
+ * - `managerEntries` a function that returns an array of strings on where to load the manager (on the client side)
+ * - `previewAnnotations` a function that returns an array of strings on where to load the preview (on the client side)
+ * - `experimental_serverChannel` a function that handles the server-side channel
+ */

package/cjs/variants/preset.js

@@ -0,0 +1,3 @@
+"use strict";
+
+console.info("variants.preset.js.load");

package/esm/components/show_html.d.ts

@@ -13,4 +13,4 @@ export type ShowHtmlProps = ClassNameProps & StyleProps & {
  * @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-runtime").JSX.Element;
+export declare function ShowHtml({ selector, config, ...props }: ShowHtmlProps): import("react").JSX.Element;

package/esm/components/show_html.js

@@ -1,28 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { prettify } from 'htmlfy';
-import { useEffect, useState } from 'react';
-/**
- * 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
- */
+import { prettify } from "htmlfy";
+import { useEffect, useState } from "react";
 export 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 _jsx("pre", { ...props, children: html });
+  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__ */ React.createElement("pre", { ...props }, html);
 }

package/esm/decorators/show_doc_source.js

@@ -1,14 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * 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`.
- */
+import { useEffect, useState } from "react";
+import { SyntaxHighlighter } from "storybook/internal/components";
+import { addons } from "storybook/preview-api";
+import { convert, ThemeProvider, themes } from "storybook/theming";
+const channel = addons.getChannel();
 export function showDocSource() {
-    return (Story, { parameters }) => {
-        return (_jsxs("section", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '1rem'
-            }, children: [_jsx("pre", { children: parameters.docs?.source?.code }), _jsx(Story, {})] }));
-    };
+  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__ */ React.createElement(ThemeProvider, { theme: convert(docs?.theme ?? (isDark ? themes.dark : themes.light)) }, /* @__PURE__ */ React.createElement(
+      "section",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem"
+        }
+      },
+      /* @__PURE__ */ React.createElement(SyntaxHighlighter, { language: docs?.source?.language }, docs?.source?.code),
+      /* @__PURE__ */ React.createElement(Story, null)
+    ));
+  };
 }

package/esm/index.d.ts

@@ -10,3 +10,4 @@ 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/esm/index.js

@@ -1,12 +1,12 @@
-export * from '@repobuddy/test';
-export * from "./components/show_html.js";
-export * from "./decorators/show_doc_source.js";
-export * from "./parameters/define_actions_param.js";
-export * from "./parameters/define_backgrounds_param.js";
-export * from "./parameters/define_docs_param.js";
-export * from "./parameters/define_layout_param.js";
-export * from "./parameters/define_parameters.js";
-export * from "./parameters/define_test_param.js";
-export * from "./parameters/define_viewport_param.js";
-export * from "./parameters/story_sort.js";
-export * from "./testing/decorators/when_running_in_test.js";
+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";

package/esm/manager/brand_title.js

@@ -1,28 +1,6 @@
-/**
- * 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 function brandTitle(options) {
-    return `<span style="display: flex; align-items: center; gap: 2px;">
-		${options.logo ?? ''}
+  return `<span style="display: flex; align-items: center; gap: 2px;">
+		${options.logo ?? ""}
 		${options.title}
 	</span>`;
 }

package/esm/manager/index.js

@@ -1 +1 @@
-export * from "./brand_title.js";
+export * from "./brand_title.ts";

package/esm/parameters/define_actions_param.js

@@ -1,11 +1,3 @@
-/**
- * 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 function defineActionsParam(actions) {
-    return { actions };
+  return { actions };
 }

package/esm/parameters/define_backgrounds_param.js

@@ -1,9 +1,3 @@
-/**
- * Defines backgrounds parameters for Storybook stories.
- *
- * @param backgrounds - The backgrounds configuration
- * @returns An object containing the backgrounds parameter configuration
- */
 export const defineBackgroundsParam = (backgrounds) => ({
-    backgrounds
+  backgrounds
 });

package/esm/parameters/define_docs_param.d.ts

@@ -88,12 +88,12 @@ export interface DocsParam {
             /**
              * `docs.description.story` can be used to describe the story in doc.
              */
-            story?: string | JSX.Element | undefined;
+            story?: string | undefined;
             /**
              * `docs.description.component` can be used to describe the component in meta.
              * It has no effect on the stories.
              */
-            component?: string | JSX.Element | undefined;
+            component?: string | undefined;
         } | undefined;
         /**
          * Determines whether to show the code panel.

package/esm/parameters/define_docs_param.js

@@ -1,30 +1,3 @@
-/**
- * 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'
- *     }
- *   })
- * }
- * ```
- */
 export function defineDocsParam(docs) {
-    return { docs };
+  return { docs };
 }

package/esm/parameters/define_layout_param.js

@@ -1,17 +1,3 @@
-/**
- * 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')
- * }
- * ```
- */
 export const defineLayoutParam = (layout) => ({
-    layout
+  layout
 });

package/esm/parameters/define_parameters.d.ts

@@ -36,4 +36,4 @@ export type StorybookBuiltInParams = Partial<BackgroundsParam | GlobalApiBackgro
  * }
  * ```
  */
-export declare function defineParameters<P extends Record<string, any>>(param: P & StorybookBuiltInParams, ...rest: Array<StorybookBuiltInParams>): StorybookBuiltInParams;
+export declare function defineParameters<P extends Record<string, any>>(param: P & StorybookBuiltInParams, ...rest: Array<StorybookBuiltInParams>): any;

package/esm/parameters/define_parameters.js

@@ -1,32 +1,3 @@
-/**
- * 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
- *     }
- *   })
- * }
- * ```
- */
 export function defineParameters(param, ...rest) {
-    return rest.reduce((acc, param) => Object.assign(acc, param), param);
+  return rest.reduce((acc, param2) => Object.assign(acc, param2), param);
 }

package/esm/parameters/define_test_param.js

@@ -1,19 +1,3 @@
-/**
- * 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
- * })
- */
 export function defineTestParam(test) {
-    return { test };
+  return { test };
 }

package/esm/parameters/define_viewport_param.js

@@ -1,30 +1,3 @@
-/**
- * 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'
- * })
- * ```
- */
 export function defineViewportParam(viewport) {
-    return { viewport };
+  return { viewport };
 }

package/esm/parameters/story_sort.js

@@ -1 +0,0 @@
-export {};

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

@@ -1 +1 @@
-export * from "./tag_badges.js";
+export * from "./tag_badges.ts";

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

@@ -1,4 +1,4 @@
-import { type TagBadgeParameters } from 'storybook-addon-tag-badges';
+import { type TagBadgeParameters } from 'storybook-addon-tag-badges/manager-helpers';
 type TagBadgeParameter = TagBadgeParameters[0];
 /**
  * Type representing the names of predefined tags used in Storybook stories.