React: Add isPackage flag to component imports for better package identification

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

@@ -6,7 +6,6 @@ import { logger } from 'storybook/internal/node-logger';
 
 import { getImportTag, getReactDocgen, matchPath } from './reactDocgen';
 import { cachedResolveImport } from './utils';
-import { stripSubpath, validPackageName } from './valid-package-name';
 
 // Public component metadata type used across passes
 export type ComponentRef = {
@@ -17,6 +16,7 @@ export type ComponentRef = {
   importName?: string;
   namespace?: string;
   path?: string;
+  isPackage: boolean;
   reactDocgen?: ReturnType<typeof getReactDocgen>;
 };
 
@@ -192,6 +192,7 @@ export const getComponents = ({
     })
     .map((component) => {
       let path;
+      let isPackage = false;
       try {
         if (component.importId && storyFilePath) {
           path = cachedResolveImport(matchPath(component.importId, dirname(storyFilePath)), {
@@ -201,17 +202,35 @@ export const getComponents = ({
       } catch (e) {
         logger.debug(e);
       }
+
+      try {
+        if (component.importId && !component.importId.startsWith('.') && storyFilePath) {
+          const realPath = cachedResolveImport(component.importId, {
+            basedir: dirname(storyFilePath),
+          });
+          if (realPath.includes('node_modules')) {
+            isPackage = true;
+          }
+        }
+      } catch {}
+
+      const componentWithPackage = { ...component, isPackage };
+
       if (path) {
-        const reactDocgen = getReactDocgen(path, component);
+        const reactDocgen = getReactDocgen(path, componentWithPackage);
+        return {
         return {
-          ...component,
+          ...componentWithPackage,
           path,
           reactDocgen,
           importOverride:
             reactDocgen.type === 'success' ? getImportTag(reactDocgen.data) : undefined,
         };
+          importOverride:
+            reactDocgen.type === 'success' ? getImportTag(reactDocgen.data) : undefined,
+        };
       }
-      return component;
+      return componentWithPackage;
     })
     .sort((a, b) => a.componentName.localeCompare(b.componentName));
 
@@ -257,6 +276,8 @@ export const getImports = ({
     order: number;
   };
 
+  const isRelative = (id: string) => id.startsWith('.') || id === '.';
+
   const withSource = components
     .filter((c) => Boolean(c.importId))
     .map((c, idx) => {
@@ -280,7 +301,9 @@ export const getImports = ({
       const rewritten =
         overrideSource !== undefined
           ? overrideSource
-          : packageName && !validPackageName(stripSubpath(importId))
+          : // only rewrite to the package name it the import id is not already a valid package
+            // tsconfig paths such as ~/components/Button and components/Button are not seen as packages
+            packageName && !c.isPackage
             ? packageName
             : importId;
       return { c, src: t.stringLiteral(rewritten), key: rewritten, ord: idx };