@rainlanguage/ui-components 0.0.1-alpha.100 → 0.0.1-alpha.101

package/dist/components/ToastDetail.svelte

@@ -1,16 +1,39 @@
 <script>import { Toast } from "flowbite-svelte";
 import { slide } from "svelte/transition";
 import { CheckCircleSolid, CloseCircleSolid } from "flowbite-svelte-icons";
+import { useToasts } from "../providers/toasts/useToasts";
 export let toast;
+export let i;
+const { removeToast } = useToasts();
 </script>
 
-<Toast dismissable={true} transition={slide} color={toast.color} class="mb-2">
+<Toast
+	on:close={() => removeToast(i)}
+	dismissable={true}
+	transition={slide}
+	color={toast.color}
+	class="mb-2"
+>
 	<svelte:fragment slot="icon">
 		{#if toast.type === 'success'}
-			<CheckCircleSolid class="h-5 w-5" />
+			<CheckCircleSolid class="h-5 w-5" data-testid="success-icon" />
 		{:else if toast.type === 'error'}
-			<CloseCircleSolid class="h-5 w-5" />
+			<CloseCircleSolid class="h-5 w-5" data-testid="error-icon" />
 		{/if}
 	</svelte:fragment>
-	{toast.message}
+	<p>{toast.message}</p>
+	{#if toast.links}
+		<div class="flex flex-col">
+			{#each toast.links as { link, label }}
+				<a
+					href={link}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-blue-500 hover:underline"
+				>
+					{label}
+				</a>
+			{/each}
+		</div>
+	{/if}
 </Toast>

package/dist/components/ToastDetail.svelte.d.ts

@@ -3,6 +3,7 @@ import type { ToastProps } from '../types/toast';
 declare const __propDef: {
     props: {
         toast: ToastProps;
+        i: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/providers/toasts/ToastProvider.svelte

@@ -2,14 +2,14 @@
 import { setToastsContext } from "./context";
 import { writable } from "svelte/store";
 import { fade } from "svelte/transition";
-export let toasts = writable([]);
+const toasts = writable([]);
 setToastsContext(toasts);
 </script>
 
 <div class="fixed right-4 top-4 z-[100]">
-	{#each $toasts as toast}
+	{#each $toasts as toast, i}
 		<div out:fade data-testid="toast">
-			<ToastDetail {toast} />
+			<ToastDetail {toast} {i} />
 		</div>
 	{/each}
 </div>

package/dist/providers/toasts/ToastProvider.svelte.d.ts

@@ -1,10 +1,6 @@
 import { SvelteComponent } from "svelte";
-import { type Writable } from 'svelte/store';
-import type { ToastProps } from '../../types/toast';
 declare const __propDef: {
-    props: {
-        toasts?: Writable<ToastProps[]>;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/providers/toasts/context.d.ts

@@ -7,5 +7,8 @@ export declare const TOASTS_KEY = "rain:ui-components:toasts";
 export declare function getToastsContext(): Writable<ToastProps[]>;
 /**
  * Sets the toasts store in Svelte's context
+ *
+ * @param {Writable<ToastProps[]>} toasts - The writable store containing all active toast notifications
+ * @returns {void}
  */
 export declare function setToastsContext(toasts: Writable<ToastProps[]>): void;

package/dist/providers/toasts/context.js

@@ -13,6 +13,9 @@ export function getToastsContext() {
 }
 /**
  * Sets the toasts store in Svelte's context
+ *
+ * @param {Writable<ToastProps[]>} toasts - The writable store containing all active toast notifications
+ * @returns {void}
  */
 export function setToastsContext(toasts) {
     setContext(TOASTS_KEY, toasts);

package/dist/providers/toasts/useToasts.d.ts

@@ -3,7 +3,10 @@ import type { ToastProps } from '../../types/toast';
  * Hook for managing toast notifications in the application.
  * Provides functionality to add, remove, and access toast notifications.
  *
- * @returns An object containing the toast store and methods to manipulate toasts
+ * @returns {Object} An object containing:
+ *   - toasts: Writable store containing all active toast notifications
+ *   - addToast: Function to add a new toast notification
+ *   - removeToast: Function to remove a toast notification by index
  */
 export declare function useToasts(): {
     toasts: import("svelte/store").Writable<ToastProps[]>;

package/dist/providers/toasts/useToasts.js

@@ -1,18 +1,20 @@
 import { getToastsContext } from './context';
-import { get } from 'svelte/store';
-import { v4 as uuidv4 } from 'uuid';
 /**
  * Hook for managing toast notifications in the application.
  * Provides functionality to add, remove, and access toast notifications.
  *
- * @returns An object containing the toast store and methods to manipulate toasts
+ * @returns {Object} An object containing:
+ *   - toasts: Writable store containing all active toast notifications
+ *   - addToast: Function to add a new toast notification
+ *   - removeToast: Function to remove a toast notification by index
  */
 export function useToasts() {
     const toasts = getToastsContext();
     /**
-     * Removes a toast notification by its index
+     * Removes a toast notification by its index from the toasts store
      *
-     * @param index - The index of the toast to remove
+     * @param {number} index - The index of the toast to remove
+     * @returns {void}
      */
     const removeToast = (index) => {
         toasts.update((toasts) => {
@@ -23,28 +25,20 @@ export function useToasts() {
         });
     };
     /**
-     * Adds a new toast notification and automatically removes it after 3 seconds
+     * Adds a new toast notification to the toasts store
      *
-     * @param toast - The toast properties (message and type)
+     * @param {ToastProps} toast - The toast configuration object containing:
+     *   - message: The text to display in the toast
+     *   - type: The type of toast (success, error, warning, info)
+     *   - color: The color theme of the toast (green, red, yellow, blue)
+     *   - links: Optional array of links to display in the toast
+     * @returns {void}
      */
     const addToast = (toast) => {
-        const newToast = { ...toast, id: uuidv4() };
-        let addedToastIndex = -1;
         toasts.update((toasts) => {
-            const updatedToasts = [...toasts, newToast];
-            addedToastIndex = updatedToasts.length - 1;
+            const updatedToasts = [...toasts, toast];
             return updatedToasts;
         });
-        const toastId = newToast.id;
-        if (addedToastIndex > -1) {
-            setTimeout(() => {
-                const currentToasts = get(toasts);
-                const currentIndex = currentToasts.findIndex((t) => t.id === toastId);
-                if (currentIndex > -1) {
-                    removeToast(currentIndex);
-                }
-            }, 3000);
-        }
     };
     return {
         toasts,

package/dist/types/toast.d.ts

@@ -2,5 +2,9 @@ export interface ToastProps {
     message: string;
     type: 'success' | 'error' | 'warning' | 'info';
     color: 'green' | 'red' | 'yellow' | 'blue';
-    id?: string;
+    links?: ToastLink[];
 }
+export type ToastLink = {
+    link: string;
+    label: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.100",
+	"version": "0.0.1-alpha.101",
 	"description": "A component library for building Svelte applications to be used with Raindex.",
 	"license": "LicenseRef-DCL-1.0",
 	"author": "Rain Open Source Software Ltd",
@@ -53,7 +53,7 @@
 		"@fontsource/dm-sans": "5.1.0",
 		"@imask/svelte": "7.6.1",
 		"@observablehq/plot": "0.6.16",
-		"@rainlanguage/orderbook": "0.0.1-alpha.100",
+		"@rainlanguage/orderbook": "0.0.1-alpha.101",
 		"@reown/appkit": "1.6.4",
 		"@reown/appkit-adapter-wagmi": "1.6.4",
 		"@sentry/sveltekit": "7.120.0",