@repobuddy/storybook 2.0.1 → 2.1.0

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>`;
-}

package/esm/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/esm/parameters/define_actions_param.js

@@ -1,3 +0,0 @@
-export function defineActionsParam(actions) {
-  return { actions };
-}

package/esm/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/esm/parameters/define_backgrounds_param.js

@@ -1,3 +0,0 @@
-export const defineBackgroundsParam = (backgrounds) => ({
-  backgrounds
-});

package/esm/parameters/define_docs_param.d.ts

@@ -1,217 +0,0 @@
-import type { StoryContext } from '@storybook/react-vite';
-declare global {
-    namespace JSX {
-        interface Element {
-        }
-    }
-}
-export interface SourceProps {
-    /**
-     * Provides the source code to be rendered.
-     *
-     * This is useful when the story contains extra code that would be confusing in the docs.
-     *
-     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#code
-     */
-    code?: string | undefined;
-    /**
-     * Specifies whether the source code should be rendered in dark mode.
-     *
-     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#dark
-     */
-    dark?: boolean | undefined;
-    /**
-     * Specifies whether decorators should be excluded from the source code.
-     *
-     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#excludedecorators
-     *
-     * Note: Has no effect in React.
-     * @see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#parameter-docssourceexcludedecorators-has-no-effect-in-react
-     */
-    excludeDecorators?: boolean | undefined;
-    /**
-     * Specifies the language of the source code.
-     *
-     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#language
-     */
-    language?: string | undefined;
-    /**
-     * A function to dynamically transform the source before being rendered,
-     * based on the original source and any story context necessary.
-     * The returned string is displayed as-is.
-     *
-     * If both code and transform are specified, transform will be ignored.
-     *
-     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#transform
-     */
-    transform?: ((code: string, storyContext: StoryContext) => string) | undefined;
-    /**
-     * Specifies how the source code is rendered.
-     *
-     * - auto: Same as dynamic, if the story's render function accepts args inputs and dynamic is supported by the framework in use; otherwise same as code
-     * - code: Renders the value of code prop, otherwise renders static story source
-     * - dynamic: Renders the story source with dynamically updated arg values
-     *
-     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#type
-     */
-    type?: 'auto' | 'code' | 'dynamic' | undefined;
-}
-export interface DocsParam {
-    docs: {
-        argTypes?: {
-            /**
-             * Specifies which controls to exclude from the args table.
-             * Any controls whose names match the regex or are part of the array will be left out.
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes#exclude
-             */
-            exclude?: string[] | RegExp | undefined;
-            /**
-             * Specifies which controls to include in the args table.
-             * Any controls whose names don't match the regex or are not part of the array will be left out.
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes#include
-             */
-            include?: string[] | RegExp | undefined;
-            /**
-             * Specifies how the arg types are sorted.
-             *
-             * - none: Unsorted, displayed in the same order the arg types are processed in
-             * - alpha: Sorted alphabetically, by the arg type's name
-             * - requiredFirst: Same as alpha, with any required arg types displayed first
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes#sort
-             */
-            sort?: 'alpha' | 'requiredFirst' | 'none' | undefined;
-        } | undefined;
-        description?: {
-            /**
-             * `docs.description.story` can be used to describe the story in doc.
-             */
-            story?: string | undefined;
-            /**
-             * `docs.description.component` can be used to describe the component in meta.
-             * It has no effect on the stories.
-             */
-            component?: string | undefined;
-        } | undefined;
-        /**
-         * Determines whether to show the code panel.
-         *
-         * @see https://storybook.js.org/docs/writing-docs/code-panel
-         */
-        codePanel?: boolean | undefined;
-        source?: SourceProps | undefined;
-        canvas?: {
-            /**
-             * Provides any additional custom actions to show in the bottom right corner.
-             * These are simple buttons that do anything you specify in the onClick function.
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#additionalactions
-             */
-            additionalActions?: Array<{
-                title: string | JSX.Element;
-                className?: string;
-                onClick: () => void;
-                disabled?: boolean;
-            }> | undefined;
-            /**
-             * Provides HTML class(es) to the preview element, for custom styling.
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#classname
-             */
-            className?: string | undefined;
-            /**
-             * Specifies how the canvas should layout the story.
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#layout
-             */
-            layout?: 'centered' | 'padded' | 'fullscreen' | undefined;
-            /**
-             * Specifies the initial state of the source panel.
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#sourcestate
-             */
-            sourceState?: 'hidden' | 'shown' | 'none' | undefined;
-            /**
-             * Determines whether to render a toolbar containing tools to interact with the story.
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#withtoolbar
-             */
-            withToolbar?: boolean | undefined;
-        } | undefined;
-        controls?: {
-            /**
-             * Specifies which controls to exclude from the args table.
-             * Any controls whose names match the regex or are part of the array will be left out.
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls#exclude
-             */
-            exclude?: string[] | RegExp | undefined;
-            /**
-             * Specifies which controls to include in the args table.
-             * Any controls whose names don't match the regex or are not part of the array will be left out.
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls#include
-             */
-            include?: string[] | RegExp | undefined;
-            /**
-             *
-             * Specifies how the controls are sorted.
-             *
-             * - none: Unsorted, displayed in the same order the controls are processed in
-             * - alpha: Sorted alphabetically, by the arg type's name
-             * - requiredFirst: Same as alpha, with any required controls displayed first
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls#sort
-             */
-            sort?: 'alpha' | 'requiredFirst' | 'none' | undefined;
-        } | undefined;
-        story?: {
-            /**
-             * Specifies whether the story should be autoplayed.
-             *
-             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-story#autoplay
-             */
-            autoplay?: boolean | undefined;
-            /**
-             * Set a minimum height (note for an iframe this is the actual height) when rendering a story in an iframe or inline.
-             * This overrides parameters.docs.story.iframeHeight for iframes.
-             */
-            height?: string | undefined;
-            /**
-             * Determines whether the story is rendered inline (in the same browser frame as the other docs content) or in an iframe.
-             */
-            inline?: boolean | undefined;
-        } | undefined;
-        [k: string]: unknown;
-    };
-}
-/**
- * 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 declare function defineDocsParam(docs: DocsParam['docs']): DocsParam['docs'];

package/esm/parameters/define_docs_param.js

@@ -1,3 +0,0 @@
-export function defineDocsParam(docs) {
-  return { docs };
-}