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

package/dist/index.d.ts

@@ -531,4 +531,4 @@ interface ReactStory<T extends ReactTypes, TInput extends StoryAnnotations<T, T[
     Component: ComponentType<Partial<T['args']>>;
 }
 
-export { type AddMocks, type Decorator, INTERNAL_DEFAULT_PROJECT_ANNOTATIONS, type Loader, type Meta, type Preview, type ReactPreview, type ReactRenderer, type ReactStory, type ReactTypes, type StoryContext, type StoryFn, type StoryObj, __definePreview, composeStories, composeStory, setProjectAnnotations };
+export { type AddMocks, type Decorator, INTERNAL_DEFAULT_PROJECT_ANNOTATIONS, type Loader, type Meta, type Preview, type ReactMeta, type ReactPreview, type ReactRenderer, type ReactStory, type ReactTypes, type StoryContext, type StoryFn, type StoryObj, __definePreview, composeStories, composeStory, setProjectAnnotations };

package/dist/preset.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_2o033vi7i5u from 'node:url';
-import CJS_COMPAT_NODE_PATH_2o033vi7i5u from 'node:path';
-import CJS_COMPAT_NODE_MODULE_2o033vi7i5u from "node:module";
+import CJS_COMPAT_NODE_URL_121w8xeb4kr from 'node:url';
+import CJS_COMPAT_NODE_PATH_121w8xeb4kr from 'node:path';
+import CJS_COMPAT_NODE_MODULE_121w8xeb4kr from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_2o033vi7i5u.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_2o033vi7i5u.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_2o033vi7i5u.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_121w8xeb4kr.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_121w8xeb4kr.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_121w8xeb4kr.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -42,6 +42,56 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
+// ../../node_modules/ts-dedent/dist/index.js
+var require_dist = __commonJS({
+  "../../node_modules/ts-dedent/dist/index.js"(exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.dedent = void 0;
+    function dedent2(templ) {
+      var values = [];
+      for (var _i = 1; _i < arguments.length; _i++) {
+        values[_i - 1] = arguments[_i];
+      }
+      var strings = Array.from(typeof templ === "string" ? [templ] : templ);
+      strings[strings.length - 1] = strings[strings.length - 1].replace(/\r?\n([\t ]*)$/, "");
+      var indentLengths = strings.reduce(function(arr, str) {
+        var matches = str.match(/\n([\t ]+|(?!\s).)/g);
+        if (matches) {
+          return arr.concat(matches.map(function(match) {
+            var _a, _b;
+            return (_b = (_a = match.match(/[\t ]/g)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+          }));
+        }
+        return arr;
+      }, []);
+      if (indentLengths.length) {
+        var pattern_1 = new RegExp("\n[	 ]{" + Math.min.apply(Math, indentLengths) + "}", "g");
+        strings = strings.map(function(str) {
+          return str.replace(pattern_1, "\n");
+        });
+      }
+      strings[0] = strings[0].replace(/^\r?\n/, "");
+      var string = strings[0];
+      values.forEach(function(value, i) {
+        var endentations = string.match(/(?:^|\n)( *)$/);
+        var endentation = endentations ? endentations[1] : "";
+        var indentedValue = value;
+        if (typeof value === "string" && value.includes("\n")) {
+          indentedValue = String(value).split("\n").map(function(str, i2) {
+            return i2 === 0 ? str : "" + endentation + str;
+          }).join("\n");
+        }
+        string += indentedValue + strings[i + 1];
+      });
+      return string;
+    }
+    __name(dedent2, "dedent");
+    exports.dedent = dedent2;
+    exports.default = dedent2;
+  }
+});
+
 // ../../node_modules/tsconfig-paths/lib/filesystem.js
 var require_filesystem = __commonJS({
   "../../node_modules/tsconfig-paths/lib/filesystem.js"(exports) {
@@ -3965,7 +4015,7 @@ var resolvePackageDir = /* @__PURE__ */ __name((pkg, parent) => {
 import { recast as recast2 } from "storybook/internal/babel";
 import { combineTags } from "storybook/internal/csf";
 import { extractDescription, loadCsf } from "storybook/internal/csf-tools";
-import { logger as logger3 } from "storybook/internal/node-logger";
+import { logger as logger4 } from "storybook/internal/node-logger";
 
 // src/componentManifest/generateCodeSnippet.ts
 import { types as t } from "storybook/internal/babel";
@@ -4138,11 +4188,20 @@ function getCodeSnippet(csf, storyName, componentName) {
   const storyProps = normalizedPath.isObjectExpression() ? normalizedPath.get("properties").filter((p) => p.isObjectProperty()) : [];
   const metaPath = pathForNode(csf._file.path, metaObj);
   const metaProps = metaPath?.isObjectExpression() ? metaPath.get("properties").filter((p) => p.isObjectProperty()) : [];
-  const getRenderPath = /* @__PURE__ */ __name((object) => object.filter((p) => keyOf(p.node) === "render").map((p) => p.get("value")).find(
-    (v) => v.isArrowFunctionExpression() || v.isFunctionExpression()
-  ), "getRenderPath");
-  const renderPath = getRenderPath(storyProps);
+  const getRenderPath = /* @__PURE__ */ __name((object) => {
+    const renderPath2 = object.find((p) => keyOf(p.node) === "render")?.get("value");
+    if (renderPath2?.isIdentifier()) {
+      componentName = renderPath2.node.name;
+    }
+    if (renderPath2 && !(renderPath2.isArrowFunctionExpression() || renderPath2.isFunctionExpression())) {
+      throw renderPath2.buildCodeFrameError(
+        "Expected render to be an arrow function or function expression"
+      );
+    }
+    return renderPath2;
+  }, "getRenderPath");
   const metaRenderPath = getRenderPath(metaProps);
+  const renderPath = getRenderPath(storyProps);
   storyFn ??= renderPath ?? metaRenderPath;
   const metaArgs = metaArgsRecord(metaObj ?? null);
   const storyArgsPath = storyProps.filter((p) => keyOf(p.node) === "args").map((p) => p.get("value")).find((v) => v.isObjectExpression());
@@ -4461,13 +4520,15 @@ __name(pathForNode, "pathForNode");
 // src/componentManifest/getComponentImports.ts
 import { dirname as dirname4 } from "node:path";
 import { babelParse as babelParse2, recast, types as t3 } from "storybook/internal/babel";
-import { logger as logger2 } from "storybook/internal/node-logger";
+import { logger as logger3 } from "storybook/internal/node-logger";
 
 // src/componentManifest/reactDocgen.ts
 import { existsSync as existsSync2 } from "node:fs";
 import { dirname as dirname3, sep as sep2 } from "node:path";
 import { babelParse, types as t2 } from "storybook/internal/babel";
 import { getProjectRoot, supportedExtensions as supportedExtensions2 } from "storybook/internal/common";
+import { logger as logger2 } from "storybook/internal/node-logger";
+var import_ts_dedent = __toESM(require_dist(), 1);
 var TsconfigPaths = __toESM(require_lib2(), 1);
 import {
   builtinHandlers as docgenHandlers,
@@ -5061,6 +5122,9 @@ var defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
 var defaultResolver = new docgenResolver.FindExportedDefinitionsResolver();
 var handlers = [...defaultHandlers, actualNameHandler_default, exportNameHandler_default];
 function getMatchingDocgen(docgens, component) {
+  if (docgens.length === 0) {
+    return;
+  }
   if (docgens.length === 1) {
     return docgens[0];
   }
@@ -5110,93 +5174,143 @@ var parseWithReactDocgen = cached(
 );
 var getExportPaths = cached(
   (code, filePath) => {
-    const ast = (() => {
-      try {
-        return babelParse(code);
-      } catch (_) {
-        return void 0;
-      }
-    })();
-    if (!ast) {
+    let ast;
+    try {
+      ast = babelParse(code);
+    } catch (_) {
       return [];
     }
     const basedir = dirname3(filePath);
     const body = ast.program.body;
     return body.flatMap(
-      (n) => t2.isExportAllDeclaration(n) ? [n.source.value] : t2.isExportNamedDeclaration(n) && !!n.source && !n.declaration ? [n.source.value] : []
-    ).map((s) => matchPath(s, basedir)).map((s) => {
+      (statement) => t2.isExportAllDeclaration(statement) ? [statement.source.value] : t2.isExportNamedDeclaration(statement) && !!statement.source && !statement.declaration ? [statement.source.value] : []
+    ).map((id) => matchPath(id, basedir)).flatMap((id) => {
       try {
-        return cachedResolveImport(s, { basedir });
-      } catch {
-        return void 0;
+        return [cachedResolveImport(id, { basedir })];
+      } catch (e) {
+        logger2.debug(e);
+        return [];
       }
-    }).filter((p) => !!p && !p.includes("node_modules"));
+    });
   },
   { name: "getExportPaths" }
 );
 var gatherDocgensForPath = cached(
-  (filePath, depth) => {
-    if (depth > 5 || filePath.includes("node_modules")) {
-      return { docgens: [], analyzed: [] };
+  (path2, depth) => {
+    if (path2.includes("node_modules")) {
+      return {
+        docgens: [],
+        errors: [
+          {
+            path: path2,
+            code: "/* File in node_modules */",
+            name: "Component file in node_modules",
+            message: import_ts_dedent.dedent`
+              Component files in node_modules are not supported.
+              The distributed files in node_modules usually don't contain the necessary comments or types needed to analyze component information.
+              Configure TypeScript path aliases to map your package name to the source file instead.
+
+              Example (tsconfig.json):
+              {
+                "compilerOptions": {
+                  "baseUrl": ".",
+                  "paths": {
+                    "@design-system/button": ["src/components/Button.tsx"],
+                    "@design-system/*": ["src/components/*"]
+                  }
+                }
+              }
+
+              Then import using:
+              import { Button } from '@design-system/button'
+
+              Storybook resolves tsconfig paths automatically.
+            `
+          }
+        ]
+      };
     }
     let code;
     try {
-      code = cachedReadFileSync(filePath, "utf-8");
+      code = cachedReadFileSync(path2, "utf-8");
     } catch {
+      return {
+        docgens: [],
+        errors: [
+          {
+            path: path2,
+            code: "/* File not found or unreadable */",
+            name: "Component file could not be read",
+            message: `Could not read the component file located at "${path2}".
+Prefer relative imports if possible.`
+          }
+        ]
+      };
     }
-    if (!code) {
-      return { docgens: [], analyzed: [{ path: filePath, code: "/* File not found */" }] };
+    if (depth > 5) {
+      return {
+        docgens: [],
+        errors: [
+          {
+            path: path2,
+            code,
+            name: "Max re-export depth exceeded",
+            message: import_ts_dedent.dedent`
+              Traversal stopped after 5 steps while following re-exports starting from this file.
+              This usually indicates a deep or circular re-export chain. Try one of the following:
+              - Import the component file directly (e.g., src/components/Button.tsx),
+              - Reduce the number of re-export hops.
+            `
+          }
+        ]
+      };
     }
-    const reexportResults = getExportPaths(code, filePath).map(
-      (p) => gatherDocgensForPath(p, depth + 1)
-    );
-    const fromReexports = reexportResults.flatMap((r) => r.docgens);
-    const analyzedChildren = reexportResults.flatMap((r) => r.analyzed);
-    let locals;
+    const exportPaths = getExportPaths(code, path2).map((p) => gatherDocgensForPath(p, depth + 1));
+    const docgens = exportPaths.flatMap((r) => r.docgens);
+    const errors = exportPaths.flatMap((r) => r.errors);
     try {
-      locals = parseWithReactDocgen(code, filePath);
-    } catch {
-      locals = [];
+      return {
+        docgens: [...parseWithReactDocgen(code, path2), ...docgens],
+        errors
+      };
+    } catch (e) {
+      const message = e instanceof Error ? e.message : String(e);
+      return {
+        docgens,
+        errors: [
+          {
+            path: path2,
+            code,
+            name: "No component definition found",
+            message: import_ts_dedent.dedent`
+              ${message}
+              You can debug your component file in this playground: https://react-docgen.dev/playground
+            `
+          },
+          ...errors
+        ]
+      };
     }
-    return {
-      docgens: [...locals, ...fromReexports],
-      analyzed: [{ path: filePath, code }, ...analyzedChildren]
-    };
   },
   { name: "gatherDocgensWithTrace", key: /* @__PURE__ */ __name((filePath) => filePath, "key") }
 );
 var getReactDocgen = cached(
   (path2, component) => {
-    if (path2.includes("node_modules")) {
-      return {
-        type: "error",
-        error: {
-          name: "Component file in node_modules",
-          message: `Component files in node_modules are not supported. Please import your component file directly.`
-        }
-      };
-    }
-    const docgenWithInfo = gatherDocgensForPath(path2, 0);
-    const docgens = docgenWithInfo.docgens;
-    const noCompDefError = {
-      type: "error",
-      error: {
-        name: "No component definition found",
-        message: `Could not find a component definition.
-Prefer relative imports if possible.
-Avoid pointing to transpiled files.
-You can debug your component file in this playground: https://react-docgen.dev/playground
-
-` + docgenWithInfo.analyzed.map(({ path: path3, code }) => `File: ${path3}
-${code}`).join("\n")
-      }
-    };
-    if (!docgens || docgens.length === 0) {
-      return noCompDefError;
-    }
+    const { docgens, errors } = gatherDocgensForPath(path2, 0);
     const docgen = getMatchingDocgen(docgens, component);
     if (!docgen) {
-      return noCompDefError;
+      const error = {
+        name: errors.at(-1)?.name ?? "No component definition found",
+        message: errors.map(
+          (e) => import_ts_dedent.dedent`
+            File: ${e.path}
+            Error:
+            ${e.message}
+            Code:
+            ${e.code}`
+        ).join("\n\n")
+      };
+      return { type: "error", error };
     }
     return { type: "success", data: docgen };
   },
@@ -5348,7 +5462,7 @@ var getComponents = /* @__PURE__ */ __name(({
         });
       }
     } catch (e) {
-      logger2.error(e);
+      logger3.debug(e);
     }
     if (path2) {
       const reactDocgen = getReactDocgen(path2, component);
@@ -5565,7 +5679,7 @@ var componentManifestGenerator = /* @__PURE__ */ __name(async () => {
     invalidateCache();
     const startIndex = performance.now();
     const index = await storyIndexGenerator.getIndex();
-    logger3.verbose(`Story index generation took ${performance.now() - startIndex}ms`);
+    logger4.verbose(`Story index generation took ${performance.now() - startIndex}ms`);
     const startPerformance = performance.now();
     const groupByComponentId = groupBy(
       Object.values(index.entries).filter((entry) => entry.type === "story").filter((entry) => entry.subtype === "story"),
@@ -5638,18 +5752,21 @@ var componentManifestGenerator = /* @__PURE__ */ __name(async () => {
         jsDocTags: {}
       };
       if (!component?.reactDocgen) {
-        const error2 = !component ? {
-          name: "No meta.component specified",
-          message: "Specify meta.component for the component to be included in the manifest."
+        const error2 = !csf._meta?.component ? {
+          name: "No component found",
+          message: "We could not detect the component from your story file. Specify meta.component."
         } : {
           name: "No component import found",
-          message: `No component file found for the "${component.componentName}" component.`
+          message: `No component file found for the "${csf.meta.component}" component.`
         };
         return {
           ...base,
           error: {
             name: error2.name,
-            message: csf._metaStatementPath?.buildCodeFrameError(error2.message).message ?? error2.message
+            message: (csf._metaStatementPath?.buildCodeFrameError(error2.message).message ?? error2.message) + `
+
+${entry.importPath}:
+${storyFile}`
           }
         };
       }
@@ -5668,7 +5785,7 @@ var componentManifestGenerator = /* @__PURE__ */ __name(async () => {
         error
       };
     });
-    logger3.verbose(`Component manifest generation took ${performance.now() - startPerformance}ms`);
+    logger4.verbose(`Component manifest generation took ${performance.now() - startPerformance}ms`);
     return {
       v: 0,
       components: Object.fromEntries(

package/dist/preview.d.ts

@@ -422,4 +422,4 @@ interface ReactStory<T extends ReactTypes, TInput extends StoryAnnotations<T, T[
     Component: ComponentType<Partial<T['args']>>;
 }
 
-export { type ReactPreview, type ReactStory, __definePreview };
+export { type ReactMeta, type ReactPreview, type ReactStory, __definePreview };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "10.1.0-alpha.6",
+  "version": "10.1.0-alpha.7",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/react-dom-shim": "10.1.0-alpha.6",
+    "@storybook/react-dom-shim": "10.1.0-alpha.7",
     "react-docgen": "^8.0.2"
   },
   "devDependencies": {
@@ -81,7 +81,7 @@
   "peerDependencies": {
     "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.1.0-alpha.6",
+    "storybook": "^10.1.0-alpha.7",
     "typescript": ">= 4.9.x"
   },
   "peerDependenciesMeta": {