@storybook/react 8.6.14 → 10.0.4

package/README.md

@@ -1 +1,3 @@
 # Storybook React renderer
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

package/dist/_browser-chunks/chunk-7HDTOAND.js

@@ -0,0 +1,279 @@
+import {
+  applyDecorators
+} from "./chunk-BUAOEMNB.js";
+import {
+  __export,
+  __name
+} from "./chunk-L5NVL7MD.js";
+
+// src/entry-preview.tsx
+var entry_preview_exports = {};
+__export(entry_preview_exports, {
+  applyDecorators: () => applyDecorators,
+  beforeAll: () => beforeAll,
+  decorators: () => decorators,
+  mount: () => mount,
+  parameters: () => parameters,
+  render: () => render,
+  renderToCanvas: () => renderToCanvas
+});
+import * as React4 from "react";
+import { global as global2 } from "@storybook/global";
+import { configure } from "storybook/test";
+
+// src/act-compat.ts
+import * as React from "react";
+var clonedReact = { ...React };
+function setReactActEnvironment(isReactActEnvironment) {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;
+}
+__name(setReactActEnvironment, "setReactActEnvironment");
+function getReactActEnvironment() {
+  return globalThis.IS_REACT_ACT_ENVIRONMENT;
+}
+__name(getReactActEnvironment, "getReactActEnvironment");
+function withGlobalActEnvironment(actImplementation) {
+  return (callback) => {
+    const previousActEnvironment = getReactActEnvironment();
+    setReactActEnvironment(true);
+    try {
+      let callbackNeedsToBeAwaited = false;
+      const actResult = actImplementation(() => {
+        const result = callback();
+        if (result !== null && typeof result === "object" && typeof result.then === "function") {
+          callbackNeedsToBeAwaited = true;
+        }
+        return result;
+      });
+      if (callbackNeedsToBeAwaited) {
+        const thenable = actResult;
+        return {
+          then: /* @__PURE__ */ __name((resolve, reject) => {
+            thenable.then(
+              (returnValue) => {
+                setReactActEnvironment(previousActEnvironment);
+                resolve(returnValue);
+              },
+              (error) => {
+                setReactActEnvironment(previousActEnvironment);
+                reject(error);
+              }
+            );
+          }, "then")
+        };
+      } else {
+        setReactActEnvironment(previousActEnvironment);
+        return actResult;
+      }
+    } catch (error) {
+      setReactActEnvironment(previousActEnvironment);
+      throw error;
+    }
+  };
+}
+__name(withGlobalActEnvironment, "withGlobalActEnvironment");
+var getAct = /* @__PURE__ */ __name(async ({ disableAct = false } = {}) => {
+  if (process.env.NODE_ENV === "production" || disableAct) {
+    return (cb) => cb();
+  }
+  let reactAct;
+  if (typeof clonedReact.act === "function") {
+    reactAct = clonedReact.act;
+  } else {
+    const deprecatedTestUtils = await import("react-dom/test-utils");
+    reactAct = deprecatedTestUtils?.default?.act ?? deprecatedTestUtils.act;
+  }
+  return withGlobalActEnvironment(reactAct);
+}, "getAct");
+
+// src/render.tsx
+import React2 from "react";
+var render = /* @__PURE__ */ __name((args, context) => {
+  const { id, component: Component } = context;
+  if (!Component) {
+    throw new Error(
+      `Unable to render story ${id} as the component annotation is missing from the default export`
+    );
+  }
+  return React2.createElement(Component, { ...args });
+}, "render");
+
+// src/renderToCanvas.tsx
+import React3, { Fragment, Component as ReactComponent, StrictMode } from "react";
+import { global } from "@storybook/global";
+var { FRAMEWORK_OPTIONS } = global;
+var _ErrorBoundary = class _ErrorBoundary extends ReactComponent {
+  constructor() {
+    super(...arguments);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidMount() {
+    const { hasError } = this.state;
+    const { showMain } = this.props;
+    if (!hasError) {
+      showMain();
+    }
+  }
+  componentDidCatch(err) {
+    const { showException } = this.props;
+    showException(err);
+  }
+  render() {
+    const { hasError } = this.state;
+    const { children } = this.props;
+    return hasError ? null : children;
+  }
+};
+__name(_ErrorBoundary, "ErrorBoundary");
+var ErrorBoundary = _ErrorBoundary;
+var Wrapper = FRAMEWORK_OPTIONS?.strictMode ? StrictMode : Fragment;
+var actQueue = [];
+var isActing = false;
+var processActQueue = /* @__PURE__ */ __name(async () => {
+  if (isActing || actQueue.length === 0) {
+    return;
+  }
+  isActing = true;
+  const actTask = actQueue.shift();
+  if (actTask) {
+    await actTask();
+  }
+  isActing = false;
+  processActQueue();
+}, "processActQueue");
+async function renderToCanvas({
+  storyContext,
+  unboundStoryFn,
+  showMain,
+  showException,
+  forceRemount
+}, canvasElement) {
+  const { renderElement, unmountElement } = await import("@storybook/react-dom-shim");
+  const Story = unboundStoryFn;
+  const isPortableStory = storyContext.parameters.__isPortableStory;
+  const content = isPortableStory ? React3.createElement(Story, { ...storyContext }) : React3.createElement(ErrorBoundary, { key: storyContext.id, showMain, showException }, React3.createElement(Story, { ...storyContext }));
+  const element = Wrapper ? React3.createElement(Wrapper, null, content) : content;
+  if (forceRemount) {
+    unmountElement(canvasElement);
+  }
+  const act = await getAct({ disableAct: storyContext.viewMode === "docs" });
+  await new Promise(async (resolve, reject) => {
+    actQueue.push(async () => {
+      try {
+        await act(async () => {
+          await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions);
+        });
+        resolve();
+      } catch (e) {
+        reject(e);
+      }
+    });
+    processActQueue();
+  });
+  return async () => {
+    await act(() => {
+      unmountElement(canvasElement);
+    });
+  };
+}
+__name(renderToCanvas, "renderToCanvas");
+
+// src/mount.ts
+var mount = /* @__PURE__ */ __name((context) => async (ui) => {
+  if (ui != null) {
+    context.originalStoryFn = () => ui;
+  }
+  await context.renderToCanvas();
+  return context.canvas;
+}, "mount");
+
+// src/entry-preview.tsx
+var decorators = [
+  (story, context) => {
+    if (!context.parameters?.react?.rsc) {
+      return story();
+    }
+    const [major, minor] = React4.version.split(".").map((part) => parseInt(part, 10));
+    if (!Number.isInteger(major) || !Number.isInteger(minor)) {
+      throw new Error("Unable to parse React version");
+    }
+    if (major < 18 || major === 18 && minor < 3) {
+      throw new Error("React Server Components require React >= 18.3");
+    }
+    return React4.createElement(React4.Suspense, null, story());
+  },
+  (story, context) => {
+    if (context.tags?.includes("test-fn") && !global2.FEATURES?.experimentalTestSyntax) {
+      throw new Error(
+        "To use the experimental test function, you must enable the experimentalTestSyntax feature flag. See https://storybook.js.org/docs/10/api/main-config/main-config-features#experimentalTestSyntax"
+      );
+    }
+    return story();
+  }
+];
+var parameters = {
+  renderer: "react"
+};
+var beforeAll = /* @__PURE__ */ __name(async () => {
+  try {
+    const act = await getAct();
+    configure({
+      unstable_advanceTimersWrapper: /* @__PURE__ */ __name((cb) => {
+        return act(cb);
+      }, "unstable_advanceTimersWrapper"),
+      // For more context about why we need disable act warnings in waitFor:
+      // https://github.com/reactwg/react-18/discussions/102
+      asyncWrapper: /* @__PURE__ */ __name(async (cb) => {
+        const previousActEnvironment = getReactActEnvironment();
+        setReactActEnvironment(false);
+        try {
+          const result = await cb();
+          await new Promise((resolve) => {
+            setTimeout(() => {
+              resolve();
+            }, 0);
+            if (jestFakeTimersAreEnabled()) {
+              jest.advanceTimersByTime(0);
+            }
+          });
+          return result;
+        } finally {
+          setReactActEnvironment(previousActEnvironment);
+        }
+      }, "asyncWrapper"),
+      eventWrapper: /* @__PURE__ */ __name((cb) => {
+        let result;
+        act(() => {
+          result = cb();
+          return result;
+        });
+        return result;
+      }, "eventWrapper")
+    });
+  } catch (e) {
+  }
+}, "beforeAll");
+function jestFakeTimersAreEnabled() {
+  if (typeof jest !== "undefined" && jest !== null) {
+    return (
+      // legacy timers
+      setTimeout._isMockFunction === true || // modern timers
+      Object.prototype.hasOwnProperty.call(setTimeout, "clock")
+    );
+  }
+  return false;
+}
+__name(jestFakeTimersAreEnabled, "jestFakeTimersAreEnabled");
+
+export {
+  render,
+  renderToCanvas,
+  mount,
+  decorators,
+  parameters,
+  beforeAll,
+  entry_preview_exports
+};

