From 66f2d6c814a322210296a38409f58f3ae943c750 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Thu, 27 Jun 2024 10:24:03 +0200
Subject: [PATCH] feat: build a Vue3 test search component

---
 packages/_vue3-migration-test/src/App.vue     | 11 ++++-
 .../src/components/index.ts                   |  1 +
 .../src/components/test-search.vue            | 45 +++++++++++++++++++
 packages/_vue3-migration-test/src/main.ts     | 19 ++------
 packages/_vue3-migration-test/src/router.ts   |  8 +++-
 5 files changed, 67 insertions(+), 17 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/test-search.vue

diff --git a/packages/_vue3-migration-test/src/App.vue b/packages/_vue3-migration-test/src/App.vue
index dadc1fe5ac..627b5fdf38 100644
--- a/packages/_vue3-migration-test/src/App.vue
+++ b/packages/_vue3-migration-test/src/App.vue
@@ -12,7 +12,16 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { provide } from 'vue';
+  import { baseSnippetConfig } from '../../x-components/src/views/base-config';
+
+  /**
+   * TODO: remove when x-instaler is migrated and used in this Playground.
+   * X-instaler's `createApp` fn should provide the snippet config.
+   */
+  provide('snippetConfig', baseSnippetConfig);
+</script>
 
 <style lang="scss" scoped>
   #app {
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 66a0cf6ff6..c906f27899 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -15,3 +15,4 @@ export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navi
 export { default as TestBaseEventsModal } from './modals/test-base-events-modal.vue';
 export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
 export { default as TestExtraParams } from './extra-params/test-extra-params.vue';
+export { default as TestSearch } from './test-search.vue';
diff --git a/packages/_vue3-migration-test/src/components/test-search.vue b/packages/_vue3-migration-test/src/components/test-search.vue
new file mode 100644
index 0000000000..52a714c1c7
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/test-search.vue
@@ -0,0 +1,45 @@
+<template>
+  <SnippetConfigExtraParams />
+  <SearchInput />
+  <ClearSearchInput />
+  <SearchButton />
+  <!--  No Results Message  -->
+  <div
+    v-if="_$x.noResults && !_$x.fromNoResultsWithFilters"
+    class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+    data-test="no-results-message"
+  >
+    <p>
+      There are no results for
+      <span class="x-font-bold">{{ _$x.query.search }}</span>
+    </p>
+  </div>
+  <ResultsList>
+    <BaseVariableColumnGrid
+      style="--x-size-min-width-grid-item: 150px"
+      class="x-gap-12"
+      :columns="4"
+    >
+      <template #result="{ item: result }">
+        <BaseResultLink :result="result">
+          <h1 class="x-text1 x-text1-lg">{{ result.name }}</h1>
+        </BaseResultLink>
+      </template>
+    </BaseVariableColumnGrid>
+  </ResultsList>
+</template>
+
+<script setup lang="ts">
+  import SnippetConfigExtraParams from '../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import SearchInput from '../../../x-components/src/x-modules/search-box/components/search-input.vue';
+  import ResultsList from '../../../x-components/src/x-modules/search/components/results-list.vue';
+  import BaseResultLink from '../../../x-components/src/components/result/base-result-link.vue';
+  import BaseVariableColumnGrid from '../../../x-components/src/components/base-variable-column-grid.vue';
+  import ClearSearchInput from '../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+  import SearchButton from '../../../x-components/src/x-modules/search-box/components/search-button.vue';
+  import { use$x } from '../../../x-components/src/composables/use-$x';
+  // TODO `$x` name cannot be used while XPlugin defines its own `this.$x` in the mixin
+  const _$x = use$x();
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index fe773026db..09487d59fa 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -1,16 +1,16 @@
 import { QuerySuggestionsRequest, XComponentsAdapter } from '@empathyco/x-types';
 import { Component, configureCompat, createApp } from 'vue';
 import { createStore } from 'vuex';
+// import { platformAdapter } from '@empathyco/x-adapter-platform';
 import { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tags-stubs.factory';
 import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
 import {
   createResultStub,
-  getBannersStub,
   getNextQueriesStub,
-  getPromotedsStub,
   getResultsStub
 } from '../../x-components/src/__stubs__/index';
 import { XInstaller } from '../../x-components/src/x-installer/x-installer/x-installer';
+import { baseSnippetConfig } from '../../x-components/src/views/base-config';
 import App from './App.vue';
 import router from './router';
 import {
@@ -69,15 +69,6 @@ const adapter = {
         ]
       });
     }),
-  search: () =>
-    new Promise(resolve => {
-      resolve({
-        results: getResultsStub(10),
-        totalResults: 50,
-        promoteds: getPromotedsStub(),
-        banners: getBannersStub()
-      });
-    }),
   identifierResults: () =>
     new Promise(resolve =>
       resolve({ results: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)) })
@@ -91,10 +82,8 @@ createApp(App as Component)
   .use(store)
   .mount('#app');
 
-window.initX = {
-  instance: 'empathy',
-  lang: 'en'
-};
+window.initX = baseSnippetConfig;
+
 new XInstaller({
   adapter,
   store,
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index e9a253de77..f6f4ad423b 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -41,10 +41,16 @@ import {
   TestPopularSearches,
   TestNextQueries,
   TestIdentifierResults,
-  TestExtraParams
+  TestExtraParams,
+  TestSearch
 } from './';
 
 const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: TestSearch
+  },
   {
     path: '/animate-width',
     name: 'AnimateWidth',