Merge branch 'feat/EMP-4339-migrate-extraparams' of https://github.co…

…m/empathyco/x into feat/EMP-4339-migrate-extraparams

packages/_vue3-migration-test/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.33](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.33) (2024-06-19)
+
+
+### Features
+
+* migrate popular-searches x-module (#1524) ([f79456d](https://github.com/empathyco/x/commit/f79456d4589b3f9dee5fd86fad9625b853dde267))
+
+
+
 ## [1.0.0-alpha.32](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.32) (2024-06-18)
 
 

packages/_vue3-migration-test/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.32",
+  "version": "1.0.0-alpha.33",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

packages/_vue3-migration-test/src/main.ts

@@ -16,6 +16,7 @@ import router from './router';
 import {
   facetsXModule,
   nextQueriesXModule,
+  popularSearchesXModule,
   queriesPreviewXModule,
   recommendationsXModule,
   scrollXModule,

packages/_vue3-migration-test/src/router.ts

@@ -37,6 +37,7 @@ import {
   TestQuerySuggestions,
   TestSemanticQueries,
   TestRecommendations,
+  TestPopularSearches,
   TestNextQueries,
   TestIdentifierResults,
   TestExtraParams
@@ -228,6 +229,11 @@ const routes = [
     name: 'Recommendations',
     component: TestRecommendations
   },
+  {
+    path: '/popular-searches',
+    name: 'PopularSearches',
+    component: TestPopularSearches
+  },
   {
     path: '/next-queries',
     name: 'NextQueries',

packages/_vue3-migration-test/src/x-modules/index.ts

@@ -10,4 +10,5 @@ export * from './history-queries';
 export * from './query-suggestions';
 export * from './semantic-queries';
 export * from './recommendations';
+export * from './popular-searches';
 export * from './identifier-results';

packages/_vue3-migration-test/src/x-modules/popular-searches/index.ts

@@ -0,0 +1,2 @@
+export * from './x-module';
+export { default as TestPopularSearches } from './test-popular-searches.vue';

packages/_vue3-migration-test/src/x-modules/popular-searches/test-popular-searches.vue

@@ -0,0 +1,23 @@
+<template>
+  <SearchInput />
+  <ClearSearchInput />
+  <div v-if="!query">
+    <h1>Popular searches</h1>
+    <PopularSearches />
+  </div>
+</template>
+
+<script setup>
+  import PopularSearches from '../../../../x-components/src/x-modules/popular-searches/components/popular-searches.vue';
+  import SearchInput from '../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+  import ClearSearchInput from '../../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+  import { useState } from '../../../../x-components/src/composables/use-state';
+
+  const { query } = useState('search', ['query']);
+</script>
+
+<style scoped>
+  .x-popular-searches {
+    width: fit-content;
+  }
+</style>

packages/_vue3-migration-test/src/x-modules/popular-searches/x-module.ts

@@ -0,0 +1,16 @@
+import { PopularSearchesXModule } from '../../../../x-components/src/x-modules/popular-searches/x-module';
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
+import { createPopularSearch } from '../../../../x-components/src/__stubs__/popular-searches-stubs.factory';
+
+export const popularSearchesXModule: PrivateXModuleOptions<PopularSearchesXModule> = {
+  storeModule: {
+    state: {
+      popularSearches: ['patata', 'salchicón', 'pan', 'queso', 'leche', 'galletas'].map(query =>
+        createPopularSearch(query)
+      ),
+      config: {
+        hideSessionQueries: false
+      }
+    }
+  }
+};

packages/x-components/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.52](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-06-20)
+
+
+### Features
+
+* migrate `QueryPreviewButton` component to composition API (#1525) ([3eff0c7](https://github.com/empathyco/x/commit/3eff0c7c9479abbebbda59e8cc538af6f55375e1))
+
+
+
+## [5.0.0-alpha.51](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-06-19)
+
+
+### Features
+
+* migrate popular-searches x-module (#1524) ([f79456d](https://github.com/empathyco/x/commit/f79456d4589b3f9dee5fd86fad9625b853dde267))
+
+
+
 ## [5.0.0-alpha.50](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-06-19)
 
 

packages/x-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.50",
+  "version": "5.0.0-alpha.52",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts

@@ -47,7 +47,7 @@ describe('testing plugin alias', () => {
       status: {
         identifierResults: 'initial', // It is already registered by the `identifierResultsXModule` import itself
         nextQueries: 'initial', // It is already registered by the `nextQueriesXModule` import itself
-        popularSearches: undefined,
+        popularSearches: 'initial', // It is already registered by the `popularSearchesXModule` import itself
         querySuggestions: 'initial', // It is already registered by the `querySuggestionsXModule` import itself
         recommendations: 'initial', // It is already registered by the `recommendationsXModule` import itself
         relatedTags: 'initial', // It is already registered by the `relatedTagsXModule` import itself

packages/x-components/src/x-modules/popular-searches/components/popular-search.vue

@@ -19,10 +19,8 @@
 
 <script lang="ts">
   import { Suggestion } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, PropType } from 'vue';
   import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { popularSearchesXModule } from '../x-module';
 
@@ -33,31 +31,35 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'PopularSearch',
+    xModule: popularSearchesXModule.name,
     components: { BaseSuggestion },
-    mixins: [xComponentMixin(popularSearchesXModule)]
-  })
-  export default class PopularSearch extends Vue {
-    /**
-     * The suggestion to render and use in the default slot.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected suggestion!: Suggestion;
+    props: {
+      /**
+       * The suggestion to render and use in the default slot.
+       *
+       * @public
+       */
+      suggestion: {
+        type: Object as PropType<Suggestion>,
+        required: true
+      }
+    },
+    setup(props) {
+      /**
+       * Events list which are going to be emitted when a popular search is selected.
+       *
+       * @returns The {@link XEvent} to emit.
+       * @public
+       */
+      const events = computed(
+        (): Partial<XEventsTypes> => ({ UserSelectedAPopularSearch: props.suggestion })
+      );
 
-    /**
-     * Events list which are going to be emitted when a popular search is selected.
-     *
-     * @returns The {@link XEvent} to emit.
-     * @public
-     */
-    protected get events(): Partial<XEventsTypes> {
-      return {
-        UserSelectedAPopularSearch: this.suggestion
-      };
+      return { events };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue

@@ -32,13 +32,10 @@
 </template>
 
 <script lang="ts">
-  import { Suggestion } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
-  import { Getter } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { popularSearchesXModule } from '../x-module';
+  import { useGetter } from '../../../composables/use-getter';
   import PopularSearch from './popular-search.vue';
 
   /**
@@ -49,20 +46,25 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'PopularSearches',
+    xModule: popularSearchesXModule.name,
+    components: {
+      PopularSearch,
+      BaseSuggestions
+    },
     inheritAttrs: false,
-    components: { PopularSearch, BaseSuggestions },
-    mixins: [xComponentMixin(popularSearchesXModule)]
-  })
-  export default class PopularSearches extends Vue {
-    /**
-     * The list of popular searches.
-     *
-     * @internal
-     */
-    @Getter('popularSearches', 'popularSearches')
-    public popularSearches!: Suggestion[];
-  }
+    setup() {
+      /**
+       * The list of popular searches.
+       *
+       * @internal
+       */
+      const { popularSearches } = useGetter('popularSearches', ['popularSearches']);
+
+      return { popularSearches };
+    }
+  });
 </script>
 
 <!--eslint-disable max-len -->

packages/x-components/src/x-modules/popular-searches/x-module.ts

@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/x-plugin';
 import { popularSearchesEmitters } from './store/emitters';
 import { popularSearchesXStoreModule } from './store/module';
 import { PopularSearchesXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const popularSearchesXModule: PopularSearchesXModule = {
   storeEmitters: popularSearchesEmitters,
   wiring: popularSearchesWiring
 };
+
+XPlugin.registerXModule(popularSearchesXModule);