chore(atomic): various utils fixes (#4878)

storybook: add mdx support

storybook-dev: sync up lang & assets after a watch cycle

dev: ignore e2e from watch cycle

lit: add barebone base page object

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

---------

Co-authored-by: Alex Prudhomme <[email protected]>
Co-authored-by: GitHub Actions Bot <>

package.json

@@ -71,7 +71,8 @@
     "rimraf": "6.0.1",
     "semver": "7.6.3",
     "typescript": "5.5.4",
-    "vite": "5.4.11"
+    "vite": "5.4.11",
+    "@vitest/browser": "2.1.8"
   },
   "overrides": {
     "@coveo/release": {

packages/atomic/.storybook/main.mts

@@ -35,7 +35,7 @@ const externalizeDependencies: PluginImpl = () => {
 const isCDN = process.env.DEPLOYMENT_ENVIRONMENT === 'CDN';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.new.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: ['../src/**/*.new.stories.tsx', '../src/**/*.mdx'],
   staticDirs: [
     {from: '../dist/atomic', to: './assets'},
     {from: '../dist/atomic/lang', to: './lang'},

packages/atomic/playwright-utils/lit-base-page-object.ts

@@ -0,0 +1,82 @@
+import type {Page} from '@playwright/test';
+import {buildArgsParam} from '@storybook/router';
+
+type Component = Record<string, unknown>;
+
+export class BasePageObject {
+  constructor(
+    public page: Page,
+    public tag: string
+  ) {}
+
+  get urlRoot() {
+    return 'http://localhost:4400/iframe.html';
+  }
+
+  get hydrated() {
+    return this.page.locator(`${this.tag}`);
+  }
+
+  async load({
+    args,
+    story = 'default',
+  }: {args?: Record<string, unknown>; story?: string} = {}) {
+    if (args) {
+      await this.page.goto(
+        `${this.urlRoot}?id=${this.tag}--${story}&args=${buildArgsParam(undefined, this.camelToKebab(args))}`
+      );
+    } else {
+      await this.page.goto(`${this.urlRoot}?id=${this.tag}--${story}`);
+    }
+  }
+
+  async noProducts() {
+    await this.page.route('**/commerce/v2/search', async (route) => {
+      const response = await route.fetch();
+      const body = await response.json();
+      body.products = [];
+      if (body.pagination) {
+        body.pagination.totalEntries = 0;
+        body.pagination.totalPages = 0;
+      }
+      body.facets = [];
+      await route.fulfill({
+        response,
+        json: body,
+      });
+    });
+
+    return this;
+  }
+
+  async noRecommendations() {
+    return this.nRecommendations(0);
+  }
+
+  async nRecommendations(numberOfRecommendations?: number) {
+    await this.page.route('**/commerce/v2/recommendations', async (route) => {
+      const response = await route.fetch();
+      const body = await response.json();
+      if (numberOfRecommendations !== undefined) {
+        body['products'] = body['products'].slice(0, numberOfRecommendations);
+      }
+      await route.fulfill({
+        response,
+        json: body,
+      });
+    });
+
+    return this;
+  }
+
+  private camelToKebab(args: Component) {
+    const toKebab: Record<string, unknown> = {};
+    Object.entries(args as Record<string, unknown>).forEach(([key, value]) => {
+      toKebab[
+        `attributes-${key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()}`
+      ] = value;
+    });
+
+    return toKebab;
+  }
+}

packages/atomic/scripts/watch.mjs

@@ -1,7 +1,29 @@
 import {execSync} from 'node:child_process';
-import {watch} from 'node:fs';
+import {watch, cpSync} from 'node:fs';
+import {createServer} from 'node:http';
 
-function rebuild() {
+function checkPort(port) {
+  return new Promise((resolve, reject) => {
+    const server = createServer();
+    server.once('error', (err) => {
+      if (err.code === 'EADDRINUSE') {
+        resolve(true);
+      } else {
+        reject(err);
+      }
+    });
+    server.once('listening', () => {
+      server.close();
+      resolve(false);
+    });
+    server.listen(port);
+  });
+}
+
+async function rebuild(event, fileName) {
+  if (fileName.contains('/e2e/') || fileName.contains('/.e2e.')) {
+    return;
+  }
   const commands = [
     'node --max_old_space_size=6144 ../../node_modules/@stencil/core/bin/stencil build',
     'node ./scripts/stencil-proxy.mjs',
@@ -16,6 +38,10 @@ function rebuild() {
       env: {...process.env, IS_DEV: 'true'},
     });
   }
+  if (await checkPort(4400)) {
+    cpSync('./dist/atomic', './dist-storybook/assets', {recursive: true});
+    cpSync('./dist/atomic/lang', './dist-storybook/lang', {recursive: true});
+  }
 }
 
 watch('src', {recursive: true}, rebuild);