React: Improve import rewriting when tsconfig paths are used

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

@@ -585,6 +585,114 @@ test('Non-relative import remains unchanged even if packageName provided', () =>
   );
 });
 
+test('Rewrites tilde-prefixed source to packageName', () => {
+  const code = dedent`
+    import { Button } from '~/components/Button';
+
+    const meta = {};
+    export default meta;
+    export const S = <Button/>;
+  `;
+  expect(getImports(code, 'pkg')).toMatchInlineSnapshot(
+    `
+    {
+      "components": [
+        {
+          "componentName": "Button",
+          "importId": "~/components/Button",
+          "importName": "Button",
+          "localImportName": "Button",
+        },
+      ],
+      "imports": [
+        "import { Button } from \"pkg\";",
+      ],
+    }
+  `
+  );
+});
+
+test('Rewrites hash-prefixed source to packageName', () => {
+  const code = dedent`
+    import Btn from '#Button';
+
+    const meta = {};
+    export default meta;
+    export const S = <Btn/>;
+  `;
+  expect(getImports(code, 'my-package')).toMatchInlineSnapshot(
+    `
+    {
+      "components": [
+        {
+          "componentName": "Btn",
+          "importId": "#Button",
+          "importName": "default",
+          "localImportName": "Btn",
+        },
+      ],
+      "imports": [
+        "import { Btn } from "my-package";",
+      ],
+    }
+  `
+  );
+});
+
+test('Does not rewrite scoped package subpath (valid bare specifier)', () => {
+  const code = dedent`
+    import { Button } from '@scope/ui/components';
+
+    const meta = {};
+    export default meta;
+    export const S = <Button/>;
+  `;
+  expect(getImports(code, 'pkg')).toMatchInlineSnapshot(
+    `
+    {
+      "components": [
+        {
+          "componentName": "Button",
+          "importId": "@scope/ui/components",
+          "importName": "Button",
+          "localImportName": "Button",
+        },
+      ],
+      "imports": [
+        "import { Button } from \"@scope/ui/components\";",
+      ],
+    }
+  `
+  );
+});
+
+test('Does not rewrite unscoped package subpath (valid bare specifier)', () => {
+  const code = dedent`
+    import { Button } from 'ui/components';
+
+    const meta = {};
+    export default meta;
+    export const S = <Button/>;
+  `;
+  expect(getImports(code, 'pkg')).toMatchInlineSnapshot(
+    `
+    {
+      "components": [
+        {
+          "componentName": "Button",
+          "importId": "ui/components",
+          "importName": "Button",
+          "localImportName": "Button",
+        },
+      ],
+      "imports": [
+        "import { Button } from \"ui/components\";",
+      ],
+    }
+  `
+  );
+});
+
 // Merging imports from same package
 
 test('Merges multiple imports from the same package (defaults and named)', () => {

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

@@ -6,6 +6,7 @@ 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 = {
@@ -256,8 +257,6 @@ export const getImports = ({
     order: number;
   };
 
-  const isRelative = (id: string) => id.startsWith('.') || id === '.';
-
   const withSource = components
     .filter((c) => Boolean(c.importId))
     .map((c, idx) => {
@@ -281,7 +280,7 @@ export const getImports = ({
       const rewritten =
         overrideSource !== undefined
           ? overrideSource
-          : packageName && isRelative(importId)
+          : packageName && !validPackageName(stripSubpath(importId))
             ? packageName
             : importId;
       return { c, src: t.stringLiteral(rewritten), key: rewritten, ord: idx };

code/renderers/react/src/componentManifest/valid-package-name.ts

@@ -0,0 +1,67 @@
+// inspired by https://github.com/npm/validate-npm-package-name/blob/main/lib/index.js
+const scopedPackagePattern = new RegExp('^(?:@([^/]+?)[/])?([^/]+?)$');
+
+export function stripSubpath(name: string): string {
+  const parts = name.split('/');
+
+  if (name.startsWith('@')) {
+    // @scope/pkg/...
+    if (parts.length >= 3) {
+      return `${parts[0]}/${parts[1]}`;
+    }
+    return name;
+  }
+
+  // react/..., lodash/..., etc
+  return parts[0];
+}
+
+export function validPackageName(name: string) {
+  if (!name.length) {
+    return false;
+  }
+
+  if (name.startsWith('.')) {
+    return false;
+  }
+
+  if (name.match(/^_/)) {
+    return false;
+  }
+
+  if (name.trim() !== name) {
+    return false;
+  }
+
+  if (name.length > 214) {
+    return false;
+  }
+
+  // mIxeD CaSe nAMEs
+  if (name.toLowerCase() !== name) {
+    return false;
+  }
+
+  if (/[~'!()*]/.test(name.split('/').slice(-1)[0])) {
+    return false;
+  }
+
+  if (encodeURIComponent(name) !== name) {
+    const nameMatch = name.match(scopedPackagePattern);
+    if (nameMatch) {
+      const org = nameMatch[1];
+      const pkg = nameMatch[2];
+
+      if (pkg.startsWith('.')) {
+        return false;
+      }
+
+      if (encodeURIComponent(org) === org && encodeURIComponent(pkg) === pkg) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  return true;
+}