Pedroinciarte13/token 42 add status toasts to actions

package.json

@@ -16,7 +16,6 @@
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-cloudflare": "^2.3.3",
 		"@sveltejs/kit": "^1.8.6",
-		"@tanstack/svelte-query": "^4.24.4",
 		"@trpc/client": "^10.9.1",
 		"@trpc/server": "^10.9.1",
 		"@types/color": "^3.0.3",
@@ -33,32 +32,30 @@
 		"devalue": "^4.2.3",
 		"eslint": "^8.33.0",
 		"eslint-config-prettier": "^8.6.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"lucide-svelte": "^0.246.0",
+		"jszip": "^3.10.1",
 		"memfs": "^3.5.1",
 		"postcss": "^8.4.24",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.3",
 		"prettier-plugin-svelte": "^2.10.0",
 		"prettier-plugin-tailwindcss": "^0.2.8",
-		"radix-svelte": "^0.7.1",
+		"sd-tailwindcss-transformer": "^1.4.0",
 		"svelte": "^4.2.0",
 		"svelte-check": "^3.0.3",
-		"svelte-preprocess": "^4.10.7",
 		"svelte-sequential-preprocessor": "^2.0.1",
 		"tailwind-merge": "^1.13.2",
 		"tailwind-variants": "^0.1.13",
 		"tailwindcss": "^3.3.2",
 		"tailwindcss-animate": "^1.0.6",
-		"trpc-svelte-query": "^0.0.2",
 		"typescript": "~4.9.5",
 		"uuid": "^9.0.0",
 		"vest": "^4.6.11",
 		"vite": "^4.4.9",
 		"vite-plugin-cloudflare": "^0.4.1",
 		"vite-plugin-node-polyfills": "^0.8.2",
-		"zod": "^3.20.2",
-		"jszip": "^3.10.1",
-		"sd-tailwindcss-transformer": "^1.4.0"
+		"zod": "^3.20.2"
+	},
+	"dependencies": {
+		"lucide-svelte": "^0.293.0"
 	}
 }

src/lib/features/aliases/utils/getAliasToken.ts

@@ -1,3 +1,4 @@
+import { addToast } from '$lib/features/toast/stores/toastStore'
 import type { Group } from '$lib/features/token-groups-store/types/group.interface'
 import type {
 	IToken,
@@ -32,11 +33,14 @@ export const getAliasToken = (
 				return aliasedToken
 			}
 		} else {
+			addToast(`Token with id ${tokenId} not found in group with id ${groupId}`,"error")
 			throw new Error(
 				`Token with id ${tokenId} not found in group with id ${groupId}`
 			)
 		}
 	} else {
+		addToast(`Group with id ${groupId} not found`,"error")
 		throw new Error(`Group with id ${groupId} not found`)
+
 	}
 }

src/lib/features/aliases/utils/resolveAliasIdToAliasType.ts

