@reshape-biotech/design-system 1.2.0 → 1.2.2

package/dist/components/notifications/Notifications.stories.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { notifications } from '../../../notifications';
+	import { notifications } from '../../notifications';
 	import Button from '../button/Button.svelte';
 	import Notifications from '../notifications/Notifications.svelte';
 	import { defineMeta } from '@storybook/addon-svelte-csf';

package/dist/components/notifications/Notifications.svelte

@@ -1,26 +1,8 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
 	import { fly } from 'svelte/transition';
-	import { notifications } from '../../../notifications';
-	import { type IconColor } from '../icons';
-	import { tokens } from '../../tokens';
+	import { notifications } from '../../notifications';
 	import Toast from '../toast/Toast.svelte';
-
-	const color = {
-		danger: tokens.backgroundColor['danger-inverse'],
-		success: tokens.backgroundColor['success-inverse-hover'],
-		warning: tokens.backgroundColor['warning-inverse-hover'],
-		info: tokens.backgroundColor['blue-inverse'],
-		default: tokens.backgroundColor.surface
-	};
-
-	const textColor: Record<string, IconColor | 'inherit'> = {
-		danger: 'primary-inverse',
-		success: 'primary-inverse',
-		warning: 'primary-inverse',
-		info: 'primary-inverse',
-		default: 'inherit'
-	};
 </script>
 
 <div class="fixed left-0 right-0 top-2 z-50 mx-auto flex w-fit flex-col items-center justify-start">

package/dist/components/toast/Toast.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type Notification, notifications } from '../../../notifications';
+	import { type Notification, notifications } from '../../notifications';
 	import Icon from '../icons/Icon.svelte';
 	import { type IconColor } from '../icons';
 	import { tokens } from '../../tokens';

package/dist/components/toast/Toast.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Notification } from '../../../notifications';
+import { type Notification } from '../../notifications';
 type $$ComponentProps = {
     notification: Notification;
 };

package/dist/index.d.ts

@@ -46,5 +46,5 @@ export * from './components/toggle/';
 export * from './components/checkbox/';
 export * from './components/sjsf-wrappers/';
 export { tokens } from './tokens';
-export { notifications } from '../notifications';
+export { notifications } from './notifications';
 import './app.css';

package/dist/index.js

@@ -48,5 +48,5 @@ export * from './components/checkbox/';
 export * from './components/sjsf-wrappers/';
 // Styles and Tokens
 export { tokens } from './tokens';
-export { notifications } from '../notifications';
+export { notifications } from './notifications';
 import './app.css';

package/dist/notifications.d.ts

@@ -0,0 +1,22 @@
+import type { IconName } from './';
+export type NotificationType = 'info' | 'success' | 'warning' | 'danger' | 'default';
+export interface Notification {
+    id: string;
+    type: NotificationType;
+    message: string;
+    timeout?: number;
+    icon?: IconName;
+    dismissable: boolean;
+}
+export declare const notifications: {
+    subscribe: {
+        (this: void, run: import("svelte/store").Subscriber<Notification[]>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+        (this: void, run: import("svelte/store").Subscriber<Notification[]>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+    };
+    dismiss: (id: string) => void;
+    default: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    danger: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    warning: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    info: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    success: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+};

package/dist/notifications.js

@@ -0,0 +1,27 @@
+import { writable } from 'svelte/store';
+const TIMEOUT = 3000;
+const createNotificationStore = () => {
+    const { subscribe, update } = writable([]);
+    const send = (message, type = 'default', iconName, dismissable = false, timeout = 3000) => {
+        const notification = { id: id(), type, message, timeout, icon: iconName, dismissable };
+        update((state) => [...state, notification]);
+        setTimeout(() => {
+            update((state) => state.filter((n) => n.id !== notification.id));
+        }, timeout);
+    };
+    return {
+        subscribe,
+        dismiss: (id) => {
+            update((state) => state.filter((n) => n.id !== id));
+        },
+        default: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'default', icon, dismissable, timeout),
+        danger: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'danger', icon, dismissable, timeout),
+        warning: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'warning', icon, dismissable, timeout),
+        info: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'info', icon, dismissable, timeout),
+        success: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'success', icon, dismissable, timeout)
+    };
+};
+const id = () => {
+    return crypto.randomUUID();
+};
+export const notifications = createNotificationStore();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "1.2.0",
+	"version": "1.2.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -28,6 +28,7 @@
 			"default": "./dist/index.js"
 		},
 		"./tokens": "./dist/tokens.js",
+		"./notifications": "./dist/notifications.js",
 		"./styles": "./dist/app.css",
 		"./tailwind": "./dist/tailwind.preset.js",
 		"./tailwind-safelist": "./dist/tailwind-safelist.js"