@repobuddy/storybook 1.0.1 → 2.0.0

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

@@ -1,208 +1,189 @@
-import { defaultConfig } from 'storybook-addon-tag-badges';
+import { defaultConfig } from "storybook-addon-tag-badges/manager-helpers";
 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`.
- */
 export const editorBadge = {
-    tags: 'editor',
-    badge: {
-        text: '✏️',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Editor'
+  tags: "editor",
+  badge: {
+    text: "\u270F\uFE0F",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
     },
-    display: {
-        sidebar: {
-            type: 'story',
-            skipInherited: false
-        }
+    tooltip: "Editor"
+  },
+  display: {
+    sidebar: {
+      type: "story",
+      skipInherited: false
     }
+  }
 };
 export const newBadge = {
-    tags: 'new',
-    badge: {
-        text: '🆕',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'New'
-    }
+  tags: "new",
+  badge: {
+    text: "\u{1F195}",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    tooltip: "New"
+  }
 };
 export const betaBadge = {
-    tags: 'beta',
-    badge: {
-        text: '🅱️',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Beta'
-    }
+  tags: "beta",
+  badge: {
+    text: "\u{1F171}\uFE0F",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    tooltip: "Beta"
+  }
 };
 export const propsBadge = {
-    tags: 'props',
-    badge: {
-        text: '🔧',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Props'
-    }
+  tags: "props",
+  badge: {
+    text: "\u{1F527}",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    tooltip: "Props"
+  }
 };
 export const deprecatedBadge = {
-    tags: 'deprecated',
-    badge: {
-        text: '🪦',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Deprecated'
-    }
+  tags: "deprecated",
+  badge: {
+    text: "\u{1FAA6}",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    tooltip: "Deprecated"
+  }
 };
 export const outdatedBadge = {
-    tags: 'outdated',
-    badge: {
-        text: '⚠️',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Outdated'
-    }
+  tags: "outdated",
+  badge: {
+    text: "\u26A0\uFE0F",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    tooltip: "Outdated"
+  }
 };
 export const dangerBadge = {
-    tags: 'danger',
-    badge: {
-        text: '🚨',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Dangerous'
-    }
+  tags: "danger",
+  badge: {
+    text: "\u{1F6A8}",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    tooltip: "Dangerous"
+  }
 };
 export const todoBadge = {
-    tags: 'todo',
-    badge: {
-        text: '📋',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Todo'
-    }
+  tags: "todo",
+  badge: {
+    text: "\u{1F4CB}",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    tooltip: "Todo"
+  }
 };
 export const codeOnlyBadge = {
-    tags: 'code-only',
-    badge: {
-        text: '📝',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Code Only'
-    }
+  tags: "code-only",
+  badge: {
+    text: "\u{1F4DD}",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    tooltip: "Code Only"
+  }
 };
 export const snapshotBadge = {
-    tags: 'snapshot',
-    badge: {
-        text: '📸',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Snapshot Test'
+  tags: "snapshot",
+  badge: {
+    text: "\u{1F4F8}",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
     },
-    display: {
-        sidebar: false,
-        toolbar: ['story']
-    }
+    tooltip: "Snapshot Test"
+  },
+  display: {
+    sidebar: false,
+    toolbar: ["story"]
+  }
 };
 export const unitBadge = {
-    tags: 'unit',
-    badge: {
-        text: '🧪',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Unit Test'
+  tags: "unit",
+  badge: {
+    text: "\u{1F9EA}",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
     },
-    display: {
-        sidebar: false
-    }
+    tooltip: "Unit Test"
+  },
+  display: {
+    sidebar: false
+  }
 };
 export const integrationBadge = {
-    tags: 'integration',
-    badge: {
-        text: '🔗',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Integration Test'
+  tags: "integration",
+  badge: {
+    text: "\u{1F517}",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
     },
-    display: {
-        sidebar: false
-    }
+    tooltip: "Integration Test"
+  },
+  display: {
+    sidebar: false
+  }
 };
 export const keyboardBadge = {
-    tags: 'keyboard',
-    badge: {
-        text: '⌨️',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Keyboard Interaction'
-    }
+  tags: "keyboard",
+  badge: {
+    text: "\u2328\uFE0F",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    tooltip: "Keyboard Interaction"
+  }
 };
 export const internalBadge = {
-    tags: 'internal',
-    badge: {
-        text: '🔒',
-        style: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent'
-        },
-        tooltip: 'Internal'
-    }
+  tags: "internal",
+  badge: {
+    text: "\u{1F512}",
+    style: {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    tooltip: "Internal"
+  }
 };
 export const tagBadges = [
-    editorBadge,
-    unitBadge,
-    integrationBadge,
-    keyboardBadge,
-    newBadge,
-    betaBadge,
-    deprecatedBadge,
-    outdatedBadge,
-    dangerBadge,
-    propsBadge,
-    todoBadge,
-    codeOnlyBadge,
-    internalBadge,
-    snapshotBadge,
-    versionBadge
+  editorBadge,
+  unitBadge,
+  integrationBadge,
+  keyboardBadge,
+  newBadge,
+  betaBadge,
+  deprecatedBadge,
+  outdatedBadge,
+  dangerBadge,
+  propsBadge,
+  todoBadge,
+  codeOnlyBadge,
+  internalBadge,
+  snapshotBadge,
+  versionBadge
 ];

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

@@ -1,8 +1,9 @@
 import type { Args, Meta as M, StoryObj as SBO } from '@storybook/react-vite';
+import type { ExtendMeta, ExtendStoryObj } from '../types.ts';
 import type { TagNames } from './tag_badges.ts';
-export type Meta<TCmpOrArgs = Args> = Omit<M<TCmpOrArgs>, 'tags'> & {
-    tags?: Array<TagNames | (string & {})> | undefined;
-};
-export type StoryObj<TMetaOrCmpOrArgs = Args> = Omit<SBO<TMetaOrCmpOrArgs>, 'tags'> & {
-    tags?: Array<TagNames | (string & {})> | undefined;
-};
+export type Meta<TCmpOrArgs = Args> = ExtendMeta<TCmpOrArgs, M<TCmpOrArgs>, {
+    tag: TagNames;
+}>;
+export type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, SBO<TMetaOrCmpOrArgs>, {
+    tag: TagNames;
+}>;

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

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

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

@@ -2,7 +2,7 @@ import { type DocsContextProps } from '@storybook/addon-docs/blocks';
 import { type PropsWithChildren } from 'react';
 import { type ThemeVars } from 'storybook/theming';
 /**
- * Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode2`.
+ * Creates a `DocsContainer` for `storybook` that works with `@storybook-community/storybook-dark-mode`.
  *
  * @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
  *