@@ -1,3 +1,4 @@
+import { addToast } from '$lib/features/toast/stores/toastStore'
 import type { Group } from '$lib/features/token-groups-store/types/group.interface'
 import type {
 	IToken,
@@ -13,6 +14,7 @@ export let resolveAliasIdToAliasType = (
 	const token = findTokenByGroupIdAndTokenId(groupId, tokenId, groups) as IToken
 
 	if (!token) {
+		addToast(`Token with id "${tokenId}" not found`, "error")
 		throw new Error(`Token with id "${tokenId}" not found`)
 	}
 

src/lib/features/aliases/utils/resolveAliasIdToAliasValue.ts

@@ -1,3 +1,4 @@
+import { addToast } from '$lib/features/toast/stores/toastStore'
 import type { Group } from '$lib/features/token-groups-store/types/group.interface'
 import type {
 	AliasValue,
@@ -21,6 +22,7 @@ export let resolveAliasIdToAliasValueAndType = (
 	const token = findTokenByGroupIdAndTokenId(groupId, tokenId, groups) as IToken
 
 	if (!token) {
+		addToast(`Token with id "${tokenId}" not found`, "error")
 		throw new Error(`Token with id "${tokenId}" not found`)
 	}
 

src/lib/features/aliases/utils/resolveAliasIdToAliasValueAndType.ts

@@ -1,3 +1,4 @@
+import { addToast } from '$lib/features/toast/stores/toastStore'
 import type { Group } from '$lib/features/token-groups-store/types/group.interface'
 import type {
 	AliasValue,
@@ -21,6 +22,7 @@ export let resolveAliasIdToAliasValueAndType = (
 	const token = findTokenByGroupIdAndTokenId(groupId, tokenId, groups) as IToken
 
 	if (!token) {
+		addToast(`Token with id "${tokenId}" not found`, "error")
 		throw new Error(`Token with id "${tokenId}" not found`)
 	}
 

src/lib/features/aliases/utils/resolveAliasRouteToIds.ts

@@ -1,3 +1,4 @@
+import { addToast } from '$lib/features/toast/stores/toastStore'
 import type { Group } from '$lib/features/token-groups-store/types/group.interface'
 import type { IToken } from '$lib/features/token-groups-store/types/token.interface'
 
@@ -27,7 +28,10 @@ export const resolveAliasRouteToIds = (
 			if (group) {
 				return group
 			} else {
+				addToast(`Group ${groupName} not found in parent group ${acc.name}`, "error")
+
 				throw new Error(
+
 					`Group ${groupName} not found in parent group ${acc.name}`
 				)
 			}

src/lib/features/aliases/utils/resolveIdsToAliasRoute.ts

@@ -1,3 +1,4 @@
+import { addToast } from '$lib/features/toast/stores/toastStore'
 import groupsStore from '$lib/features/token-groups-store/groupsStore'
 import { findTokenByGroupIdAndTokenId } from '$lib/utils/findTokenByGroupIdAndTokenId'
 import { get } from 'svelte/store'
@@ -27,6 +28,7 @@ export const resolveIdsToAliasRoute = (
 		if (token) {
 			route = `{${route}.${token.name}}`
 		} else {
+			addToast(`Token with id ${tokenId} not found in group ${groupId}`,"error")
 			throw new Error(`Token with id ${tokenId} not found in group ${groupId}`)
 		}
 	}
@@ -59,6 +61,7 @@ export const resolveIdsToAliasRouteArray = (
 		if (token.name) {
 			route = [...route, token.name]
 		} else {
+			addToast(`Token with id ${tokenId} not found in group ${groupId}`,"error")
 			throw new Error(`Token with id ${tokenId} not found in group ${groupId}`)
 		}
 	}
@@ -107,6 +110,7 @@ export const resolveIdsToAliasRouteAndIdsArray = (
 				}
 			]
 		} else {
+			addToast(`Token with id ${tokenId} not found in group ${groupId}`,"error")
 			throw new Error(`Token with id ${tokenId} not found in group ${groupId}`)
 		}
 	}

src/lib/features/export-design-system/downloadDesignSystem.ts

@@ -9,6 +9,7 @@ import designTokensGroupStore from '$lib/features/token-groups-store/groupsStore
 import buildStyleDictionaryJson from './functions/buildStyleDictionaryJson'
 import { downloadDirectory } from './utils/downloadDirectory'
 import type { DesignSystemOverview } from '../token-groups-store/types/design-system-overview.interface'
+import { addToast } from '../toast/stores/toastStore'
 
 export const downloadDesignSystem = async (
 	designSystemOverview: DesignSystemOverview,
@@ -40,12 +41,14 @@ export const downloadDesignSystem = async (
 						[exportType],
 						DIRECTORY_PATH
 					)
+					addToast(`Design system exported! Type: ${exportType}`,"success")
 				} else {
 					const FILE_NAME = EXPORT_TYPE_CONFIG.files[0]?.destination
 					fs.writeFileSync(
 						`${DIRECTORY_PATH}/${FILE_NAME}`,
 						styleDictionaryJson
 					)
+					addToast(`Design system exported! Type: ${exportType}`,"success")
 				}
 			}
 		}

src/lib/features/export-design-system/transforms/groupTransforms/transfromGroupsToStyleDictionaryJson.ts

@@ -1,3 +1,4 @@
+import { addToast } from '$lib/features/toast/stores/toastStore'
 import type { GroupExpanded } from '../../../token-groups-store/types/group.interface'
 import type { StyleDictonaryGroup } from '../../types/style-dictionary-group.interface'
 import type { StyleDictionaryJson } from '../../types/style-dictionary-json.type'
@@ -14,6 +15,7 @@ export const transformGroupsToStyleDictionaryJson = (
 	if (json.startsWith('{') && json.endsWith('}')) {
 		return json as StyleDictionaryJson
 	} else {
+		addToast('Could not transform groups to Style Dictionary JSON',"error")
 		throw new Error('Could not transform groups to Style Dictionary JSON')
 	}
 }

src/lib/features/templates/StartFromJsonModal.svelte

@@ -10,11 +10,12 @@
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { Theme } from '../token-groups-store/types/design-system-overview.interface'
 	import type { Readable } from 'svelte/store'
+	import { addToast } from '../toast/stores/toastStore'
 
 	let json: string
 	let desingSystemId: string
 	let jsonFile: File
-
+	
 	const activeDesignSystemThemesStore: Readable<Theme[]> = getContext(
 		'activeDesignSystemThemesStore'
 	)
@@ -56,6 +57,7 @@
 			}
 		} catch (error) {
 			alert('JSON is not valid')
+			addToast('JSON is not valid',"error")
 		}
 	}
 

