chore(atomic): migrate atomic-result-list (#6189)

Co-authored-by: developer-experience-bot[bot] <91079284+developer-experience-bot[bot]@users.noreply.github.com>

Author: fpbrault

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

@@ -65,6 +65,7 @@ AtomicProductText,
 AtomicQuerySummary,
 AtomicResult,
 AtomicResultChildrenTemplate,
+AtomicResultList,
 AtomicResultSectionActions,
 AtomicResultSectionBadges,
 AtomicResultSectionBottomMetadata,
@@ -124,7 +125,6 @@ AtomicResultHtml,
 AtomicResultIcon,
 AtomicResultImage,
 AtomicResultLink,
-AtomicResultList,
 AtomicResultLocalizedText,
 AtomicResultMultiValueText,
 AtomicResultNumber,
@@ -210,6 +210,7 @@ AtomicProductText,
 AtomicQuerySummary,
 AtomicResult,
 AtomicResultChildrenTemplate,
+AtomicResultList,
 AtomicResultSectionActions,
 AtomicResultSectionBadges,
 AtomicResultSectionBottomMetadata,
@@ -269,7 +270,6 @@ AtomicResultHtml,
 AtomicResultIcon,
 AtomicResultImage,
 AtomicResultLink,
-AtomicResultList,
 AtomicResultLocalizedText,
 AtomicResultMultiValueText,
 AtomicResultNumber,

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -1,22 +1,52 @@
-import type {JSX as AtomicJSX} from '@coveo/atomic';
+import type {AtomicResultList} from '@coveo/atomic/components';
+import type {
+  ItemDisplayDensity,
+  ItemDisplayImageSize,
+  ItemDisplayLayout,
+} from '@coveo/atomic/loader';
 import type {Result} from '@coveo/headless';
 import React, {type JSX, useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {renderToString} from 'react-dom/server';
-import {
-  AtomicResultLink,
-  AtomicResultList,
-} from '../stencil-generated/search/index.js';
+import {AtomicResultLink} from '../stencil-generated/search/index.js';
+import {AtomicResultList as LitAtomicResultList} from './components.js';
 
 interface Template {
   contentTemplate: JSX.Element;
   linkTemplate: JSX.Element;
 }
 
+interface AtomicResultListProps {
+  /**
+   * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
+   */
+  density?: ItemDisplayDensity;
+  /**
+   * The desired layout to use when displaying results. Layouts affect how many results to display per row and how visually distinct they are from each other.
+   */
+  display?: ItemDisplayLayout;
+  /**
+   * The expected size of the image displayed for results.
+   */
+  imageSize?: ItemDisplayImageSize;
+  /**
+   * The desired number of placeholders to display while the result list is loading.
+   */
+  numberOfPlaceholders?: number;
+}
+
+interface HTMLAtomicResultListElement extends AtomicResultList, HTMLElement {}
+
+// biome-ignore lint/correctness/noUnusedVariables: <>
+var HTMLAtomicResultListElement: {
+  prototype: HTMLAtomicResultListElement;
+  new (): HTMLAtomicResultListElement;
+};
+
 /**
  * The properties of the AtomicResultList component
  */
-interface WrapperProps extends AtomicJSX.AtomicResultList {
+interface WrapperProps extends AtomicResultListProps {
   /**
    * A template function that takes a result item and outputs its target rendering as a JSX element.
    * It can be used to conditionally render different type of result templates based on the properties of each result.
@@ -53,7 +83,7 @@ export const ResultListWrapper: React.FC<WrapperProps> = (props) => {
       return renderToString(templateResult);
     });
   }, [otherProps.display, template]);
-  return <AtomicResultList ref={resultListRef} {...otherProps} />;
+  return <LitAtomicResultList ref={resultListRef} {...otherProps} />;
 };
 
 const hasLinkTemplate = (

packages/atomic-react/src/components/search/ResultListWrapper.tsx

@@ -11,6 +11,7 @@ import {
   AtomicQuerySummary as LitAtomicQuerySummary,
   AtomicResult as LitAtomicResult,
   AtomicResultChildrenTemplate as LitAtomicResultChildrenTemplate,
+  AtomicResultList as LitAtomicResultList,
   AtomicResultSectionActions as LitAtomicResultSectionActions,
   AtomicResultSectionBadges as LitAtomicResultSectionBadges,
   AtomicResultSectionBottomMetadata as LitAtomicResultSectionBottomMetadata,
@@ -102,6 +103,12 @@ export const AtomicResultChildrenTemplate = createComponent({
   elementClass: LitAtomicResultChildrenTemplate,
 });
 
+export const AtomicResultList = createComponent({
+  tagName: 'atomic-result-list',
+  react: React,
+  elementClass: LitAtomicResultList,
+});
+
 export const AtomicResultSectionActions = createComponent({
   tagName: 'atomic-result-section-actions',
   react: React,

packages/atomic-react/src/components/search/components.ts

@@ -48,7 +48,6 @@ export const AtomicResultHtml = /*@__PURE__*/createReactComponent<JSX.AtomicResu
 export const AtomicResultIcon = /*@__PURE__*/createReactComponent<JSX.AtomicResultIcon, HTMLAtomicResultIconElement>('atomic-result-icon');
 export const AtomicResultImage = /*@__PURE__*/createReactComponent<JSX.AtomicResultImage, HTMLAtomicResultImageElement>('atomic-result-image');
 export const AtomicResultLink = /*@__PURE__*/createReactComponent<JSX.AtomicResultLink, HTMLAtomicResultLinkElement>('atomic-result-link');
-export const AtomicResultList = /*@__PURE__*/createReactComponent<JSX.AtomicResultList, HTMLAtomicResultListElement>('atomic-result-list');
 export const AtomicResultLocalizedText = /*@__PURE__*/createReactComponent<JSX.AtomicResultLocalizedText, HTMLAtomicResultLocalizedTextElement>('atomic-result-localized-text');
 export const AtomicResultMultiValueText = /*@__PURE__*/createReactComponent<JSX.AtomicResultMultiValueText, HTMLAtomicResultMultiValueTextElement>('atomic-result-multi-value-text');
 export const AtomicResultNumber = /*@__PURE__*/createReactComponent<JSX.AtomicResultNumber, HTMLAtomicResultNumberElement>('atomic-result-number');

packages/atomic-react/src/components/stencil-generated/search/index.ts

@@ -1780,36 +1780,6 @@ export namespace Components {
          */
         "hrefTemplate"?: string;
     }
-    /**
-     * The `atomic-result-list` component is responsible for displaying query results by applying one or more result templates.
-     */
-    interface AtomicResultList {
-        /**
-          * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
-         */
-        "density": ItemDisplayDensity;
-        /**
-          * The desired layout to use when displaying results. Layouts affect how many results to display per row and how visually distinct they are from each other.
-         */
-        "display": ItemDisplayLayout;
-        /**
-          * The expected size of the image displayed in the results.
-         */
-        "imageSize": ItemDisplayImageSize;
-        /**
-          * Sets a rendering function to bypass the standard HTML template mechanism for rendering results. You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.  Do not use this method if you integrate Atomic in a plain HTML deployment.
-          * @param resultRenderingFunction
-         */
-        "setRenderFunction": (resultRenderingFunction: ItemRenderingFunction) => Promise<void>;
-        /**
-          * The tabs on which this result list must not be displayed. This property should not be used at the same time as `tabs-included`.  Set this property as a stringified JSON array, e.g., ```html  <atomic-result-list tabs-excluded='["tabIDA", "tabIDB"]'></atomic-result-list> ``` If you don't set this property, the result list can be displayed on any tab. Otherwise, the result list won't be displayed on any of the specified tabs.
-         */
-        "tabsExcluded": string[] | string;
-        /**
-          * The tabs on which the result list can be displayed. This property should not be used at the same time as `tabs-excluded`.  Set this property as a stringified JSON array, e.g., ```html  <atomic-result-list tabs-included='["tabIDA", "tabIDB"]'></atomic-result-list snippet> ``` If you don't set this property, the result list can be displayed on any tab. Otherwise, the result list can only be displayed on the specified tabs.
-         */
-        "tabsIncluded": string[] | string;
-    }
     /**
      * The `atomic-result-localized-text` component renders a target i18n localized string using the values of a target field.
      * Given this i18n configuration:
@@ -3270,15 +3240,6 @@ declare global {
         prototype: HTMLAtomicResultLinkElement;
         new (): HTMLAtomicResultLinkElement;
     };
-    /**
-     * The `atomic-result-list` component is responsible for displaying query results by applying one or more result templates.
-     */
-    interface HTMLAtomicResultListElement extends Components.AtomicResultList, HTMLStencilElement {
-    }
-    var HTMLAtomicResultListElement: {
-        prototype: HTMLAtomicResultListElement;
-        new (): HTMLAtomicResultListElement;
-    };
     /**
      * The `atomic-result-localized-text` component renders a target i18n localized string using the values of a target field.
      * Given this i18n configuration:
@@ -3755,7 +3716,6 @@ declare global {
         "atomic-result-icon": HTMLAtomicResultIconElement;
         "atomic-result-image": HTMLAtomicResultImageElement;
         "atomic-result-link": HTMLAtomicResultLinkElement;
-        "atomic-result-list": HTMLAtomicResultListElement;
         "atomic-result-localized-text": HTMLAtomicResultLocalizedTextElement;
         "atomic-result-multi-value-text": HTMLAtomicResultMultiValueTextElement;
         "atomic-result-number": HTMLAtomicResultNumberElement;
@@ -5474,31 +5434,6 @@ declare namespace LocalJSX {
          */
         "hrefTemplate"?: string;
     }
-    /**
-     * The `atomic-result-list` component is responsible for displaying query results by applying one or more result templates.
-     */
-    interface AtomicResultList {
-        /**
-          * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
-         */
-        "density"?: ItemDisplayDensity;
-        /**
-          * The desired layout to use when displaying results. Layouts affect how many results to display per row and how visually distinct they are from each other.
-         */
-        "display"?: ItemDisplayLayout;
-        /**
-          * The expected size of the image displayed in the results.
-         */
-        "imageSize"?: ItemDisplayImageSize;
-        /**
-          * The tabs on which this result list must not be displayed. This property should not be used at the same time as `tabs-included`.  Set this property as a stringified JSON array, e.g., ```html  <atomic-result-list tabs-excluded='["tabIDA", "tabIDB"]'></atomic-result-list> ``` If you don't set this property, the result list can be displayed on any tab. Otherwise, the result list won't be displayed on any of the specified tabs.
-         */
-        "tabsExcluded"?: string[] | string;
-        /**
-          * The tabs on which the result list can be displayed. This property should not be used at the same time as `tabs-excluded`.  Set this property as a stringified JSON array, e.g., ```html  <atomic-result-list tabs-included='["tabIDA", "tabIDB"]'></atomic-result-list snippet> ``` If you don't set this property, the result list can be displayed on any tab. Otherwise, the result list can only be displayed on the specified tabs.
-         */
-        "tabsIncluded"?: string[] | string;
-    }
     /**
      * The `atomic-result-localized-text` component renders a target i18n localized string using the values of a target field.
      * Given this i18n configuration:
@@ -6145,7 +6080,6 @@ declare namespace LocalJSX {
         "atomic-result-icon": AtomicResultIcon;
         "atomic-result-image": AtomicResultImage;
         "atomic-result-link": AtomicResultLink;
-        "atomic-result-list": AtomicResultList;
         "atomic-result-localized-text": AtomicResultLocalizedText;
         "atomic-result-multi-value-text": AtomicResultMultiValueText;
         "atomic-result-number": AtomicResultNumber;
@@ -6484,10 +6418,6 @@ declare module "@stencil/core" {
              * The `atomic-result-link` component automatically transforms a search result title into a clickable link that points to the original item.
              */
             "atomic-result-link": LocalJSX.AtomicResultLink & JSXBase.HTMLAttributes<HTMLAtomicResultLinkElement>;
-            /**
-             * The `atomic-result-list` component is responsible for displaying query results by applying one or more result templates.
-             */
-            "atomic-result-list": LocalJSX.AtomicResultList & JSXBase.HTMLAttributes<HTMLAtomicResultListElement>;
             /**
              * The `atomic-result-localized-text` component renders a target i18n localized string using the values of a target field.
              * Given this i18n configuration:

packages/atomic/cypress/e2e/result-list/grid-result-list.cypress.ts

@@ -42,7 +42,7 @@ import {
   type ItemDisplayDensity,
   type ItemDisplayImageSize,
   type ItemDisplayLayout,
-} from '@/src/components/common/layout/display-options';
+} from '@/src/components/common/layout/item-layout-utils';
 import {bindStateToController} from '@/src/decorators/bind-state';
 import {bindingGuard} from '@/src/decorators/binding-guard';
 import {bindings} from '@/src/decorators/bindings';
@@ -166,20 +166,20 @@ export class AtomicCommerceProductList
    * product, and the font sizes of different parts in a product.
    */
   @property({reflect: true, type: String})
-  density: ItemDisplayDensity = 'normal';
+  public density: ItemDisplayDensity = 'normal';
 
   /**
    * The desired layout to use when displaying products. Layouts affect how many products to display per row and how
    * visually distinct they are from each other.
    */
   @property({reflect: true, type: String})
-  display: ItemDisplayLayout = 'grid';
+  public display: ItemDisplayLayout = 'grid';
 
   /**
    * The expected size of the image displayed for products.
    */
   @property({reflect: true, attribute: 'image-size', type: String})
-  imageSize: ItemDisplayImageSize = 'small';
+  public imageSize: ItemDisplayImageSize = 'small';
 
   /**
    * The desired number of placeholders to display while the product list is loading.