chore(atomic): add interfaces for functional lit components

packages/atomic/src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.tsx

@@ -18,14 +18,14 @@ import {
   LocationFacetValue,
 } from '@coveo/headless/commerce';
 import {Component, h, State, Element, Prop} from '@stencil/core';
-import {FocusTargetController} from '../../../utils/accessibility-utils';
 import {parseDate} from '../../../utils/date-utils';
 import {getFieldValueCaption} from '../../../utils/field-utils';
 import {
   InitializableComponent,
   BindStateToController,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
+import {FocusTargetController} from '../../../utils/stencil-accessibility-utils';
 import {BreadcrumbButton} from '../../common/breadbox/breadcrumb-button';
 import {BreadcrumbClearAll} from '../../common/breadbox/breadcrumb-clear-all';
 import {BreadcrumbContainer} from '../../common/breadbox/breadcrumb-container';

packages/atomic/src/components/commerce/atomic-commerce-no-products/atomic-commerce-no-products.tsx

@@ -6,12 +6,12 @@ import {
   buildProductListing,
 } from '@coveo/headless/commerce';
 import {Component, State, h} from '@stencil/core';
-import {AriaLiveRegion} from '../../../utils/accessibility-utils';
 import {
   BindStateToController,
   InitializableComponent,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
+import {AriaLiveRegion} from '../../../utils/stencil-accessibility-utils';
 import {NoItemsContainer} from '../../common/no-items/container';
 import {NoItemsGuard} from '../../common/no-items/guard';
 import {MagnifyingGlass} from '../../common/no-items/magnifying-glass';

packages/atomic/src/components/commerce/atomic-commerce-pager/atomic-commerce-pager.tsx

@@ -10,12 +10,12 @@ import {
 import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core';
 import ArrowLeftIcon from '../../../images/arrow-left-rounded.svg';
 import ArrowRightIcon from '../../../images/arrow-right-rounded.svg';
-import {FocusTargetController} from '../../../utils/accessibility-utils';
 import {
   BindStateToController,
   InitializableComponent,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
+import {FocusTargetController} from '../../../utils/stencil-accessibility-utils';
 import {randomID} from '../../../utils/utils';
 import {createAppLoadedListener} from '../../common/interface/store';
 import {

packages/atomic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.tsx

@@ -19,12 +19,12 @@ import {
   State,
   h,
 } from '@stencil/core';
-import {FocusTargetController} from '../../../utils/accessibility-utils';
 import {
   BindStateToController,
   InitializableComponent,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
+import {FocusTargetController} from '../../../utils/stencil-accessibility-utils';
 import {randomID} from '../../../utils/utils';
 import {ResultsPlaceholdersGuard} from '../../common/atomic-result-placeholder/placeholders';
 import {createAppLoadedListener} from '../../common/interface/store';

packages/atomic/src/components/commerce/atomic-commerce-query-error/atomic-commerce-query-error.tsx

@@ -9,12 +9,12 @@ import {
   getCommerceApiBaseUrl,
 } from '@coveo/headless/commerce';
 import {Component, h, State} from '@stencil/core';
-import {AriaLiveRegion} from '../../../utils/accessibility-utils';
 import {
   BindStateToController,
   InitializableComponent,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
+import {AriaLiveRegion} from '../../../utils/stencil-accessibility-utils';
 import {QueryErrorContainer} from '../../common/query-error/container';
 import {QueryErrorDescription} from '../../common/query-error/description';
 import {QueryErrorDetails} from '../../common/query-error/details';

packages/atomic/src/components/commerce/atomic-commerce-query-summary/atomic-commerce-query-summary.tsx

@@ -7,13 +7,13 @@ import {
   Summary,
 } from '@coveo/headless/commerce';
 import {Component, h, State} from '@stencil/core';
-import {AriaLiveRegion} from '../../../utils/accessibility-utils';
 import {
   BindStateToController,
   InitializableComponent,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
 import {LocalizedString} from '../../../utils/jsx-utils';
+import {AriaLiveRegion} from '../../../utils/stencil-accessibility-utils';
 import {QuerySummaryContainer} from '../../common/query-summary/container';
 import {QuerySummaryGuard} from '../../common/query-summary/guard';
 import {getProductQuerySummaryI18nParameters} from '../../common/query-summary/utils';

packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx

@@ -16,12 +16,12 @@ import {
   Watch,
   h,
 } from '@stencil/core';
-import {FocusTargetController} from '../../../utils/accessibility-utils';
 import {
   BindStateToController,
   InitializableComponent,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
+import {FocusTargetController} from '../../../utils/stencil-accessibility-utils';
 import {randomID} from '../../../utils/utils';
 import {ResultsPlaceholdersGuard} from '../../common/atomic-result-placeholder/placeholders';
 import {Carousel} from '../../common/carousel';

packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx

@@ -21,7 +21,6 @@ import {
   Watch,
   h,
 } from '@stencil/core';
-import {AriaLiveRegion} from '../../../utils/accessibility-utils';
 import {hasKeyboard, isMacOS} from '../../../utils/device-utils';
 import {
   BindStateToController,
@@ -34,6 +33,7 @@ import {
   StorageItems,
 } from '../../../utils/local-storage-utils';
 import {updateBreakpoints} from '../../../utils/replace-breakpoint';
+import {AriaLiveRegion} from '../../../utils/stencil-accessibility-utils';
 import {
   isFocusingOut,
   once,

packages/atomic/src/components/commerce/facets/atomic-commerce-category-facet/atomic-commerce-category-facet.tsx

@@ -7,16 +7,16 @@ import {
   Summary,
 } from '@coveo/headless/commerce';
 import {Component, h, State, Prop, Element, Fragment} from '@stencil/core';
-import {
-  AriaLiveRegion,
-  FocusTargetController,
-} from '../../../../utils/accessibility-utils';
 import {getFieldValueCaption} from '../../../../utils/field-utils';
 import {
   BindStateToController,
   InitializableComponent,
   InitializeBindings,
 } from '../../../../utils/initialization-utils';
+import {
+  AriaLiveRegion,
+  FocusTargetController,
+} from '../../../../utils/stencil-accessibility-utils';
 import {CategoryFacetAllCategoryButton} from '../../../common/facets/category-facet/all-categories-button';
 import {CategoryFacetChildValueLink} from '../../../common/facets/category-facet/child-value-link';
 import {CategoryFacetChildrenAsTreeContainer} from '../../../common/facets/category-facet/children-as-tree-container';

packages/atomic/src/components/commerce/facets/atomic-commerce-facet/atomic-commerce-facet.tsx

@@ -14,15 +14,15 @@ import {
   VNode,
   Fragment,
 } from '@stencil/core';
-import {
-  AriaLiveRegion,
-  FocusTargetController,
-} from '../../../../utils/accessibility-utils';
 import {
   BindStateToController,
   InitializableComponent,
   InitializeBindings,
 } from '../../../../utils/initialization-utils';
+import {
+  AriaLiveRegion,
+  FocusTargetController,
+} from '../../../../utils/stencil-accessibility-utils';
 import {FacetInfo} from '../../../common/facets/facet-common-store';
 import {FacetContainer} from '../../../common/facets/facet-container/facet-container';
 import {FacetGuard} from '../../../common/facets/facet-guard';

packages/atomic/src/components/commerce/facets/atomic-commerce-numeric-facet/atomic-commerce-numeric-facet.tsx

@@ -10,12 +10,12 @@ import {
   buildContext,
 } from '@coveo/headless/commerce';
 import {Component, Element, h, Listen, Prop, State} from '@stencil/core';
-import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
   BindStateToController,
   InitializableComponent,
   InitializeBindings,
 } from '../../../../utils/initialization-utils';
+import {FocusTargetController} from '../../../../utils/stencil-accessibility-utils';
 import {shouldDisplayInputForFacetRange} from '../../../common/facets/facet-common';
 import {FacetInfo} from '../../../common/facets/facet-common-store';
 import {FacetContainer} from '../../../common/facets/facet-container/facet-container';

packages/atomic/src/components/commerce/facets/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.tsx

@@ -10,13 +10,13 @@ import {
   Summary,
 } from '@coveo/headless/commerce';
 import {Component, Element, h, Listen, Prop, State, VNode} from '@stencil/core';
-import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {parseDate} from '../../../../utils/date-utils';
 import {
   BindStateToController,
   InitializableComponent,
   InitializeBindings,
 } from '../../../../utils/initialization-utils';
+import {FocusTargetController} from '../../../../utils/stencil-accessibility-utils';
 import {shouldDisplayInputForFacetRange} from '../../../common/facets/facet-common';
 import {FacetInfo} from '../../../common/facets/facet-common-store';
 import {FacetContainer} from '../../../common/facets/facet-container/facet-container';

packages/atomic/src/components/common/atomic-focus-trap.tsx

@@ -1,5 +1,5 @@
 import {Component, Element, Listen, Prop, Watch} from '@stencil/core';
-import {getFirstFocusableDescendant} from '../../utils/accessibility-utils';
+import {getFirstFocusableDescendant} from '../../utils/stencil-accessibility-utils';
 import {
   isAncestorOf,
   defer,

packages/atomic/src/components/common/button.ts

@@ -1,3 +1,4 @@
+import {FunctionalComponentWithChildren} from '@/src/utils/functional-component-utils';
 import {html} from 'lit';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {when} from 'lit/directives/when.js';
@@ -40,12 +41,9 @@ export interface ButtonProps {
   title?: string;
 }
 
-export const button = <T>({
+export const button: FunctionalComponentWithChildren<ButtonProps> = ({
   props,
   children,
-}: {
-  props: ButtonProps;
-  children: T;
 }) => {
   const rippleColor = getRippleColorForButtonStyle(props.style);
   const className = getClassNameForButtonStyle(props.style);

packages/atomic/src/components/common/checkbox.spec.ts

@@ -18,9 +18,11 @@ describe('checkbox', () => {
   const renderCheckbox = (props: Partial<CheckboxProps>): HTMLButtonElement => {
     render(
       html`${checkbox({
-        ...props,
-        checked: props.checked ?? false,
-        onToggle: props.onToggle ?? vi.fn(),
+        props: {
+          ...props,
+          checked: props.checked ?? false,
+          onToggle: props.onToggle ?? vi.fn(),
+        },
       })}`,
       container
     );
@@ -111,7 +113,6 @@ describe('checkbox', () => {
     expect(button).toHaveClass(
       'w-4',
       // TODO: KIT-3907
-      // @ts-expect-error the typing is incorrect. matchers should be a string[]
       'h-4',
       'grid',
       'place-items-center',

packages/atomic/src/components/common/checkbox.ts

@@ -1,4 +1,5 @@
-import {html, TemplateResult} from 'lit';
+import {FunctionalComponent} from '@/src/utils/functional-component-utils';
+import {html} from 'lit';
 import {classMap} from 'lit/directives/class-map.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {ref, RefOrCallback} from 'lit/directives/ref.js';
@@ -26,7 +27,7 @@ export interface CheckboxProps {
   onMouseDown?(evt: MouseEvent): void;
 }
 
-export const checkbox = (props: CheckboxProps): TemplateResult => {
+export const checkbox: FunctionalComponent<CheckboxProps> = ({props}) => {
   const partName = props.part ?? 'checkbox';
   const baseClassNames =
     'w-4 h-4 grid place-items-center rounded no-outline hover:border-primary-light focus-visible:border-primary-light';

packages/atomic/src/components/common/facets/timeframe-facet-common.tsx

@@ -1,4 +1,4 @@
-import {FocusTargetController} from '@/src/utils/accessibility-utils';
+import {FocusTargetController} from '@/src/utils/stencil-accessibility-utils';
 import {
   DateFacet,
   DateFacetValue,

packages/atomic/src/components/common/heading.spec.ts

@@ -19,13 +19,10 @@ describe('heading', () => {
     children?: string
   ): HTMLElement => {
     render(
-      html`${heading(
-        {
-          ...props,
-          level: props.level ?? 1,
-        },
-        html`${children}`
-      )}`,
+      html` ${heading({
+        props: {...props, level: props.level ?? 1},
+        children: html`${children}`,
+      })}`,
       container
     );
     return within(container).getByRole(

packages/atomic/src/components/common/heading.ts

@@ -1,3 +1,4 @@
+import {FunctionalComponentWithChildren} from '@/src/utils/functional-component-utils';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {html, literal, unsafeStatic} from 'lit/static-html.js';
 
@@ -18,10 +19,12 @@ export interface HeadingProps {
   part?: string;
 }
 
-export const heading = <T>(
-  {level, class: classname, part}: HeadingProps,
-  children?: T
-) => {
+export const heading: FunctionalComponentWithChildren<HeadingProps> = ({
+  props,
+  children,
+}) => {
+  const {level, class: classname, part} = props;
+
   const headingTag =
     level > 0 && level <= 6 ? unsafeStatic(`h${level}`) : literal`div`;
 

packages/atomic/src/components/common/item-list/item-list-common.tsx

@@ -1,8 +1,8 @@
+import {updateBreakpoints} from '../../../utils/replace-breakpoint';
 import {
   FocusTargetController,
   getFirstFocusableDescendant,
-} from '../../../utils/accessibility-utils';
-import {updateBreakpoints} from '../../../utils/replace-breakpoint';
+} from '../../../utils/stencil-accessibility-utils';
 import {defer, once} from '../../../utils/utils';
 import {CommerceStore} from '../../commerce/atomic-commerce-interface/store';
 import {CommerceRecommendationStore} from '../../commerce/atomic-commerce-recommendation-interface/store';

packages/atomic/src/components/common/load-more/button.ts

@@ -1,4 +1,6 @@
+import {FunctionalComponent} from '@/src/utils/functional-component-utils';
 import {i18n} from 'i18next';
+import {html} from 'lit';
 import {button, ButtonProps} from '../button';
 
 interface LoadMoreButtonProps {
@@ -8,20 +10,21 @@ interface LoadMoreButtonProps {
   label?: 'load-more-results' | 'load-more-products';
 }
 
-export function loadMoreButton({
-  i18n,
-  onClick,
-  moreAvailable,
-  label,
-}: LoadMoreButtonProps) {
+export const loadMoreButton: FunctionalComponent<LoadMoreButtonProps> = ({
+  props,
+}) => {
+  const {i18n, onClick, moreAvailable, label} = props;
   if (!moreAvailable) {
-    return;
+    return html``;
   }
-  const props: ButtonProps = {
+  const buttonProps: ButtonProps = {
     style: 'primary',
     part: 'load-more-results-button',
     class: 'my-2 p-3 font-bold',
     onClick: () => onClick(),
   };
-  return button({props, children: i18n.t(label || 'load-more-results')});
-}
+  return button({
+    props: buttonProps,
+    children: html`${i18n.t(label || 'load-more-results')}`,
+  });
+};

packages/atomic/src/components/common/radio-button.spec.ts

@@ -24,9 +24,10 @@ describe('radioButton', () => {
     props: Partial<RadioButtonProps>
   ): HTMLInputElement => {
     render(
-      html`${radioButton({...props, groupName: 'test-group'})}`,
+      html`${radioButton({props: {...props, groupName: 'test-group'}})}`,
       container
     );
+
     return within(container).getByRole('radio');
   };
 
@@ -69,9 +70,9 @@ describe('radioButton', () => {
     };
 
     render(
-      html`${radioButton({...props, text: 'radio-1'})}
-      ${radioButton({...props, text: 'radio-2'})}
-      ${radioButton({...props, text: 'radio-3'})}`,
+      html`${radioButton({props: {...props, text: 'radio-1'}})}
+      ${radioButton({props: {...props, text: 'radio-2'}})}
+      ${radioButton({props: {...props, text: 'radio-3'}})}`,
       container
     );
 
@@ -131,7 +132,7 @@ describe('radioButton', () => {
       ref,
     };
 
-    render(html`${radioButton(props)}`, container);
+    render(html`${radioButton({props})}`, container);
 
     expect(ref).toHaveBeenCalled();
   });

packages/atomic/src/components/common/radio-button.ts

@@ -1,4 +1,5 @@
-import {html, TemplateResult} from 'lit';
+import {FunctionalComponent} from '@/src/utils/functional-component-utils';
+import {html} from 'lit';
 import {classMap} from 'lit/directives/class-map.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {ref, RefOrCallback} from 'lit/directives/ref.js';
@@ -31,7 +32,7 @@ export interface RadioButtonProps {
   ref?: RefOrCallback;
 }
 
-export const radioButton = (props: RadioButtonProps): TemplateResult => {
+export const radioButton: FunctionalComponent<RadioButtonProps> = ({props}) => {
   const classNames = {
     'btn-radio': true,
     selected: Boolean(props.checked),