src/lib/features/toast/Toasts.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition'
+    import Toast from './Toast.svelte'
+    import { toasts, dismissToast } from "./stores/toastStore";
+</script>
+
+
+
+{#if $toasts}
+  <section class="fixed bottom-4 right-4 flex mt-4 justify-center flex-col z-50 gap-y-2" transition:fade>
+    {#each $toasts as toast (toast.id)}
+      <Toast 
+        type={toast.type}
+        message = {toast.message}
+        date={toast.date}
+        color={toast.color}
+        on:dismiss={() => dismissToast(toast.id)}>{toast.message}</Toast
+      >
+    {/each}
+  </section>
+{/if}

src/lib/features/toast/atoms/ToastIcon.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { ToastType } from "../types/toast.interface"; 
+    import { AlertTriangle, CheckCircle2 , Info } from 'lucide-svelte';
+
+    export let type: ToastType;
+</script>
+
+<div class="flex items-start pt-5 pr-4 pl-6">
+    {#if type === "error"}
+        <AlertTriangle color="red"/>
+    {:else if type === "info"}
+        <Info  color="blue"/>
+    {:else if type === "warning"}
+        <AlertTriangle color="orange"/>
+    {:else if type === "success"}
+        <CheckCircle2 color="green"/>
+    {/if}
+    <p class="pl-4 capitalize font-bold">{type}</p>
+</div>

src/lib/features/toast/atoms/ToastLeftBar.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { ToastType } from "../types/toast.interface"; 
+    import { X , AlertTriangle, CheckCircle2 , Info } from 'lucide-svelte';
+
+    export let type: ToastType;
+</script>
+
+{#if type === "error"}
+    <div class="bg-red-500 h-full w-2 rounded-tl-lg rounded-bl-lg"></div>
+{:else if type === "info"}
+    <div class="bg-blue-500 h-full w-2 rounded-tl-lg rounded-bl-lg"></div>
+{:else if type === "warning"}
+    <div class="bg-orange-500 h-full w-2 rounded-tl-lg rounded-bl-lg"></div>
+{:else if type === "success"}
+    <div class="bg-green-500 h-full w-2 rounded-tl-lg rounded-bl-lg"></div>
+{/if}

src/lib/features/toast/stores/toastStore.ts

@@ -0,0 +1,37 @@
+import { writable } from "svelte/store";
+import type { Toast, ToastType } from "../types/toast.interface";
+import {v4 as uuidv4} from 'uuid'
+import { TOAST_COLOR, TOAST_TIMEOUT } from "../toast.config";
+import { Type } from "lucide-svelte";
+
+export const toasts = writable<Toast[]>([]);
+
+export const addToast = (message: string, type: ToastType) => {
+    // Create a unique ID so we can easily find/remove it
+    // if it is dismissible/has a timeout.
+    const toastId = uuidv4()
+    let toast: Toast = {
+      id: toastId,
+      message: message,
+      type: type,
+      timeout: TOAST_TIMEOUT[type],
+      date: new Date(),
+      color: TOAST_COLOR[type]
+    }
+    // Setup some sensible defaults for a toast.
+    const defaults = {
+      toastId,
+      type: "info",
+      timeout: 3000,
+    };
+
+    // Push the toast to the top of the list of toasts
+    toasts.update((all) => [{ ...defaults, ...toast }, ...all]);
+
+    // If toast is dismissible, dismiss it after "timeout" amount of time.
+    if (toast.timeout) setTimeout(() => dismissToast(toastId), toast.timeout);
+  };
+
+  export const dismissToast = (id: string) => {
+    toasts.update((all) => all.filter((t) => t.id !== id));
+  };

src/lib/features/toast/toast.config.ts

@@ -0,0 +1,19 @@
+import type { ToastType } from "./types/toast.interface";
+
+export const TOAST_TIMEOUT: {
+    [key in ToastType]: number
+} = {
+    error: 20000,
+    success: 4000,
+    info: 10000,
+    warning: 10000
+}
+
+export const TOAST_COLOR: {
+    [key in ToastType]: string
+} = {
+    error: "red",
+    success: "green",
+    info: "blue",
+    warning: "orange"
+}

src/lib/features/toast/toast.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { X } from 'lucide-svelte';
+    import * as  Card  from "$lib/components/ui/card"
+    import ToastIcon from "./atoms/ToastIcon.svelte";
+    import { createEventDispatcher } from 'svelte'
+    import type { ToastType } from "./types/toast.interface";
+    import ToastLeftBar from "./atoms/ToastLeftBar.svelte";
+
+    export let type: ToastType;
+    export let message: string;
+    export let date: Date
+    export let color: string
+    const dispatch = createEventDispatcher()
+
+    let minutes = date.getMinutes()
+    let hour = date.getHours()
+
+    if(minutes<10){
+        minutes = '0' + minutes
+    }
+    if(hour<10){
+        hour = '0' + hour
+    }
+
+    function handleClickOnX() {
+      dispatch('dismiss')
+    }
+</script>
+
+    <Card.Root class="w-[340px] min-h-28" >
+            <div class="grid grid-cols-[2px,300px,38px] transition:fade">
+                <ToastLeftBar {type}/>
+                <div>
+                    <ToastIcon {type}/>
+                    <div class="text-base pl-16 pr-4 pt-1">
+                        <p>{message}</p>
+                    </div>
+                    <div class="text-slate-500 pt-1 pl-16 pb-5">
+                        {hour}:{minutes}
+                    </div>
+                </div>
+                <div class="pt-6 items-start hover:cursor-pointer h-6" on:click={handleClickOnX}>
+                    <X class="h-4 w-4" color={"gray"} ></X>
+                </div>
+            </div>
+    </Card.Root>

src/lib/features/toast/types/toast.interface.ts

@@ -0,0 +1,10 @@
+export interface Toast{
+    id:string,
+    timeout:number,
+    type: ToastType,
+    message: string,
+    date: Date,
+    color: string
+}
+
+export type ToastType = "error" | "info" | "success" | "warning";