package/dist/_browser-chunks/chunk-BUAOEMNB.js

@@ -0,0 +1,14 @@
+import {
+  __name
+} from "./chunk-L5NVL7MD.js";
+
+// src/applyDecorators.ts
+import React from "react";
+import { defaultDecorateStory } from "storybook/preview-api";
+var applyDecorators = /* @__PURE__ */ __name((storyFn, decorators) => {
+  return defaultDecorateStory((context) => React.createElement(storyFn, context), decorators);
+}, "applyDecorators");
+
+export {
+  applyDecorators
+};

package/dist/_browser-chunks/chunk-HBQ5Y6GW.js

@@ -0,0 +1,209 @@
+import {
+  applyDecorators
+} from "./chunk-BUAOEMNB.js";
+import {
+  isForwardRef,
+  isMemo,
+  reactElementToJsxString
+} from "./chunk-VVH2AMAL.js";
+import {
+  __export,
+  __name
+} from "./chunk-L5NVL7MD.js";
+
+// src/entry-preview-docs.ts
+var entry_preview_docs_exports = {};
+__export(entry_preview_docs_exports, {
+  applyDecorators: () => applyDecorators2,
+  decorators: () => decorators,
+  parameters: () => parameters
+});
+
+// src/docs/jsxDecorator.tsx
+import React, { createElement, isValidElement } from "react";
+import { logger } from "storybook/internal/client-logger";
+import { SourceType, getDocgenSection } from "storybook/internal/docs-tools";
+import { emitTransformCode, useEffect, useRef } from "storybook/preview-api";
+var reactElementToJSXString = reactElementToJsxString;
+var toPascalCase = /* @__PURE__ */ __name((str) => str.charAt(0).toUpperCase() + str.slice(1), "toPascalCase");
+var getReactSymbolName = /* @__PURE__ */ __name((elementType) => {
+  const elementName = elementType.$$typeof || elementType;
+  const symbolDescription = elementName.toString().replace(/^Symbol\((.*)\)$/, "$1");
+  const reactComponentName = symbolDescription.split(".").map((segment) => {
+    return segment.split("_").map(toPascalCase).join("");
+  }).join(".");
+  return reactComponentName;
+}, "getReactSymbolName");
+function simplifyNodeForStringify(node) {
+  if (isValidElement(node)) {
+    const props = Object.keys(node.props).reduce((acc, cur) => {
+      acc[cur] = simplifyNodeForStringify(node.props[cur]);
+      return acc;
+    }, {});
+    return {
+      ...node,
+      props,
+      // @ts-expect-error (this is an internal or removed api)
+      _owner: null
+    };
+  }
+  if (Array.isArray(node)) {
+    return node.map(simplifyNodeForStringify);
+  }
+  return node;
+}
+__name(simplifyNodeForStringify, "simplifyNodeForStringify");
+var renderJsx = /* @__PURE__ */ __name((code, options) => {
+  if (typeof code === "undefined") {
+    logger.warn("Too many skip or undefined component");
+    return null;
+  }
+  let renderedJSX = code;
+  const Type = renderedJSX.type;
+  for (let i = 0; i < options?.skip; i += 1) {
+    if (typeof renderedJSX === "undefined") {
+      logger.warn("Cannot skip undefined element");
+      return null;
+    }
+    if (React.Children.count(renderedJSX) > 1) {
+      logger.warn("Trying to skip an array of elements");
+      return null;
+    }
+    if (typeof renderedJSX.props.children === "undefined") {
+      logger.warn("Not enough children to skip elements.");
+      if (typeof renderedJSX.type === "function" && renderedJSX.type.name === "") {
+        renderedJSX = React.createElement(Type, { ...renderedJSX.props });
+      }
+    } else if (typeof renderedJSX.props.children === "function") {
+      renderedJSX = renderedJSX.props.children();
+    } else {
+      renderedJSX = renderedJSX.props.children;
+    }
+  }
+  let displayNameDefaults;
+  if (typeof options?.displayName === "string") {
+    displayNameDefaults = { showFunctions: true, displayName: /* @__PURE__ */ __name(() => options.displayName, "displayName") };
+  } else {
+    displayNameDefaults = {
+      // To get exotic component names resolving properly
+      displayName: /* @__PURE__ */ __name((el) => {
+        if (el.type.displayName) {
+          return el.type.displayName;
+        } else if (getDocgenSection(el.type, "displayName")) {
+          return getDocgenSection(el.type, "displayName");
+        } else if (el.type.render?.displayName) {
+          return el.type.render.displayName;
+        } else if (typeof el.type === "symbol" || el.type.$$typeof && typeof el.type.$$typeof === "symbol") {
+          return getReactSymbolName(el.type);
+        } else if (el.type.name && el.type.name !== "_default") {
+          return el.type.name;
+        } else if (typeof el.type === "function") {
+          return "No Display Name";
+        } else if (isForwardRef(el.type)) {
+          return el.type.render.name;
+        } else if (isMemo(el.type)) {
+          return el.type.type.name;
+        } else {
+          return el.type;
+        }
+      }, "displayName")
+    };
+  }
+  const filterDefaults = {
+    filterProps: /* @__PURE__ */ __name((value, key) => value !== void 0, "filterProps")
+  };
+  const opts = {
+    ...displayNameDefaults,
+    ...filterDefaults,
+    ...options
+  };
+  const result = React.Children.map(code, (c) => {
+    const child = typeof c === "number" ? c.toString() : c;
+    const toJSXString = typeof reactElementToJSXString === "function" ? reactElementToJSXString : (
+      // @ts-expect-error (Converted from ts-ignore)
+      reactElementToJSXString.default
+    );
+    let string = toJSXString(simplifyNodeForStringify(child), opts);
+    if (string.indexOf("&quot;") > -1) {
+      const matches = string.match(/\S+=\\"([^"]*)\\"/g);
+      if (matches) {
+        matches.forEach((match) => {
+          string = string.replace(match, match.replace(/&quot;/g, "'"));
+        });
+      }
+    }
+    return string;
+  }).join("\n");
+  return result.replace(/function\s+noRefCheck\(\)\s*\{\}/g, "() => {}");
+}, "renderJsx");
+var defaultOpts = {
+  skip: 0,
+  showFunctions: false,
+  enableBeautify: true,
+  showDefaultProps: false
+};
+var skipJsxRender = /* @__PURE__ */ __name((context) => {
+  const sourceParams = context?.parameters.docs?.source;
+  const isArgsStory = context?.parameters.__isArgsStory;
+  if (sourceParams?.type === SourceType.DYNAMIC) {
+    return false;
+  }
+  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
+}, "skipJsxRender");
+var isMdx = /* @__PURE__ */ __name((node) => node.type?.displayName === "MDXCreateElement" && !!node.props?.mdxType, "isMdx");
+var mdxToJsx = /* @__PURE__ */ __name((node) => {
+  if (!isMdx(node)) {
+    return node;
+  }
+  const { mdxType, originalType, children, ...rest } = node.props;
+  let jsxChildren = [];
+  if (children) {
+    const array = Array.isArray(children) ? children : [children];
+    jsxChildren = array.map(mdxToJsx);
+  }
+  return createElement(originalType, rest, ...jsxChildren);
+}, "mdxToJsx");
+var jsxDecorator = /* @__PURE__ */ __name((storyFn, context) => {
+  const jsx = useRef(void 0);
+  const story = storyFn();
+  const skip = skipJsxRender(context);
+  const options = {
+    ...defaultOpts,
+    ...context?.parameters.jsx || {}
+  };
+  const storyJsx = context.originalStoryFn(context.args, context);
+  useEffect(() => {
+    if (skip) {
+      return;
+    }
+    const sourceJsx = mdxToJsx(storyJsx);
+    const rendered = renderJsx(sourceJsx, options);
+    if (rendered && jsx.current !== rendered) {
+      emitTransformCode(rendered, context);
+      jsx.current = rendered;
+    }
+  });
+  return story;
+}, "jsxDecorator");
+
+// src/docs/applyDecorators.ts
+var applyDecorators2 = /* @__PURE__ */ __name((storyFn, decorators2) => {
+  const jsxIndex = decorators2.findIndex((d) => d.originalFn === jsxDecorator);
+  const reorderedDecorators = jsxIndex === -1 ? decorators2 : [...decorators2.splice(jsxIndex, 1), ...decorators2];
+  return applyDecorators(storyFn, reorderedDecorators);
+}, "applyDecorators");
+
+// src/entry-preview-docs.ts
+var decorators = [jsxDecorator];
+var parameters = {
+  docs: {
+    story: { inline: true }
+  }
+};
+
+export {
+  applyDecorators2 as applyDecorators,
+  decorators,
+  parameters,
+  entry_preview_docs_exports
+};

