@storybook/react 10.6.0-alpha.6 → 10.6.0-alpha.7

package/dist/_node-chunks/{chunk-RATZ5JVF.js → chunk-7MQEKIVD.js}

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_h2cb86pu2u from 'node:url';
-import CJS_COMPAT_NODE_PATH_h2cb86pu2u from 'node:path';
-import CJS_COMPAT_NODE_MODULE_h2cb86pu2u from "node:module";
+import CJS_COMPAT_NODE_URL_5mro4fxxrdb from 'node:url';
+import CJS_COMPAT_NODE_PATH_5mro4fxxrdb from 'node:path';
+import CJS_COMPAT_NODE_MODULE_5mro4fxxrdb from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_h2cb86pu2u.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_h2cb86pu2u.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_h2cb86pu2u.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_5mro4fxxrdb.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_5mro4fxxrdb.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_5mro4fxxrdb.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -13112,7 +13112,7 @@ function invariant(condition, message) {
     throw new Error((typeof message == "function" ? message() : message) ?? "Invariant failed");
 }
 var memoStore = /* @__PURE__ */ new WeakMap(), asyncMemoStore = /* @__PURE__ */ new WeakMap(), textFileCache = /* @__PURE__ */ new Map(), cached = (fn, opts = {}) => {
-  let keyOf2 = opts.key ?? ((...args) => {
+  let keyOf = opts.key ?? ((...args) => {
     try {
       return JSON.stringify(args);
     } catch {
@@ -13120,14 +13120,14 @@ var memoStore = /* @__PURE__ */ new WeakMap(), asyncMemoStore = /* @__PURE__ */
     }
   });
   return (...args) => {
-    let k = keyOf2(...args), name = fn.name || opts.name || "anonymous", store = memoStore.get(fn);
+    let k = keyOf(...args), name = fn.name || opts.name || "anonymous", store = memoStore.get(fn);
     if (store || (store = /* @__PURE__ */ new Map(), memoStore.set(fn, store)), store.has(k))
       return logger.verbose(`[cache] hit ${name} key=${k}`), store.get(k);
     let start = Date.now(), result = fn(...args), duration = Date.now() - start;
     return store.set(k, result), logger.verbose(`[cache] miss ${name} took ${duration}ms key=${k}`), result;
   };
 }, asyncCache = (fn, opts = {}) => {
-  let keyOf2 = opts.key ?? ((...args) => {
+  let keyOf = opts.key ?? ((...args) => {
     try {
       return JSON.stringify(args);
     } catch {
@@ -13135,7 +13135,7 @@ var memoStore = /* @__PURE__ */ new WeakMap(), asyncMemoStore = /* @__PURE__ */
     }
   });
   return (...args) => {
-    let k = keyOf2(...args), name = fn.name || opts.name || "anonymous", store = asyncMemoStore.get(fn);
+    let k = keyOf(...args), name = fn.name || opts.name || "anonymous", store = asyncMemoStore.get(fn);
     store || (store = /* @__PURE__ */ new Map(), asyncMemoStore.set(fn, store));
     let existing = store.get(k);
     if (existing)
@@ -13639,8 +13639,8 @@ function getJSDocDefault(typescript, prop, checker) {
     if (tag.name === "default" || tag.name === "defaultValue")
       return typescript.displayPartsToString(tag.text) || void 0;
 }
-function extractPropItem(typescript, checker, prop, contextNode, defaultsMap) {
-  let isRequired = !!!(prop.flags & typescript.SymbolFlags.Optional), propType = checker.getTypeOfSymbolAtLocation(prop, contextNode), type = serializeType(typescript, checker, propType, isRequired), description = typescript.displayPartsToString(prop.getDocumentationComment(checker)), parent = getParentType(typescript, prop), declarations = getAllDeclarationParents(typescript, prop), propName = prop.getName(), destructuringDefault = defaultsMap?.get(propName), jsDocDefault = getJSDocDefault(typescript, prop, checker), defaultStr = destructuringDefault ?? jsDocDefault;
+function extractPropItem(typescript, checker, prop, contextNode, defaultsMap, typeOverride) {
+  let isRequired = !!!(prop.flags & typescript.SymbolFlags.Optional), propType = typeOverride ?? checker.getTypeOfSymbolAtLocation(prop, contextNode), type = serializeType(typescript, checker, propType, isRequired), description = typescript.displayPartsToString(prop.getDocumentationComment(checker)), parent = getParentType(typescript, prop), declarations = getAllDeclarationParents(typescript, prop), propName = prop.getName(), destructuringDefault = defaultsMap?.get(propName), jsDocDefault = getJSDocDefault(typescript, prop, checker), defaultStr = destructuringDefault ?? jsDocDefault;
   return {
     name: propName,
     required: isRequired,
@@ -13744,7 +13744,14 @@ function serializeComponentDoc(typescript, checker, {
   for (let prop of allProperties) {
     if (excluded.has(prop.getName()))
       continue;
-    let item = extractPropItem(typescript, checker, prop, contextNode, defaultsMap);
+    let unionProp = isUnionType(propsType) ? checker.getPropertyOfType(propsType, prop.getName()) : void 0, unionPropType = unionProp ? checker.getTypeOfSymbolAtLocation(unionProp, contextNode) : void 0, item = extractPropItem(
+      typescript,
+      checker,
+      prop,
+      contextNode,
+      defaultsMap,
+      unionPropType
+    );
     unionForceOptional?.has(prop.getName()) && (item.required = !1), props[prop.getName()] = item;
   }
   let displayName = (isMemberSelection ? displayNameOverride : void 0) ?? computeDisplayName({
@@ -15957,41 +15964,49 @@ var delimiter = globalThis.process?.platform === "win32" ? ";" : ":", _platforms
 // src/componentManifest/generateCodeSnippet.ts
 import { types as t2 } from "storybook/internal/babel";
 import {
-  argsRecordFromObjectPath,
-  keyOf,
+  createStoryArgsResolver,
   metaObjectPath,
-  mergeArgsRecords,
-  metaArgsRecord,
   normalizeStoryDeclaration,
-  resolveRenderFunction,
-  storyAssignedArgsPath
+  resolveRenderFunction
 } from "storybook/internal/csf-tools";
-function getCodeSnippet(csf, storyName, componentName) {
-  let storyDeclaration = csf._storyDeclarationPath[storyName], metaObj = csf._metaNode;
+function renderFunctionOf(resolution) {
+  return resolution.kind === "resolved" ? resolution.path : resolution.kind === "unresolved" ? resolution.shadowedRender : void 0;
+}
+function getCodeSnippet(csf, storyName, componentName, resolver = createStoryArgsResolver(csf)) {
+  let { args, imports, unresolved } = resolver.resolve(storyName);
+  return {
+    node: buildSnippetNode(csf, storyName, componentName, args, resolver.ctx),
+    imports,
+    unresolved
+  };
+}
+function buildSnippetNode(csf, storyName, componentName, merged, ctx) {
+  let storyDeclaration = csf._storyDeclarationPath[storyName];
   if (!storyDeclaration) {
     let message = "Expected story to be a function or variable declaration";
     throw csf._storyPaths[storyName]?.buildCodeFrameError(message) ?? message;
   }
   let normalizedStory = normalizeStoryDeclaration(storyDeclaration), storyFn;
   normalizedStory.type === "fn" && (storyFn = normalizedStory.path);
-  let storyProps = normalizedStory.type === "config" ? normalizedStory.path.get("properties").filter((p) => p.isObjectProperty()) : [], metaProps = metaObjectPath(csf)?.get("properties").filter((p) => p.isObjectProperty()) ?? [], metaRender = resolveRenderFunction(metaProps, storyDeclaration), storyRender = resolveRenderFunction(storyProps, storyDeclaration);
-  storyFn || (storyFn = storyRender.kind === "resolved" ? storyRender.path : storyRender.kind === "missing" && metaRender.kind === "resolved" ? metaRender.path : void 0);
-  let metaArgs = metaArgsRecord(metaObj ?? null), storyArgsPath = storyProps.filter((p) => keyOf(p.node) === "args").map((p) => p.get("value")).find((v) => v.isObjectExpression()), storyArgs = argsRecordFromObjectPath(storyArgsPath), assignedArgsPath = storyAssignedArgsPath(csf._file.path, storyName), storyAssignedArgs = argsRecordFromObjectPath(assignedArgsPath), merged = {
-    ...mergeArgsRecords(metaArgs, storyArgs),
-    ...storyAssignedArgs
-  }, entries = Object.entries(merged).filter(([k]) => k !== "children"), validEntries = entries.filter(([k, v]) => isValidJsxAttrName(k) && v != null), invalidEntries = entries.filter(([k, v]) => !isValidJsxAttrName(k) && v != null), injectedAttrs = validEntries.map(([k, v]) => toAttr(k, v)).filter((a) => a != null);
+  let storyConfigPath = normalizedStory.type === "config" ? normalizedStory.path : void 0, metaRender = resolveRenderFunction(metaObjectPath(csf), storyDeclaration, ctx), storyRender = resolveRenderFunction(storyConfigPath, storyDeclaration, ctx);
+  storyFn || (storyFn = renderFunctionOf(storyRender) ?? (storyRender.kind === "missing" ? renderFunctionOf(metaRender) : void 0));
+  let entries = Object.entries(merged).filter(([k]) => k !== "children"), validEntries = entries.filter(([k, v]) => isValidJsxAttrName(k) && v != null), invalidEntries = entries.filter(([k, v]) => !isValidJsxAttrName(k) && v != null), injectedAttrs = validEntries.map(([k, v]) => toAttr(k, v)).filter((a) => a != null);
   if (storyFn) {
     let fn = storyFn.node;
     if (t2.isArrowFunctionExpression(fn) && (t2.isJSXElement(fn.body) || t2.isJSXFragment(fn.body))) {
       let spreadRes = transformArgsSpreadsInJsx(fn.body, merged), inlineRes = inlineArgsInJsx(spreadRes.node, merged);
       if (spreadRes.changed || inlineRes.changed) {
-        let newFn = t2.arrowFunctionExpression([], inlineRes.node, fn.async);
+        let newFn = t2.arrowFunctionExpression(
+          remainingParams(fn, inlineRes.node),
+          inlineRes.node,
+          fn.async
+        );
         return t2.variableDeclaration("const", [
           t2.variableDeclarator(t2.identifier(storyName), newFn)
         ]);
       }
     }
-    let stmts = t2.isFunctionDeclaration(fn) || t2.isArrowFunctionExpression(fn) && t2.isBlockStatement(fn.body) || t2.isFunctionExpression(fn) && t2.isBlockStatement(fn.body) ? fn.body.body : void 0;
+    let stmts = t2.isFunctionDeclaration(fn) || t2.isObjectMethod(fn) || t2.isArrowFunctionExpression(fn) && t2.isBlockStatement(fn.body) || t2.isFunctionExpression(fn) && t2.isBlockStatement(fn.body) ? fn.body.body : void 0;
     if (stmts) {
       let changed = !1, newBody = stmts.map((stmt) => {
         if (t2.isReturnStatement(stmt) && stmt.argument && (t2.isJSXElement(stmt.argument) || t2.isJSXFragment(stmt.argument))) {
@@ -16001,21 +16016,22 @@ function getCodeSnippet(csf, storyName, componentName) {
         }
         return stmt;
       });
-      if (changed)
-        return t2.isFunctionDeclaration(fn) ? t2.functionDeclaration(
-          t2.identifier(storyName),
-          [],
-          t2.blockStatement(newBody),
-          fn.generator,
-          fn.async
-        ) : t2.variableDeclaration("const", [
+      if (changed) {
+        let body = t2.blockStatement(newBody), params = remainingParams(fn, body);
+        return t2.isFunctionDeclaration(fn) ? t2.functionDeclaration(t2.identifier(storyName), params, body, fn.generator, fn.async) : t2.variableDeclaration("const", [
           t2.variableDeclarator(
             t2.identifier(storyName),
-            t2.arrowFunctionExpression([], t2.blockStatement(newBody), fn.async)
+            t2.arrowFunctionExpression(params, body, fn.async)
           )
         ]);
+      }
     }
-    return t2.isFunctionDeclaration(fn) ? t2.functionDeclaration(t2.identifier(storyName), fn.params, fn.body, fn.generator, fn.async) : t2.variableDeclaration("const", [t2.variableDeclarator(t2.identifier(storyName), fn)]);
+    return t2.isFunctionDeclaration(fn) ? t2.functionDeclaration(t2.identifier(storyName), fn.params, fn.body, fn.generator, fn.async) : t2.variableDeclaration("const", [
+      t2.variableDeclarator(
+        t2.identifier(storyName),
+        t2.isObjectMethod(fn) ? t2.arrowFunctionExpression(fn.params, fn.body, fn.async) : fn
+      )
+    ]);
   }
   invariant(componentName, "Could not generate snippet without component name.");
   let invalidSpread = buildInvalidSpread(invalidEntries), name = t2.jsxIdentifier(componentName), openingElAttrs = invalidSpread ? [...injectedAttrs, invalidSpread] : injectedAttrs, children = toJsxChildren(merged.children), selfClosing = children.length === 0, arrow = t2.arrowFunctionExpression(
@@ -16029,6 +16045,15 @@ function getCodeSnippet(csf, storyName, componentName) {
   );
   return t2.variableDeclaration("const", [t2.variableDeclarator(t2.identifier(storyName), arrow)]);
 }
+function remainingParams(fn, body) {
+  return readsArgs(body) ? fn.params : [];
+}
+function readsArgs(node) {
+  let named = /* @__PURE__ */ new Set(), reads = !1;
+  return t2.traverseFast(node, (current2) => {
+    t2.isMemberExpression(current2) && !current2.computed && named.add(current2.property), (t2.isObjectProperty(current2) || t2.isObjectMethod(current2)) && !current2.computed && named.add(current2.key), t2.isIdentifier(current2) && current2.name === "args" && !named.has(current2) && (reads = !0);
+  }), reads;
+}
 function buildInvalidSpread(entries) {
   if (entries.length === 0)
     return null;
@@ -16344,7 +16369,12 @@ function normalizeFileName(typescript, fileName) {
 // src/componentManifest/resolveComponents.ts
 import { recast } from "storybook/internal/babel";
 import { storyNameFromExport } from "storybook/internal/csf";
-import { extractStoryJSDocInfo, loadCsf } from "storybook/internal/csf-tools";
+import {
+  createStoryArgsResolver as createStoryArgsResolver2,
+  extractStoryJSDocInfo,
+  loadCsf,
+  unresolvedWarning
+} from "storybook/internal/csf-tools";
 
 // src/componentManifest/getComponentImports.ts
 import { dirname as dirname6 } from "node:path";
@@ -16550,32 +16580,38 @@ async function resolveStoryFileComponents(options) {
   }));
   return { storyPath, storyFile, csf, componentName, allComponents, component, subcomponents };
 }
-function extractStorySnippets(csf, componentName, filterStoryIds) {
-  return Object.entries(csf._stories).filter(([, story]) => !filterStoryIds || filterStoryIds.has(story.id)).map(([storyExport, story]) => {
+function extractStorySnippets(csf, componentName, filterStoryIds, references) {
+  let imports = [], resolver = createStoryArgsResolver2(csf, references);
+  return { stories: Object.entries(csf._stories).filter(([, story]) => !filterStoryIds || filterStoryIds.has(story.id)).map(([storyExport, story]) => {
     let name = story.name ?? storyNameFromExport(storyExport);
     try {
-      let { description, summary } = extractStoryJSDocInfo(csf._storyStatements[storyExport]);
+      let { description, summary } = extractStoryJSDocInfo(csf._storyStatements[storyExport]), snippet = getCodeSnippet(csf, storyExport, componentName, resolver);
+      imports.push(...snippet.imports);
+      let warning = unresolvedWarning(snippet.unresolved);
       return {
         id: story.id,
         name,
-        snippet: recast.print(getCodeSnippet(csf, storyExport, componentName)).code,
+        snippet: recast.print(snippet.node).code,
         description,
-        summary
+        summary,
+        ...warning ? { warning } : {}
       };
     } catch (e) {
       let err = e instanceof Error ? e : new Error(String(e));
       return { id: story.id, name, error: { name: err.name, message: err.message } };
     }
-  });
+  }), imports };
 }
 
 // src/componentManifest/buildReactComponentDocgen.ts
 import { getComponentIdFromEntry } from "storybook/internal/common";
 import {
   buildImportStatements as buildImportStatements2,
+  createStoryReferenceResolver,
   extractComponentDescription,
   extractDescription
 } from "storybook/internal/csf-tools";
+var openStoryReferences = createStoryReferenceResolver();
 function getPackageInfo(componentPath, fallbackPath) {
   let nearestPkg = cachedFindUp("package.json", {
     cwd: posix.dirname(componentPath ?? fallbackPath)
@@ -16673,14 +16709,17 @@ function buildStoryDocsFromResolved({
   allComponents,
   filterStoryIds
 }) {
-  let id = getComponentIdFromEntry(entry), title = entry.title.split("/").at(-1).replace(/\s+/g, ""), packageName = getPackageInfo(component?.path, storyPath), fallbackImport = getFallbackImport(packageName, componentName), imports = buildImportStatements2({ refs: allComponents, packageName }).join(`
-`).trim() || fallbackImport, storyEntries = extractStorySnippets(csf, component?.componentName, filterStoryIds);
+  let id = getComponentIdFromEntry(entry), title = entry.title.split("/").at(-1).replace(/\s+/g, ""), packageName = getPackageInfo(component?.path, storyPath), fallbackImport = getFallbackImport(packageName, componentName), storyEntries = extractStorySnippets(csf, component?.componentName, filterStoryIds, {
+    filePath: storyPath,
+    ...openStoryReferences()
+  }), argRefs = storyEntries.imports.map((ref2) => ({ ...ref2, isPackage: !0 })), imports = buildImportStatements2({ refs: [...allComponents, ...argRefs], packageName }).join(`
+`).trim() || fallbackImport;
   return {
     id,
     name: componentName ?? title,
     path: storyFilePath,
     ...imports ? { import: imports } : {},
-    stories: Object.fromEntries(storyEntries.map((story) => [story.id, story]))
+    stories: Object.fromEntries(storyEntries.stories.map((story) => [story.id, story]))
   };
 }
 function buildComponentDocgenFromResolved({

package/dist/docgen/docgen-worker.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_h2cb86pu2u from 'node:url';
-import CJS_COMPAT_NODE_PATH_h2cb86pu2u from 'node:path';
-import CJS_COMPAT_NODE_MODULE_h2cb86pu2u from "node:module";
+import CJS_COMPAT_NODE_URL_5mro4fxxrdb from 'node:url';
+import CJS_COMPAT_NODE_PATH_5mro4fxxrdb from 'node:path';
+import CJS_COMPAT_NODE_MODULE_5mro4fxxrdb from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_h2cb86pu2u.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_h2cb86pu2u.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_h2cb86pu2u.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_5mro4fxxrdb.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_5mro4fxxrdb.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_5mro4fxxrdb.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -15,7 +15,7 @@ import {
   extractArgTypes,
   posix,
   resolveStoryFileComponents
-} from "../_node-chunks/chunk-RATZ5JVF.js";
+} from "../_node-chunks/chunk-7MQEKIVD.js";
 
 // src/docgen/docgen-worker.ts
 import { createLazyDocgenMiddleware } from "storybook/internal/common";

package/dist/preset.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_h2cb86pu2u from 'node:url';
-import CJS_COMPAT_NODE_PATH_h2cb86pu2u from 'node:path';
-import CJS_COMPAT_NODE_MODULE_h2cb86pu2u from "node:module";
+import CJS_COMPAT_NODE_URL_5mro4fxxrdb from 'node:url';
+import CJS_COMPAT_NODE_PATH_5mro4fxxrdb from 'node:path';
+import CJS_COMPAT_NODE_MODULE_5mro4fxxrdb from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_h2cb86pu2u.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_h2cb86pu2u.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_h2cb86pu2u.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_5mro4fxxrdb.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_5mro4fxxrdb.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_5mro4fxxrdb.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -22,7 +22,7 @@ import {
   parseWithReactDocgen,
   posix,
   resolveStoryFileComponents
-} from "./_node-chunks/chunk-RATZ5JVF.js";
+} from "./_node-chunks/chunk-7MQEKIVD.js";
 
 // src/preset.ts
 import path2, { join as join3 } from "node:path";
@@ -466,7 +466,7 @@ var enrichCsf = async (input, options) => {
           return;
         let { format: format3 } = await getPrettier(), node, snippet;
         try {
-          node = getCodeSnippet(csfSource, key, csfSource._meta?.component);
+          node = getCodeSnippet(csfSource, key, csfSource._meta?.component).node;
         } catch (e) {
           if (!(e instanceof Error))
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "10.6.0-alpha.6",
+  "version": "10.6.0-alpha.7",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/react-dom-shim": "10.6.0-alpha.6",
+    "@storybook/react-dom-shim": "10.6.0-alpha.7",
     "react-docgen": "^8.0.2",
     "react-docgen-typescript": "^2.2.2"
   },
@@ -82,7 +82,7 @@
     "@types/react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "storybook": "^10.6.0-alpha.6",
+    "storybook": "^10.6.0-alpha.7",
     "typescript": ">= 4.9.x"
   },
   "peerDependenciesMeta": {