fix(animation-prop): decommission old animation-prop.ts and generalize the new one

packages/x-components/src/components/items-list.vue

@@ -26,7 +26,7 @@
   import { computed, defineComponent, PropType } from 'vue';
   import { ListItem } from '../utils/types';
   import { toKebabCase } from '../utils/string';
-  import { animationProp } from '../utils/options-api';
+  import { AnimationProp } from '../types';
 
   /**
    * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on
@@ -39,7 +39,7 @@
     props: {
       /** Animation component that will be used to animate the list. */
       animation: {
-        type: animationProp,
+        type: AnimationProp,
         default: 'ul'
       },
       /** List of items. */

packages/x-components/src/components/result/base-result-image.vue

@@ -41,9 +41,9 @@
 
 <script lang="ts">
   import { Result } from '@empathyco/x-types';
-  import { computed, DefineComponent, defineComponent, PropType, Ref, ref, watch } from 'vue';
-  import { animationProp } from '../../utils/options-api';
+  import { computed, defineComponent, PropType, Ref, ref, watch } from 'vue';
   import { NoAnimation } from '../animations';
+  import { AnimationProp } from '../../types';
 
   /**
    * Component to be reused that renders an `<img>`.
@@ -63,12 +63,12 @@
        * image fallback.
        */
       loadAnimation: {
-        type: animationProp,
+        type: AnimationProp,
         default: () => NoAnimation
       },
       /** Animation to use when switching between the loaded image and the hover image. */
       hoverAnimation: {
-        type: animationProp
+        type: AnimationProp
       },
       /**
        * Indicates if the next valid image should be displayed on hover.
@@ -150,7 +150,7 @@
        *
        * @internal
        */
-      const animation = computed<DefineComponent | string>(() => {
+      const animation = computed(() => {
         return userHasHoveredImage
           ? props.hoverAnimation ?? props.loadAnimation
           : props.loadAnimation;
@@ -163,7 +163,7 @@
        *
        * @internal
        */
-      const imageSrc = computed<string>(() => {
+      const imageSrc = computed(() => {
         return loadedImages.value[
           !props.showNextImageOnHover || !isHovering.value ? 0 : loadedImages.value.length - 1
         ];
@@ -176,7 +176,7 @@
        *
        * @internal
        */
-      const shouldLoadNextImage = computed<boolean>(() => {
+      const shouldLoadNextImage = computed(() => {
         const numImagesToLoad = props.showNextImageOnHover && userHasHoveredImage ? 2 : 1;
         return !!pendingImages.value.length && loadedImages.value.length < numImagesToLoad;
       });
@@ -186,7 +186,7 @@
        *
        * @internal
        */
-      const flagImageAsFailed = (): void => {
+      const flagImageAsFailed = () => {
         pendingImages.value.shift();
       };
 
@@ -195,7 +195,7 @@
        *
        * @internal
        */
-      const flagImageLoaded = (): void => {
+      const flagImageLoaded = () => {
         const image = pendingImages.value.shift();
         if (image) {
           loadedImages.value.push(image);

packages/x-components/src/types/animation-prop.ts

@@ -1,11 +1,11 @@
-import { DefineComponent, PropType } from 'vue';
-
 /**
  * Type for animations props.
  *
+ * @remarks
+ * String for 'ul'
+ * Object for `DefineComponent` type
+ * Function for `() => NoElement`
+ *
  * @public
  */
-export const AnimationProp = [String, Object, Function] as PropType<
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  DefineComponent<{}, {}, any> | string
->;
+export const AnimationProp = [String, Object, Function];

packages/x-components/src/x-modules/facets/components/facets/facets.vue

@@ -58,10 +58,10 @@
   import { Dictionary, map, objectFilter } from '@empathyco/x-utils';
   import { computed, ComputedRef, defineComponent, PropType } from 'vue';
   import { useGetter } from '../../../../composables/use-getter';
-  import { animationProp } from '../../../../utils/options-api';
   import { toKebabCase } from '../../../../utils/string';
   import { useFacets } from '../../composables/use-facets';
   import { facetsXModule } from '../../x-module';
+  import { AnimationProp } from '../../../../types';
 
   /**
    * Custom interface to provide a slot name to a Facet.
@@ -93,7 +93,7 @@
       alwaysVisible: Boolean,
       /** Animation component that will be used to animate the facets. */
       animation: {
-        type: animationProp,
+        type: AnimationProp,
         default: 'ul'
       },
       /**

packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue

@@ -40,10 +40,10 @@
 <script lang="ts">
   import { Facet, Filter, isFacetFilter } from '@empathyco/x-types';
   import { defineComponent, PropType } from 'vue';
-  import { animationProp } from '../../../../utils/options-api';
   import { toKebabCase } from '../../../../utils/string';
   import { useFacets } from '../../composables/use-facets';
   import { facetsXModule } from '../../x-module';
+  import { AnimationProp } from '../../../../types';
   import SelectedFilters from './selected-filters.vue';
 
   /**
@@ -78,7 +78,7 @@
       alwaysVisible: Boolean,
       /** Animation component that will be used to animate the selected filters list. */
       animation: {
-        type: animationProp,
+        type: AnimationProp,
         default: 'ul'
       }
     },

packages/x-components/src/x-modules/search/components/results-list.vue

@@ -8,9 +8,9 @@
   } from '../../../components/decorators/injection.consts';
   import ItemsList from '../../../components/items-list.vue';
   import { RequestStatus } from '../../../store/utils/status-store.utils';
-  import { animationProp } from '../../../utils/options-api';
   import { useState } from '../../../composables/use-state';
   import { searchXModule } from '../x-module';
+  import { AnimationProp } from '../../../types';
 
   /**
    * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
@@ -29,7 +29,7 @@
     props: {
       /** Animation component that will be used to animate the results. */
       animation: {
-        type: animationProp,
+        type: AnimationProp,
         default: 'ul'
       }
     },