@repobuddy/storybook 1.0.1 → 2.0.1

package/cjs/parameters/define_parameters.d.ts

@@ -0,0 +1,39 @@
+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/cjs/parameters/define_parameters.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defineParameters = defineParameters;
+function defineParameters(param, ...rest) {
+  return rest.reduce((acc, param2) => Object.assign(acc, param2), param);
+}

package/cjs/parameters/define_test_param.d.ts

@@ -0,0 +1,34 @@
+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/cjs/parameters/define_test_param.js

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

package/cjs/parameters/define_viewport_param.d.ts

@@ -0,0 +1,78 @@
+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/cjs/parameters/define_viewport_param.js

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

package/cjs/parameters/story_sort.d.ts

@@ -0,0 +1,27 @@
+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/cjs/parameters/story_sort.js

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

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

@@ -0,0 +1,2 @@
+export * from './tag_badges.js';
+export type * from './types.js';

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

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

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

@@ -0,0 +1,41 @@
+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/cjs/storybook-addon-tag-badges/tag_badges.js

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

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

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

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

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

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

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

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

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

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

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

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