From 6d9e506cf40ebafc3b5508ca28c1f7602597acd7 Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Thu, 6 Feb 2025 10:50:44 -0500
Subject: [PATCH 01/12] update getAssetPath

https://coveord.atlassian.net/browse/KIT-3944
---
 .../atomic/scripts/asset-path-transformer.mjs | 51 +++++++++++++++++++
 packages/atomic/scripts/build.mjs             |  9 +++-
 packages/atomic/src/types/node.d.ts           |  5 ++
 packages/atomic/src/utils/utils.ts            | 14 ++++-
 4 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 packages/atomic/scripts/asset-path-transformer.mjs
 create mode 100644 packages/atomic/src/types/node.d.ts

diff --git a/packages/atomic/scripts/asset-path-transformer.mjs b/packages/atomic/scripts/asset-path-transformer.mjs
new file mode 100644
index 00000000000..313d5d66c1f
--- /dev/null
+++ b/packages/atomic/scripts/asset-path-transformer.mjs
@@ -0,0 +1,51 @@
+import {
+  isPropertyAccessExpression,
+  isIdentifier,
+  isMetaProperty,
+  visitEachChild,
+  visitNode,
+  SyntaxKind,
+} from 'typescript';
+
+/**
+ * Transforms occurrences of `import.meta.env.RESOURCE_URL` in the source file
+ * to `import.meta.url`.
+ */
+function resourceUrlTransformer(context) {
+  const {factory} = context;
+  return (sourceFile) => {
+    function visitor(node) {
+      // Check for import.meta.env.RESOURCE_URL
+      if (
+        isPropertyAccessExpression(node) &&
+        isIdentifier(node.name) &&
+        node.name.text === 'RESOURCE_URL'
+      ) {
+        const envNode = node.expression;
+        if (
+          isPropertyAccessExpression(envNode) &&
+          isIdentifier(envNode.name) &&
+          envNode.name.text === 'env'
+        ) {
+          const metaNode = envNode.expression;
+          if (
+            isMetaProperty(metaNode) &&
+            metaNode.keywordToken === SyntaxKind.ImportKeyword
+          ) {
+            return factory.createPropertyAccessExpression(
+              factory.createMetaProperty(
+                SyntaxKind.ImportKeyword,
+                factory.createIdentifier('meta')
+              ),
+              'url'
+            );
+          }
+        }
+      }
+      return visitEachChild(node, visitor, context);
+    }
+    return visitNode(sourceFile, visitor);
+  };
+}
+
+export default resourceUrlTransformer;
diff --git a/packages/atomic/scripts/build.mjs b/packages/atomic/scripts/build.mjs
index 95966cc2805..24246a41857 100644
--- a/packages/atomic/scripts/build.mjs
+++ b/packages/atomic/scripts/build.mjs
@@ -9,6 +9,7 @@ import {
   createProgram,
   flattenDiagnosticMessageText,
 } from 'typescript';
+import resourceUrlTransformer from './asset-path-transformer.mjs';
 import pathTransformer from './path-transform.mjs';
 import svgTransformer from './svg-transform.mjs';
 
@@ -18,6 +19,12 @@ if (configArg === undefined) {
   throw new Error('Missing --config=[PATH] argument');
 }
 const tsConfigPath = configArg.split('=')[1];
