@repobuddy/storybook 1.0.1 → 2.0.0

package/cjs/components/show_html.d.ts

@@ -0,0 +1,16 @@
+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/cjs/components/show_html.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShowHtml = ShowHtml;
+var _htmlfy = require("htmlfy");
+var _react = require("react");
+function ShowHtml({
+  selector = '[data-testid="subject"]',
+  config,
+  ...props
+}) {
+  const [html, setHtml] = (0, _react.useState)("");
+  (0, _react.useEffect)(() => {
+    const subject = document.querySelector(selector);
+    if (subject) {
+      setHtml((0, _htmlfy.prettify)(subject.outerHTML, {
+        tag_wrap: 40,
+        ...config
+      }));
+    } else {
+      setHtml("No subject found");
+    }
+  }, [selector]);
+  return /* @__PURE__ */React.createElement("pre", {
+    ...props
+  }, html);
+}

package/cjs/decorators/show_doc_source.d.ts

@@ -0,0 +1,6 @@
+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/cjs/decorators/show_doc_source.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showDocSource = showDocSource;
+var _react = require("react");
+var _components = require("storybook/internal/components");
+var _previewApi = require("storybook/preview-api");
+var _theming = require("storybook/theming");
+const channel = _previewApi.addons.getChannel();
+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] = (0, _react.useState)((darkMode?.stylePreview && current === "dark") ?? false);
+    (0, _react.useEffect)(() => {
+      channel.on("DARK_MODE", setIsDark);
+      return () => channel.off("DARK_MODE", setIsDark);
+    }, []);
+    return /* @__PURE__ */React.createElement(_theming.ThemeProvider, {
+      theme: (0, _theming.convert)(docs?.theme ?? (isDark ? _theming.themes.dark : _theming.themes.light))
+    }, /* @__PURE__ */React.createElement("section", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem"
+      }
+    }, /* @__PURE__ */React.createElement(_components.SyntaxHighlighter, {
+      language: docs?.source?.language
+    }, docs?.source?.code), /* @__PURE__ */React.createElement(Story, null)));
+  };
+}

package/cjs/index.d.ts

@@ -0,0 +1,13 @@
+export * from '@repobuddy/test';
+export * from './components/show_html.tsx';
+export * from './decorators/show_doc_source.tsx';
+export * from './parameters/define_actions_param.ts';
+export * from './parameters/define_backgrounds_param.ts';
+export * from './parameters/define_docs_param.ts';
+export * from './parameters/define_layout_param.ts';
+export * from './parameters/define_parameters.ts';
+export * from './parameters/define_test_param.ts';
+export * from './parameters/define_viewport_param.ts';
+export * from './parameters/story_sort.ts';
+export * from './testing/decorators/when_running_in_test.tsx';
+export type * from './types.ts';

package/cjs/index.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _test = require("@repobuddy/test");
+Object.keys(_test).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _test[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _test[key];
+    }
+  });
+});
+var _show_html = require("./components/show_html.tsx");
+Object.keys(_show_html).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _show_html[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _show_html[key];
+    }
+  });
+});
+var _show_doc_source = require("./decorators/show_doc_source.tsx");
+Object.keys(_show_doc_source).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _show_doc_source[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _show_doc_source[key];
+    }
+  });
+});
+var _define_actions_param = require("./parameters/define_actions_param.ts");
+Object.keys(_define_actions_param).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _define_actions_param[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _define_actions_param[key];
+    }
+  });
+});
+var _define_backgrounds_param = require("./parameters/define_backgrounds_param.ts");
+Object.keys(_define_backgrounds_param).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _define_backgrounds_param[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _define_backgrounds_param[key];
+    }
+  });
+});
+var _define_docs_param = require("./parameters/define_docs_param.ts");
+Object.keys(_define_docs_param).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _define_docs_param[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _define_docs_param[key];
+    }
+  });
+});
+var _define_layout_param = require("./parameters/define_layout_param.ts");
+Object.keys(_define_layout_param).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _define_layout_param[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _define_layout_param[key];
+    }
+  });
+});
+var _define_parameters = require("./parameters/define_parameters.ts");
+Object.keys(_define_parameters).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _define_parameters[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _define_parameters[key];
+    }
+  });
+});
+var _define_test_param = require("./parameters/define_test_param.ts");
+Object.keys(_define_test_param).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _define_test_param[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _define_test_param[key];
+    }
+  });
+});
+var _define_viewport_param = require("./parameters/define_viewport_param.ts");
+Object.keys(_define_viewport_param).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _define_viewport_param[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _define_viewport_param[key];
+    }
+  });
+});
+var _story_sort = require("./parameters/story_sort.ts");
+Object.keys(_story_sort).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _story_sort[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _story_sort[key];
+    }
+  });
+});
+var _when_running_in_test = require("./testing/decorators/when_running_in_test.tsx");
+Object.keys(_when_running_in_test).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _when_running_in_test[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _when_running_in_test[key];
+    }
+  });
+});

package/cjs/manager/brand_title.d.ts

@@ -0,0 +1,35 @@
+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/cjs/manager/brand_title.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.brandTitle = brandTitle;
+function brandTitle(options) {
+  return `<span style="display: flex; align-items: center; gap: 2px;">
+		${options.logo ?? ""}
+		${options.title}
+	</span>`;
+}

package/cjs/manager/index.d.ts

@@ -0,0 +1 @@
+export * from './brand_title.ts';

package/cjs/manager/index.js

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

package/cjs/parameters/define_actions_param.d.ts

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

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

package/cjs/parameters/define_backgrounds_param.d.ts

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defineBackgroundsParam = void 0;
+const defineBackgroundsParam = backgrounds => ({
+  backgrounds
+});
+exports.defineBackgroundsParam = defineBackgroundsParam;

package/cjs/parameters/define_docs_param.d.ts

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

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

package/cjs/parameters/define_layout_param.d.ts

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defineLayoutParam = void 0;
+const defineLayoutParam = layout => ({
+  layout
+});
+exports.defineLayoutParam = defineLayoutParam;