CLASSROOMIO-T-80: Replace sapper with sveltekit

src/lib/components/Snackbar/constants.js

@@ -0,0 +1,15 @@
+export const SNACKBAR_SEVERITY = {
+  ERROR: 'ERROR',
+  WARNING: 'WARNING',
+  DEFAULT: 'DEFAULT',
+  INFO: 'INFO',
+  SUCCESS: 'SUCCESS',
+};
+
+export const SNACKBAR_SEVERITY_COLOR = {
+  ERROR: 'bg-red-600',
+  WARNING: 'bg-yellow-600',
+  INFO: 'bg-blue-600',
+  DEFAULT: 'bg-gray-600',
+  SUCCESS: 'bg-green-600',
+};

src/lib/components/Snackbar/index.svelte

@@ -0,0 +1,79 @@
+<script>
+  import { fly } from 'svelte/transition';
+  import InformationIcon from 'carbon-icons-svelte/lib/Information.svelte';
+  import WarningIcon from 'carbon-icons-svelte/lib/Warning.svelte';
+  import CheckmarkOutline24 from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
+
+  import CloseButton from '../Buttons/Close/index.svelte';
+  import { SNACKBAR_SEVERITY, SNACKBAR_SEVERITY_COLOR } from './constants';
+  import { snackbarStore, snackbarStoreInitialState } from './store';
+
+  let severityColor;
+  let timeoutId;
+
+  function handleClose() {
+    if (typeof $snackbarStore.handleClose === 'number') {
+      $snackbarStore.handleClose();
+    }
+
+    snackbarStore.update((_s) => ({
+      ..._s,
+      ...snackbarStoreInitialState,
+    }));
+    clearTimeout(timeoutId);
+    timeoutId = null;
+  }
+
+  // When open is true trigger autoHideDuration
+  function handleOpen(open) {
+    if (!open) {
+      return;
+    }
+
+    const { autoHideDuration } = $snackbarStore;
+
+    if (typeof autoHideDuration === 'number' && !timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(handleClose, autoHideDuration);
+    }
+  }
+
+  $: handleOpen($snackbarStore.open);
+  $: severityColor = SNACKBAR_SEVERITY_COLOR[$snackbarStore.severity];
+</script>
+
+{#if $snackbarStore.open}
+  {#key $snackbarStore.message}
+    <div
+      transition:fly={{ x: 200, duration: 500 }}
+      class="root text-white rounded-md flex justify-between items-center absolute {severityColor}"
+    >
+      <div class="flex items-center">
+        {#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
+          <CheckmarkOutline24 size={24} class="carbon-icon" />
+        {:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
+          <WarningIcon size={24} class="carbon-icon" />
+        {:else}
+          <InformationIcon size={24} class="carbon-icon" />
+        {/if}
+        <p class="dark:text-white ml-2 text-lg">{$snackbarStore.message}</p>
+      </div>
+
+      <CloseButton onClick={handleClose} contained={true} color="text-white" />
+    </div>
+  {/key}
+{/if}
+
+<style>
+  .root {
+    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    right: 5%;
+    left: auto;
+    top: 24px;
+    transform: translateX(-5%);
+    min-width: 288px;
+    padding: 6px 16px;
+    flex-wrap: wrap;
+    z-index: 51;
+  }
+</style>

src/lib/components/Snackbar/store.js

@@ -0,0 +1,12 @@
+import { writable } from 'svelte/store';
+import { SNACKBAR_SEVERITY } from './constants';
+
+export const snackbarStoreInitialState = {
+  open: false,
+  message: '',
+  severity: SNACKBAR_SEVERITY.DEFAULT,
+  handleClose: () => {},
+  autoHideDuration: 6000,
+};
+
+export const snackbarStore = writable({ ...snackbarStoreInitialState });