package/dist/_browser-chunks/chunk-L5NVL7MD.js

@@ -0,0 +1,37 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+export {
+  __name,
+  __commonJS,
+  __export,
+  __toESM
+};

package/dist/_browser-chunks/chunk-O24TFCLO.js

@@ -0,0 +1,43 @@
+import {
+  entry_preview_exports
+} from "./chunk-7HDTOAND.js";
+import {
+  entry_preview_argtypes_exports
+} from "./chunk-SKEPQA2F.js";
+import {
+  entry_preview_docs_exports
+} from "./chunk-HBQ5Y6GW.js";
+import {
+  __name
+} from "./chunk-L5NVL7MD.js";
+
+// src/preview.tsx
+import { definePreview as definePreviewBase } from "storybook/internal/csf";
+function __definePreview(input) {
+  const preview = definePreviewBase({
+    ...input,
+    addons: [
+      entry_preview_exports,
+      entry_preview_argtypes_exports,
+      entry_preview_docs_exports,
+      ...input.addons ?? []
+    ]
+  });
+  const defineMeta = preview.meta.bind(preview);
+  preview.meta = (_input) => {
+    const meta = defineMeta(_input);
+    const defineStory = meta.story.bind(meta);
+    meta.story = (__input) => {
+      const story = defineStory(__input);
+      story.Component = story.__compose();
+      return story;
+    };
+    return meta;
+  };
+  return preview;
+}
+__name(__definePreview, "__definePreview");
+
+export {
+  __definePreview
+};