chore: fix src lint errors & warnings

eslint.config.mjs

@@ -6,20 +6,7 @@ export default empathyco(
     rules: {
       'vuejs-accessibility/no-autofocus': 'off',
       'vue/multi-word-component-names': 'off',
-    },
-  },
-  {
-    files: ['src/**/*.{ts,tsx,vue}'],
-    rules: {
-      // Enable the following rules progressively when the project is ready to enforce them
-      'vue/no-reserved-component-names': 'off',
-      'vue/valid-v-slot': 'off',
-      'vue/no-deprecated-v-on-native-modifier': 'off',
       'node/prefer-global/process': 'off',
-      'no-new': 'off',
-      'ts/no-floating-promises': 'off',
-      'ts/no-misused-promises': 'off',
-      'ts/no-unsafe-member-access': 'off',
     },
   },
 )

src/components/desktop/desktop.vue

@@ -18,7 +18,7 @@
           </LocationProvider>
 
           <LocationProvider location="results">
-            <Main />
+            <MainComponent />
           </LocationProvider>
         </MaxDesktopWidthItem>
       </Scroll>
@@ -56,7 +56,7 @@ import { animateTranslate, BaseIdModal, LocationProvider } from '@empathyco/x-co
 import { MainScroll, Scroll } from '@empathyco/x-components/scroll'
 import { defineAsyncComponent, defineComponent } from 'vue'
 import { useHasSearched } from '../../composables/use-has-searched.composable'
-import Main from '../main.vue'
+import MainComponent from '../main.vue'
 import MaxDesktopWidthItem from '../max-desktop-width-item.vue'
 import MyHistoryAside from '../my-history/my-history-aside.vue'
 import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue'
