@repobuddy/storybook 2.0.1 → 2.1.0

package/esm/parameters/define_layout_param.d.ts

@@ -1,20 +0,0 @@
-export interface LayoutParam {
-    layout: 'padded' | 'fullscreen' | 'centered';
-}
-/**
- * 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 declare const defineLayoutParam: (layout: LayoutParam["layout"]) => {
-    layout: "centered" | "padded" | "fullscreen";
-};

package/esm/parameters/define_layout_param.js

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

package/esm/parameters/define_parameters.d.ts

@@ -1,39 +0,0 @@
-import type { BackgroundsParam, GlobalApiBackgroundsParam } from './define_backgrounds_param.js';
-import type { DocsParam } from './define_docs_param.js';
-import type { LayoutParam } from './define_layout_param.js';
-import type { TestParam } from './define_test_param.js';
-import type { ViewportParam } from './define_viewport_param.js';
-import type { StorySortParam } from './story_sort.js';
-export type StorybookBuiltInParams = Partial<BackgroundsParam | GlobalApiBackgroundsParam> & Partial<DocsParam> & Partial<LayoutParam> & Partial<TestParam> & Partial<ViewportParam> & {
-    options?: StorySortParam & Record<string, any>;
-} & Record<string, any>;
-/**
- * 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 declare function defineParameters<P extends Record<string, any>>(param: P & StorybookBuiltInParams, ...rest: Array<StorybookBuiltInParams>): any;

package/esm/parameters/define_parameters.js

@@ -1,3 +0,0 @@
-export function defineParameters(param, ...rest) {
-  return rest.reduce((acc, param2) => Object.assign(acc, param2), param);
-}

package/esm/parameters/define_test_param.d.ts

@@ -1,34 +0,0 @@
-export interface TestParam {
-    test: {
-        clearMocks?: boolean | undefined;
-        mockReset?: boolean | undefined;
-        restoreMocks?: boolean | undefined;
-        dangerouslyIgnoreUnhandledErrors?: boolean | undefined;
-        [k: string]: unknown;
-    };
-}
-/**
- * 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 declare function defineTestParam(test: TestParam['test']): {
-    test: {
-        [k: string]: unknown;
-        clearMocks?: boolean | undefined;
-        mockReset?: boolean | undefined;
-        restoreMocks?: boolean | undefined;
-        dangerouslyIgnoreUnhandledErrors?: boolean | undefined;
-    };
-};

package/esm/parameters/define_test_param.js

@@ -1,3 +0,0 @@
-export function defineTestParam(test) {
-  return { test };
-}

package/esm/parameters/define_viewport_param.d.ts

@@ -1,78 +0,0 @@
-export interface ViewportParam {
-    viewport: {
-        /**
-         * @see https://storybook.js.org/docs/essentials/viewport#viewports
-         */
-        viewports?: Record<string, Viewport> | undefined;
-        /**
-         * @see https://storybook.js.org/docs/essentials/viewport#defaultorientation
-         */
-        defaultOrientation?: 'landscape' | 'portrait' | undefined;
-        /**
-         * @see https://storybook.js.org/docs/essentials/viewport#defaultviewport
-         */
-        defaultViewport?: string | undefined;
-        /**
-         * Disables the viewport parameter.
-         * @deprecated Use `disabled` instead.
-         */
-        disable?: boolean | undefined;
-        [k: string]: unknown;
-    };
-}
-export interface Viewport {
-    name: string;
-    styles: {
-        width: string;
-        height: string;
-    };
-    type: 'mobile' | 'tablet' | 'desktop';
-}
-export interface GlobalApiViewportParam {
-    viewport: {
-        /**
-         * @see https://storybook.js.org/docs/essentials/viewport#viewports
-         */
-        options?: Record<string, Viewport> | undefined;
-        /**
-         * @see https://storybook.js.org/docs/essentials/viewport#defaultviewport
-         */
-        defaultViewport?: string | undefined;
-        /**
-         * @see https://storybook.js.org/docs/essentials/viewport#defaultorientation
-         */
-        defaultOrientation?: 'landscape' | 'portrait' | undefined;
-        /**
-         * @see https://storybook.js.org/docs/essentials/viewport#disable
-         */
-        disabled?: boolean | undefined;
-    };
-}
-/**
- * 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 declare function defineViewportParam(viewport: ViewportParam['viewport'] | GlobalApiViewportParam['viewport']): ViewportParam;

package/esm/parameters/define_viewport_param.js

@@ -1,3 +0,0 @@
-export function defineViewportParam(viewport) {
-  return { viewport };
-}

package/esm/parameters/story_sort.d.ts

@@ -1,27 +0,0 @@
-type StorySortConfig = {
-    includeNames?: boolean;
-    locales?: string;
-    method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom';
-    order?: string[];
-    [k: string]: unknown;
-};
-type Story = {
-    id: string;
-    importPath: string;
-    name: string;
-    title: string;
-};
-type StorySortFn = (a: Story, b: Story) => number;
-/**
- * Interface for story sorting parameters in Storybook.
- * Used to define how stories should be sorted in the navigation sidebar.
- */
-export interface StorySortParam {
-    /**
-     * Configuration for story sorting. Can be either:
-     * - A StorySortConfig object specifying sort method and options
-     * - A custom sorting function that takes two stories and returns their sort order
-     */
-    storySort: StorySortConfig | StorySortFn;
-}
-export {};

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

@@ -1,41 +0,0 @@
-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.
- */
-export type TagNames = 'editor' | 'new' | 'beta' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal';
-/**
- * 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 declare const editorBadge: TagBadgeParameter;
-export declare const newBadge: TagBadgeParameter;
-export declare const betaBadge: TagBadgeParameter;
-export declare const propsBadge: TagBadgeParameter;
-export declare const deprecatedBadge: TagBadgeParameter;
-export declare const outdatedBadge: TagBadgeParameter;
-export declare const dangerBadge: TagBadgeParameter;
-export declare const todoBadge: TagBadgeParameter;
-export declare const codeOnlyBadge: TagBadgeParameter;
-export declare const snapshotBadge: TagBadgeParameter;
-export declare const unitBadge: TagBadgeParameter;
-export declare const integrationBadge: TagBadgeParameter;
-export declare const keyboardBadge: TagBadgeParameter;
-export declare const internalBadge: TagBadgeParameter;
-export declare const tagBadges: TagBadgeParameters;
-export {};

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

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

package/esm/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/esm/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/esm/storybook-dark-mode/dark_mode_docs_container.js

@@ -1,21 +0,0 @@
-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 /* @__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,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/esm/storybook-dark-mode/define_dark_mode.js

@@ -1,3 +0,0 @@
-export function defineDarkModeParam(darkMode) {
-  return { darkMode };
-}

package/esm/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/esm/storybook-dark-mode/with_dark_mode.js

@@ -1,46 +0,0 @@
-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 /* @__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);
-    }
-    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);
-    }
-  }
-}
-function removeStyle(target, style) {
-  if (style) {
-    for (const key of Object.keys(toDOMStyle(style))) {
-      target.style.removeProperty(key);
-    }
-  }
-}

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

@@ -1,6 +0,0 @@
-import { ctx } from "./when_running_in_text.ctx.js";
-export function whenRunningInTest(decoratorOrHandler) {
-  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,3 +0,0 @@
-export declare const ctx: {
-    isRunningInTest: any;
-};

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

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