feat: revert "use directive transition wrappers" (#586)

# Motivation

Revert #574 because thanks to a different way of mocking the transitions
for test purposes (without vite), those workaround are not needed
anymore.

# Resources

- Mock tested in dfinity/nns-dapp#6404
- New solution to mock the animation for test purposes with Svelte v5
providing by Testing Library in
testing-library/svelte-testing-library#284 (comment)

# Changes

- Revert #574 and use Svelte transitions

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

Author: peterpeterparker

e2e/menu.e2e.ts-snapshots/Menu-can-be-collapsed-1-Google-Chrome-linux.png

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { testSafeFade } from "$lib/directives/transition.directives";
+  import { fade } from "svelte/transition";
   import { createEventDispatcher } from "svelte";
   import { i18n } from "$lib/stores/i18n";
   import { handleKeyPress } from "$lib/utils/keyboard.utils";
@@ -18,8 +18,8 @@
   role="button"
   tabindex="-1"
   aria-label={$i18n.core.close}
-  in:testSafeFade|global={{ duration: FADE_IN_DURATION }}
-  out:testSafeFade|global={{ duration: FADE_OUT_DURATION }}
+  in:fade|global={{ duration: FADE_IN_DURATION }}
+  out:fade|global={{ duration: FADE_OUT_DURATION }}
   class="backdrop"
   class:visible={!invisible}
   on:click|stopPropagation={close}

src/lib/components/Backdrop.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { testSafeFade } from "$lib/directives/transition.directives";
+  import { fade } from "svelte/transition";
   import { busy, busyMessage } from "$lib/stores/busy.store";
   import Spinner from "$lib/components/Spinner.svelte";
   import { nonNullish } from "@dfinity/utils";
 </script>
 
 <!-- Display spinner and lock UI if busyStore is not empty -->
 {#if $busy}
-  <div data-tid="busy" transition:testSafeFade|global>
+  <div data-tid="busy" transition:fade|global>
     <div class="content">
       {#if nonNullish($busyMessage)}
         <p>{$busyMessage}</p>

src/lib/components/BusyScreen.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { testSafeFade } from "$lib/directives/transition.directives";
+  import { fade } from "svelte/transition";
   import { createEventDispatcher } from "svelte";
   import { i18n } from "$lib/stores/i18n";
   import IconClose from "$lib/icons/IconClose.svelte";
@@ -46,7 +46,7 @@
 {#if visible}
   <div
     class="modal"
-    transition:testSafeFade|global={{ duration: 25 }}
+    transition:fade|global={{ duration: 25 }}
     on:introend
     {role}
     data-tid={testId}
@@ -56,8 +56,8 @@
   >
     <Backdrop {disablePointerEvents} on:nnsClose />
     <div
-      in:testSafeFade|global={{ duration: FADE_IN_DURATION }}
-      out:testSafeFade|global={{ duration: FADE_OUT_DURATION }}
+      in:fade|global={{ duration: FADE_IN_DURATION }}
+      out:fade|global={{ duration: FADE_OUT_DURATION }}
       class={`wrapper ${role}`}
     >
       {#if showHeader}

src/lib/components/Modal.svelte

@@ -1,9 +1,6 @@
 <!-- https://github.com/papyrs/papyrs/blob/main/src/lib/components/ui/Popover.svelte -->
 <script lang="ts">
-  import {
-    testSafeFade,
-    testSafeScale,
-  } from "$lib/directives/transition.directives";
+  import { fade, scale } from "svelte/transition";
   import { quintOut } from "svelte/easing";
   import { i18n } from "$lib/stores/i18n";
   import Backdrop from "./Backdrop.svelte";
@@ -33,7 +30,7 @@
   <div
     role="menu"
     aria-orientation="vertical"
-    transition:testSafeFade|global
+    transition:fade|global
     class="popover"
     tabindex="-1"
     style="--popover-top: {`${bottom}px`}; --popover-left: {`${left}px`}; --popover-right: {`${
@@ -48,11 +45,7 @@
       invisible={invisibleBackdrop}
     />
     <div
-      transition:testSafeScale|global={{
-        delay: 25,
-        duration: 150,
-        easing: quintOut,
-      }}
+      transition:scale|global={{ delay: 25, duration: 150, easing: quintOut }}
       class="wrapper"
       class:with-border={invisibleBackdrop}
       class:rtl={direction === "rtl"}

src/lib/components/Popover.svelte

@@ -4,7 +4,7 @@
   import { i18n } from "$lib/stores/i18n";
   import IconLightMode from "$lib/icons/IconLightMode.svelte";
   import IconDarkMode from "$lib/icons/IconDarkMode.svelte";
-  import { testSafeFade } from "$lib/directives/transition.directives";
+  import { fade } from "svelte/transition";
 
   const switchTheme = () => {
     themeStore.select($themeStore === Theme.LIGHT ? Theme.DARK : Theme.LIGHT);
@@ -21,11 +21,11 @@
   aria-label={$i18n.theme.switch_theme}
 >
   {#if isDarkMode}
-    <span in:testSafeFade|global>
+    <span in:fade|global>
       <IconLightMode />
     </span>
   {:else}
-    <span in:testSafeFade|global>
+    <span in:fade|global>
       <IconDarkMode />
     </span>
   {/if}

src/lib/components/ThemeToggleButton.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
   import { toastsStore } from "$lib/stores/toasts.store";
-  import {
-    testSafeFade,
-    testSafeFly,
-  } from "$lib/directives/transition.directives";
+  import { fade, fly } from "svelte/transition";
   import { i18n } from "$lib/stores/i18n";
   import type {
     ToastLevel,
@@ -95,11 +92,8 @@
   data-tid="toast-component"
   role="dialog"
   class={`toast ${theme ?? "themed"}`}
-  in:testSafeFly|global={{
-    y: (position === "top" ? -1 : 1) * 100,
-    duration: 200,
-  }}
-  out:testSafeFade|global={{ delay: 100 }}
+  in:fly|global={{ y: (position === "top" ? -1 : 1) * 100, duration: 200 }}
+  out:fade|global={{ delay: 100 }}
 >
   <div class="icon {level}" aria-hidden="true">
     {#if spinner}

src/lib/components/Toast.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { testSafeFly } from "$lib/directives/transition.directives";
+  import { fly } from "svelte/transition";
 
   // Instead of a number an object is used to make svelte notice any updates need rerender
   export let transition: { diff: number } = { diff: 0 };
@@ -19,7 +19,7 @@
 {#key transition}
   <div
     bind:clientWidth={absolutOffset}
-    in:testSafeFly|global={{ x: slideOffset, duration: ANIMATION_DURATION }}
+    in:fly|global={{ x: slideOffset, duration: ANIMATION_DURATION }}
     class="transition"
   >
     <slot />