@repobuddy/storybook 2.0.1 → 2.1.1

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

@@ -1,179 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.unitBadge = exports.todoBadge = exports.tagBadges = exports.snapshotBadge = exports.propsBadge = exports.outdatedBadge = exports.newBadge = exports.keyboardBadge = exports.internalBadge = exports.integrationBadge = exports.editorBadge = exports.deprecatedBadge = exports.dangerBadge = exports.codeOnlyBadge = exports.betaBadge = void 0;
-var _managerHelpers = require("storybook-addon-tag-badges/manager-helpers");
-const [,,,,,, versionBadge] = _managerHelpers.defaultConfig;
-const editorBadge = exports.editorBadge = {
-  tags: "editor",
-  badge: {
-    text: "\u270F\uFE0F",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Editor"
-  },
-  display: {
-    sidebar: {
-      type: "story",
-      skipInherited: false
-    }
-  }
-};
-const newBadge = exports.newBadge = {
-  tags: "new",
-  badge: {
-    text: "\u{1F195}",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "New"
-  }
-};
-const betaBadge = exports.betaBadge = {
-  tags: "beta",
-  badge: {
-    text: "\u{1F171}\uFE0F",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Beta"
-  }
-};
-const propsBadge = exports.propsBadge = {
-  tags: "props",
-  badge: {
-    text: "\u{1F527}",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Props"
-  }
-};
-const deprecatedBadge = exports.deprecatedBadge = {
-  tags: "deprecated",
-  badge: {
-    text: "\u{1FAA6}",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Deprecated"
-  }
-};
-const outdatedBadge = exports.outdatedBadge = {
-  tags: "outdated",
-  badge: {
-    text: "\u26A0\uFE0F",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Outdated"
-  }
-};
-const dangerBadge = exports.dangerBadge = {
-  tags: "danger",
-  badge: {
-    text: "\u{1F6A8}",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Dangerous"
-  }
-};
-const todoBadge = exports.todoBadge = {
-  tags: "todo",
-  badge: {
-    text: "\u{1F4CB}",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Todo"
-  }
-};
-const codeOnlyBadge = exports.codeOnlyBadge = {
-  tags: "code-only",
-  badge: {
-    text: "\u{1F4DD}",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Code Only"
-  }
-};
-const snapshotBadge = exports.snapshotBadge = {
-  tags: "snapshot",
-  badge: {
-    text: "\u{1F4F8}",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Snapshot Test"
-  },
-  display: {
-    sidebar: false,
-    toolbar: ["story"]
-  }
-};
-const unitBadge = exports.unitBadge = {
-  tags: "unit",
-  badge: {
-    text: "\u{1F9EA}",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Unit Test"
-  },
-  display: {
-    sidebar: false
-  }
-};
-const integrationBadge = exports.integrationBadge = {
-  tags: "integration",
-  badge: {
-    text: "\u{1F517}",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Integration Test"
-  },
-  display: {
-    sidebar: false
-  }
-};
-const keyboardBadge = exports.keyboardBadge = {
-  tags: "keyboard",
-  badge: {
-    text: "\u2328\uFE0F",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Keyboard Interaction"
-  }
-};
-const internalBadge = exports.internalBadge = {
-  tags: "internal",
-  badge: {
-    text: "\u{1F512}",
-    style: {
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    tooltip: "Internal"
-  }
-};
-const tagBadges = exports.tagBadges = [editorBadge, unitBadge, integrationBadge, keyboardBadge, newBadge, betaBadge, deprecatedBadge, outdatedBadge, dangerBadge, propsBadge, todoBadge, codeOnlyBadge, internalBadge, snapshotBadge, versionBadge];

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

@@ -1,9 +0,0 @@
-import type { Args, Meta as M, StoryObj as SBO } from '@storybook/react-vite';
-import type { ExtendMeta, ExtendStoryObj } from '../types.js';
-import type { TagNames } from './tag_badges.js';
-export type Meta<TCmpOrArgs = Args> = ExtendMeta<TCmpOrArgs, M<TCmpOrArgs>, {
-    tag: TagNames;
-}>;
-export type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, SBO<TMetaOrCmpOrArgs>, {
-    tag: TagNames;
-}>;

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

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

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

@@ -1,26 +0,0 @@
-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-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()
- *     }
- *   }
- * }
- * ```
- */
-export declare function createDarkModeDocsContainer(customThemes?: {
-    light?: ThemeVars | undefined;
-    dark?: ThemeVars | undefined;
-} | undefined): (props: PropsWithChildren<{
-    context: DocsContextProps;
-}>) => import("react").JSX.Element;

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

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createDarkModeDocsContainer = createDarkModeDocsContainer;
-var _storybookDarkMode = require("@storybook-community/storybook-dark-mode");
-var _blocks = require("@storybook/addon-docs/blocks");
-var _react = require("react");
-var _theming = require("storybook/theming");
-function createDarkModeDocsContainer(customThemes) {
-  return function DarkModeDocsContainer(props) {
-    const [isDark, setDark] = (0, _react.useState)(true);
-    (0, _react.useEffect)(() => {
-      props.context.channel.on(_storybookDarkMode.DARK_MODE_EVENT_NAME, setDark);
-      return () => props.context.channel.removeListener(_storybookDarkMode.DARK_MODE_EVENT_NAME, setDark);
-    }, [props.context.channel]);
-    return /* @__PURE__ */React.createElement(_blocks.DocsContainer, {
-      ...props,
-      theme: isDark ? customThemes?.dark ?? _theming.themes.dark : customThemes?.light ?? _theming.themes.light
-    }, props.children);
-  };
-}

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

@@ -1,54 +0,0 @@
-import type { CSSProperties } from '@just-web/css';
-import type { ThemeVars } from 'storybook/theming';
-/**
- * Configuration parameters for `@storybook-community/storybook-dark-mode`.
- */
-export 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' })
- *   }
- * }
- */
-export declare function defineDarkModeParam(darkMode: DarkModeParam): {
-    darkMode: DarkModeParam;
-};

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

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

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

@@ -1,3 +0,0 @@
-export * from './dark_mode_docs_container.js';
-export * from './define_dark_mode.js';
-export * from './with_dark_mode.js';

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

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

package/cjs/storybook-dark-mode/with_dark_mode.d.ts

@@ -1,22 +0,0 @@
-import type { CSSProperties } from '@just-web/css';
-import type { DecoratorFunction } from 'storybook/internal/types';
-/**
- * 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.
- */
-export 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>;

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

@@ -1,54 +0,0 @@
-"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

@@ -1,5 +0,0 @@
-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

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.whenRunningInTest = whenRunningInTest;
-var _when_running_in_textCtx = require("./when_running_in_text.ctx.js");
-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

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

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

@@ -1,10 +0,0 @@
-"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

@@ -1,41 +0,0 @@
-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

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

package/cjs/variants/index.d.ts

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

package/cjs/variants/index.js

@@ -1,8 +0,0 @@
-"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

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

package/cjs/variants/preset.d.ts

@@ -1,11 +0,0 @@
-/**
- * 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

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

package/esm/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/esm/components/show_html.js

@@ -1,19 +0,0 @@
-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 /* @__PURE__ */ React.createElement("pre", { ...props }, html);
-}

package/esm/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/esm/decorators/show_doc_source.js

@@ -1,28 +0,0 @@
-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: { 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/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/esm/manager/brand_title.js

@@ -1,6 +0,0 @@
-export function brandTitle(options) {
-  return `<span style="display: flex; align-items: center; gap: 2px;">
-		${options.logo ?? ""}
-		${options.title}
-	</span>`;
-}