@@ -23,4 +23,4 @@ export declare function createDarkModeDocsContainer(customThemes?: {
     dark?: ThemeVars | undefined;
 } | undefined): (props: PropsWithChildren<{
     context: DocsContextProps;
-}>) => import("react/jsx-runtime").JSX.Element;
+}>) => import("react").JSX.Element;

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

@@ -1,32 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { DocsContainer } from '@storybook/addon-docs/blocks';
-import { useEffect, useState } from 'react';
-import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode2';
-import { themes } from 'storybook/theming';
-/**
- * Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode2`.
- *
- * @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
- *
- * @example
- * ```ts
- * // .storybook/preview.tsx
- * const preview: Preview = {
- *   parameters: {
- *     docs: {
- *       container: createDarkModeDocsContainer()
- *     }
- *   }
- * }
- * ```
- */
+import { DARK_MODE_EVENT_NAME } from "@storybook-community/storybook-dark-mode";
+import { DocsContainer } from "@storybook/addon-docs/blocks";
+import { useEffect, useState } from "react";
+import { themes } from "storybook/theming";
 export 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 (_jsx(DocsContainer, { ...props, theme: isDark ? (customThemes?.dark ?? themes.dark) : (customThemes?.light ?? themes.light), children: props.children }));
-    };
+  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__ */ React.createElement(
+      DocsContainer,
+      {
+        ...props,
+        theme: isDark ? customThemes?.dark ?? themes.dark : customThemes?.light ?? themes.light
+      },
+      props.children
+    );
+  };
 }

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

