@storybook/nextjs 9.2.0-alpha.3 → 10.0.0-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # Storybook for Next.js
 
-See [documentation](https://storybook.js.org/docs/get-started/frameworks/nextjs?renderer=react) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/nextjs?renderer=react&ref=readme) for installation instructions, usage examples, APIs, and more.
 
 ## Acknowledgements
 
@@ -8,3 +8,5 @@ This framework borrows heavily from these Storybook addons:
 
 - [storybook-addon-next](https://github.com/RyanClementsHax/storybook-addon-next) by [RyanClementsHax](https://github.com/RyanClementsHax/)
 - [storybook-addon-next-router](https://github.com/lifeiscontent/storybook-addon-next-router) by [lifeiscontent](https://github.com/lifeiscontent)
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

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

@@ -0,0 +1,40 @@
+import {
+  __name
+} from "./chunk-L5NVL7MD.js";
+
+// src/images/next-image-default-loader.tsx
+var defaultLoader = /* @__PURE__ */ __name(({ src, width, quality = 75 }) => {
+  const missingValues = [];
+  if (!src) {
+    missingValues.push("src");
+  }
+  if (!width) {
+    missingValues.push("width");
+  }
+  if (missingValues.length > 0) {
+    throw new Error(
+      `Next Image Optimization requires ${missingValues.join(
+        ", "
+      )} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify(
+        {
+          src,
+          width,
+          quality
+        }
+      )}`
+    );
+  }
+  const url = new URL(src, window.location.href);
+  if (!url.searchParams.has("w") && !url.searchParams.has("q")) {
+    url.searchParams.set("w", width.toString());
+    url.searchParams.set("q", quality.toString());
+  }
+  if (!src.startsWith("http://") && !src.startsWith("https://")) {
+    return url.toString().slice(url.origin.length);
+  }
+  return url.toString();
+}, "defaultLoader");
+
+export {
+  defaultLoader
+};

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

@@ -0,0 +1,261 @@
+import {
+  __export,
+  __name
+} from "./chunk-L5NVL7MD.js";
+
+// src/preview.tsx
+var preview_exports = {};
+__export(preview_exports, {
+  decorators: () => decorators,
+  loaders: () => loaders,
+  parameters: () => parameters
+});
+import { createNavigation } from "@storybook/nextjs/navigation.mock";
+import { createRouter } from "@storybook/nextjs/router.mock";
+import { isNextRouterError } from "next/dist/client/components/is-next-router-error";
+
+// src/config/preview.ts
+import { setConfig } from "next/config";
+setConfig(process.env.__NEXT_RUNTIME_CONFIG);
+
+// src/head-manager/decorator.tsx
+import * as React2 from "react";
+
+// src/head-manager/head-manager-provider.tsx
+import React, { useMemo } from "react";
+import initHeadManager from "next/dist/client/head-manager";
+import { HeadManagerContext } from "next/dist/shared/lib/head-manager-context.shared-runtime";
+var HeadManagerProvider = /* @__PURE__ */ __name(({ children }) => {
+  const headManager = useMemo(initHeadManager, []);
+  headManager.getIsSsr = () => false;
+  return React.createElement(HeadManagerContext.Provider, { value: headManager }, children);
+}, "HeadManagerProvider");
+var head_manager_provider_default = HeadManagerProvider;
+
+// src/head-manager/decorator.tsx
+var HeadManagerDecorator = /* @__PURE__ */ __name((Story) => {
+  return React2.createElement(head_manager_provider_default, null, React2.createElement(Story, null));
+}, "HeadManagerDecorator");
+
+// src/images/decorator.tsx
+import * as React3 from "react";
+import { ImageContext as ImageContextValue } from "@storybook/nextjs/image-context";
+var ImageContext = ImageContextValue;
+var ImageDecorator = /* @__PURE__ */ __name((Story, { parameters: parameters2 }) => {
+  if (!parameters2.nextjs?.image) {
+    return React3.createElement(Story, null);
+  }
+  return React3.createElement(ImageContext.Provider, { value: parameters2.nextjs.image }, React3.createElement(Story, null));
+}, "ImageDecorator");
+
+// src/routing/decorator.tsx
+import * as React6 from "react";
+import { RedirectBoundary } from "next/dist/client/components/redirect-boundary";
+
+// src/routing/app-router-provider.tsx
+import React4, { useMemo as useMemo2 } from "react";
+import { getRouter } from "@storybook/nextjs/navigation.mock";
+import {
+  AppRouterContext,
+  GlobalLayoutRouterContext,
+  LayoutRouterContext
+} from "next/dist/shared/lib/app-router-context.shared-runtime";
+import {
+  PathParamsContext,
+  PathnameContext,
+  SearchParamsContext
+} from "next/dist/shared/lib/hooks-client-context.shared-runtime";
+import { PAGE_SEGMENT_KEY } from "next/dist/shared/lib/segment";
+var getParallelRoutes = /* @__PURE__ */ __name((segmentsList) => {
+  const segment = segmentsList.shift();
+  if (segment) {
+    return [segment, { children: getParallelRoutes(segmentsList) }];
+  }
+  return [];
+}, "getParallelRoutes");
+var AppRouterProvider = /* @__PURE__ */ __name(({
+  children,
+  routeParams
+}) => {
+  const { pathname, query, segments = [] } = routeParams;
+  const tree = [pathname, { children: getParallelRoutes([...segments]) }];
+  const pathParams = useMemo2(() => {
+    const params = {};
+    const currentSegments = routeParams.segments;
+    if (currentSegments) {
+      if (Array.isArray(currentSegments)) {
+        for (const segmentEntry of currentSegments) {
+          if (Array.isArray(segmentEntry) && segmentEntry.length === 2 && typeof segmentEntry[0] === "string") {
+            const key = segmentEntry[0];
+            const value = segmentEntry[1];
+            params[key] = value;
+          }
+        }
+      } else if (typeof currentSegments === "object" && !Array.isArray(currentSegments)) {
+        const segmentObject = currentSegments;
+        for (const key in segmentObject) {
+          if (Object.prototype.hasOwnProperty.call(segmentObject, key)) {
+            params[key] = segmentObject[key];
+          }
+        }
+      }
+    }
+    return params;
+  }, [routeParams.segments]);
+  const newLazyCacheNode = {
+    lazyData: null,
+    rsc: null,
+    prefetchRsc: null,
+    head: null,
+    prefetchHead: null,
+    parallelRoutes: /* @__PURE__ */ new Map(),
+    loading: null
+  };
+  return React4.createElement(PathParamsContext.Provider, { value: pathParams }, React4.createElement(PathnameContext.Provider, { value: pathname }, React4.createElement(SearchParamsContext.Provider, { value: new URLSearchParams(query) }, React4.createElement(
+    GlobalLayoutRouterContext.Provider,
+    {
+      value: {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore (Only available in Next.js >= v15.1.1)
+        changeByServerResponse() {
+        },
+        buildId: "storybook",
+        tree,
+        focusAndScrollRef: {
+          apply: false,
+          hashFragment: null,
+          segmentPaths: [tree],
+          onlyHashChange: false
+        },
+        nextUrl: pathname
+      }
+    },
+    React4.createElement(AppRouterContext.Provider, { value: getRouter() }, React4.createElement(
+      LayoutRouterContext.Provider,
+      {
+        value: {
+          // TODO Remove when dropping Next.js < v15.1.1
+          childNodes: /* @__PURE__ */ new Map(),
+          tree,
+          // TODO END
+          // START Next.js v15.2 support
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore Only available in Next.js >= v15.1.1
+          parentTree: tree,
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore Only available in Next.js >= v15.1.1
+          parentCacheNode: newLazyCacheNode,
+          // END
+          url: pathname,
+          loading: null
+        }
+      },
+      children
+    ))
+  ))));
+}, "AppRouterProvider");
+
+// src/routing/page-router-provider.tsx
+import React5 from "react";
+import { getRouter as getRouter2 } from "@storybook/nextjs/router.mock";
+import { RouterContext } from "next/dist/shared/lib/router-context.shared-runtime";
+var PageRouterProvider = /* @__PURE__ */ __name(({ children }) => React5.createElement(RouterContext.Provider, { value: getRouter2() }, children), "PageRouterProvider");
+
+// src/routing/decorator.tsx
+var defaultRouterParams = {
+  pathname: "/",
+  query: {}
+};
+var RouterDecorator = /* @__PURE__ */ __name((Story, { parameters: parameters2 }) => {
+  const nextAppDirectory = parameters2.nextjs?.appDirectory ?? false;
+  if (nextAppDirectory) {
+    if (!AppRouterProvider) {
+      return null;
+    }
+    return React6.createElement(
+      AppRouterProvider,
+      {
+        routeParams: {
+          ...defaultRouterParams,
+          ...parameters2.nextjs?.navigation
+        }
+      },
+      React6.createElement(RedirectBoundary, null, React6.createElement(Story, null))
+    );
+  }
+  return React6.createElement(PageRouterProvider, null, React6.createElement(Story, null));
+}, "RouterDecorator");
+
+// src/styledJsx/decorator.tsx
+import * as React7 from "react";
+import { StyleRegistry } from "styled-jsx";
+var StyledJsxDecorator = /* @__PURE__ */ __name((Story) => React7.createElement(StyleRegistry, null, React7.createElement(Story, null)), "StyledJsxDecorator");
+
+// src/preview.tsx
+function addNextHeadCount() {
+  const meta = document.createElement("meta");
+  meta.name = "next-head-count";
+  meta.content = "0";
+  document.head.appendChild(meta);
+}
+__name(addNextHeadCount, "addNextHeadCount");
+function isAsyncClientComponentError(error) {
+  return typeof error === "string" && (error.includes("Only Server Components can be async at the moment.") || error.includes("A component was suspended by an uncached promise.") || error.includes("async/await is not yet supported in Client Components"));
+}
+__name(isAsyncClientComponentError, "isAsyncClientComponentError");
+addNextHeadCount();
+var origConsoleError = globalThis.console.error;
+globalThis.console.error = (...args) => {
+  const error = args[0];
+  if (isNextRouterError(error) || isAsyncClientComponentError(error)) {
+    return;
+  }
+  origConsoleError.apply(globalThis.console, args);
+};
+globalThis.addEventListener("error", (ev) => {
+  if (isNextRouterError(ev.error) || isAsyncClientComponentError(ev.error)) {
+    ev.preventDefault();
+    return;
+  }
+});
+var decorators = [
+  StyledJsxDecorator,
+  ImageDecorator,
+  RouterDecorator,
+  HeadManagerDecorator
+];
+var loaders = /* @__PURE__ */ __name(async ({ globals, parameters: parameters2 }) => {
+  const { router, appDirectory } = parameters2.nextjs ?? {};
+  if (appDirectory) {
+    createNavigation(router);
+  } else {
+    createRouter({
+      locale: globals.locale,
+      ...router
+    });
+  }
+}, "loaders");
+var parameters = {
+  docs: {
+    source: {
+      excludeDecorators: true
+    }
+  },
+  react: {
+    rootOptions: {
+      onCaughtError(error) {
+        if (isNextRouterError(error)) {
+          return;
+        }
+        console.error(error);
+      }
+    }
+  }
+};
+
+export {
+  decorators,
+  loaders,
+  parameters,
+  preview_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/react-18-G7Q4PNHD.js

@@ -0,0 +1,71 @@
+import {
+  __name
+} from "./chunk-L5NVL7MD.js";
+
+// ../../lib/react-dom-shim/dist/_browser-chunks/chunk-JK72E6FR.js
+var __defProp = Object.defineProperty;
+var __name2 = /* @__PURE__ */ __name((target, value) => __defProp(target, "name", { value, configurable: true }), "__name");
+
+// ../../lib/react-dom-shim/dist/react-18.js
+import * as React from "react";
+import * as ReactDOM from "react-dom/client";
+var nodes = /* @__PURE__ */ new Map();
+function getIsReactActEnvironment() {
+  return globalThis.IS_REACT_ACT_ENVIRONMENT;
+}
+__name(getIsReactActEnvironment, "getIsReactActEnvironment");
+__name2(getIsReactActEnvironment, "getIsReactActEnvironment");
+var WithCallback = __name2(({
+  callback,
+  children
+}) => {
+  const once = React.useRef();
+  React.useLayoutEffect(() => {
+    if (once.current === callback) {
+      return;
+    }
+    once.current = callback;
+    callback();
+  }, [callback]);
+  return children;
+}, "WithCallback");
+if (typeof Promise.withResolvers === "undefined") {
+  Promise.withResolvers = () => {
+    let resolve = null;
+    let reject = null;
+    const promise = new Promise((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+    return { promise, resolve, reject };
+  };
+}
+var renderElement = __name2(async (node, el, rootOptions) => {
+  const root = await getReactRoot(el, rootOptions);
+  if (getIsReactActEnvironment()) {
+    root.render(node);
+    return;
+  }
+  const { promise, resolve } = Promise.withResolvers();
+  root.render(React.createElement(WithCallback, { callback: resolve }, node));
+  return promise;
+}, "renderElement");
+var unmountElement = __name2((el, shouldUseNewRootApi) => {
+  const root = nodes.get(el);
+  if (root) {
+    root.unmount();
+    nodes.delete(el);
+  }
+}, "unmountElement");
+var getReactRoot = __name2(async (el, rootOptions) => {
+  let root = nodes.get(el);
+  if (!root) {
+    root = ReactDOM.createRoot(el, rootOptions);
+    nodes.set(el, root);
+  }
+  return root;
+}, "getReactRoot");
+export {
+  renderElement,
+  unmountElement
+};

package/dist/_node-chunks/chunk-24UYJEDD.js

@@ -0,0 +1,74 @@
+import CJS_COMPAT_NODE_URL_e3twfmexlgl from 'node:url';
+import CJS_COMPAT_NODE_PATH_e3twfmexlgl from 'node:path';
+import CJS_COMPAT_NODE_MODULE_e3twfmexlgl from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_e3twfmexlgl.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_e3twfmexlgl.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_e3twfmexlgl.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+import {
+  addScopedAlias,
+  getNextjsVersion,
+  setAlias
+} from "./chunk-EZEBG77A.js";
+import {
+  __name
+} from "./chunk-WCSGFZKZ.js";
+
+// src/compatibility/compatibility-map.ts
+import semver from "semver";
+var mapping = {
+  "<15.0.0": {
+    "next/dist/server/request/headers": "next/dist/client/components/headers",
+    // this path only exists from Next 15 onwards
+    "next/dist/server/request/draft-mode": "@storybook/nextjs/compatibility/draft-mode.compat"
+  }
+};
+var getCompatibilityAliases = /* @__PURE__ */ __name(() => {
+  const version = getNextjsVersion();
+  const result = {};
+  Object.keys(mapping).forEach((key) => {
+    if (semver.intersects(version, key)) {
+      Object.assign(result, mapping[key]);
+    }
+  });
+  return result;
+}, "getCompatibilityAliases");
+var configureCompatibilityAliases = /* @__PURE__ */ __name((baseConfig) => {
+  const aliases = getCompatibilityAliases();
+  Object.entries(aliases).forEach(([name, alias]) => {
+    if (typeof alias === "string") {
+      addScopedAlias(baseConfig, name, alias);
+    } else {
+      setAlias(baseConfig, name, alias);
+    }
+  });
+}, "configureCompatibilityAliases");
+
+// src/export-mocks/webpack.ts
+var mapping2 = {
+  "next/headers": "@storybook/nextjs/headers.mock",
+  "next/navigation": "@storybook/nextjs/navigation.mock",
+  "next/router": "@storybook/nextjs/router.mock",
+  "next/cache": "@storybook/nextjs/cache.mock",
+  ...getCompatibilityAliases()
+};
+var getPackageAliases = /* @__PURE__ */ __name(() => {
+  return mapping2;
+}, "getPackageAliases");
+var configureNextExportMocks = /* @__PURE__ */ __name((baseConfig) => {
+  const resolve = baseConfig.resolve ?? {};
+  resolve.alias = {
+    ...resolve.alias,
+    ...mapping2
+  };
+}, "configureNextExportMocks");
+
+export {
+  configureCompatibilityAliases,
+  getPackageAliases,
+  configureNextExportMocks
+};

package/dist/_node-chunks/chunk-EZEBG77A.js

@@ -0,0 +1,88 @@
+import CJS_COMPAT_NODE_URL_e3twfmexlgl from 'node:url';
+import CJS_COMPAT_NODE_PATH_e3twfmexlgl from 'node:path';
+import CJS_COMPAT_NODE_MODULE_e3twfmexlgl from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_e3twfmexlgl.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_e3twfmexlgl.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_e3twfmexlgl.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+import {
+  resolvePackageDir
+} from "./chunk-YMVPQWBH.js";
+import {
+  __name
+} from "./chunk-WCSGFZKZ.js";
+
+// src/utils.ts
+import { readFileSync } from "node:fs";
+import { dirname, join, sep } from "node:path";
+import { fileURLToPath } from "node:url";
+import { getProjectRoot } from "storybook/internal/common";
+import { PHASE_DEVELOPMENT_SERVER } from "next/constants.js";
+import nextJsLoadConfigModule from "next/dist/server/config.js";
+import webpack from "webpack";
+var configureRuntimeNextjsVersionResolution = /* @__PURE__ */ __name((baseConfig) => {
+  const { DefinePlugin } = webpack;
+  baseConfig.plugins?.push(
+    new DefinePlugin({
+      "process.env.__NEXT_VERSION": JSON.stringify(getNextjsVersion())
+    })
+  );
+}, "configureRuntimeNextjsVersionResolution");
+var getNextjsVersion = /* @__PURE__ */ __name(() => JSON.parse(readFileSync(join(resolvePackageDir("next"), "package.json"), "utf8")).version, "getNextjsVersion");
+var resolveNextConfig = /* @__PURE__ */ __name(async ({
+  nextConfigPath
+}) => {
+  const dir = nextConfigPath ? dirname(nextConfigPath) : getProjectRoot();
+  const loadConfig = nextJsLoadConfigModule.default ?? nextJsLoadConfigModule;
+  return loadConfig(PHASE_DEVELOPMENT_SERVER, dir, void 0);
+}, "resolveNextConfig");
+function setAlias(baseConfig, name, alias) {
+  baseConfig.resolve ??= {};
+  baseConfig.resolve.alias ??= {};
+  const aliasConfig = baseConfig.resolve.alias;
+  if (Array.isArray(aliasConfig)) {
+    aliasConfig.push({
+      name,
+      alias
+    });
+  } else {
+    aliasConfig[name] = alias;
+  }
+}
+__name(setAlias, "setAlias");
+var addScopedAlias = /* @__PURE__ */ __name((baseConfig, name, alias) => {
+  const scopedAlias = scopedResolve(`${alias ?? name}`);
+  setAlias(baseConfig, name, scopedAlias);
+}, "addScopedAlias");
+var scopedResolve = /* @__PURE__ */ __name((id) => {
+  const scopedModulePath = fileURLToPath(import.meta.resolve(id));
+  const idWithNativePathSep = id.replace(/\//g, sep);
+  if (scopedModulePath.endsWith(idWithNativePathSep)) {
+    return scopedModulePath;
+  }
+  const moduleFolderStrPosition = scopedModulePath.lastIndexOf(idWithNativePathSep);
+  const beginningOfMainScriptPath = moduleFolderStrPosition + id.length;
+  return scopedModulePath.substring(0, beginningOfMainScriptPath);
+}, "scopedResolve");
+function getNodeModulesExcludeRegex(transpilePackages) {
+  if (!transpilePackages || transpilePackages.length === 0) {
+    return /node_modules/;
+  }
+  const escaped = transpilePackages.map((pkg) => pkg.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+  return new RegExp(`node_modules/(?!(${escaped})/)`);
+}
+__name(getNodeModulesExcludeRegex, "getNodeModulesExcludeRegex");
+
+export {
+  configureRuntimeNextjsVersionResolution,
+  getNextjsVersion,
+  resolveNextConfig,
+  setAlias,
+  addScopedAlias,
+  scopedResolve,
+  getNodeModulesExcludeRegex
+};

package/dist/_node-chunks/chunk-WCSGFZKZ.js

@@ -0,0 +1,17 @@
+import CJS_COMPAT_NODE_URL_e3twfmexlgl from 'node:url';
+import CJS_COMPAT_NODE_PATH_e3twfmexlgl from 'node:path';
+import CJS_COMPAT_NODE_MODULE_e3twfmexlgl from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_e3twfmexlgl.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_e3twfmexlgl.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_e3twfmexlgl.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};