first pass at custom store to handle notifications

packages/builder/src/components/common/Notification/NotificationDisplay.svelte

@@ -1,6 +1,5 @@
 <script>
   import { notificationStore } from "builderStore/store/notifications"
-  import { onMount, onDestroy } from "svelte"
   import { fly } from "svelte/transition"
 
   export let themes = {

packages/client/src/components/ClientApp.svelte

@@ -2,6 +2,7 @@
   import { writable } from "svelte/store"
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
+  import NotificationDisplay from './NotificationDisplay.svelte'
   import SDK from "../sdk"
   import { createDataStore, initialise, screenStore, notificationStore } from "../store"
 
@@ -9,7 +10,7 @@
   setContext("sdk", SDK)
   setContext("component", writable({}))
   setContext("data", createDataStore())
-  setContext("notification", notificationStore)
+  setContext("notifier", notificationStore)
   setContext("screenslot", false)
 
   let loaded = false
@@ -24,3 +25,4 @@
 {#if loaded && $screenStore.activeLayout}
   <Component definition={$screenStore.activeLayout.props} />
 {/if}
+<NotificationDisplay />

packages/client/src/components/NotificationDisplay.svelte

@@ -0,0 +1,71 @@
+<script>
+    import { getContext } from "svelte"
+    import { fly } from "svelte/transition"
+    
+    export let themes = {
+        danger: "#E26D69",
+        success: "#84C991",
+        warning: "#f0ad4e",
+        info: "#5bc0de",
+        default: "#aaaaaa",
+    }
+    
+    export let timeout = 3000
+    
+    const notificationStore = getContext("notification")
+  
+    $: if ($notificationStore.notifications.length) {
+      setTimeout(() => {
+        notificationStore.update(state => {
+          state.notifications.shift()
+          state.notifications = state.notifications
+          return state
+        })
+      }, timeout)
+    }
+  </script>
+  
+  <div class="notifications">
+    {#each $notificationStore.notifications as notification (notification.id)}
+      <div
+        class="toast"
+        style="background: {themes[notification.type]};"
+        transition:fly={{ y: -30 }}>
+        <div class="content">{notification.message}</div>
+        {#if notification.icon}<i class={notification.icon} />{/if}
+      </div>
+    {/each}
+  </div>
+  
+  <style>
+    .notifications {
+      position: fixed;
+      top: 10px;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      padding: 0;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      pointer-events: none;
+    }
+  
+    .toast {
+      flex: 0 0 auto;
+      margin-bottom: 10px;
+      border-radius: var(--border-radius-s);
+      /* The toasts now support being auto sized, so this static width could be removed */
+      width: 40vw;
+    }
+  
+    .content {
+      padding: 10px;
+      display: block;
+      color: white;
+      font-weight: 500;
+    }
+  </style>
+  

packages/client/src/store/index.js

@@ -1,5 +1,5 @@
 export { authStore } from "./auth"
-export { notificationStore } from "./notifier"
+export { notificationStore } from "./notification"
 export { routeStore } from "./routes"
 export { screenStore } from "./screens"
 export { builderStore } from "./builder"

packages/client/src/store/notification.js

@@ -0,0 +1,36 @@
+import { writable, derived } from "svelte/store"
+
+let NOTIFICATION_TIMEOUT = 3000
+
+export const createNotificationStore = () => {
+  const _notifications = writable([])
+  
+	const send = (message, type = "default") => {
+    _notifications.update(state => {
+      state = [
+        ...state,
+        { id: 1, type, message },
+      ]
+    })
+  }
+  
+  const notifications = derived(_notifications, ($_notifications, set) => {
+		 const timeout = setTimeout({
+			set($_notifications)
+			}, NOTIFICATION_TIMEOUT)
+
+			return () => {
+				clearTimeout(timeout);
+			};
+	})
+  const {subscribe} = notifications
+
+  return {
+    subscribe,
+		send,
+    danger: msg => send(msg, "danger"),
+  	warning: msg => send(msg, "warning"),
+  	info: msg => send(msg, "info"),
+  	success: msg => send(msg, "success"),
+  }
+}

packages/client/src/store/notifier.js

@@ -1,23 +0,0 @@
-import { writable } from "svelte/store"
-import { generate } from "shortid"
-
-export const notificationStore = writable({
-  notifications: [],
-})
-
-export function send(message, type = "default") {
-  notificationStore.update(state => {
-    state.notifications = [
-      ...state.notifications,
-      { id: generate(), type, message },
-    ]
-    return state
-  })
-}
-
-export const notifier = {
-  danger: msg => send(msg, "danger"),
-  warning: msg => send(msg, "warning"),
-  info: msg => send(msg, "info"),
-  success: msg => send(msg, "success"),
-}

packages/standard-components/src/Icon.svelte

@@ -3,9 +3,6 @@
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
-  const notification = getContext("notification")
-
-  console.log($notification)
 
   export let icon = ""
   export let size = "fa-lg"