merge main branch

packages/x-components/CHANGELOG.md

@@ -3,6 +3,49 @@
 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.81](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-08-20)
+
+
+### Features
+
+* **querySuggestions:** hide suggestions that match with any session query (#1600) ([2f51375](https://github.com/empathyco/x/commit/2f51375e04d46e2aba77f08332797285829ebde7))
+
+
+
+## [5.0.0-alpha.80](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-08-19)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+
+
+
+
+## [5.0.0-alpha.79](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-08-14)
+
+
+### Features
+
+* update result information in the QPs (#1591) ([3e99d0c](https://github.com/empathyco/x/commit/3e99d0cdcb25366af2adff977e25d58d45f7421f))
+
+
+
+## [5.0.0-alpha.78](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-08-13)
+
+
+### Features
+
+* **main-modal:** make events configurable via props (#1590) ([60d630c](https://github.com/empathyco/x/commit/60d630ca2a181d2919b9f1019abbf1eee5dd2c30))
+
+
+
+## [5.0.0-alpha.77](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-08-13)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+
+
+
+
 ## [5.0.0-alpha.76](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-08-08)
 
 

packages/x-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.76",
+  "version": "5.0.0-alpha.81",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -91,7 +91,7 @@
   "devDependencies": {
     "@badeball/cypress-cucumber-preprocessor": "~20.0.0",
     "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
-    "@empathyco/x-tailwindcss": "^1.2.0-alpha.3",
+    "@empathyco/x-tailwindcss": "^1.2.0-alpha.5",
     "@microsoft/api-documenter": "~7.23.0",
     "@microsoft/api-extractor": "~7.39.0",
     "@rollup/plugin-commonjs": "~25.0.7",

packages/x-components/src/components/modals/main-modal.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, PropType } from 'vue';
   import { AnimationProp } from '../../types/animation-prop';
   import { XEvent } from '../../wiring/events.types';
   import BaseEventsModal from './base-events-modal.vue';
@@ -36,42 +36,35 @@
       animation: {
         type: AnimationProp
       },
+      /**
+       * Events to listen for closing the main modal.
+       */
+      closeEvents: {
+        type: Array as PropType<XEvent[]>,
+        default: () => ['UserClickedCloseX', 'UserClickedOutOfMainModal']
+      },
       /**
        * Determines if the focused element changes to one inside the modal when it opens. Either the
        * first element with a positive tabindex or just the first focusable element.
        */
       focusOnOpen: {
         type: Boolean,
         default: false
-      }
-    },
-    setup() {
+      },
       /**
        * Events to listen for opening the main modal.
-       *
-       * @internal
        */
-      const openEvents: XEvent[] = ['UserClickedOpenX', 'UserOpenXProgrammatically'];
-
-      /**
-       * Events to listen for closing the main modal.
-       *
-       * @internal
-       */
-      const closeEvents: XEvent[] = ['UserClickedCloseX', 'UserClickedOutOfMainModal'];
-
+      openEvents: {
+        type: Array as PropType<XEvent[]>,
+        default: () => ['UserClickedOpenX', 'UserOpenXProgrammatically']
+      },
       /**
        * Event to be emitted by the modal when clicked out of its content.
-       *
-       * @internal
        */
-      const outOfModalClickEvent: XEvent = 'UserClickedOutOfMainModal';
-
-      return {
-        openEvents,
-        closeEvents,
-        outOfModalClickEvent
-      };
+      outOfModalClickEvent: {
+        type: (String as PropType<XEvent>) || null,
+        default: 'UserClickedOutOfMainModal'
+      }
     }
   });
 </script>
@@ -125,6 +118,45 @@ The `contentClass` prop can be used to add classes to the modal content.
   </div>
 </template>
 
