React: respect tsconfigPath in react-docgen-typescript

code/frameworks/react-vite/src/types.ts

@@ -59,7 +59,20 @@ type TypescriptOptions = TypescriptOptionsBase & {
    */
   reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false;
   /** Configures `@joshwooding/vite-plugin-react-docgen-typescript` */
-  reactDocgenTypescriptOptions: Parameters<typeof docgenTypescript>[0];
+  reactDocgenTypescriptOptions: Parameters<typeof docgenTypescript>[0] & {
+    /**
+     * Path to a custom tsconfig file for react-docgen-typescript.
+     *
+     * Useful in monorepo setups where the root tsconfig uses project references with empty
+     * `include`/`files` arrays. Point this to a tsconfig that explicitly includes your component
+     * source files so react-docgen-typescript can extract component documentation.
+     *
+     * The path is resolved relative to `process.cwd()`.
+     *
+     * @example './tsconfig.storybook.json'
+     */
+    tsconfigPath?: string;
+  };
 };
 
 /** The interface for Storybook configuration in `main.ts` files. */

code/presets/react-webpack/src/types.ts

@@ -34,7 +34,20 @@ export type TypescriptOptions = TypescriptOptionsBase & {
    * @default
    * @see https://github.com/storybookjs/storybook/blob/next/code/builders/builder-webpack5/src/config/defaults.js#L4-L6
    */
-  reactDocgenTypescriptOptions: ReactDocgenTypescriptOptions;
+  reactDocgenTypescriptOptions: ReactDocgenTypescriptOptions & {
+    /**
+     * Path to a custom tsconfig file for react-docgen-typescript.
+     *
+     * Useful in monorepo setups where the root tsconfig uses project references with empty
+     * `include`/`files` arrays. Point this to a tsconfig that explicitly includes your component
+     * source files so react-docgen-typescript can extract component documentation.
+     *
+     * The path is resolved relative to `process.cwd()`.
+     *
+     * @example './tsconfig.storybook.json'
+     */
+    tsconfigPath?: string;
+  };
 };
 
 export type StorybookConfig<TWebpackConfiguration = WebpackConfigurationBase> =

code/renderers/react/src/componentManifest/getComponentImports.ts

@@ -22,7 +22,20 @@ export type DocgenEngine = 'react-docgen' | 'react-docgen-typescript' | 'react-c
 
 export interface TypescriptOptions extends TypescriptOptionsBase {
   reactDocgen: ReactDocgenConfig;
-  reactDocgenTypescriptOptions: ParserOptions;
+  reactDocgenTypescriptOptions: ParserOptions & {
+    /**
+     * Path to a custom tsconfig file for react-docgen-typescript.
+     *
+     * Useful in monorepo setups where the root tsconfig uses project references with empty
+     * `include`/`files` arrays. Point this to a tsconfig that explicitly includes your component
+     * source files so react-docgen-typescript can extract component documentation.
+     *
+     * The path is resolved relative to `process.cwd()`.
+     *
+     * @example './tsconfig.storybook.json'
+     */
+    tsconfigPath?: string;
+  };
 }
 
 export type { ComponentRef } from './types.ts';

code/renderers/react/src/componentManifest/reactDocgen/utils.ts