@@ -71,7 +71,7 @@ export default defineComponent({
     BaseIdModal,
     MyHistoryAside,
     LocationProvider,
-    Main,
+    MainComponent,
     MainScroll,
     MyHistoryConfirmDisableModal,
     Scroll,

src/components/main.vue

@@ -25,6 +25,7 @@ import CustomRecommendations from './results/custom-recommendations.vue'
 import CustomSemanticQueries from './search/custom-semantic-queries.vue'
 
 export default defineComponent({
+  name: 'MainComponent',
   components: {
     CustomSemanticQueries,
     LocationProvider,

src/components/mobile/mobile.vue

@@ -36,7 +36,7 @@
 
             <LocationProvider location="results">
               <div class="x-layout-item">
-                <Main />
+                <MainComponent />
               </div>
             </LocationProvider>
           </Scroll>
@@ -88,7 +88,7 @@ import {
 import { MainScroll, Scroll } from '@empathyco/x-components/scroll'
 import { defineAsyncComponent, defineComponent } from 'vue'
 import { useHasSearched } from '../../composables/use-has-searched.composable'
-import Main from '../main.vue'
+import MainComponent from '../main.vue'
 import MyHistoryAside from '../my-history/my-history-aside.vue'
 import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue'
 import PreSearchManager from '../pre-search/pre-search-manager.vue'
@@ -106,7 +106,7 @@ export default defineComponent({
     PreSearchManager,
     LocationProvider,
     MobileSubHeader,
-    Main,
+    MainComponent,
     MainScroll,
     MyHistoryAside,
     MobileOpenAside,

src/components/my-history/custom-my-history.vue

@@ -1,52 +1,56 @@
 <template>
   <div class="x-flex-1">
-    <BaseIdModalClose #closing-element="{ closeModal }" modal-id="my-history-aside">
-      <MyHistory
-        v-if="x.isHistoryQueriesEnabled && x.fullHistoryQueries.length"
-        :animation="animation"
-        class="x-px-16 x-pb-32 desktop:x-pl-32"
-        queries-list-class="x-gap-16"
-      >
-        <template #date="{ date }">
-          <div class="x-title4 x-title4-sm x-py-16 x-text-neutral-75">{{ date }}</div>
-        </template>
+    <BaseIdModalClose modal-id="my-history-aside">
+      <template #closing-element="{ closeModal }">
+        <MyHistory
+          v-if="x.isHistoryQueriesEnabled && x.fullHistoryQueries.length"
+          :animation="animation"
+          class="x-px-16 x-pb-32 desktop:x-pl-32"
+          queries-list-class="x-gap-16"
+        >
+          <template #date="{ date }">
+            <div class="x-title4 x-title4-sm x-py-16 x-text-neutral-75">{{ date }}</div>
+          </template>
 
-        <template #suggestion="{ suggestion, formatTime }">
-          <HistoryQuery
-            data-test="my-history-query"
-            :suggestion="suggestion"
-            suggestion-class="x-suggestion"
-            class="hover:x-no-underline"
-            @click="closeModal"
-          >
-            <HistoryIcon class="max-desktop:x-icon-lg" />
+          <template #suggestion="{ suggestion, formatTime }">
+            <HistoryQuery
+              data-test="my-history-query"
+              :suggestion="suggestion"
+              suggestion-class="x-suggestion"
+              class="hover:x-no-underline"
+              @click="closeModal"
+            >
+              <HistoryIcon class="max-desktop:x-icon-lg" />
 
-            <div class="x-group x-flex x-flex-col x-gap-2">
-              <p class="group-hover:x-underline">{{ suggestion.query }}</p>
+              <div class="x-group x-flex x-flex-col x-gap-2">
+                <p class="group-hover:x-underline">{{ suggestion.query }}</p>
 
-              <HistoryQueryFilters
-                :show-length="true"
-                class="x-w-224 desktop:x-w-320"
-                :filters-list="suggestion.selectedFilters"
-              />
+                <HistoryQueryFilters
+                  :show-length="true"
+                  class="x-w-224 desktop:x-w-320"
+                  :filters-list="suggestion.selectedFilters"
+                />
 
-              <p class="x-text1 x-text1-sm x-text-neutral-75">
-                {{ formatTime(suggestion.timestamp) }}
-                <template v-if="suggestion.totalResults !== undefined">
-                  -
-                  {{ $t('myHistory.suggestionResults', { totalResults: suggestion.totalResults }) }}
-                </template>
-              </p>
-            </div>
+                <p class="x-text1 x-text1-sm x-text-neutral-75">
+                  {{ formatTime(suggestion.timestamp) }}
+                  <template v-if="suggestion.totalResults !== undefined">
+                    -
+                    {{
+                      $t('myHistory.suggestionResults', { totalResults: suggestion.totalResults })
+                    }}
+                  </template>
+                </p>
+              </div>
 
-            <template #remove-button-content>
-              <CrossTinyIcon class="x-icon-lg" />
-            </template>
-          </HistoryQuery>
-        </template>
-      </MyHistory>
+              <template #remove-button-content>
+                <CrossTinyIcon class="x-icon-lg" />
+              </template>
+            </HistoryQuery>
+          </template>
+        </MyHistory>
 
-      <div v-else />
+        <div v-else />
+      </template>
     </BaseIdModalClose>
   </div>
 </template>

src/components/my-history/my-history-confirm-disable-modal.vue

@@ -3,7 +3,7 @@
     class="x-my-history-confirm-disable-modal x-z-10"
     :events-to-open-modal="eventsToOpenModal"
     :events-to-close-modal="eventsToCloseModal"
-    @focusin.native.stop
+    @focusin.stop
   >
     <div
       class="x-my-history-confirm-disable-modal-content x-flex x-max-w-[322px] x-flex-col x-gap-16 x-bg-neutral-0 x-text-center"

src/components/search/facets/custom-facets.vue

@@ -70,11 +70,11 @@
                 children-filters-class="x-ml-16 x-mt-8 x-flex x-flex-col x-gap-8"
                 filter-item-class="x-w-full x-facet-filter-lg"
               >
-                <template #label="{ filter }">
-                  <CheckboxSelectedIcon v-if="filter.selected" class="x-icon-lg" />
+                <template #label="{ filter: hierarchicalFilter }">
+                  <CheckboxSelectedIcon v-if="hierarchicalFilter.selected" class="x-icon-lg" />
                   <CheckboxUnselectedIcon v-else class="x-icon-lg" />
-                  <span class="x-filter__label">{{ filter.label }}</span>
-                  <span class="x-filter__count">({{ filter.totalResults }})</span>
+                  <span class="x-filter__label">{{ hierarchicalFilter.label }}</span>
+                  <span class="x-filter__count">({{ hierarchicalFilter.totalResults }})</span>
                 </template>
               </HierarchicalFilter>
             </FiltersList>

src/components/search/facets/selected-filters.vue

@@ -18,8 +18,8 @@
             :css-classes="['x-selected x-tag x-tag-auxiliary x-tag-outlined x-rounded-full']"
             :filter="filter"
           >
-            <template #label="{ filter }">
-              {{ filter.label }}
+            <template #label="{ filter: simpleFilter }">
+              {{ simpleFilter.label }}
               <CrossTinyIcon />
             </template>
           </SimpleFilter>
@@ -30,8 +30,8 @@
             :css-classes="['x-selected x-tag x-tag-auxiliary x-tag-outlined x-rounded-full']"
             :filter="filter"
           >
-            <template #label="{ filter }">
-              <PriceFilterLabel :filter="filter" />
+            <template #label="{ filter: numberRangeFilter }">
+              <PriceFilterLabel :filter="numberRangeFilter" />
               <CrossTinyIcon />
             </template>
           </NumberRangeFilter>

src/composables/use-has-scroll-past-threshold.composable.ts

@@ -1,20 +1,21 @@
 import type { ScrollComponentState } from '@empathyco/x-components/types'
-import type { Ref } from 'vue'
+import type { Dictionary } from '@empathyco/x-utils'
+import type { ComputedRef, Ref } from 'vue'
 import { useState } from '@empathyco/x-components'
 import { computed, ref, watch } from 'vue'
 
 export const useHasScrollPastThreshold = (): { hasScrolledPastThreshold: Ref<boolean> } => {
   const hasScrolledPastThresholdFlag = ref(false)
   const scrollOffset = 100
-  const { data: scrollPositionsMap } = useState('scroll', ['data'])
-  const mainScrollPosition = computed(
-    () => scrollPositionsMap.value['main-scroll']?.position as number,
-  )
+  const scrollPositionsMap = useState('scroll', ['data']).data as ComputedRef<
+    Dictionary<ScrollComponentState>
+  >
+  const mainScrollPosition = computed(() => scrollPositionsMap.value['main-scroll']?.position)
 
   const hasScrolledPastThreshold = computed(() => hasScrolledPastThresholdFlag.value)
 
   watch(mainScrollPosition, () => {
-    const mainScrollData = scrollPositionsMap.value['main-scroll'] as ScrollComponentState
+    const mainScrollData = scrollPositionsMap.value['main-scroll']
 
     if (mainScrollData?.hasReachedStart) {
       hasScrolledPastThresholdFlag.value = false

src/main.ts

@@ -20,5 +20,10 @@ declare global {
   }
 }
 
+// eslint-disable-next-line no-new
 new CssInjector(true)
-getInstallXOptions().then(async installXOptions => new XInstaller(installXOptions).init())
+getInstallXOptions()
+  .then(async installXOptions => new XInstaller(installXOptions).init())
+  .catch(error => {
+    console.error('Error initializing XInstaller:', error)
+  })

src/shims-i18n.d.ts

@@ -3,7 +3,7 @@ export {}
 
 declare module 'vue' {
   interface ComponentCustomProperties {
-    $setLocale: (lang: string) => void
-    $setLocaleDevice: (device: string) => void
+    $setLocale: (lang: string) => Promise<void>
+    $setLocaleDevice: (device: string) => Promise<void>
   }
 }

src/x-components/plugin.options.ts

@@ -119,6 +119,7 @@ export async function getInstallXOptions(): Promise<InstallXOptions> {
  * Creates a DOM element to mount the X Components app.
  *
  * @param snippetConfig - The snippet configuration.
+ * @param snippetConfig.isolate - Whether to isolate the DOM element using Shadow DOM.
  * @returns The DOM element.
  */
 function getDomElement({ isolate }: SnippetConfig): Element {