feat: build a Vue3 test search component

empathyco · Jun 26, 2024 · 3cf7f8a · 3cf7f8a
1 parent 7724145
commit 3cf7f8a
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,16 +1,16 @@
 import { QuerySuggestionsRequest, XComponentsAdapter } from '@empathyco/x-types';
 import { Component, configureCompat, createApp } from 'vue';
 import { createStore } from 'vuex';
+import { platformAdapter } from '../../x-adapter-platform/src/platform.adapter';
 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 {
@@ -45,6 +45,7 @@ if (VUE_COMPAT_MODE === 2) {
 }
 
 const adapter = {
+  ...platformAdapter,
   relatedTags: () =>
     new Promise(resolve => {
       resolve({ relatedTags: getRelatedTagsStub(10) });
@@ -69,15 +70,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 +83,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
@@ -41,10 +41,16 @@ import {
   TestPopularSearches,
   TestNextQueries,
   TestIdentifierResults,
-  TestExtraParams
+  TestExtraParams,
+  TestSearch
 } from './';
 
 const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: TestSearch
+  },
   {
     path: '/animate-width',
     name: 'AnimateWidth',

diff --git a/packages/_vue3-migration-test/vite.config.ts b/packages/_vue3-migration-test/vite.config.ts
@@ -33,7 +33,7 @@ export default defineConfig(({ mode }) => {
       }
     },
     optimizeDeps: {
-      exclude: ['@empathyco/x-components']
+      exclude: ['@empathyco/x-components', '@empathyco/x-adapter-platform']
     }
   };
 });