@@ -1,7 +1,7 @@
 import type { CSSProperties } from '@just-web/css';
-import type { ThemeVars } from 'storybook/internal/theming';
+import type { ThemeVars } from 'storybook/theming';
 /**
- * Configuration parameters for `storybook-dark-mode2`.
+ * Configuration parameters for `@storybook-community/storybook-dark-mode`.
  */
 export interface DarkModeParam {
     /** The current theme ('dark' or 'light') */
@@ -34,7 +34,7 @@ export interface DarkModeParam {
     stylePreview?: boolean | undefined;
 }
 /**
- * Defines `storybook-dark-mode2` parameters for Storybook stories.
+ * 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

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

@@ -1,19 +1,3 @@
-/**
- * Defines `storybook-dark-mode2` 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' })
- *   }
- * }
- */
 export function defineDarkModeParam(darkMode) {
-    return { darkMode };
+  return { darkMode };
 }

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

@@ -1,3 +1,3 @@
-export * from "./dark_mode_docs_container.js";
-export * from "./define_dark_mode.js";
-export * from "./with_dark_mode.js";
+export * from "./dark_mode_docs_container.tsx";
+export * from "./define_dark_mode.ts";
+export * from "./with_dark_mode.tsx";

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

@@ -1,57 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { toDOMStyle } from '@just-web/css';
-import { useDarkMode } from 'storybook-dark-mode2';
-/**
- * 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.
- */
+import { toDOMStyle } from "@just-web/css";
+import { useDarkMode } from "@storybook-community/storybook-dark-mode";
 export function withDarkMode(options) {
-    return function darkModeDecorator(Story, { parameters }) {
-        const darkMode = parameters.darkMode;
-        if (!darkMode)
-            return _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 _jsx(Story, {});
-    };
-}
-function addClass(target, className) {
-    if (!className)
-        return;
-    if (typeof className === 'string') {
-        target.classList.add(...className.split(' '));
+  return function darkModeDecorator(Story, { parameters }) {
+    const darkMode = parameters.darkMode;
+    if (!darkMode) return /* @__PURE__ */ React.createElement(Story, null);
+    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);
     }
-    else if (Array.isArray(className)) {
-        target.classList.add(...className);
+    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(toDOMStyle(style))) {
-            target.style.setProperty(key, value);
-        }
+  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);
-        }
+  if (style) {
+    for (const key of Object.keys(toDOMStyle(style))) {
+      target.style.removeProperty(key);
     }
+  }
 }

package/esm/testing/decorators/when_running_in_test.js

@@ -1,10 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ctx } from "./when_running_in_text.ctx.js";
-/**
- * executes the specified decorator or handler if the code is running in test.
- */
+import { ctx } from "./when_running_in_text.ctx.ts";
 export function whenRunningInTest(decoratorOrHandler) {
-    return function RunInTest(Story, context) {
-        return ctx.isRunningInTest() ? (decoratorOrHandler(Story, context) ?? _jsx(Story, {})) : _jsx(Story, {});
-    };
+  return function RunInTest(Story, context) {
+    return ctx.isRunningInTest() ? decoratorOrHandler(Story, context) ?? /* @__PURE__ */ React.createElement(Story, null) : /* @__PURE__ */ React.createElement(Story, null);
+  };
 }

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

@@ -1,4 +1,3 @@
-import { isRunningInTest } from '@repobuddy/test';
 export declare const ctx: {
-    isRunningInTest: typeof isRunningInTest;
+    isRunningInTest: any;
 };

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

@@ -1,4 +1,4 @@
-import { isRunningInTest } from '@repobuddy/test';
+import { isRunningInTest } from "@repobuddy/test";
 export const ctx = {
-    isRunningInTest
+  isRunningInTest
 };