typescript path plugin

https://coveord.atlassian.net/browse/KIT-3920

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',

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>

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(

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}`;
+}

packages/atomic/tsconfig.json

@@ -27,7 +27,10 @@
           "no-nullable-attribute-binding": "warning"
         }
       }
-    ]
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "exclude": ["node_modules", "src/external-builds"],
   "include": ["src"]

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": [