From 8e6f4675a230da59c00336103e6075b943d5286c Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 30 May 2024 10:54:11 +0200
Subject: [PATCH 1/9] feat: migrate history-queries components

---
 .../components/clear-history-queries.vue      |  97 +++----
 .../components/history-queries-switch.vue     |  97 +++----
 .../components/history-queries.vue            |  44 ++--
 .../components/history-query.vue              |  89 ++++---
 .../history-queries/components/my-history.vue | 238 +++++++++---------
 .../components/remove-history-query.vue       |  65 +++--
 6 files changed, 343 insertions(+), 287 deletions(-)

diff --git a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
index dfa8de8c27..ea4a64350a 100644
--- a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
@@ -13,15 +13,12 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { State } from '../../../components/decorators/store.decorators';
+  import { computed, defineComponent } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { VueCSSClasses } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
+  import { useRegisterXModule, useState } from '../../../composables/index';
 
   /**
    * A button that when is pressed, emits the
@@ -30,51 +27,59 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseEventButton },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class ClearHistoryQueries extends Vue {
-    /**
-     * The whole history queries.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * Returns if the array of history queries is empty.
-     *
-     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
-     * @internal
-     */
-    protected get isHistoryQueriesEmpty(): boolean {
-      return this.historyQueries.length === 0;
-    }
+  export default defineComponent({
+    name: 'ClearHistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseEventButton
+    },
+    setup() {
+      useRegisterXModule(historyQueriesXModule);
+
+      /**
+       * The whole history queries.
+       *
+       * @internal
+       */
+      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+
+      /**
+       * Returns if the array of history queries is empty.
+       *
+       * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
+       * @internal
+       */
+      const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0);
+
+      /**
+       * Dynamic CSS classes to add to the root element of this component.
+       *
+       * @returns A booleans dictionary where each key is the class name to add, and the boolean value
+       * tells if it should be added or not.
+       * @internal
+       */
+      const dynamicClasses = computed((): VueCSSClasses => {
+        return {
+          'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value
+        };
+      });
+
+      /**
+       * The list of events that are going to be emitted when the button is pressed.
+       *
+       * @internal
+       */
+      const clearHistoryQueriesEvents: Partial<XEventsTypes> = {
+        UserPressedClearHistoryQueries: undefined
+      };
 
-    /**
-     * Dynamic CSS classes to add to the root element of this component.
-     *
-     * @returns A booleans dictionary where each key is the class name to add, and the boolean value
-     * tells if it should be added or not.
-     * @internal
-     */
-    protected get dynamicClasses(): VueCSSClasses {
       return {
-        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty
+        dynamicClasses,
+        clearHistoryQueriesEvents,
+        isHistoryQueriesEmpty
       };
     }
-
-    /**
-     * The list of events that are going to be emitted when the button is pressed.
-     *
-     * @internal
-     */
-    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {
-      UserPressedClearHistoryQueries: undefined
-    };
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
index f32ea08109..7ea07c5739 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
@@ -3,14 +3,11 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { HistoryQuery } from '@empathyco/x-types';
+  import { computed, defineComponent } from 'vue';
   import BaseSwitch from '../../../components/base-switch.vue';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { historyQueriesXModule } from '../x-module';
   import { isArrayEmpty } from '../../../utils/array';
+  import { use$x, useRegisterXModule, useState } from '../../../composables/index';
 
   /**
    * History Queries Switch is a component to activate or deactivate the history queries.
@@ -18,49 +15,57 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(historyQueriesXModule)],
-    components: { BaseSwitch }
-  })
-  export default class HistoryQueriesSwitch extends Vue {
-    /**
-     * A boolean with the isEnabled value coming from the store state.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'isEnabled')
-    public isEnabled!: boolean;
-
-    /**
-     * The history queries from the state.
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * Checks if there are history queries.
-     *
-     * @returns True if there are history queries; false otherwise.
-     */
-    protected get hasHistoryQueries(): boolean {
-      return !isArrayEmpty(this.historyQueries);
-    }
+  export default defineComponent({
+    name: 'HistoryQueriesSwitch',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseSwitch
+    },
+    setup() {
+      useRegisterXModule(historyQueriesXModule);
+
+      const $x = use$x();
+
+      /**
+       * A boolean with the isEnabled value coming from the store state.
+       *
+       * @internal
+       */
+      const isEnabled = useState('historyQueries', ['isEnabled']).isEnabled;
+
+      /**
+       * The history queries from the state.
+       */
+      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+
+      /**
+       * Checks if there are history queries.
+       *
+       * @returns True if there are history queries; false otherwise.
+       */
+      const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
+
+      /**
+       * Emits an event based on the switch state.
+       *
+       * @internal
+       */
+      const toggle = (): void => {
+        $x.emit(
+          isEnabled.value
+            ? hasHistoryQueries.value
+              ? 'UserClickedDisableHistoryQueries'
+              : 'UserClickedConfirmDisableHistoryQueries'
+            : 'UserClickedEnableHistoryQueries'
+        );
+      };
 
-    /**
-     * Emits an event based on the switch state.
-     *
-     * @internal
-     */
-    protected toggle(): void {
-      this.$x.emit(
-        this.isEnabled
-          ? this.hasHistoryQueries
-            ? 'UserClickedDisableHistoryQueries'
-            : 'UserClickedConfirmDisableHistoryQueries'
-          : 'UserClickedEnableHistoryQueries'
-      );
+      return {
+        toggle,
+        isEnabled
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
index fd5fd310a5..6979a83cb6 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
@@ -47,13 +47,10 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery as HistoryQueryModel } 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 { historyQueriesXModule } from '../x-module';
+  import { useGetter, useRegisterXModule } from '../../../composables/index';
   import HistoryQuery from './history-query.vue';
 
   /**
@@ -63,20 +60,31 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'HistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseSuggestions,
+      HistoryQuery
+    },
     inheritAttrs: false,
-    components: { BaseSuggestions, HistoryQuery },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class HistoryQueries extends Vue {
-    /**
-     * The filtered list of history queries.
-     *
-     * @internal
-     */
-    @Getter('historyQueries', 'historyQueriesWithResults')
-    public historyQueries!: HistoryQueryModel[];
-  }
+    setup() {
+      useRegisterXModule(historyQueriesXModule);
+
+      /**
+       * The filtered list of history queries.
+       *
+       * @internal
+       */
+      const historyQueries = useGetter('historyQueries', [
+        'historyQueriesWithResults'
+      ]).historyQueriesWithResults;
+
+      return {
+        historyQueries
+      };
+    }
+  });
 </script>
 
 <!--eslint-disable max-len -->
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-query.vue b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
index 05736a0649..98e897c1d7 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
@@ -7,7 +7,7 @@
       @property {MouseEvent} event - The original mouse event
     -->
     <BaseSuggestion
-      @click="$emit('click', suggestion, $event)"
+      @click="clickHistoryQuery"
       class="x-history-query__suggestion"
       :class="suggestionClass"
       v-bind="{ suggestion, suggestionSelectedEvents, query }"
@@ -40,14 +40,11 @@
 
 <script lang="ts">
   import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';
-  import { Component, Mixins, Prop } from 'vue-property-decorator';
-  import { Getter } from '../../../components/decorators/store.decorators';
-  import Highlight from '../../../components/highlight.vue';
+  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 { historyQueriesXModule } from '../x-module';
-  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';
+  import { useGetter, useRegisterXModule } from '../../../composables/index';
   import RemoveHistoryQuery from './remove-history-query.vue';
 
   /**
@@ -57,41 +54,57 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(historyQueriesXModule)],
-    components: { Highlight, RemoveHistoryQuery, BaseSuggestion }
-  })
-  export default class HistoryQuery extends Mixins(
-    dynamicPropsMixin(['removeButtonClass', 'suggestionClass'])
-  ) {
-    /**
-     * The history query suggestion to render.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected suggestion!: HistoryQueryModel;
-
-    /**
-     * The normalized query of the history-queries module.
-     *
-     * @internal
-     */
-    @Getter('historyQueries', 'normalizedQuery')
-    public query!: string;
-
-    /**
-     * The list of events that are going to be emitted when the suggestion button is pressed.
-     *
-     * @internal
-     * @returns The {@link XEvent} to emit.
-     */
-    protected get suggestionSelectedEvents(): Partial<XEventsTypes> {
+  export default defineComponent({
+    name: 'HistoryQuery',
+    xModule: historyQueriesXModule.name,
+    components: { RemoveHistoryQuery, BaseSuggestion },
+    props: {
+      /**
+       * The history query suggestion to render.
+       *
+       * @public
+       */
+      suggestion: {
+        type: Object as PropType<HistoryQueryModel>,
+        required: true
+      },
+      /** Class inherited by content element. */
+      removeButtonClass: String,
+      /** Class inherited by content element. */
+      suggestionClass: String
+    },
+    emits: ['click'],
+    setup(props, { emit }) {
+      useRegisterXModule(historyQueriesXModule);
+
+      /**
+       * The normalized query of the history-queries module.
+       *
+       * @internal
+       */
+      const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery;
+
+      /**
+       * The list of events that are going to be emitted when the suggestion button is pressed.
+       *
+       * @internal
+       * @returns The {@link XEvent} to emit.
+       */
+      const suggestionSelectedEvents = computed((): Partial<XEventsTypes> => {
+        return {
+          UserSelectedAHistoryQuery: props.suggestion
+        };
+      });
+
+      const clickHistoryQuery = () => emit('click', props.suggestion, event);
+
       return {
-        UserSelectedAHistoryQuery: this.suggestion
+        query,
+        suggestionSelectedEvents,
+        clickHistoryQuery
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index 8f7135c2ec..c1a7c3fe4b 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -59,15 +59,13 @@
 <script lang="ts">
   import { HistoryQuery } from '@empathyco/x-types';
   import { Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Inject, Prop } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
-  import { State } from '../../../components/decorators/store.decorators';
+  import { computed, defineComponent, inject } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
   import { groupItemsBy, isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { historyQueriesXModule } from '../x-module';
-  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';
+  import { AnimationProp } from '../../../types/index';
+  import { useRegisterXModule, useState } from '../../../composables/index';
   import HistoryQueryComponent from './history-query.vue';
 
   /**
@@ -81,117 +79,133 @@
    * made in the past.
    * @public
    */
-  @Component({
-    components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },
-    mixins: [xComponentMixin(historyQueriesXModule), dynamicPropsMixin(['queriesListClass'])]
-  })
-  export default class MyHistory extends Vue {
-    /**
-     * Animation component that will be used to animate the suggestions.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
-
-    /**
-     * The current locale.
-     *
-     * @public
-     */
-    @Prop({ default: 'en' })
-    protected locale!: string;
-
-    /**
-     * The list of history queries.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * The provided {@link SnippetConfig}.
-     *
-     * @internal
-     */
-    @Inject('snippetConfig')
-    public snippetConfig?: SnippetConfig;
-
-    /**
-     * Returns a record of history queries grouped by date.
-     *
-     * @example
-     * ```typescript
-     *  const historyQueriesGrouped = {
-     *    'Monday, January 10th, 2022' : [{
-     *      query: 'lego',
-     *      modelName: 'HistoryQuery',
-     *      timestamp: 121312312
-     *    }],
-     *    'Tuesday, January 11th, 2022' : [{
-     *      query: 'barbie',
-     *      modelName: 'HistoryQuery',
-     *      timestamp: 15221212
-     *    }]
-     *  }
-     * ```
-     * @returns The history queries grouped by date.
-     * @internal
-     */
-    protected get groupByDate(): Dictionary<HistoryQuery[]> {
-      return groupItemsBy(this.historyQueries, current => {
-        return new Date(current.timestamp).toLocaleDateString(this.usedLocale, {
-          day: 'numeric',
-          weekday: 'long',
-          month: 'long',
-          year: 'numeric'
-        });
+  export default defineComponent({
+    name: 'MyHistory',
+    xModule: historyQueriesXModule.name,
+    components: {
+      HistoryQuery: HistoryQueryComponent,
+      BaseSuggestions
+    },
+    props: {
+      /**
+       * Animation component that will be used to animate the suggestions.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      },
+      /**
+       * The current locale.
+       *
+       * @public
+       */
+      locale: {
+        type: String,
+        default: 'en'
+      },
+      /** Class inherited by content element. */
+      queriesListClass: String
+    },
+    setup(props) {
+      useRegisterXModule(historyQueriesXModule);
+
+      /**
+       * The list of history queries.
+       *
+       * @internal
+       */
+      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+
+      /**
+       * The provided {@link SnippetConfig}.
+       *
+       * @internal
+       */
+      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');
+
+      /**
+       * The locale that it is going to be used. It can be the one send it by the snippet config or
+       * the one pass it using the prop.
+       *
+       * @returns The locale to be used.
+       * @internal
+       */
+      const usedLocale = computed(() => {
+        return snippetConfig?.lang ?? props.locale;
       });
-    }
 
-    /**
-     * Formats a timestamp into `hh:mm [PM/AM]` format.
-     *
-     * @example
-     * ```typescript
-     * // locale 'es'
-     * console.log(formatTime(Date.now()) // '16:54'.
-     *
-     * // locale 'en'
-     * console.log(formatTime(Date.now()) // '16:54 PM'.
-     * ```
-     * @param timestamp - The timestamp to format.
-     * @returns The formatted time.
-     * @internal
-     */
-    protected formatTime(timestamp: number): string {
-      return new Date(timestamp).toLocaleTimeString(this.usedLocale, {
-        hour: '2-digit',
-        minute: '2-digit'
+      /**
+       * Returns a record of history queries grouped by date.
+       *
+       * @example
+       * ```typescript
+       *  const historyQueriesGrouped = {
+       *    'Monday, January 10th, 2022' : [{
+       *      query: 'lego',
+       *      modelName: 'HistoryQuery',
+       *      timestamp: 121312312
+       *    }],
+       *    'Tuesday, January 11th, 2022' : [{
+       *      query: 'barbie',
+       *      modelName: 'HistoryQuery',
+       *      timestamp: 15221212
+       *    }]
+       *  }
+       * ```
+       * @returns The history queries grouped by date.
+       * @internal
+       */
+      const groupByDate = computed((): Dictionary<HistoryQuery[]> => {
+        return groupItemsBy(historyQueries.value, current => {
+          return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
+            day: 'numeric',
+            weekday: 'long',
+            month: 'long',
+            year: 'numeric'
+          });
+        });
       });
+
+      /**
+       * Formats a timestamp into `hh:mm [PM/AM]` format.
+       *
+       * @example
+       * ```typescript
+       * // locale 'es'
+       * console.log(formatTime(Date.now()) // '16:54'.
+       *
+       * // locale 'en'
+       * console.log(formatTime(Date.now()) // '16:54 PM'.
+       * ```
+       * @param timestamp - The timestamp to format.
+       * @returns The formatted time.
+       * @internal
+       */
+      const formatTime = (timestamp: number) =>
+        new Date(timestamp).toLocaleTimeString(usedLocale.value, {
+          hour: '2-digit',
+          minute: '2-digit'
+        });
+
+      /**
+       * The `hasHistoryQueries` computed property is a flag representing if there are history queries
+       * stored.
+       *
+       * @returns True if there are history queries; false otherwise.
+       * @internal
+       */
+      const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
+
+      return {
+        hasHistoryQueries,
+        formatTime,
+        groupByDate,
+        historyQueries
+      };
     }
-    /**
-     * The `hasHistoryQueries` computed property is a flag representing if there are history queries
-     * stored.
-     *
-     * @returns True if there are history queries; false otherwise.
-     * @internal
-     */
-    protected get hasHistoryQueries(): boolean {
-      return !isArrayEmpty(this.historyQueries);
-    }
-    /**
-     * The locale that it is going to be used. It can be the one send it by the snippet config or
-     * the one pass it using the prop.
-     *
-     * @returns The locale to be used.
-     * @internal
-     */
-    protected get usedLocale(): string {
-      return this.snippetConfig?.lang ?? this.locale;
-    }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
index da87982a90..30e2de8467 100644
--- a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
@@ -11,12 +11,11 @@
 
 <script lang="ts">
   import { HistoryQuery } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, PropType } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
+  import { useRegisterXModule } from '../../../composables/index';
 
   /**
    * Button that when it is pressed emits the
@@ -25,32 +24,44 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseEventButton },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class RemoveHistoryQuery extends Vue {
-    /**
-     * The historyQuery that will be removed when clicking the clear button.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected historyQuery!: HistoryQuery;
+  export default defineComponent({
+    name: 'RemoveHistoryQuery',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseEventButton
+    },
+    props: {
+      /**
+       * The historyQuery that will be removed when clicking the clear button.
+       *
+       * @public
+       */
+      historyQuery: {
+        type: Object as PropType<HistoryQuery>,
+        required: true
+      }
+    },
+    setup(props) {
+      useRegisterXModule(historyQueriesXModule);
 
-    /**
-     * The event handler that will be triggered when clicking on the clear history query button.
-     *
-     * @remarks
-     * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
-     *
-     * @returns The {@link XEvent} to emit.
-     * @public
-     */
-    protected get removeHistoryQueryEvent(): Partial<XEventsTypes> {
-      return { UserPressedRemoveHistoryQuery: this.historyQuery };
+      /**
+       * The event handler that will be triggered when clicking on the clear history query button.
+       *
+       * @remarks
+       * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
+       *
+       * @returns The {@link XEvent} to emit.
+       * @public
+       */
+      const removeHistoryQueryEvent = computed((): Partial<XEventsTypes> => {
+        return { UserPressedRemoveHistoryQuery: props.historyQuery };
+      });
+
+      return {
+        removeHistoryQueryEvent
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

From 01db769ce5d816332d306fcc947e139dc9dc8c28 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 30 May 2024 10:57:41 +0200
Subject: [PATCH 2/9] chore: avoid barrels

---
 .../history-queries/components/clear-history-queries.vue      | 3 ++-
 .../history-queries/components/history-queries-switch.vue     | 4 +++-
 .../x-modules/history-queries/components/history-queries.vue  | 3 ++-
 .../x-modules/history-queries/components/history-query.vue    | 3 ++-
 .../src/x-modules/history-queries/components/my-history.vue   | 3 ++-
 .../history-queries/components/remove-history-query.vue       | 2 +-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
index ea4a64350a..6c0ca6aef4 100644
--- a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
@@ -18,7 +18,8 @@
   import { VueCSSClasses } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
-  import { useRegisterXModule, useState } from '../../../composables/index';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * A button that when is pressed, emits the
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
index 7ea07c5739..965d4c979d 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
@@ -7,7 +7,9 @@
   import BaseSwitch from '../../../components/base-switch.vue';
   import { historyQueriesXModule } from '../x-module';
   import { isArrayEmpty } from '../../../utils/array';
-  import { use$x, useRegisterXModule, useState } from '../../../composables/index';
+  import { use$x } from '../../../composables/use-$x';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * History Queries Switch is a component to activate or deactivate the history queries.
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
index 6979a83cb6..2d5a9f365d 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
@@ -50,7 +50,8 @@
   import { defineComponent } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
   import { historyQueriesXModule } from '../x-module';
-  import { useGetter, useRegisterXModule } from '../../../composables/index';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useGetter } from '../../../composables/use-getter';
   import HistoryQuery from './history-query.vue';
 
   /**
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-query.vue b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
index 98e897c1d7..95d5fb33dd 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
@@ -44,7 +44,8 @@
   import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
-  import { useGetter, useRegisterXModule } from '../../../composables/index';
+  import { useGetter } from '../../../composables/use-getter';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import RemoveHistoryQuery from './remove-history-query.vue';
 
   /**
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index c1a7c3fe4b..6bbb82084a 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -65,7 +65,8 @@
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { historyQueriesXModule } from '../x-module';
   import { AnimationProp } from '../../../types/index';
-  import { useRegisterXModule, useState } from '../../../composables/index';
+  import { useState } from '../../../composables/use-state';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import HistoryQueryComponent from './history-query.vue';
 
   /**
diff --git a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
index 30e2de8467..019d2edb3d 100644
--- a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
@@ -15,7 +15,7 @@
   import BaseEventButton from '../../../components/base-event-button.vue';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
-  import { useRegisterXModule } from '../../../composables/index';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
 
   /**
    * Button that when it is pressed emits the

From 0f3004c0efbb0cb590e50f69b045162581f363ee Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 30 May 2024 11:35:23 +0200
Subject: [PATCH 3/9] chore: refactor emit and imports

---
 .../history-queries/components/history-query.vue         | 9 +++------
 .../x-modules/history-queries/components/my-history.vue  | 8 ++++----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/x-components/src/x-modules/history-queries/components/history-query.vue b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
index 95d5fb33dd..0bf58030cb 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
@@ -7,7 +7,7 @@
       @property {MouseEvent} event - The original mouse event
     -->
     <BaseSuggestion
-      @click="clickHistoryQuery"
+      @click="$emit('click', suggestion, $event)"
       class="x-history-query__suggestion"
       :class="suggestionClass"
       v-bind="{ suggestion, suggestionSelectedEvents, query }"
@@ -75,7 +75,7 @@
       suggestionClass: String
     },
     emits: ['click'],
-    setup(props, { emit }) {
+    setup(props) {
       useRegisterXModule(historyQueriesXModule);
 
       /**
@@ -97,12 +97,9 @@
         };
       });
 
-      const clickHistoryQuery = () => emit('click', props.suggestion, event);
-
       return {
         query,
-        suggestionSelectedEvents,
-        clickHistoryQuery
+        suggestionSelectedEvents
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index 6bbb82084a..c78d13eeb0 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -57,7 +57,7 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery } from '@empathyco/x-types';
+  import { HistoryQuery as HistoryQueryType } from '@empathyco/x-types';
   import { Dictionary } from '@empathyco/x-utils';
   import { computed, defineComponent, inject } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
@@ -67,7 +67,7 @@
   import { AnimationProp } from '../../../types/index';
   import { useState } from '../../../composables/use-state';
   import { useRegisterXModule } from '../../../composables/use-register-x-module';
-  import HistoryQueryComponent from './history-query.vue';
+  import HistoryQuery from './history-query.vue';
 
   /**
    * The component renders the full history of user searched queries grouped by the day
@@ -84,7 +84,7 @@
     name: 'MyHistory',
     xModule: historyQueriesXModule.name,
     components: {
-      HistoryQuery: HistoryQueryComponent,
+      HistoryQuery,
       BaseSuggestions
     },
     props: {
@@ -158,7 +158,7 @@
        * @returns The history queries grouped by date.
        * @internal
        */
-      const groupByDate = computed((): Dictionary<HistoryQuery[]> => {
+      const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {
         return groupItemsBy(historyQueries.value, current => {
           return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
             day: 'numeric',

From 594e384bad635f0356a98e127fcde651a93fa169 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 30 May 2024 11:47:46 +0200
Subject: [PATCH 4/9] chore: add types

---
 .../history-queries/components/history-queries-switch.vue  | 7 +++++--
 .../x-modules/history-queries/components/my-history.vue    | 6 ++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
index 965d4c979d..844b404313 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
@@ -3,7 +3,8 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent } from 'vue';
+  import { computed, ComputedRef, defineComponent } from 'vue';
+  import { HistoryQuery } from '@empathyco/x-types';
   import BaseSwitch from '../../../components/base-switch.vue';
   import { historyQueriesXModule } from '../x-module';
   import { isArrayEmpty } from '../../../utils/array';
@@ -38,7 +39,9 @@
       /**
        * The history queries from the state.
        */
-      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+      const historyQueries: ComputedRef<HistoryQuery[] | undefined> = useState('historyQueries', [
+        'historyQueries'
+      ]).historyQueries;
 
       /**
        * Checks if there are history queries.
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index c78d13eeb0..5cfbc82051 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -59,7 +59,7 @@
 <script lang="ts">
   import { HistoryQuery as HistoryQueryType } from '@empathyco/x-types';
   import { Dictionary } from '@empathyco/x-utils';
-  import { computed, defineComponent, inject } from 'vue';
+  import { computed, ComputedRef, defineComponent, inject } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
   import { groupItemsBy, isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
@@ -117,7 +117,9 @@
        *
        * @internal
        */
-      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+      const historyQueries: ComputedRef<HistoryQueryType[]> = useState('historyQueries', [
+        'historyQueries'
+      ]).historyQueries;
 
       /**
        * The provided {@link SnippetConfig}.

From 5b9bf343342fd8e7c241d97c716f2665f9df2f65 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 30 May 2024 12:56:44 +0200
Subject: [PATCH 5/9] chore: fix useGetter test

---
 .../composables/__tests__/use-getter.spec.ts  | 87 +++++++------------
 1 file changed, 32 insertions(+), 55 deletions(-)

diff --git a/packages/x-components/src/composables/__tests__/use-getter.spec.ts b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
index 804fbbd5e0..3c103d9160 100644
--- a/packages/x-components/src/composables/__tests__/use-getter.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
@@ -1,72 +1,49 @@
-import { ComputedRef, defineComponent } from 'vue';
-import Vuex, { Store } from 'vuex';
-import { createLocalVue, mount } from '@vue/test-utils';
-import { Dictionary } from '@empathyco/x-utils';
+import { defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../__tests__/utils';
 import { useGetter } from '../use-getter';
-import { historyQueriesXStoreModule } from '../../x-modules/history-queries';
-import { AnyXStoreModule } from '../../store/index';
+import { useRegisterXModule } from '../use-register-x-module';
 import { ExtractGetters } from '../../x-modules/x-modules.types';
-
-const renderUseGetterTest = (getters: string[]): renderUseGetterTestAPI => {
-  const testComponent = defineComponent({
-    setup() {
-      const historyQueriesGetter = useGetter(
-        'historyQueries',
-        getters as (keyof ExtractGetters<'historyQueries'>)[]
-      );
-      return {
-        historyQueriesGetter
-      };
-    }
-  });
-
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
-  const store = new Store({
-    modules: {
-      x: {
-        namespaced: true,
-        modules: {
-          historyQueries: { namespaced: true, ...historyQueriesXStoreModule } as AnyXStoreModule
-        }
-      }
-    }
+import { useStore } from '../use-store';
+import { XPlugin } from '../../plugins';
+import { historyQueriesXModule } from '../../x-modules/history-queries/x-module';
+
+jest.mock('../use-store');
+
+function render(modulePaths: (keyof ExtractGetters<'historyQueries'>)[]) {
+  installNewXPlugin();
+  (useStore as jest.Mock).mockReturnValue(XPlugin.store);
+
+  const component = defineComponent({
+    xModule: 'historyQueries',
+    setup: () => {
+      useRegisterXModule(historyQueriesXModule);
+      const historyQueriesGetter = useGetter('historyQueries', modulePaths);
+      return { historyQueriesGetter };
+    },
+    template: `<div/>`
   });
-  installNewXPlugin({ store }, localVue);
 
-  const wrapper = mount(testComponent, {
-    localVue,
-    store
-  });
+  const wrapper = mount(component);
 
-  return {
-    store,
-    historyQueriesGetter: (wrapper.vm as any).historyQueriesGetter
-  };
-};
+  return (wrapper as any).vm.historyQueriesGetter;
+}
 
 describe('testing useGetter composable', () => {
   it('maps store getters', () => {
-    const { historyQueriesGetter, store } = renderUseGetterTest(['storageKey', 'historyQueries']);
-    expect(historyQueriesGetter.storageKey.value).toEqual('history-queries');
-    expect(historyQueriesGetter.historyQueries.value).toHaveLength(0);
+    const { storageKey, historyQueries } = render(['storageKey', 'historyQueries']);
+    expect(storageKey.value).toEqual('history-queries');
+    expect(historyQueries.value).toHaveLength(0);
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    store.dispatch('x/historyQueries/addQueryToHistory', 'chorizo');
+    XPlugin.store.dispatch('x/historyQueries/addQueryToHistory', 'chorizo');
 
-    expect(historyQueriesGetter.historyQueries.value).toHaveLength(1);
+    expect(historyQueries.value).toHaveLength(1);
   });
 
   it('does not return not requested getters', () => {
-    const { historyQueriesGetter } = renderUseGetterTest(['storageKey']);
-    expect(historyQueriesGetter.storageKey).toBeDefined();
-    expect(historyQueriesGetter.historyQueries).toBeUndefined();
+    const { storageKey, historyQueries } = render(['storageKey']);
+    expect(storageKey).toBeDefined();
+    expect(historyQueries).toBeUndefined();
   });
 });
-
-type renderUseGetterTestAPI = {
-  historyQueriesGetter: Dictionary<ComputedRef<string[]>>;
-  store: Store<any>;
-};

From c78e274bd9f912025940027a2397f034e187af95 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Mon, 3 Jun 2024 10:22:43 +0200
Subject: [PATCH 6/9] chore: fix pr comments

---
 .../components/clear-history-queries.vue              | 10 +++++-----
 .../components/history-queries-switch.vue             | 10 ++++++----
 .../history-queries/components/history-queries.vue    |  8 ++++----
 .../history-queries/components/history-query.vue      |  8 ++++----
 .../history-queries/components/my-history.vue         | 11 +++++------
 .../components/remove-history-query.vue               |  6 +++---
 6 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
index 6c0ca6aef4..e49cc6d3a4 100644
--- a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
@@ -42,7 +42,7 @@
        *
        * @internal
        */
-      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+      const { historyQueries } = useState('historyQueries', ['historyQueries']);
 
       /**
        * Returns if the array of history queries is empty.
@@ -59,11 +59,11 @@
        * tells if it should be added or not.
        * @internal
        */
-      const dynamicClasses = computed((): VueCSSClasses => {
-        return {
+      const dynamicClasses = computed(
+        (): VueCSSClasses => ({
           'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value
-        };
-      });
+        })
+      );
 
       /**
        * The list of events that are going to be emitted when the button is pressed.
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
index 844b404313..fa84a7d7fa 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
@@ -5,6 +5,7 @@
 <script lang="ts">
   import { computed, ComputedRef, defineComponent } from 'vue';
   import { HistoryQuery } from '@empathyco/x-types';
+  import { Dictionary } from '@empathyco/x-utils';
   import BaseSwitch from '../../../components/base-switch.vue';
   import { historyQueriesXModule } from '../x-module';
   import { isArrayEmpty } from '../../../utils/array';
@@ -34,14 +35,15 @@
        *
        * @internal
        */
-      const isEnabled = useState('historyQueries', ['isEnabled']).isEnabled;
+      const { isEnabled } = useState('historyQueries', ['isEnabled']);
 
       /**
        * The history queries from the state.
        */
-      const historyQueries: ComputedRef<HistoryQuery[] | undefined> = useState('historyQueries', [
-        'historyQueries'
-      ]).historyQueries;
+      const { historyQueries }: Dictionary<ComputedRef<HistoryQuery[] | undefined>> = useState(
+        'historyQueries',
+        ['historyQueries']
+      );
 
       /**
        * Checks if there are history queries.
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
index 2d5a9f365d..05005d34dd 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseSuggestions
     v-bind="$attrs"
-    :suggestions="historyQueries"
+    :suggestions="historyQueriesWithResults"
     class="x-history-queries"
     data-test="history-queries"
   >
@@ -77,12 +77,12 @@
        *
        * @internal
        */
-      const historyQueries = useGetter('historyQueries', [
+      const { historyQueriesWithResults } = useGetter('historyQueries', [
         'historyQueriesWithResults'
-      ]).historyQueriesWithResults;
+      ]);
 
       return {
-        historyQueries
+        historyQueriesWithResults
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-query.vue b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
index 0bf58030cb..2c7921b76a 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
@@ -91,11 +91,11 @@
        * @internal
        * @returns The {@link XEvent} to emit.
        */
-      const suggestionSelectedEvents = computed((): Partial<XEventsTypes> => {
-        return {
+      const suggestionSelectedEvents = computed(
+        (): Partial<XEventsTypes> => ({
           UserSelectedAHistoryQuery: props.suggestion
-        };
-      });
+        })
+      );
 
       return {
         query,
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index 5cfbc82051..b78a562236 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -117,9 +117,10 @@
        *
        * @internal
        */
-      const historyQueries: ComputedRef<HistoryQueryType[]> = useState('historyQueries', [
-        'historyQueries'
-      ]).historyQueries;
+      const { historyQueries }: Dictionary<ComputedRef<HistoryQueryType[]>> = useState(
+        'historyQueries',
+        ['historyQueries']
+      );
 
       /**
        * The provided {@link SnippetConfig}.
@@ -135,9 +136,7 @@
        * @returns The locale to be used.
        * @internal
        */
-      const usedLocale = computed(() => {
-        return snippetConfig?.lang ?? props.locale;
-      });
+      const usedLocale = computed(() => snippetConfig?.lang ?? props.locale);
 
       /**
        * Returns a record of history queries grouped by date.
diff --git a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
index 019d2edb3d..dc9522804f 100644
--- a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
@@ -53,9 +53,9 @@
        * @returns The {@link XEvent} to emit.
        * @public
        */
-      const removeHistoryQueryEvent = computed((): Partial<XEventsTypes> => {
-        return { UserPressedRemoveHistoryQuery: props.historyQuery };
-      });
+      const removeHistoryQueryEvent = computed(
+        (): Partial<XEventsTypes> => ({ UserPressedRemoveHistoryQuery: props.historyQuery })
+      );
 
       return {
         removeHistoryQueryEvent

From a427fa700adf590cb0dd8d2551bd12bb3e0b23c4 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 11 Jun 2024 11:09:34 +0200
Subject: [PATCH 7/9] chore: fix pr comments

---
 .../components/history-queries-switch.vue     | 36 +++++++++----------
 .../history-queries/components/my-history.vue | 17 +++++----
 2 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
index fa84a7d7fa..d7d0467847 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
@@ -3,9 +3,8 @@
 </template>
 
 <script lang="ts">
-  import { computed, ComputedRef, defineComponent } from 'vue';
+  import { computed, defineComponent } from 'vue';
   import { HistoryQuery } from '@empathyco/x-types';
-  import { Dictionary } from '@empathyco/x-utils';
   import BaseSwitch from '../../../components/base-switch.vue';
   import { historyQueriesXModule } from '../x-module';
   import { isArrayEmpty } from '../../../utils/array';
@@ -31,26 +30,29 @@
       const $x = use$x();
 
       /**
-       * A boolean with the isEnabled value coming from the store state.
+       * An object with the isEnabled value and the history queries coming from the store state.
        *
        * @internal
        */
-      const { isEnabled } = useState('historyQueries', ['isEnabled']);
-
-      /**
-       * The history queries from the state.
-       */
-      const { historyQueries }: Dictionary<ComputedRef<HistoryQuery[] | undefined>> = useState(
-        'historyQueries',
-        ['historyQueries']
-      );
+      const { isEnabled, historyQueries } = useState('historyQueries', [
+        'isEnabled',
+        'historyQueries'
+      ]);
 
       /**
        * Checks if there are history queries.
        *
        * @returns True if there are history queries; false otherwise.
        */
-      const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
+      const hasHistoryQueries = computed(
+        () => !isArrayEmpty(historyQueries.value as HistoryQuery[])
+      );
+
+      const disableEvent = computed(() =>
+        hasHistoryQueries.value
+          ? 'UserClickedDisableHistoryQueries'
+          : 'UserClickedConfirmDisableHistoryQueries'
+      );
 
       /**
        * Emits an event based on the switch state.
@@ -58,13 +60,7 @@
        * @internal
        */
       const toggle = (): void => {
-        $x.emit(
-          isEnabled.value
-            ? hasHistoryQueries.value
-              ? 'UserClickedDisableHistoryQueries'
-              : 'UserClickedConfirmDisableHistoryQueries'
-            : 'UserClickedEnableHistoryQueries'
-        );
+        $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries');
       };
 
       return {
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index b78a562236..a1372aabc6 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -59,7 +59,7 @@
 <script lang="ts">
   import { HistoryQuery as HistoryQueryType } from '@empathyco/x-types';
   import { Dictionary } from '@empathyco/x-utils';
-  import { computed, ComputedRef, defineComponent, inject } from 'vue';
+  import { computed, defineComponent, inject } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
   import { groupItemsBy, isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
@@ -117,10 +117,7 @@
        *
        * @internal
        */
-      const { historyQueries }: Dictionary<ComputedRef<HistoryQueryType[]>> = useState(
-        'historyQueries',
-        ['historyQueries']
-      );
+      const { historyQueries } = useState('historyQueries', ['historyQueries']);
 
       /**
        * The provided {@link SnippetConfig}.
@@ -160,7 +157,7 @@
        * @internal
        */
       const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {
-        return groupItemsBy(historyQueries.value, current => {
+        return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {
           return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
             day: 'numeric',
             weekday: 'long',
@@ -198,13 +195,15 @@
        * @returns True if there are history queries; false otherwise.
        * @internal
        */
-      const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
+      const hasHistoryQueries = computed(
+        () => !isArrayEmpty(historyQueries.value as HistoryQueryType[])
+      );
 
       return {
         hasHistoryQueries,
-        formatTime,
         groupByDate,
-        historyQueries
+        historyQueries,
+        formatTime
       };
     }
   });

From e3bb6702947eccaa6fd83714df3a05a210d10d25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Antonio=20Caba=C3=B1eros?= <joseacabaneros@gmail.com>
Date: Tue, 11 Jun 2024 11:11:04 +0200
Subject: [PATCH 8/9] fix(history-queries): ensuring history-queries x-module
 registration before using components (#1512)

---
 .../history-queries/components/clear-history-queries.vue       | 3 ---
 .../history-queries/components/history-queries-switch.vue      | 3 ---
 .../x-modules/history-queries/components/history-queries.vue   | 3 ---
 .../src/x-modules/history-queries/components/history-query.vue | 3 ---
 .../src/x-modules/history-queries/components/my-history.vue    | 3 ---
 .../history-queries/components/remove-history-query.vue        | 3 ---
 .../x-components/src/x-modules/history-queries/x-module.ts     | 3 +++
 7 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
index e49cc6d3a4..b30d3b6a6a 100644
--- a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
@@ -18,7 +18,6 @@
   import { VueCSSClasses } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
 
   /**
@@ -35,8 +34,6 @@
       BaseEventButton
     },
     setup() {
-      useRegisterXModule(historyQueriesXModule);
-
       /**
        * The whole history queries.
        *
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
index d7d0467847..44026e2fc9 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
@@ -9,7 +9,6 @@
   import { historyQueriesXModule } from '../x-module';
   import { isArrayEmpty } from '../../../utils/array';
   import { use$x } from '../../../composables/use-$x';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
 
   /**
@@ -25,8 +24,6 @@
       BaseSwitch
     },
     setup() {
-      useRegisterXModule(historyQueriesXModule);
-
       const $x = use$x();
 
       /**
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
index 05005d34dd..1243fc01f6 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
@@ -50,7 +50,6 @@
   import { defineComponent } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
   import { historyQueriesXModule } from '../x-module';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useGetter } from '../../../composables/use-getter';
   import HistoryQuery from './history-query.vue';
 
@@ -70,8 +69,6 @@
     },
     inheritAttrs: false,
     setup() {
-      useRegisterXModule(historyQueriesXModule);
-
       /**
        * The filtered list of history queries.
        *
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-query.vue b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
index 2c7921b76a..e3450665c0 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
@@ -45,7 +45,6 @@
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
   import { useGetter } from '../../../composables/use-getter';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import RemoveHistoryQuery from './remove-history-query.vue';
 
   /**
@@ -76,8 +75,6 @@
     },
     emits: ['click'],
     setup(props) {
-      useRegisterXModule(historyQueriesXModule);
-
       /**
        * The normalized query of the history-queries module.
        *
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index a1372aabc6..c789d4a3bd 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -66,7 +66,6 @@
   import { historyQueriesXModule } from '../x-module';
   import { AnimationProp } from '../../../types/index';
   import { useState } from '../../../composables/use-state';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import HistoryQuery from './history-query.vue';
 
   /**
@@ -110,8 +109,6 @@
       queriesListClass: String
     },
     setup(props) {
-      useRegisterXModule(historyQueriesXModule);
-
       /**
        * The list of history queries.
        *
diff --git a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
index dc9522804f..54b15f8add 100644
--- a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
@@ -15,7 +15,6 @@
   import BaseEventButton from '../../../components/base-event-button.vue';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
 
   /**
    * Button that when it is pressed emits the
@@ -42,8 +41,6 @@
       }
     },
     setup(props) {
-      useRegisterXModule(historyQueriesXModule);
-
       /**
        * The event handler that will be triggered when clicking on the clear history query button.
        *
diff --git a/packages/x-components/src/x-modules/history-queries/x-module.ts b/packages/x-components/src/x-modules/history-queries/x-module.ts
index 76e8a50e83..6d5b90e982 100644
--- a/packages/x-components/src/x-modules/history-queries/x-module.ts
+++ b/packages/x-components/src/x-modules/history-queries/x-module.ts
@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin';
 import { XModule } from '../x-modules.types';
 import { historyQueriesEmitters } from './store/emitters';
 import { historyQueriesXStoreModule } from './store/module';
@@ -23,3 +24,5 @@ export const historyQueriesXModule: HistoryQueriesXModule = {
   storeEmitters: historyQueriesEmitters,
   wiring: historyQueriesWiring
 };
+
+XPlugin.registerXModule(historyQueriesXModule);

From f5c1834e6882e28899deeee3171f2b745f232377 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 11 Jun 2024 14:09:38 +0200
Subject: [PATCH 9/9] chore: add history-queries module in the playground

---
 packages/_vue3-migration-test/src/router.ts   | 14 +++++++-
 .../history-queries/components/index.ts       |  2 ++
 .../components/test-history-queries.vue       | 16 +++++++++
 .../components/test-my-history.vue            | 33 +++++++++++++++++++
 .../src/x-modules/history-queries/index.ts    |  1 +
 .../src/x-modules/index.ts                    |  1 +
 6 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 packages/_vue3-migration-test/src/x-modules/history-queries/components/index.ts
 create mode 100644 packages/_vue3-migration-test/src/x-modules/history-queries/components/test-history-queries.vue
 create mode 100644 packages/_vue3-migration-test/src/x-modules/history-queries/components/test-my-history.vue
 create mode 100644 packages/_vue3-migration-test/src/x-modules/history-queries/index.ts

diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 5eb367255b..b95f10fd9b 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -23,7 +23,9 @@ import {
   TestUseLayouts,
   TestSlidingPanel,
   TestBaseSuggestions,
-  TestHighlight
+  TestHighlight,
+  TestHistoryQueries,
+  TestMyHistory
 } from './';
 
 const routes = [
@@ -146,6 +148,16 @@ const routes = [
     path: '/highlight',
     name: 'Highlight',
     component: TestHighlight
+  },
+  {
+    path: '/history-queries',
+    name: 'HistoryQueries',
+    component: TestHistoryQueries
+  },
+  {
+    path: '/my-history',
+    name: 'MyHistory',
+    component: TestMyHistory
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/components/index.ts b/packages/_vue3-migration-test/src/x-modules/history-queries/components/index.ts
new file mode 100644
index 0000000000..b13804333c
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/components/index.ts
@@ -0,0 +1,2 @@
+export { default as TestHistoryQueries } from './test-history-queries.vue';
+export { default as TestMyHistory } from './test-my-history.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-history-queries.vue b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-history-queries.vue
new file mode 100644
index 0000000000..6d9928394e
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-history-queries.vue
@@ -0,0 +1,16 @@
+<template>
+  <SearchInput :maxLength="10" />
+  <ClearSearchInput />
+
+  <HistoryQueries :maxItemsToRender="5" />
+  <ClearHistoryQueries class="x-button--ghost x-button--ghost-start">
+    <span>Clear previous searches</span>
+  </ClearHistoryQueries>
+</template>
+
+<script setup>
+  import HistoryQueries from '../../../../../x-components/src/x-modules/history-queries/components/history-queries.vue';
+  import ClearHistoryQueries from '../../../../../x-components/src/x-modules/history-queries/components/clear-history-queries.vue';
+  import ClearSearchInput from '../../../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+  import SearchInput from '../../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-my-history.vue b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-my-history.vue
new file mode 100644
index 0000000000..bd1eea8d94
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-my-history.vue
@@ -0,0 +1,33 @@
+<template>
+  <MyHistory v-if="_$x.isHistoryQueriesEnabled && _$x.fullHistoryQueries.length">
+    <template #date="{ date }">
+      <div>{{ date }}</div>
+    </template>
+
+    <template #suggestion="{ suggestion, formatTime }">
+      <HistoryQuery data-test="my-history-query" :suggestion="suggestion">
+        <div class="flex flex-row gap-8">
+          <p>{{ suggestion.query }}</p>
+
+          <p>
+            {{ formatTime(suggestion.timestamp) }}
+          </p>
+        </div>
+
+        <template #remove-button-content>
+          <span>x</span>
+        </template>
+      </HistoryQuery>
+    </template>
+  </MyHistory>
+</template>
+
+<script setup>
+  import HistoryQuery from '../../../../../x-components/src/x-modules/history-queries/components/history-query.vue';
+  import MyHistory from '../../../../../x-components/src/x-modules/history-queries/components/my-history.vue';
+  import { use$x } from '../../../../../x-components/src/composables/use-$x';
+
+  const _$x = use$x();
+</script>
+
+<style scoped></style>
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/index.ts b/packages/_vue3-migration-test/src/x-modules/history-queries/index.ts
new file mode 100644
index 0000000000..07635cbbc8
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index f84c5d1a78..c8a11f0237 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -5,3 +5,4 @@ export * from './search';
 export * from './search-box';
 export { default as TestElementsList } from './test-elements-list.vue';
 export * from './scroll';
+export * from './history-queries';