From 7d0afbbe7dba722546a13d735146256b97b8211a Mon Sep 17 00:00:00 2001
From: Alex Prudhomme <78121423+alexprudhomme@users.noreply.github.com>
Date: Fri, 31 Jan 2025 14:59:03 -0500
Subject: [PATCH] typescript path plugin

https://coveord.atlassian.net/browse/KIT-3920
---
 packages/atomic/.storybook/main.mts        | 16 -------
 packages/atomic/dev/index.html             |  1 +
 packages/atomic/scripts/build.mjs          |  3 +-
 packages/atomic/scripts/path-transform.mjs | 50 ++++++++++++++++++++++
 packages/atomic/tsconfig.json              |  5 ++-
 packages/atomic/tsconfig.storybook.json    |  5 +--
 6 files changed, 58 insertions(+), 22 deletions(-)
 create mode 100644 packages/atomic/scripts/path-transform.mjs

diff --git a/packages/atomic/.storybook/main.mts b/packages/atomic/.storybook/main.mts
index f73fde71a74..387e0eda2ae 100644
--- a/packages/atomic/.storybook/main.mts
+++ b/packages/atomic/.storybook/main.mts
@@ -64,7 +64,6 @@ const config: StorybookConfig = {
       plugins: [
         nxViteTsPaths(),
         resolveStorybookUtilsImports(),
-        resolveSrcImports(),
         forceInlineCssImports(),
         configType === 'PRODUCTION' && isCDN && externalizeDependencies(),
       ],
@@ -89,21 +88,6 @@ const resolveStorybookUtilsImports: PluginImpl = () => {
   };
 };
 
-const resolveSrcImports: PluginImpl = () => {
-  return {
-    name: 'resolve-storybook-utils-imports',
-    async resolveId(source: string, importer, options) {
-      if (source.startsWith('@/src')) {
-        return this.resolve(
-          source.replace('@/src', path.resolve(__dirname, '../src')),
-          importer,
-          options
-        );
-      }
-    },
-  };
-};
-
 const forceInlineCssImports: PluginImpl = () => {
   return {
     name: 'force-inline-css-imports',
diff --git a/packages/atomic/dev/index.html b/packages/atomic/dev/index.html
index 6b3da9db22d..c48fbdd71fb 100644
--- a/packages/atomic/dev/index.html
+++ b/packages/atomic/dev/index.html
@@ -142,6 +142,7 @@
           <atomic-search-box></atomic-search-box>
         </atomic-layout-section>
         <atomic-layout-section section="facets">
+          <atomic-boom></atomic-boom>
           <atomic-facet-manager>
             <atomic-automatic-facet-generator desired-count="3"></atomic-automatic-facet-generator>
             <atomic-category-facet field="geographicalhierarchy" label="World Atlas" with-search>
diff --git a/packages/atomic/scripts/build.mjs b/packages/atomic/scripts/build.mjs
index 3ea239f5a7c..95966cc2805 100644
--- a/packages/atomic/scripts/build.mjs
+++ b/packages/atomic/scripts/build.mjs
@@ -9,6 +9,7 @@ import {
   createProgram,
   flattenDiagnosticMessageText,
 } from 'typescript';
+import pathTransformer from './path-transform.mjs';
 import svgTransformer from './svg-transform.mjs';
 
 const args = argv.slice(2);
@@ -38,7 +39,7 @@ function emit(program) {
   const writeFile = undefined;
   const emitOnlyDtsFiles = false;
   const customTransformers = {
-    before: [svgTransformer],
+    before: [svgTransformer, pathTransformer],
   };
 
   return program.emit(
diff --git a/packages/atomic/scripts/path-transform.mjs b/packages/atomic/scripts/path-transform.mjs
new file mode 100644
index 00000000000..a73d1136fb2
--- /dev/null
+++ b/packages/atomic/scripts/path-transform.mjs
@@ -0,0 +1,50 @@
+import {readFileSync} from 'fs';
+import {basename, dirname, join, resolve, relative} from 'path';
+import {
+  NodeFlags,
+  isImportDeclaration,
+  visitEachChild,
+  visitNode,
+  isStringLiteral,
+} from 'typescript';
+
+/**
+ * Custom SVG transformer to handle .svg imports.
+ */
+export default function pathTransformer(context) {
+  const {factory} = context;
+
+  function visit(node, sourceFile) {
+    if (isImportDeclaration(node) && isStringLiteral(node.moduleSpecifier)) {
+      const importPath = node.moduleSpecifier.text;
+
+      if (importPath.startsWith('@/')) {
+        const relativePath = getRelativeImportPath(
+          sourceFile.fileName,
+          importPath
+        );
+
+        console.log(relativePath);
+
+        return factory.updateImportDeclaration(
+          node,
+          node.modifiers,
+          node.importClause,
+          factory.createStringLiteral(relativePath),
+          node.assertClause
+        );
+      }
+    }
+    return visitEachChild(node, (child) => visit(child, sourceFile), context);
+  }
+
+  return (sourceFile) =>
+    visitNode(sourceFile, (node) => visit(node, sourceFile));
+}
+
+function getRelativeImportPath(sourceFilePath, importPath) {
+  const basePath = resolve(process.cwd());
+  const absoluteImportPath = resolve(basePath, importPath.replace('@/', ''));
+  const relativePath = relative(dirname(sourceFilePath), absoluteImportPath);
+  return relativePath.startsWith('.') ? relativePath : `./${relativePath}`;
+}
diff --git a/packages/atomic/tsconfig.json b/packages/atomic/tsconfig.json
index c3ad9b38467..92b1cf51aed 100644
--- a/packages/atomic/tsconfig.json
+++ b/packages/atomic/tsconfig.json
@@ -27,7 +27,10 @@
           "no-nullable-attribute-binding": "warning"
         }
       }
-    ]
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "exclude": ["node_modules", "src/external-builds"],
   "include": ["src"]
diff --git a/packages/atomic/tsconfig.storybook.json b/packages/atomic/tsconfig.storybook.json
index 094372902a8..30d5ba207d2 100644
--- a/packages/atomic/tsconfig.storybook.json
+++ b/packages/atomic/tsconfig.storybook.json
@@ -4,10 +4,7 @@
     "emitDecoratorMetadata": true,
     "composite": true,
     "jsxFactory": "h",
-    "declaration": true,
-    "paths": {
-      "@/*": ["./*"]
-    }
+    "declaration": true
   },
   "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"],
   "include": [