refactor(story): fold render-template into render-component (#4236)

https://coveord.atlassian.net/browse/KIT-3447 Review by commit :) --------- Co-authored-by: Frederic Beaudoin <[email protected]> Co-authored-by: GitHub Actions Bot <> Co-authored-by: Alex Prudhomme <[email protected]>
coveo · Aug 6, 2024 · 4c2b08f · 4c2b08f
1 parent bc2f42a
commit 4c2b08f
Show file tree

Hide file tree

Showing 97 changed files with 518 additions and 433 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -137,5 +137,6 @@
   "dependencies": {
     "upgrade": "1.1.0"
   },
-  "version": "0.0.0"
+  "version": "0.0.0",
+  "packageManager": "[email protected]"
 }
diff --git a/packages/atomic-hosted-page/package.json b/packages/atomic-hosted-page/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "@coveo/bueno": "0.46.1",
     "@coveo/headless": "2.75.0",
-    "@stencil/core": "4.19.2"
+    "@stencil/core": "4.20.0"
   },
   "devDependencies": {
     "@coveo/release": "1.0.0",

diff --git a/packages/atomic/package.json b/packages/atomic/package.json
@@ -50,8 +50,8 @@
     "@coveo/bueno": "0.46.1",
     "@popperjs/core": "^2.11.6",
     "@salesforce-ux/design-system": "^2.16.1",
-    "@stencil/core": "4.19.2",
     "@stencil/store": "2.0.16",
+    "core-js": "3.37.1",
     "dayjs": "1.11.12",
     "dompurify": "3.1.6",
     "escape-html": "1.0.3",
@@ -79,6 +79,7 @@
     "@rollup/plugin-replace": "5.0.7",
     "@stencil-community/postcss": "2.2.0",
     "@stencil/angular-output-target": "0.8.4",
+    "@stencil/core": "4.20.0",
     "@stencil/react-output-target": "0.5.3",
     "@storybook/addon-a11y": "8.1.11",
     "@storybook/addon-essentials": "8.1.11",
@@ -96,6 +97,7 @@
     "@swc-node/register": "~1.10.0",
     "@swc/core": "~1.7.0",
     "@swc/helpers": "~0.5.2",
+    "@types/core-js": "2.5.8",
     "@types/dompurify": "3.0.5",
     "@types/escape-html": "1.0.4",
     "@types/jest": "29.5.12",
@@ -132,7 +134,7 @@
     "tailwindcss": "3.4.7",
     "ts-node": "10.9.2",
     "tslib": "^2.3.0",
-    "typescript": "5.4.5",
+    "typescript": "5.5.4",
     "vite": "5.3.5",
     "vite-plugin-cem": "0.8.1",
     "wait-on": "7.2.0"

diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -2057,7 +2057,11 @@ export namespace Components {
         "imageSize"?: Omit<ItemDisplayImageSize, 'icon'>;
     }
     /**
-     * @alpha 
+     * @alpha * A product template determines the format of the query results, depending on the conditions that are defined for each template.
+     * A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
+     * **Note:** Any `<script>` tags that are defined inside a `<template>` element will not be executed when the products are being rendered.
+     * @MapProp name: mustMatch;attr: must-match;docs: The field and values that must be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
+     * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that must not be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
      */
     interface AtomicProductTemplate {
         /**
@@ -4687,7 +4691,11 @@ declare global {
         new (): HTMLAtomicProductSectionVisualElement;
     };
     /**
-     * @alpha 
+     * @alpha * A product template determines the format of the query results, depending on the conditions that are defined for each template.
+     * A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
+     * **Note:** Any `<script>` tags that are defined inside a `<template>` element will not be executed when the products are being rendered.
+     * @MapProp name: mustMatch;attr: must-match;docs: The field and values that must be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
+     * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that must not be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
      */
     interface HTMLAtomicProductTemplateElement extends Components.AtomicProductTemplate, HTMLStencilElement {
     }
@@ -7628,7 +7636,11 @@ declare namespace LocalJSX {
         "imageSize"?: Omit<ItemDisplayImageSize, 'icon'>;
     }
     /**
-     * @alpha 
+     * @alpha * A product template determines the format of the query results, depending on the conditions that are defined for each template.
+     * A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
+     * **Note:** Any `<script>` tags that are defined inside a `<template>` element will not be executed when the products are being rendered.
+     * @MapProp name: mustMatch;attr: must-match;docs: The field and values that must be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
+     * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that must not be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
      */
     interface AtomicProductTemplate {
         /**
@@ -9535,7 +9547,11 @@ declare module "@stencil/core" {
             "atomic-product-section-name": LocalJSX.AtomicProductSectionName & JSXBase.HTMLAttributes<HTMLAtomicProductSectionNameElement>;
             "atomic-product-section-visual": LocalJSX.AtomicProductSectionVisual & JSXBase.HTMLAttributes<HTMLAtomicProductSectionVisualElement>;
             /**
-             * @alpha 
+             * @alpha * A product template determines the format of the query results, depending on the conditions that are defined for each template.
+             * A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
+             * **Note:** Any `<script>` tags that are defined inside a `<template>` element will not be executed when the products are being rendered.
+             * @MapProp name: mustMatch;attr: must-match;docs: The field and values that must be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
+             * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that must not be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
              */
             "atomic-product-template": LocalJSX.AtomicProductTemplate & JSXBase.HTMLAttributes<HTMLAtomicProductTemplateElement>;
             "atomic-product-text": LocalJSX.AtomicProductText & JSXBase.HTMLAttributes<HTMLAtomicProductTextElement>;

diff --git a/...src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.new.stories.tsx b/...src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.new.stories.tsx
@@ -1,9 +1,9 @@
 import {
   playExecuteFirstSearch,
   wrapInCommerceInterface,
-} from '@coveo/atomic/storybookUtils/commerce-interface-wrapper';
-import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
-import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+} from '@coveo/atomic/storybookUtils/commerce/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
 import {
   CommerceEngineConfiguration,
   getSampleCommerceEngineConfiguration,

diff --git a/...c/components/commerce/atomic-commerce-interface/atomic-commerce-interface.new.stories.tsx b/...c/components/commerce/atomic-commerce-interface/atomic-commerce-interface.new.stories.tsx
@@ -1,5 +1,5 @@
-import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
-import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
 import {getSampleCommerceEngineConfiguration} from '@coveo/headless/commerce';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
 

diff --git a/...rce/atomic-commerce-load-more-products/atomic-commerce-load-more-products.new.stories.tsx b/...rce/atomic-commerce-load-more-products/atomic-commerce-load-more-products.new.stories.tsx
@@ -1,9 +1,9 @@
 import {
   playExecuteFirstSearch,
   wrapInCommerceInterface,
-} from '@coveo/atomic/storybookUtils/commerce-interface-wrapper';
-import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
-import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+} from '@coveo/atomic/storybookUtils/commerce/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
 import {html} from 'lit/static-html.js';
 

diff --git a/...mponents/commerce/atomic-commerce-no-products/atomic-commerce-no-products.new.stories.tsx b/...mponents/commerce/atomic-commerce-no-products/atomic-commerce-no-products.new.stories.tsx
@@ -1,9 +1,9 @@
 import {
   playExecuteFirstSearch,
   wrapInCommerceInterface,
-} from '@coveo/atomic/storybookUtils/commerce-interface-wrapper';
-import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
-import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+} from '@coveo/atomic/storybookUtils/commerce/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
 import {html} from 'lit/static-html.js';
 

diff --git a/...tomic/src/components/commerce/atomic-commerce-pager/atomic-commerce-pager.new.stories.tsx b/...tomic/src/components/commerce/atomic-commerce-pager/atomic-commerce-pager.new.stories.tsx
@@ -1,9 +1,9 @@
 import {
   playExecuteFirstSearch,
   wrapInCommerceInterface,
-} from '@coveo/atomic/storybookUtils/commerce-interface-wrapper';
-import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
-import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+} from '@coveo/atomic/storybookUtils/commerce/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
 
 const {decorator, play} = wrapInCommerceInterface({skipFirstSearch: true});