+const isCDN = process.env.DEPLOYMENT_ENVIRONMENT === 'CDN';
+const transformers = [
+  svgTransformer,
+  pathTransformer,
+  ...[isCDN ? resourceUrlTransformer : null].filter(Boolean),
+];
 
 function loadTsConfig(configPath) {
   const configFile = readConfigFile(configPath, sys.readFile);
@@ -39,7 +46,7 @@ function emit(program) {
   const writeFile = undefined;
   const emitOnlyDtsFiles = false;
   const customTransformers = {
-    before: [svgTransformer, pathTransformer],
+    before: transformers,
   };
 
   return program.emit(
diff --git a/packages/atomic/src/types/node.d.ts b/packages/atomic/src/types/node.d.ts
new file mode 100644
index 00000000000..dfdf14c889c
--- /dev/null
+++ b/packages/atomic/src/types/node.d.ts
@@ -0,0 +1,5 @@
+interface ImportMeta {
+  env: {
+    RESOURCE_URL?: string;
+  };
+}
diff --git a/packages/atomic/src/utils/utils.ts b/packages/atomic/src/utils/utils.ts
index 725baf4d2b2..5bedab8c648 100644
--- a/packages/atomic/src/utils/utils.ts
+++ b/packages/atomic/src/utils/utils.ts
@@ -1,4 +1,3 @@
-import {getAssetPath} from '@stencil/core';
 import {NODE_TYPES} from '@stencil/core/mock-doc';
 import DOMPurify from 'dompurify';
 
@@ -84,6 +83,19 @@ export function containsVisualElement(node: Node) {
   return false;
 }
 
+export function getAssetPath(path: string): string {
+  const resourceUrl = import.meta.env?.RESOURCE_URL;
+  const baseUrl =
+    resourceUrl !== undefined
+      ? new URL('./', resourceUrl).href
+      : new URL('./', window.document.baseURI).href;
+  const assetUrl = new URL(path, baseUrl);
+
+  return assetUrl.origin !== window.location.origin
+    ? assetUrl.href
+    : assetUrl.pathname;
+}
+
 export function parseAssetURL(url: string, assetPath = './assets') {
   const [, protocol, remainder] =
     url.match(/^([a-z]+):\/\/(.*?)(\.svg)?$/) || [];

From 7452e1d2259075e51bb100ea2d07e33d174da1ba Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Tue, 11 Feb 2025 09:46:00 -0500
Subject: [PATCH 02/12] update vitest

https://coveord.atlassian.net/browse/KIT-3944
---
 packages/atomic/scripts/watch.mjs | 37 +++++++++++++++++++++++++++++++
 packages/atomic/vitest.config.ts  |  9 ++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 packages/atomic/scripts/watch.mjs

diff --git a/packages/atomic/scripts/watch.mjs b/packages/atomic/scripts/watch.mjs
new file mode 100644
index 00000000000..89b43f1ce78
--- /dev/null
+++ b/packages/atomic/scripts/watch.mjs
@@ -0,0 +1,37 @@
+import {execSync} from 'node:child_process';
+import {watch} from 'node:fs';
+
+function initialBuild() {
+  const commands = [
+    'node --max_old_space_size=6144 ../../node_modules/@stencil/core/bin/stencil build --tsConfig tsconfig.stencil.json',
+    'node ./scripts/stencil-proxy.mjs',
+    'node ./scripts/build.mjs --config=tsconfig.lit.json',
+    'node ./scripts/process-css.mjs --config=tsconfig.lit.json',
+    'esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js',
+    'esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js',
+  ];
+  for (const command of commands) {
+    execSync(command, {
+      stdio: 'inherit',
+      env: {...process.env, IS_DEV: 'true'},
+    });
+  }
+}
+
+function rebuild() {
+  const commands = [
+    'node ./scripts/build.mjs --config=tsconfig.lit.json',
+    'node ./scripts/process-css.mjs --config=tsconfig.lit.json',
+    'esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js',
+    'esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js',
+  ];
+  for (const command of commands) {
+    execSync(command, {
+      stdio: 'inherit',
+      env: {...process.env, IS_DEV: 'true'},
+    });
+  }
+}
+
+watch('src', {recursive: true}, rebuild);
+initialBuild();
diff --git a/packages/atomic/vitest.config.ts b/packages/atomic/vitest.config.ts
index 4b66ce4a8a2..03d41a8acf7 100644
--- a/packages/atomic/vitest.config.ts
+++ b/packages/atomic/vitest.config.ts
@@ -1,7 +1,16 @@
 import path from 'node:path';
 import {defineConfig} from 'vitest/config';
 
+const port = 63315;
+const resourceUrl = `http://localhost:${port}/`;
+
 export default defineConfig({
+  define: {
+    'import.meta.env.RESOURCE_URL': `"${resourceUrl}"`,
+  },
+  server: {
+    port: port,
+  },
   resolve: {
     alias: {
       '@': path.resolve(import.meta.dirname, './'),

From e3c68f3246f410f4c447ca0df5b619c076470bd6 Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Tue, 11 Feb 2025 09:46:46 -0500
Subject: [PATCH 03/12] revert watch

https://coveord.atlassian.net/browse/KIT-3944
---
 packages/atomic/scripts/watch.mjs | 37 -------------------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 packages/atomic/scripts/watch.mjs

diff --git a/packages/atomic/scripts/watch.mjs b/packages/atomic/scripts/watch.mjs
deleted file mode 100644
index 89b43f1ce78..00000000000
--- a/packages/atomic/scripts/watch.mjs
+++ /dev/null
@@ -1,37 +0,0 @@
-import {execSync} from 'node:child_process';
-import {watch} from 'node:fs';
-
-function initialBuild() {
-  const commands = [
-    'node --max_old_space_size=6144 ../../node_modules/@stencil/core/bin/stencil build --tsConfig tsconfig.stencil.json',
-    'node ./scripts/stencil-proxy.mjs',
-    'node ./scripts/build.mjs --config=tsconfig.lit.json',
-    'node ./scripts/process-css.mjs --config=tsconfig.lit.json',
-    'esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js',
-    'esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js',
-  ];
-  for (const command of commands) {
-    execSync(command, {
-      stdio: 'inherit',
-      env: {...process.env, IS_DEV: 'true'},
-    });
-  }
-}
-
-function rebuild() {
-  const commands = [
-    'node ./scripts/build.mjs --config=tsconfig.lit.json',
-    'node ./scripts/process-css.mjs --config=tsconfig.lit.json',
-    'esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js',
-    'esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js',
-  ];
-  for (const command of commands) {
-    execSync(command, {
-      stdio: 'inherit',
-      env: {...process.env, IS_DEV: 'true'},
-    });
-  }
-}
-
-watch('src', {recursive: true}, rebuild);
-initialBuild();

From 32e9623921faf695fdb1196e14717355dbcbcbe0 Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Thu, 13 Feb 2025 11:34:47 -0500
Subject: [PATCH 04/12] mock resourceUrl

https://coveord.atlassian.net/browse/KIT-3944
---
 packages/atomic/src/utils/__mocks__/resource-url.ts    | 1 +
 packages/atomic/src/utils/initialization-utils.spec.ts | 5 +++++
 packages/atomic/src/utils/resource-url.ts              | 5 +++++
 packages/atomic/src/utils/utils.ts                     | 3 ++-
 4 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 packages/atomic/src/utils/__mocks__/resource-url.ts
 create mode 100644 packages/atomic/src/utils/resource-url.ts

diff --git a/packages/atomic/src/utils/__mocks__/resource-url.ts b/packages/atomic/src/utils/__mocks__/resource-url.ts
new file mode 100644
index 00000000000..f57eb643649
--- /dev/null
+++ b/packages/atomic/src/utils/__mocks__/resource-url.ts
@@ -0,0 +1 @@
+export const getResourceUrl = () => undefined;
diff --git a/packages/atomic/src/utils/initialization-utils.spec.ts b/packages/atomic/src/utils/initialization-utils.spec.ts
index eb11888b005..150603df8f3 100644
--- a/packages/atomic/src/utils/initialization-utils.spec.ts
+++ b/packages/atomic/src/utils/initialization-utils.spec.ts
@@ -15,6 +15,11 @@ import {
   MissingInterfaceParentError,
 } from './initialization-utils';
 
+/* eslint-disable prettier/prettier */
+// TODO: get rid of the mock once no longer running stencil tests
+// It's important that this jest.mock is called before the imports for stencil tests.
+jest.mock('./resource-url');
+
 jest.mock('./replace-breakpoint.ts', () => ({
   ...jest.requireActual('./replace-breakpoint.ts'),
   updateBreakpoints: () => {},
diff --git a/packages/atomic/src/utils/resource-url.ts b/packages/atomic/src/utils/resource-url.ts
new file mode 100644
index 00000000000..9cb1034834c
--- /dev/null
+++ b/packages/atomic/src/utils/resource-url.ts
@@ -0,0 +1,5 @@
+// TODO: get rid of the mock once no longer running stencil tests
+
+// import.meta is an ESM only feature and cannot be used in CJS.
+// To avoid errors such as "SyntaxError: Cannot use 'import.meta' outside a module error" when running stencil tests, we need to mock this function in the tests.
+export const getResourceUrl = () => import.meta.env?.RESOURCE_URL;
diff --git a/packages/atomic/src/utils/utils.ts b/packages/atomic/src/utils/utils.ts
index 5bedab8c648..ae9a7723467 100644
--- a/packages/atomic/src/utils/utils.ts
+++ b/packages/atomic/src/utils/utils.ts
@@ -1,5 +1,6 @@
 import {NODE_TYPES} from '@stencil/core/mock-doc';
 import DOMPurify from 'dompurify';
+import {getResourceUrl} from './resource-url';
 
 /**
  * Returns a function that can be executed only once
@@ -84,7 +85,7 @@ export function containsVisualElement(node: Node) {
 }
 
 export function getAssetPath(path: string): string {
-  const resourceUrl = import.meta.env?.RESOURCE_URL;
+  const resourceUrl = getResourceUrl();
   const baseUrl =
     resourceUrl !== undefined
       ? new URL('./', resourceUrl).href

From f30ea5243e1a266188f8e613c5311a446cf11af3 Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Thu, 13 Feb 2025 11:35:06 -0500
Subject: [PATCH 05/12] add mock

https://coveord.atlassian.net/browse/KIT-3944
---
 .../components/search/atomic-layout/search-layout.spec.ts    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/atomic/src/components/search/atomic-layout/search-layout.spec.ts b/packages/atomic/src/components/search/atomic-layout/search-layout.spec.ts
index 337f3ce2b21..fe8eebd6998 100644
--- a/packages/atomic/src/components/search/atomic-layout/search-layout.spec.ts
+++ b/packages/atomic/src/components/search/atomic-layout/search-layout.spec.ts
@@ -3,6 +3,11 @@ import {AtomicLayoutSection} from '../../common/atomic-layout-section/atomic-lay
 import {AtomicSearchLayout} from './atomic-search-layout';
 import {buildSearchLayout} from './search-layout';
 
+/* eslint-disable prettier/prettier */
+// TODO: get rid of the mock once no longer running stencil tests
+// It's important that this jest.mock is called before the imports for stencil tests.
+jest.mock('../../../utils/resource-url');
+
 describe('Search Layout', () => {
   describe('#buildSearchLayout', () => {
     async function getSearchLayout(html: string) {

From 628c157debe0ae25a7eb8e4dcc4ae7adf1b18e35 Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Thu, 13 Feb 2025 13:04:30 -0500
Subject: [PATCH 06/12] Update packages/atomic/scripts/build.mjs

Co-authored-by: Louis Bompart <lbompart@coveo.com>
---
 packages/atomic/scripts/build.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/atomic/scripts/build.mjs b/packages/atomic/scripts/build.mjs
index 24246a41857..7747a384b1f 100644
--- a/packages/atomic/scripts/build.mjs
+++ b/packages/atomic/scripts/build.mjs
@@ -23,7 +23,7 @@ const isCDN = process.env.DEPLOYMENT_ENVIRONMENT === 'CDN';
 const transformers = [
   svgTransformer,
   pathTransformer,
-  ...[isCDN ? resourceUrlTransformer : null].filter(Boolean),
+  ...(isCDN ? [resourceUrlTransformer] : []),
 ];
 
 function loadTsConfig(configPath) {

From b85f5e18026372e2099203d8755fc19b06f7b9d1 Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Fri, 14 Feb 2025 10:11:54 -0500
Subject: [PATCH 07/12] move mock in setup

https://coveord.atlassian.net/browse/KIT-3944
---
 packages/atomic/jest/setup.cjs                               | 2 ++
 .../components/search/atomic-layout/search-layout.spec.ts    | 5 -----
 packages/atomic/src/utils/initialization-utils.spec.ts       | 5 -----
 3 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/atomic/jest/setup.cjs b/packages/atomic/jest/setup.cjs
index ece895386e3..52ab8bb9702 100644
--- a/packages/atomic/jest/setup.cjs
+++ b/packages/atomic/jest/setup.cjs
@@ -1,4 +1,6 @@
 module.exports = async () => {
   // Mocking the ShadowRoot class to avoid errors in tests
   globalThis.ShadowRoot = class ShadowRoot {};
+  // TODO: get rid of the mock once no longer running stencil tests
+  jest.mock('../src/utils/resource-url');
 };
diff --git a/packages/atomic/src/components/search/atomic-layout/search-layout.spec.ts b/packages/atomic/src/components/search/atomic-layout/search-layout.spec.ts
index fe8eebd6998..337f3ce2b21 100644
--- a/packages/atomic/src/components/search/atomic-layout/search-layout.spec.ts
+++ b/packages/atomic/src/components/search/atomic-layout/search-layout.spec.ts
@@ -3,11 +3,6 @@ import {AtomicLayoutSection} from '../../common/atomic-layout-section/atomic-lay
 import {AtomicSearchLayout} from './atomic-search-layout';
 import {buildSearchLayout} from './search-layout';
 
-/* eslint-disable prettier/prettier */
-// TODO: get rid of the mock once no longer running stencil tests
-// It's important that this jest.mock is called before the imports for stencil tests.
-jest.mock('../../../utils/resource-url');
-
 describe('Search Layout', () => {
   describe('#buildSearchLayout', () => {
     async function getSearchLayout(html: string) {
diff --git a/packages/atomic/src/utils/initialization-utils.spec.ts b/packages/atomic/src/utils/initialization-utils.spec.ts
index 150603df8f3..eb11888b005 100644
--- a/packages/atomic/src/utils/initialization-utils.spec.ts
+++ b/packages/atomic/src/utils/initialization-utils.spec.ts
@@ -15,11 +15,6 @@ import {
   MissingInterfaceParentError,
 } from './initialization-utils';
 
-/* eslint-disable prettier/prettier */
-// TODO: get rid of the mock once no longer running stencil tests
-// It's important that this jest.mock is called before the imports for stencil tests.
-jest.mock('./resource-url');
-
 jest.mock('./replace-breakpoint.ts', () => ({
   ...jest.requireActual('./replace-breakpoint.ts'),
   updateBreakpoints: () => {},

From d6f69ba8cf7cef6535da366312b09a53d6abe208 Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Wed, 19 Feb 2025 09:23:37 -0500
Subject: [PATCH 08/12] exit on error

https://coveord.atlassian.net/browse/KIT-3944
---
 packages/atomic/scripts/build.mjs | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/atomic/scripts/build.mjs b/packages/atomic/scripts/build.mjs
index 7747a384b1f..0e7caa559a0 100644
--- a/packages/atomic/scripts/build.mjs
+++ b/packages/atomic/scripts/build.mjs
@@ -1,4 +1,5 @@
-import {dirname, basename} from 'path';
+import chalk from 'chalk';
+import {dirname, basename, relative} from 'path';
 import {argv} from 'process';
 import {
   readConfigFile,
@@ -8,6 +9,7 @@ import {
   getPreEmitDiagnostics,
   createProgram,
   flattenDiagnosticMessageText,
+  DiagnosticCategory,
 } from 'typescript';
 import resourceUrlTransformer from './asset-path-transformer.mjs';
 import pathTransformer from './path-transform.mjs';
@@ -68,7 +70,10 @@ function emit(program) {
  * Info: https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#a-minimal-compiler
  */
 function compileWithTransformer() {
-  console.log('Using tsconfig:', basename(tsConfigPath));
+  console.log(
+    chalk.blue('Using tsconfig:'),
+    chalk.green(basename(tsConfigPath))
+  );
   const {options, fileNames} = loadTsConfig(tsConfigPath);
   const program = createProgram(fileNames, options);
   const emitResult = emit(program);
@@ -77,6 +82,8 @@ function compileWithTransformer() {
     emitResult.diagnostics
   );
 
+  let hasError = false;
+
   allDiagnostics.forEach((diagnostic) => {
     if (diagnostic.file) {
       const {line, character} = getLineAndCharacterOfPosition(
@@ -89,14 +96,20 @@ function compileWithTransformer() {
       );
 
       console.log(
-        `${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`
+        `${chalk.cyan(relative(process.cwd(), diagnostic.file.fileName))}:${chalk.yellow(line + 1)}:${chalk.yellow(character + 1)} - ${chalk.red('error')} ${chalk.gray(message)}`
       );
     } else {
-      console.error(flattenDiagnosticMessageText(diagnostic.messageText, '\n'));
+      console.error(
+        chalk.red(flattenDiagnosticMessageText(diagnostic.messageText, '\n'))
+      );
+    }
+
+    if (diagnostic.category === DiagnosticCategory.Error) {
+      hasError = true;
     }
   });
 
-  let exitCode = emitResult.emitSkipped ? 1 : 0;
+  let exitCode = emitResult.emitSkipped || hasError ? 1 : 0;
   console.log(`Process exiting with code '${exitCode}'.`);
   process.exit(exitCode);
 }

From b6238f9a9aff871c00ee47885a43cfe98c6bf820 Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Wed, 19 Feb 2025 09:40:28 -0500
Subject: [PATCH 09/12] update tsconfig

https://coveord.atlassian.net/browse/KIT-3944
---
 packages/atomic/src/types/node.d.ts | 8 +++++---
 packages/atomic/tsconfig.lit.json   | 3 ++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/atomic/src/types/node.d.ts b/packages/atomic/src/types/node.d.ts
index dfdf14c889c..fc95af0c1ad 100644
--- a/packages/atomic/src/types/node.d.ts
+++ b/packages/atomic/src/types/node.d.ts
@@ -1,5 +1,7 @@
+interface ImportMetaEnv {
+  readonly RESOURCE_URL: string;
+}
+
 interface ImportMeta {
-  env: {
-    RESOURCE_URL?: string;
-  };
+  readonly env: ImportMetaEnv;
 }
diff --git a/packages/atomic/tsconfig.lit.json b/packages/atomic/tsconfig.lit.json
index e29793360e4..ebbe8c71b50 100644
--- a/packages/atomic/tsconfig.lit.json
+++ b/packages/atomic/tsconfig.lit.json
@@ -12,7 +12,8 @@
     "outDir": "dist/atomic/components",
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "typeRoots": ["node_modules/@types", "src/types"]
   },
 
   "files": [

From 033fbb78be2fd825d3a220fdd2b841b7ee850132 Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Thu, 20 Feb 2025 14:09:35 -0500
Subject: [PATCH 10/12] update storybook staticDir serving

https://coveord.atlassian.net/browse/KIT-3944
---
 packages/atomic/.storybook/main.mts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/atomic/.storybook/main.mts b/packages/atomic/.storybook/main.mts
index 7f0c30de951..39c9aa0a4e7 100644
--- a/packages/atomic/.storybook/main.mts
+++ b/packages/atomic/.storybook/main.mts
@@ -45,8 +45,8 @@ const isCDN = process.env.DEPLOYMENT_ENVIRONMENT === 'CDN';
 const config: StorybookConfig = {
   stories: ['../src/**/*.new.stories.tsx', '../src/**/*.mdx'],
   staticDirs: [
-    {from: '../dist/atomic', to: './assets'},
-    {from: '../dist/atomic/lang', to: './lang'},
+    {from: '../dist/atomic/assets', to: '/assets'},
+    {from: '../dist/atomic/lang', to: '/lang'},
   ],
   addons: [
     '@storybook/addon-essentials',

From 69213d72aa4fe972f1d01fc15daddc7b42535fd5 Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Fri, 21 Feb 2025 13:47:48 -0500
Subject: [PATCH 11/12] prettier

https://coveord.atlassian.net/browse/KIT-3944
---
 packages/atomic/src/themes/accessible.css              | 5 +++--
 packages/atomic/src/themes/coveo.css                   | 5 +++--
 packages/atomic/src/utils/coveo.tw.css                 | 5 +++--
 packages/samples/headless-commerce-react/src/index.css | 5 +++--
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/atomic/src/themes/accessible.css b/packages/atomic/src/themes/accessible.css
index c0e90b50042..12f1f6f6c0a 100644
--- a/packages/atomic/src/themes/accessible.css
+++ b/packages/atomic/src/themes/accessible.css
@@ -36,8 +36,9 @@
   --atomic-border-radius-xl: 1rem;
 
   /* Font */
-  --atomic-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica,
-    Ubuntu, roboto, noto, arial, sans-serif; /* Following https://systemfontstack.com/ */
+  --atomic-font-family:
+    -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto,
+    arial, sans-serif; /* Following https://systemfontstack.com/ */
   --atomic-font-normal: 400;
   --atomic-font-bold: 700;
 
diff --git a/packages/atomic/src/themes/coveo.css b/packages/atomic/src/themes/coveo.css
index a86cad8052d..fcbcf7bef60 100644
--- a/packages/atomic/src/themes/coveo.css
+++ b/packages/atomic/src/themes/coveo.css
@@ -32,8 +32,9 @@
   --atomic-border-radius-xl: 1rem;
 
   /* Font */
-  --atomic-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica,
-    Ubuntu, roboto, noto, arial, sans-serif; /* Following https://systemfontstack.com/ */
+  --atomic-font-family:
+    -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto,
+    arial, sans-serif; /* Following https://systemfontstack.com/ */
   --atomic-font-normal: 400;
   --atomic-font-bold: 700;
 
diff --git a/packages/atomic/src/utils/coveo.tw.css b/packages/atomic/src/utils/coveo.tw.css
index 0ec565c3770..b5a1fda5ac8 100644
--- a/packages/atomic/src/utils/coveo.tw.css
+++ b/packages/atomic/src/utils/coveo.tw.css
@@ -32,8 +32,9 @@
   --atomic-border-radius-xl: 1rem;
 
   /* Font */
-  --atomic-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica,
-    Ubuntu, roboto, noto, arial, sans-serif; /* Following https://systemfontstack.com/ */
+  --atomic-font-family:
+    -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto,
+    arial, sans-serif; /* Following https://systemfontstack.com/ */
   --atomic-font-normal: 400;
   --atomic-font-bold: 700;
 
diff --git a/packages/samples/headless-commerce-react/src/index.css b/packages/samples/headless-commerce-react/src/index.css
index afd0f7965af..a6546b5f6ec 100644
--- a/packages/samples/headless-commerce-react/src/index.css
+++ b/packages/samples/headless-commerce-react/src/index.css
@@ -1,7 +1,8 @@
 body {
   margin: 1rem;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

From ff120211485e357610afb28955718180947d0952 Mon Sep 17 00:00:00 2001
From: ylakhdar <ylakhdar@coveo.com>
Date: Mon, 24 Feb 2025 14:40:51 -0500
Subject: [PATCH 12/12] staticDirs for localhost

https://coveord.atlassian.net/browse/KIT-3944
---
 packages/atomic/.storybook/main.mts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/atomic/.storybook/main.mts b/packages/atomic/.storybook/main.mts
index 508ead34866..21349e5fe80 100644
--- a/packages/atomic/.storybook/main.mts
+++ b/packages/atomic/.storybook/main.mts
@@ -47,6 +47,8 @@ const config: StorybookConfig = {
   staticDirs: [
     {from: '../dist/atomic/assets', to: '/assets'},
     {from: '../dist/atomic/lang', to: '/lang'},
+    {from: '../dist/atomic', to: './assets'},
+    {from: '../dist/atomic/lang', to: './lang'},
   ],
   addons: [
     '@storybook/addon-essentials',