+<script>
+  import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components';
+
+  export default {
+    name: 'MainModalDemo',
+    components: {
+      MainModal,
+      CloseMainModal,
+      OpenMainModal
+    }
+  };
+</script>
+```
+
+### Customizing the modal events
+
+The modal events can be customized by changing its props values:
+
+- To add or subtract events to open or close the modal,
+- To modify or remove the default
+  [`UserClickedOutOfMainModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
+  that the modal emits.
+
+In this example, we are changing the `openEvents` prop to add another event, and removing the event
+that the modal would emit when the user clicks out of the modal.
+
+```vue live
+<template>
+  <div>
+    <OpenMainModal>Open X</OpenMainModal>
+    <MainModal
+      :openEvents="['UserClickedOpenX', 'UserOpenXProgrammatically', 'MyCustomXEvent']"
+      :outOfModalClickEvent="null"
+    >
+      <CloseMainModal>Close X</CloseMainModal>
+    </MainModal>
+  </div>
+</template>
+
 <script>
   import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components';
 

packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts

@@ -33,13 +33,17 @@ const result = createResultStub('jacket', { variants });
 const render = ({
   template = '<ResultVariantSelector/>',
   result = {},
-  autoSelectDepth = Number.POSITIVE_INFINITY
+  autoSelectDepth = Number.POSITIVE_INFINITY,
+  queryPreviewHash = null as string | null
 } = {}) => {
   const resultComponent = defineComponent({
     components: {
       ResultVariantsProvider,
       ResultVariantSelector
     },
+    provide: {
+      queryPreviewHash
+    },
     data() {
       return {
         result,
@@ -168,7 +172,26 @@ describe('results with variants', () => {
     expect(emitSpy).toHaveBeenCalledTimes(1);
     expect(emitSpy).toHaveBeenCalledWith(
       'UserSelectedAResultVariant',
-      { result, variant: variants[0], level: 0 },
+      { result, variant: variants[0], level: 0, queryPreviewHash: null },
+      expect.anything()
+    );
+  });
+
+  it('emits UserSelectedAResultVariant event when a variant from a query preview is selected', async () => {
+    const { wrapper, emitSpy } = render({
+      result,
+      autoSelectDepth: 0,
+      queryPreviewHash: 'abcd'
+    });
+
+    const button = wrapper.find(getDataTestSelector('variant-button'));
+
+    await button.trigger('click');
+
+    expect(emitSpy).toHaveBeenCalledTimes(1);
+    expect(emitSpy).toHaveBeenCalledWith(
+      'UserSelectedAResultVariant',
+      { result, variant: variants[0], level: 0, queryPreviewHash: 'abcd' },
       expect.anything()
     );
   });
@@ -289,26 +312,26 @@ describe('results with variants', () => {
 
       const firstLevelVariantButtons = findSelectorButtonByLevel(0);
 
-      expect(firstLevelVariantButtons)?.toHaveLength(2);
-      expect(firstLevelVariantButtons?.at(0)?.text()).toEqual('red jacket');
-      expect(firstLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket');
+      expect(firstLevelVariantButtons).toHaveLength(2);
+      expect(firstLevelVariantButtons.at(0).text()).toEqual('red jacket');
+      expect(firstLevelVariantButtons.at(1).text()).toEqual('blue jacket');
 
-      await firstLevelVariantButtons?.at(1)?.trigger('click');
+      await firstLevelVariantButtons.at(1).trigger('click');
 
       const secondLevelVariantButtons = findSelectorButtonByLevel(1);
 
       expect(secondLevelVariantButtons).toHaveLength(2);
-      expect(secondLevelVariantButtons?.at(0)?.text()).toEqual('blue jacket L');
-      expect(secondLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket S');
+      expect(secondLevelVariantButtons.at(0).text()).toEqual('blue jacket L');
+      expect(secondLevelVariantButtons.at(1).text()).toEqual('blue jacket S');
 
-      await secondLevelVariantButtons?.at(0)?.trigger('click');
+      await secondLevelVariantButtons.at(0).trigger('click');
 
       const thirdLevelVariantButtons = findSelectorButtonByLevel(2);
 
       expect(thirdLevelVariantButtons).toHaveLength(3);
-      expect(thirdLevelVariantButtons?.at(0)?.text()).toEqual('blue jacket L1');
-      expect(thirdLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket L2');
-      expect(thirdLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket L2');
+      expect(thirdLevelVariantButtons.at(0).text()).toEqual('blue jacket L1');
+      expect(thirdLevelVariantButtons.at(1).text()).toEqual('blue jacket L2');
+      expect(thirdLevelVariantButtons.at(1).text()).toEqual('blue jacket L2');
     });
 
     it('wont render if no result is injected', () => {
@@ -352,12 +375,12 @@ describe('results with variants', () => {
 
       expect(variants).toHaveLength(2);
 
-      expect(variants.at(0)?.text()).toEqual('red jacket');
-      expect(variants.at(1)?.text()).toEqual('blue jacket');
+      expect(variants.at(0).text()).toEqual('red jacket');
+      expect(variants.at(1).text()).toEqual('blue jacket');
 
-      await variants.at(0)?.trigger('click');
+      await variants.at(0).trigger('click');
 
-      expect(variants.at(0)?.element).toHaveClass('isSelected');
+      expect(variants.at(0).element).toHaveClass('isSelected');
     });
 
     it('exposes variant, isSelected and selectVariant in the variant slot', async () => {
@@ -378,11 +401,11 @@ describe('results with variants', () => {
 
       expect(variants).toHaveLength(2);
 
-      expect(variants.at(0)?.text()).toEqual('red jacket');
-      expect(variants.at(1)?.text()).toEqual('blue jacket');
+      expect(variants.at(0).text()).toEqual('red jacket');
+      expect(variants.at(1).text()).toEqual('blue jacket');
 
-      await variants.at(1)?.trigger('click');
-      expect(variants.at(1)?.element).toHaveClass('isSelected');
+      await variants.at(1).trigger('click');
+      expect(variants.at(1).element).toHaveClass('isSelected');
     });
 
     it('exposes variant and isSelected in the variant-content slot', async () => {
@@ -398,10 +421,10 @@ describe('results with variants', () => {
 
       expect(variants).toHaveLength(2);
 
-      await variants.at(0)?.trigger('click');
+      await variants.at(0).trigger('click');
 
-      expect(variants.at(0)?.text()).toContain('red jacket SELECTED!');
-      expect(variants.at(1)?.text()).toEqual('blue jacket');
+      expect(variants.at(0).text()).toContain('red jacket SELECTED!');
+      expect(variants.at(1).text()).toEqual('blue jacket');
     });
   });
 });

packages/x-components/src/components/result/result-variants-provider.vue

@@ -1,5 +1,15 @@
 <script lang="ts">
-  import { defineComponent, ref, computed, watch, provide, Ref, PropType } from 'vue';
+  import {
+    defineComponent,
+    ref,
+    computed,
+    watch,
+    provide,
+    Ref,
+    PropType,
+    inject,
+    ComputedRef
+  } from 'vue';
   import { Result, ResultVariant } from '@empathyco/x-types';
   import {
     RESULT_WITH_VARIANTS_KEY,
@@ -55,6 +65,13 @@
        */
       const selectedVariants = ref<ResultVariant[]>([]);
 
+      /**
+       * It injects the queryPreviewHash provided by a query-preview.
+       *
+       * @internal
+       */
+      const queryPreviewHash = inject<ComputedRef<string> | null>('queryPreviewHash', null);
+
       /**
        * Selects a variant of the result.
        * When called, it slices the array of selected variants to remove the selected child variants.
@@ -68,7 +85,12 @@
           return;
         }
         selectedVariants.value.splice(level, Number.POSITIVE_INFINITY, variant);
-        xBus.emit('UserSelectedAResultVariant', { variant, level, result: result.value });
+        xBus.emit('UserSelectedAResultVariant', {
+          variant,
+          level,
+          result: result.value,
+          queryPreviewHash
+        });
       }
 
       /**

packages/x-components/src/wiring/events.types.ts

@@ -1,4 +1,5 @@
 import { Result, ResultVariant, Suggestion } from '@empathyco/x-types';
+import { ComputedRef } from 'vue';
 import { ExtractPayload } from '../store/store.types';
 import { ArrowKey, PropsWithType } from '../utils';
 import { DeviceXEvents } from '../x-modules/device';
@@ -200,10 +201,15 @@ export interface XEventsTypes
   UserReachedEmpathizeTop: void;
   /**
    * The user selected a result variant.
-   * Payload: And object containing the result, the selected variant and the level of the selected
-   * variant.
+   * Payload: And object containing the result, the selected variant, the level of the selected
+   * variant and the query preview hash.
    */
-  UserSelectedAResultVariant: { result: Result; variant: ResultVariant; level: number };
+  UserSelectedAResultVariant: {
+    result: Result;
+    variant: ResultVariant;
+    level: number;
+    queryPreviewHash: ComputedRef<string> | null;
+  };
   /**
    * User selected any kind of suggestion (query-suggestion, popular-search...)
    * Payload: The {@link @empathyco/x-types#Suggestion | suggestion} that the user selected.

packages/x-components/src/x-modules/queries-preview/components/query-preview.vue

@@ -119,6 +119,8 @@
        */
       const queryPreviewHash = computed(() => getHashFromQueryPreviewInfo(props.queryPreviewInfo));
 
+      provide('queryPreviewHash', queryPreviewHash);
+
       /**
        * Gets from the state the results preview of the query preview.
        *