diff --git a/...onents/commerce/atomic-commerce-product-list/atomic-commerce-product-list.new.stories.tsx b/...onents/commerce/atomic-commerce-product-list/atomic-commerce-product-list.new.stories.tsx
@@ -1,9 +1,9 @@
 import {
   playExecuteFirstSearch,
   wrapInCommerceInterface,
-} from '@coveo/atomic/storybookUtils/commerce-interface-wrapper';
-import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
-import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+} from '@coveo/atomic/storybookUtils/commerce/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
 import {CommerceEngineConfiguration} from '@coveo/headless/dist/definitions/commerce.index';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
 import {html} from 'lit-html/static.js';

diff --git a/...merce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.new.stories.tsx b/...merce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.new.stories.tsx
@@ -1,6 +1,6 @@
-import {wrapInCommerceInterface} from '@coveo/atomic/storybookUtils/commerce-interface-wrapper';
-import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
-import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+import {wrapInCommerceInterface} from '@coveo/atomic/storybookUtils/commerce/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
 import {html} from 'lit/static-html.js';
 

diff --git a/...mponents/commerce/atomic-commerce-query-error/atomic-commerce-query-error.new.stories.tsx b/...mponents/commerce/atomic-commerce-query-error/atomic-commerce-query-error.new.stories.tsx
@@ -1,7 +1,7 @@
-import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
-import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+import {wrapInCommerceInterface} from '@coveo/atomic/storybookUtils/commerce/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
-import {wrapInCommerceInterface} from '../../../../storybookUtils/commerce-interface-wrapper';
 
 const {decorator, play} = wrapInCommerceInterface({
   engineConfig: {organizationId: 'invalid-organization-id'},

diff --git a/...ents/commerce/atomic-commerce-query-summary/atomic-commerce-query-summary.new.stories.tsx b/...ents/commerce/atomic-commerce-query-summary/atomic-commerce-query-summary.new.stories.tsx
@@ -1,6 +1,6 @@
-import {wrapInCommerceInterface} from '@coveo/atomic/storybookUtils/commerce-interface-wrapper';
-import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
-import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+import {wrapInCommerceInterface} from '@coveo/atomic/storybookUtils/commerce/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
 import {CommerceEngineConfiguration} from '@coveo/headless/commerce';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
 import {html} from 'lit/static-html.js';