storybook-react-rsbuild 0.1.8 → 0.1.9

package/dist/preset.js

@@ -30,209 +30,368 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/plugins/docgen-handlers/actualNameHandler.ts
-var import_react_docgen, getNameOrValue, isReactForwardRefCall, actualNameHandler, actualNameHandler_default;
-var init_actualNameHandler = __esm({
-  "src/plugins/docgen-handlers/actualNameHandler.ts"() {
+// src/plugins/react-docgen-typescript/utils/filter.ts
+var defaultPropFilter;
+var init_filter = __esm({
+  "src/plugins/react-docgen-typescript/utils/filter.ts"() {
     "use strict";
-    import_react_docgen = require("react-docgen");
-    ({ getNameOrValue, isReactForwardRefCall } = import_react_docgen.utils);
-    actualNameHandler = function actualNameHandler2(documentation, componentDefinition) {
-      documentation.set("definedInFile", componentDefinition.hub.file.opts.filename);
-      if ((componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) && componentDefinition.has("id")) {
-        documentation.set(
-          "actualName",
-          getNameOrValue(componentDefinition.get("id"))
-        );
-      } else if (componentDefinition.isArrowFunctionExpression() || componentDefinition.isFunctionExpression() || isReactForwardRefCall(componentDefinition)) {
-        let currentPath = componentDefinition;
-        while (currentPath.parentPath) {
-          if (currentPath.parentPath.isVariableDeclarator()) {
-            documentation.set(
-              "actualName",
-              getNameOrValue(currentPath.parentPath.get("id"))
-            );
-            return;
-          }
-          if (currentPath.parentPath.isAssignmentExpression()) {
-            const leftPath = currentPath.parentPath.get("left");
-            if (leftPath.isIdentifier() || leftPath.isLiteral()) {
-              documentation.set("actualName", getNameOrValue(leftPath));
-              return;
-            }
-          }
-          currentPath = currentPath.parentPath;
-        }
-        documentation.set("actualName", "");
-      }
+    defaultPropFilter = (prop) => {
+      return !prop.parent?.fileName.includes("node_modules");
     };
-    actualNameHandler_default = actualNameHandler;
   }
 });
 
-// src/plugins/docgen-resolver.ts
-function defaultLookupModule(filename, basedir) {
-  const resolveOptions = {
-    basedir,
-    extensions: RESOLVE_EXTENSIONS,
-    // we do not need to check core modules as we cannot import them anyway
-    includeCoreModules: false
-  };
+// src/plugins/react-docgen-typescript/utils/typescript.ts
+var typescript_exports = {};
+__export(typescript_exports, {
+  getTSConfigFile: () => getTSConfigFile
+});
+function getTSConfigFile(tsconfigPath) {
   try {
-    return import_resolve.default.sync(filename, resolveOptions);
+    const basePath = (0, import_node_path.dirname)(tsconfigPath);
+    const configFile = import_typescript.default.readConfigFile(tsconfigPath, import_typescript.default.sys.readFile);
+    return import_typescript.default.parseJsonConfigFileContent(
+      configFile.config,
+      import_typescript.default.sys,
+      basePath,
+      {},
+      tsconfigPath
+    );
   } catch (error) {
-    const ext = (0, import_node_path.extname)(filename);
-    let newFilename;
-    switch (ext) {
-      case ".js":
-      case ".mjs":
-      case ".cjs":
-        newFilename = `${filename.slice(0, -2)}ts`;
-        break;
-      case ".jsx":
-        newFilename = `${filename.slice(0, -3)}tsx`;
-        break;
-      default:
-        throw error;
-    }
-    return import_resolve.default.sync(newFilename, {
-      ...resolveOptions,
-      // we already know that there is an extension at this point, so no need to check other extensions
-      extensions: []
-    });
+    return {};
   }
 }
-var import_node_path, import_resolve, ReactDocgenResolveError, RESOLVE_EXTENSIONS;
-var init_docgen_resolver = __esm({
-  "src/plugins/docgen-resolver.ts"() {
+var import_node_path, import_typescript;
+var init_typescript = __esm({
+  "src/plugins/react-docgen-typescript/utils/typescript.ts"() {
     "use strict";
     import_node_path = require("path");
-    import_resolve = __toESM(require("resolve"));
-    ReactDocgenResolveError = class extends Error {
-      constructor(filename) {
-        super(`'${filename}' was ignored by react-docgen.`);
-        // the magic string that react-docgen uses to check if a module is ignored
-        this.code = "MODULE_NOT_FOUND";
-      }
-    };
-    RESOLVE_EXTENSIONS = [
-      ".js",
-      ".cts",
-      // These were originally not in the code, I added them
-      ".mts",
-      // These were originally not in the code, I added them
-      ".ctsx",
-      // These were originally not in the code, I added them
-      ".mtsx",
-      // These were originally not in the code, I added them
-      ".ts",
-      ".tsx",
-      ".mjs",
-      ".cjs",
-      ".mts",
-      ".cts",
-      ".jsx"
-    ];
+    import_typescript = __toESM(require("typescript"));
   }
 });
 
-// src/plugins/react-docgen.ts
-var react_docgen_exports = {};
-__export(react_docgen_exports, {
-  getReactDocgenImporter: () => getReactDocgenImporter,
-  reactDocgen: () => reactDocgen
+// src/plugins/react-docgen-typescript/utils/options.ts
+var options_exports = {};
+__export(options_exports, {
+  getGenerateOptions: () => getGenerateOptions
 });
-async function reactDocgen({
-  include = /\.(mjs|tsx?|jsx?)$/,
-  exclude = [/node_modules\/.*/]
-} = {}) {
-  const cwd = process.cwd();
-  const filter = (0, import_pluginutils.createFilter)(include, exclude);
-  const tsconfigPath = await (0, import_find_up.default)("tsconfig.json", { cwd });
-  const tsconfig = TsconfigPaths.loadConfig(tsconfigPath);
-  let matchPath;
-  if (tsconfig.resultType === "success") {
-    import_node_logger.logger.info("Using tsconfig paths for react-docgen");
-    matchPath = TsconfigPaths.createMatchPath(
-      tsconfig.absoluteBaseUrl,
-      tsconfig.paths,
-      ["browser", "module", "main"]
-    );
-  }
+function getGenerateOptions(options) {
+  const { setDisplayName: setDisplayName2 = true, typePropName = "type" } = options;
   return {
-    name: "storybook:react-docgen-plugin",
-    // enforce: 'pre',
-    setup(api) {
-      api.transform(
-        {
-          test: (id) => {
-            if (!filter(import_node_path2.default.relative(cwd, id))) {
-              return false;
-            }
-            return true;
-          }
-        },
-        async ({ code: src, resource: id }) => {
-          try {
-            const docgenResults = (0, import_react_docgen2.parse)(src, {
-              resolver: defaultResolver,
-              handlers,
-              importer: getReactDocgenImporter(matchPath),
-              filename: id
-            });
-            const s = new import_magic_string.default(src);
-            docgenResults.forEach((info) => {
-              const { actualName, definedInFile, ...docgenInfo } = info;
-              if (actualName && definedInFile == id) {
-                const docNode = JSON.stringify(docgenInfo);
-                s.append(`;${actualName}.__docgenInfo=${docNode}`);
-              }
-            });
-            return {
-              code: s.toString(),
-              map: s.generateMap({ hires: true, source: id }).toString()
-            };
-          } catch (e) {
-            return src;
-          }
-        }
-      );
-    }
+    setDisplayName: setDisplayName2,
+    typePropName
   };
 }
-function getReactDocgenImporter(matchPath) {
-  return (0, import_react_docgen2.makeFsImporter)((filename, basedir) => {
-    const mappedFilenameByPaths = (() => {
-      if (matchPath) {
-        const match = matchPath(filename);
-        return match || filename;
-      } else {
-        return filename;
-      }
-    })();
-    const result = defaultLookupModule(mappedFilenameByPaths, basedir);
-    if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext))) {
-      return result;
+var init_options = __esm({
+  "src/plugins/react-docgen-typescript/utils/options.ts"() {
+    "use strict";
+  }
+});
+
+// src/plugins/react-docgen-typescript/utils/generate.ts
+var generate_exports = {};
+__export(generate_exports, {
+  generateDocgenCodeBlock: () => generateDocgenCodeBlock
+});
+function createLiteral(value) {
+  switch (typeof value) {
+    case "string":
+      return import_typescript2.default.factory.createStringLiteral(value);
+    case "number":
+      return import_typescript2.default.factory.createNumericLiteral(value);
+    case "boolean":
+      return value ? import_typescript2.default.factory.createTrue() : import_typescript2.default.factory.createFalse();
+  }
+}
+function insertTsIgnoreBeforeStatement(statement) {
+  import_typescript2.default.setSyntheticLeadingComments(statement, [
+    {
+      text: " @ts-ignore",
+      // Leading space is important here
+      kind: import_typescript2.default.SyntaxKind.SingleLineCommentTrivia,
+      pos: -1,
+      end: -1
     }
-    throw new ReactDocgenResolveError(filename);
-  });
+  ]);
+  return statement;
+}
+function setDisplayName(d) {
+  return insertTsIgnoreBeforeStatement(
+    import_typescript2.default.factory.createExpressionStatement(
+      import_typescript2.default.factory.createBinaryExpression(
+        import_typescript2.default.factory.createPropertyAccessExpression(
+          import_typescript2.default.factory.createIdentifier(d.displayName),
+          import_typescript2.default.factory.createIdentifier("displayName")
+        ),
+        import_typescript2.default.SyntaxKind.EqualsToken,
+        import_typescript2.default.factory.createStringLiteral(d.displayName)
+      )
+    )
+  );
 }
-var import_node_path2, import_pluginutils, import_find_up, import_magic_string, import_react_docgen2, import_node_logger, TsconfigPaths, defaultHandlers, defaultResolver, handlers;
-var init_react_docgen = __esm({
-  "src/plugins/react-docgen.ts"() {
+function createPropDefinition(propName, prop, options) {
+  const setDefaultValue = (defaultValue) => import_typescript2.default.factory.createPropertyAssignment(
+    import_typescript2.default.factory.createStringLiteral("defaultValue"),
+    // Use a more extensive check on defaultValue. Sometimes the parser
+    // returns an empty object.
+    defaultValue?.value !== void 0 && (typeof defaultValue.value === "string" || typeof defaultValue.value === "number" || typeof defaultValue.value === "boolean") ? import_typescript2.default.factory.createObjectLiteralExpression([
+      import_typescript2.default.factory.createPropertyAssignment(
+        import_typescript2.default.factory.createIdentifier("value"),
+        createLiteral(defaultValue.value)
+      )
+    ]) : import_typescript2.default.factory.createNull()
+  );
+  const setStringLiteralField = (fieldName, fieldValue) => import_typescript2.default.factory.createPropertyAssignment(
+    import_typescript2.default.factory.createStringLiteral(fieldName),
+    import_typescript2.default.factory.createStringLiteral(fieldValue)
+  );
+  const setDescription = (description) => setStringLiteralField("description", description);
+  const setName = (name) => setStringLiteralField("name", name);
+  const setRequired = (required) => import_typescript2.default.factory.createPropertyAssignment(
+    import_typescript2.default.factory.createStringLiteral("required"),
+    required ? import_typescript2.default.factory.createTrue() : import_typescript2.default.factory.createFalse()
+  );
+  const setValue = (typeValue) => Array.isArray(typeValue) && typeValue.every((value) => typeof value.value === "string") ? import_typescript2.default.factory.createPropertyAssignment(
+    import_typescript2.default.factory.createStringLiteral("value"),
+    import_typescript2.default.factory.createArrayLiteralExpression(
+      typeValue.map(
+        (value) => import_typescript2.default.factory.createObjectLiteralExpression([
+          setStringLiteralField("value", value.value)
+        ])
+      )
+    )
+  ) : void 0;
+  const setType = (typeName, typeValue) => {
+    const objectFields = [setStringLiteralField("name", typeName)];
+    const valueField = setValue(typeValue);
+    if (valueField) {
+      objectFields.push(valueField);
+    }
+    return import_typescript2.default.factory.createPropertyAssignment(
+      import_typescript2.default.factory.createStringLiteral(options.typePropName),
+      import_typescript2.default.factory.createObjectLiteralExpression(objectFields)
+    );
+  };
+  return import_typescript2.default.factory.createPropertyAssignment(
+    import_typescript2.default.factory.createStringLiteral(propName),
+    import_typescript2.default.factory.createObjectLiteralExpression([
+      setDefaultValue(prop.defaultValue),
+      setDescription(prop.description),
+      setName(prop.name),
+      setRequired(prop.required),
+      setType(prop.type.name, prop.type.value)
+    ])
+  );
+}
+function setComponentDocGen(d, options) {
+  return insertTsIgnoreBeforeStatement(
+    import_typescript2.default.factory.createExpressionStatement(
+      import_typescript2.default.factory.createBinaryExpression(
+        // SimpleComponent.__docgenInfo
+        import_typescript2.default.factory.createPropertyAccessExpression(
+          import_typescript2.default.factory.createIdentifier(d.displayName),
+          import_typescript2.default.factory.createIdentifier("__docgenInfo")
+        ),
+        import_typescript2.default.SyntaxKind.EqualsToken,
+        import_typescript2.default.factory.createObjectLiteralExpression([
+          // SimpleComponent.__docgenInfo.description
+          import_typescript2.default.factory.createPropertyAssignment(
+            import_typescript2.default.factory.createStringLiteral("description"),
+            import_typescript2.default.factory.createStringLiteral(d.description)
+          ),
+          // SimpleComponent.__docgenInfo.displayName
+          import_typescript2.default.factory.createPropertyAssignment(
+            import_typescript2.default.factory.createStringLiteral("displayName"),
+            import_typescript2.default.factory.createStringLiteral(d.displayName)
+          ),
+          // SimpleComponent.__docgenInfo.props
+          import_typescript2.default.factory.createPropertyAssignment(
+            import_typescript2.default.factory.createStringLiteral("props"),
+            import_typescript2.default.factory.createObjectLiteralExpression(
+              Object.entries(d.props).map(
+                ([propName, prop]) => createPropDefinition(propName, prop, options)
+              )
+            )
+          )
+        ])
+      )
+    )
+  );
+}
+function generateDocgenCodeBlock(options) {
+  const sourceFile = import_typescript2.default.createSourceFile(
+    options.filename,
+    options.source,
+    import_typescript2.default.ScriptTarget.ESNext
+  );
+  const wrapInTryStatement = (statements) => import_typescript2.default.factory.createTryStatement(
+    import_typescript2.default.factory.createBlock(statements, true),
+    import_typescript2.default.factory.createCatchClause(
+      import_typescript2.default.factory.createVariableDeclaration(
+        import_typescript2.default.factory.createIdentifier("__react_docgen_typescript_loader_error")
+      ),
+      import_typescript2.default.factory.createBlock([])
+    ),
+    void 0
+  );
+  const codeBlocks = options.componentDocs.map(
+    (d) => wrapInTryStatement(
+      [
+        options.setDisplayName ? setDisplayName(d) : null,
+        setComponentDocGen(d, options)
+      ].filter((s2) => s2 !== null)
+    )
+  );
+  const printer = import_typescript2.default.createPrinter({ newLine: import_typescript2.default.NewLineKind.LineFeed });
+  const printNode = (sourceNode) => printer.printNode(import_typescript2.default.EmitHint.Unspecified, sourceNode, sourceFile);
+  const s = new import_magic_string.default(options.source);
+  for (const node of codeBlocks) {
+    s.append(printNode(node));
+  }
+  return {
+    code: s.toString(),
+    map: s.generateMap()
+  };
+}
+var import_magic_string, import_typescript2;
+var init_generate = __esm({
+  "src/plugins/react-docgen-typescript/utils/generate.ts"() {
     "use strict";
-    import_node_path2 = __toESM(require("path"));
-    import_pluginutils = require("@rollup/pluginutils");
-    import_find_up = __toESM(require("find-up"));
     import_magic_string = __toESM(require("magic-string"));
-    import_react_docgen2 = require("react-docgen");
-    import_node_logger = require("storybook/internal/node-logger");
-    TsconfigPaths = __toESM(require("tsconfig-paths"));
-    init_actualNameHandler();
-    init_docgen_resolver();
-    defaultHandlers = Object.values(import_react_docgen2.builtinHandlers).map((handler) => handler);
-    defaultResolver = new import_react_docgen2.builtinResolvers.FindExportedDefinitionsResolver();
-    handlers = [...defaultHandlers, actualNameHandler_default];
+    import_typescript2 = __toESM(require("typescript"));
+  }
+});
+
+// src/plugins/react-docgen-typescript/index.ts
+var react_docgen_typescript_exports = {};
+__export(react_docgen_typescript_exports, {
+  default: () => react_docgen_typescript_default
+});
+var import_pluginutils, getDocgen, startWatch, react_docgen_typescript_default;
+var init_react_docgen_typescript = __esm({
+  "src/plugins/react-docgen-typescript/index.ts"() {
+    "use strict";
+    import_pluginutils = require("@rollup/pluginutils");
+    init_filter();
+    getDocgen = async (config) => {
+      const docGen = await import("react-docgen-typescript");
+      const {
+        tsconfigPath,
+        compilerOptions,
+        propFilter = defaultPropFilter,
+        setDisplayName: setDisplayName2,
+        typePropName,
+        ...rest
+      } = config;
+      const docgenOptions = {
+        propFilter,
+        ...rest
+      };
+      return docGen.withCompilerOptions(
+        // Compiler Options are passed in to the custom program.
+        {},
+        docgenOptions
+      );
+    };
+    startWatch = async (config, onProgramCreatedOrUpdated) => {
+      const { default: ts3 } = await import("typescript");
+      const { getTSConfigFile: getTSConfigFile2 } = await Promise.resolve().then(() => (init_typescript(), typescript_exports));
+      let compilerOptions = {
+        jsx: ts3.JsxEmit.React,
+        module: ts3.ModuleKind.CommonJS,
+        target: ts3.ScriptTarget.Latest
+      };
+      const tsconfigPath = config.tsconfigPath ?? "./tsconfig.json";
+      if (config.compilerOptions) {
+        compilerOptions = {
+          ...compilerOptions,
+          ...config.compilerOptions
+        };
+      } else {
+        const { options: tsOptions } = getTSConfigFile2(tsconfigPath);
+        compilerOptions = { ...compilerOptions, ...tsOptions };
+      }
+      const host = ts3.createWatchCompilerHost(
+        tsconfigPath,
+        compilerOptions,
+        ts3.sys,
+        ts3.createSemanticDiagnosticsBuilderProgram,
+        void 0,
+        () => {
+        }
+      );
+      host.afterProgramCreate = (program) => {
+        onProgramCreatedOrUpdated(program.getProgram());
+      };
+      return new Promise((resolve) => {
+        const watch = ts3.createWatchProgram(host);
+        resolve([watch.getProgram().getProgram(), watch.close]);
+      });
+    };
+    react_docgen_typescript_default = (config = {}) => {
+      let tsProgram;
+      let docGenParser;
+      let generateDocgenCodeBlock2;
+      let generateOptions;
+      let filter;
+      const moduleInvalidationQueue = /* @__PURE__ */ new Map();
+      let closeWatch;
+      return {
+        name: "rsbuild-plugin-react-docgen-typescript",
+        setup(api) {
+          api.modifyRsbuildConfig(async () => {
+            const { getGenerateOptions: getGenerateOptions2 } = await Promise.resolve().then(() => (init_options(), options_exports));
+            generateDocgenCodeBlock2 = (await Promise.resolve().then(() => (init_generate(), generate_exports))).generateDocgenCodeBlock;
+            docGenParser = await getDocgen(config);
+            generateOptions = getGenerateOptions2(config);
+            [tsProgram, closeWatch] = await startWatch(config, (program) => {
+              tsProgram = program;
+              for (const [
+                filepath,
+                invalidateModule
+              ] of moduleInvalidationQueue.entries()) {
+                invalidateModule();
+                moduleInvalidationQueue.delete(filepath);
+              }
+            });
+            filter = (0, import_pluginutils.createFilter)(
+              config.include ?? ["**/**.tsx"],
+              config.exclude ?? ["**/**.stories.tsx"]
+            );
+          });
+          api.transform(
+            {
+              test: (id) => {
+                return filter(id);
+              }
+            },
+            async ({ code: src, resource: id }) => {
+              try {
+                const componentDocs = docGenParser.parseWithProgramProvider(
+                  id,
+                  () => tsProgram
+                );
+                if (!componentDocs.length) {
+                  return { code: src };
+                }
+                const res = generateDocgenCodeBlock2({
+                  filename: id,
+                  source: src,
+                  componentDocs,
+                  ...generateOptions
+                });
+                return res;
+              } catch (e) {
+                return src;
+              }
+            }
+          );
+          api.onCloseBuild(() => {
+            closeWatch();
+          });
+        }
+      };
+    };
   }
 });
 
@@ -243,15 +402,15 @@ __export(preset_exports, {
   rsbuildFinal: () => rsbuildFinal
 });
 module.exports = __toCommonJS(preset_exports);
-var import_node_path3 = require("path");
+var import_node_path2 = require("path");
 
 // src/react-docs.ts
 var import_core = require("@rsbuild/core");
 var import_docs_tools = require("storybook/internal/docs-tools");
 
 // src/requirer.ts
-function requirer(resolver, path2) {
-  return resolver(path2);
+function requirer(resolver, path) {
+  return resolver(path);
 }
 
 // src/react-docs.ts
@@ -260,11 +419,11 @@ var rsbuildFinalDocs = async (config, options) => {
     return config;
   const typescriptOptions = await options.presets.apply("typescript", {});
   const debug = options.loglevel === "debug";
-  const { reactDocgen: reactDocgen2 } = typescriptOptions || {};
-  if (typeof reactDocgen2 !== "string") {
+  const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions || {};
+  if (typeof reactDocgen !== "string") {
     return config;
   }
-  if (reactDocgen2 !== "react-docgen-typescript") {
+  if (reactDocgen !== "react-docgen-typescript") {
     return (0, import_core.mergeRsbuildConfig)(config, {
       tools: {
         rspack: {
@@ -288,18 +447,29 @@ var rsbuildFinalDocs = async (config, options) => {
       }
     });
   }
-  const { reactDocgen: reactDocGenPlugin } = await Promise.resolve().then(() => (init_react_docgen(), react_docgen_exports));
+  let typescriptPresent;
+  try {
+    require.resolve("typescript");
+    typescriptPresent = true;
+  } catch (e) {
+    typescriptPresent = false;
+  }
+  if (reactDocgen === "react-docgen-typescript" && typescriptPresent) {
+  }
+  const reactDocGenTsPlugin = await Promise.resolve().then(() => (init_react_docgen_typescript(), react_docgen_typescript_exports));
   return (0, import_core.mergeRsbuildConfig)(config, {
     plugins: [
-      await reactDocGenPlugin({
-        include: reactDocgen2 === "react-docgen-typescript" ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/
+      await reactDocGenTsPlugin.default({
+        ...reactDocgenTypescriptOptions,
+        // We *need* this set so that RDT returns default values in the same format as react-docgen
+        savePropValueAsString: true
       })
     ]
   });
 };
 
 // src/preset.ts
-var getAbsolutePath = (input) => (0, import_node_path3.dirname)(require.resolve((0, import_node_path3.join)(input, "package.json")));
+var getAbsolutePath = (input) => (0, import_node_path2.dirname)(require.resolve((0, import_node_path2.join)(input, "package.json")));
 var rsbuildFinal = async (config, options) => {
   const finalConfig = rsbuildFinalDocs(config, options);
   return finalConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-react-rsbuild",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Storybook for React and Rsbuild: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook",
@@ -57,13 +57,15 @@
     "find-up": "^5.0.0",
     "magic-string": "^0.30.17",
     "react-docgen": "^7.1.0",
+    "react-docgen-typescript": "^2.2.2",
     "resolve": "^1.22.10",
     "tsconfig-paths": "^4.2.0",
-    "storybook-builder-rsbuild": "0.1.8"
+    "storybook-builder-rsbuild": "0.1.9"
   },
   "devDependencies": {
     "@rsbuild/core": "^1.1.13",
     "@storybook/types": "8.5.0-beta.8",
+    "@types/react": "^18.3.18",
     "@types/resolve": "^1.20.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",