@@ -130,7 +130,6 @@ export const getTsConfig = async () => {
   try {
     const ts = await import('typescript');
     const tsconfigPath = ts.findConfigFile(process.cwd(), ts.sys.fileExists);
-    console.log({ tsconfigPath });
     if (tsconfigPath === undefined) {
       return {};
     }

code/renderers/react/src/componentManifest/reactDocgenTypescript.ts

@@ -1,4 +1,4 @@
-import { dirname } from 'node:path';
+import { dirname, resolve } from 'node:path';
 
 import {
   type ComponentDoc,
@@ -182,7 +182,7 @@ export function invalidateParser() {
   cachedParserOptionsKey = undefined;
 }
 
-async function getParser(userOptions?: ParserOptions) {
+async function getParser(userOptions?: ParserOptions & { tsconfigPath?: string }) {
   const [typescript, reactDocgenTypescript] = await Promise.all([
     loadTypeScript(),
     loadReactDocgenTypescript(),
@@ -194,25 +194,27 @@ async function getParser(userOptions?: ParserOptions) {
   }
 
   if (!parser) {
-    const configPath = findTsconfigPath(process.cwd());
+    const { tsconfigPath: userTsconfigPath, ...restUserOptions } = userOptions ?? {};
+    const configPath = userTsconfigPath
+      ? resolve(process.cwd(), userTsconfigPath)
+      : findTsconfigPath(process.cwd());
     cachedCompilerOptions = { noErrorTruncation: true, strict: true };
+    cachedFileNames = undefined;
 
     if (configPath) {
-      const { config } = typescript.readConfigFile(configPath, typescript.sys.readFile);
-      const parsed = typescript.parseJsonConfigFileContent(
-        config,
-        typescript.sys,
-        dirname(configPath)
-      );
-      cachedCompilerOptions = { ...parsed.options, noErrorTruncation: true };
-      cachedFileNames = parsed.fileNames;
-    } else {
-      logger.warn(
-        'No tsconfig.json (or tsconfig.base.json / tsconfig.app.json) found. ' +
-          'TypeScript component props will not be documented by react-docgen-typescript. ' +
-          'Create a tsconfig.json in your project root to enable automatic controls.'
-      );
-    }
+
+      const { config, error } = typescript.readConfigFile(configPath, typescript.sys.readFile);
+      if (!error) {
+        const parsed = typescript.parseJsonConfigFileContent(
+          config,
+          typescript.sys,
+          dirname(configPath)
+        );
+        cachedCompilerOptions = { ...parsed.options, noErrorTruncation: true };
+        cachedFileNames = parsed.fileNames;
+      } else if (userTsconfigPath) {
+        logger.warn(`Failed to load tsconfig at "${configPath}": ${typescript.flattenDiagnosticMessageText(error.messageText, '\n')}`);
+      }
 
     const program = typescript.createProgram(
       cachedFileNames ?? [],
@@ -225,7 +227,7 @@ async function getParser(userOptions?: ParserOptions) {
     const parserOptions: ParserOptions = {
       shouldExtractLiteralValuesFromEnum: true,
       shouldRemoveUndefinedFromOptional: true,
-      ...userOptions,
+      ...restUserOptions,
       // Always force savePropValueAsString so default values are in a consistent format
       savePropValueAsString: true,
     };
@@ -298,7 +300,10 @@ export function getReactDocgenTypescriptError(
  * `invalidateCache()`. The underlying TS program is a long-lived singleton.
  */
 export const parseWithReactDocgenTypescript = asyncCache(
-  async (filePath: string, userOptions?: ParserOptions): Promise<ComponentDocWithExportName[]> => {
+  async (
+    filePath: string,
+    userOptions?: ParserOptions & { tsconfigPath?: string }
+  ): Promise<ComponentDocWithExportName[]> => {
     const { program, fileParser, typescript } = await getParser(userOptions);
     const checker = program.getTypeChecker();
     const sourceFile = program.getSourceFile(filePath);

docs/api/main-config/main-config-typescript.mdx

@@ -86,6 +86,35 @@ Options to pass to `fork-ts-checker-webpack-plugin`, if [enabled](#check). See [
   <CodeSnippets path="main-config-typescript-react-docgen-typescript-options.md" />
 
   {/* prettier-ignore-end */}
+
+  ### `reactDocgenTypescriptOptions.tsconfigPath`
+
+  Type: `string`
+
+  Path to a custom tsconfig file for `react-docgen-typescript`. Useful in monorepo setups where the root `tsconfig.json` uses [project references](https://www.typescriptlang.org/docs/handbook/project-references.html) with empty `include`/`files` arrays, which causes `react-docgen-typescript` to find no source files and produce no component documentation.
+
+  Point this to a tsconfig that explicitly lists the source files you want documented. The path is resolved relative to `process.cwd()`.
+
+  ```ts
+  // .storybook/main.ts
+  const config: StorybookConfig = {
+    typescript: {
+      reactDocgen: 'react-docgen-typescript',
+      reactDocgenTypescriptOptions: {
+        tsconfigPath: './tsconfig.storybook.json',
+      },
+    },
+  };
+  ```
+
+  For example, your `tsconfig.storybook.json` might look like:
+
+  ```json
+  {
+    "extends": "./tsconfig.base.json",
+    "include": ["packages/*/src/**/*.ts", "packages/*/src/**/*.tsx"]
+  }
+  ```
 </IfRenderer>
 
 ## `skipCompiler`