From 549cb304de2cb4408c7404be77fffa126f6720ad Mon Sep 17 00:00:00 2001 From: serafim-san Date: Mon, 19 Aug 2024 16:13:22 +0300 Subject: [PATCH 01/10] feat(notifications): added notifications --- src/lib/ui/app/PaymentForm/flow.ts | 6 +-- .../ui/core/Notifications/Notification.svelte | 54 +++++++++++++++++++ .../core/Notifications/Notifications.svelte | 6 --- src/lib/ui/core/Notifications/index.ts | 23 +++++++- .../Notifications/index.svelte | 52 +++++++++++++++--- 5 files changed, 125 insertions(+), 16 deletions(-) create mode 100644 src/lib/ui/core/Notifications/Notification.svelte diff --git a/src/lib/ui/app/PaymentForm/flow.ts b/src/lib/ui/app/PaymentForm/flow.ts index 13256833..b1b273ea 100644 --- a/src/lib/ui/app/PaymentForm/flow.ts +++ b/src/lib/ui/app/PaymentForm/flow.ts @@ -1,6 +1,6 @@ import { Query } from '$lib/api/executor.js' import { useStripeCtx } from '$lib/ctx/stripe/index.js' -import { notifcation } from '$ui/core/Notifications/index.js' +import { notification } from '$ui/core/Notifications/index.js' import type { ConfirmCardSetupData, Token } from '@stripe/stripe-js' import { mutateSubscribe } from './api.js' import { usePaymentFormCtx } from './state.js' @@ -134,10 +134,10 @@ export function usePaymentFlow() { }) .then(() => { customer.reload() - notifcation.success(`You have successfully upgraded to the "${plan.name}" plan!`) + notification.success(`You have successfully upgraded to the "${plan.name}" plan!`) }) .catch((error) => { - notifcation.error(`Error during the payment`, { + notification.error(`Error during the payment`, { description: 'Please try again or contact our support', }) diff --git a/src/lib/ui/core/Notifications/Notification.svelte b/src/lib/ui/core/Notifications/Notification.svelte new file mode 100644 index 00000000..d04fa047 --- /dev/null +++ b/src/lib/ui/core/Notifications/Notification.svelte @@ -0,0 +1,54 @@ + + +
+
+ +
+
+

{message}

+ {#if description} +

{description}

+ {/if} + {#if action && action.onClick && action.label} +
+ +
+ {/if} +
+ +
diff --git a/src/lib/ui/core/Notifications/Notifications.svelte b/src/lib/ui/core/Notifications/Notifications.svelte index 053c59f0..ab29896b 100644 --- a/src/lib/ui/core/Notifications/Notifications.svelte +++ b/src/lib/ui/core/Notifications/Notifications.svelte @@ -8,12 +8,6 @@ position="bottom-left" toastOptions={{ unstyled: true, - classes: { - toast: 'border rounded shadow bg-white row p-4 gap-2', - title: 'text-black font-medium', - description: 'text-waterloo', - success: 'fill-green', - }, }} > {/if} diff --git a/src/lib/ui/core/Notifications/index.ts b/src/lib/ui/core/Notifications/index.ts index 18471bba..d8538ba1 100644 --- a/src/lib/ui/core/Notifications/index.ts +++ b/src/lib/ui/core/Notifications/index.ts @@ -1,2 +1,23 @@ +import { toast } from 'svelte-sonner' + export { default } from './Notifications.svelte' -export { toast as notifcation } from 'svelte-sonner' +import component from './Notification.svelte' + +function createToast(icon: string, ...rest: any) { + const [message, options] = rest + + return toast.custom(component, { + componentProps: { + icon, + message, + ...options, + }, + }) +} + +toast.info = (...rest) => createToast('info', ...rest) +toast.error = (...rest) => createToast('error', ...rest) +toast.warning = (...rest) => createToast('warning', ...rest) +toast.success = (...rest) => createToast('checkmark-circle', ...rest) + +export { toast as notification } diff --git a/src/stories/Design System - Core UI/Notifications/index.svelte b/src/stories/Design System - Core UI/Notifications/index.svelte index fa6c1495..d76c58f4 100644 --- a/src/stories/Design System - Core UI/Notifications/index.svelte +++ b/src/stories/Design System - Core UI/Notifications/index.svelte @@ -1,23 +1,63 @@
- + + + console.log('!'), + }, + })} > + Info with button + + + + + -
From ab69324f67251a4d1f5a9560afd4ceb2fd23f3d5 Mon Sep 17 00:00:00 2001 From: serafim-san Date: Wed, 11 Sep 2024 17:57:33 +0400 Subject: [PATCH 02/10] feat(notifications): updated ui of notification component --- .../ui/core/Notifications/Notification.svelte | 53 +++++++++---------- .../Notifications/index.svelte | 33 ++++++------ 2 files changed, 41 insertions(+), 45 deletions(-) diff --git a/src/lib/ui/core/Notifications/Notification.svelte b/src/lib/ui/core/Notifications/Notification.svelte index d04fa047..cd2eff3a 100644 --- a/src/lib/ui/core/Notifications/Notification.svelte +++ b/src/lib/ui/core/Notifications/Notification.svelte @@ -1,54 +1,51 @@
-
- -
+
+ +
-

{message}

+

{message}

{#if description} -

{description}

- {/if} - {#if action && action.onClick && action.label} -
- -
+

+ {#if typeof description === 'string'} + {description} + {:else} + {@render description()} + {/if} +

{/if}
diff --git a/src/stories/Design System - Core UI/Notifications/index.svelte b/src/stories/Design System - Core UI/Notifications/index.svelte index d76c58f4..16b7c579 100644 --- a/src/stories/Design System - Core UI/Notifications/index.svelte +++ b/src/stories/Design System - Core UI/Notifications/index.svelte @@ -5,32 +5,35 @@ +{#snippet description()} + We will check you insight and + publish it very soon + +{/snippet} +
+ Info + - @@ -49,10 +52,6 @@ onclick={() => notification.warning('Event has been created', { description: 'We will check your insight and publish it very soon.', - action: { - label: 'Undo', - onClick: () => console.log('!'), - }, })} >Warning From 44c3bf1830e0558206456c21c82ef725c3b4472e Mon Sep 17 00:00:00 2001 From: serafim-san Date: Thu, 12 Sep 2024 15:25:45 +0400 Subject: [PATCH 03/10] feat(notifications): added button for notification --- .../ui/core/Notifications/Notification.svelte | 33 ++++++++++++------- .../Notifications/index.svelte | 22 ++++++++++++- 2 files changed, 42 insertions(+), 13 deletions(-) diff --git a/src/lib/ui/core/Notifications/Notification.svelte b/src/lib/ui/core/Notifications/Notification.svelte index cd2eff3a..7b3d840e 100644 --- a/src/lib/ui/core/Notifications/Notification.svelte +++ b/src/lib/ui/core/Notifications/Notification.svelte @@ -1,22 +1,24 @@ @@ -24,14 +26,14 @@
-
- +
+
-

{message}

+

{message}

{#if description}

{#if typeof description === 'string'} @@ -41,11 +43,18 @@ {/if}

{/if} + {#if action && action.onClick && action.label} +
+ +
+ {/if}
- + />
diff --git a/src/stories/Design System - Core UI/Notifications/index.svelte b/src/stories/Design System - Core UI/Notifications/index.svelte index 16b7c579..1cea8bc6 100644 --- a/src/stories/Design System - Core UI/Notifications/index.svelte +++ b/src/stories/Design System - Core UI/Notifications/index.svelte @@ -33,7 +33,27 @@ + + From 208d390fff6391ba1bde5e7ae357b65b676d99ba Mon Sep 17 00:00:00 2001 From: serafim-san Date: Thu, 12 Sep 2024 15:36:33 +0400 Subject: [PATCH 04/10] feat(notifications): added custom shadow --- .../ui/core/Notifications/Notification.svelte | 18 +++++++++--------- .../Notifications/index.svelte | 14 ++++++++------ tailwind.config.js | 4 ++++ 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/lib/ui/core/Notifications/Notification.svelte b/src/lib/ui/core/Notifications/Notification.svelte index 7b3d840e..86e32c3e 100644 --- a/src/lib/ui/core/Notifications/Notification.svelte +++ b/src/lib/ui/core/Notifications/Notification.svelte @@ -14,7 +14,7 @@ const { icon, message, description, action }: Props = $props() const dispatch = createEventDispatcher() - + const hasAction = action && action.onClick && action.label const ICONS_MAP: { [key: string]: { fill: string; h?: number; w?: number } } = { info: { fill: 'fill-waterloo' }, 'checkmark-circle': { fill: 'fill-green' }, @@ -25,15 +25,15 @@
- +
-
-

{message}

+
+

{message}

{#if description}

{#if typeof description === 'string'} @@ -43,9 +43,9 @@ {/if}

{/if} - {#if action && action.onClick && action.label} + {#if hasAction}
-
@@ -54,7 +54,7 @@
diff --git a/src/stories/Design System - Core UI/Notifications/index.svelte b/src/stories/Design System - Core UI/Notifications/index.svelte index 1cea8bc6..5f0f978d 100644 --- a/src/stories/Design System - Core UI/Notifications/index.svelte +++ b/src/stories/Design System - Core UI/Notifications/index.svelte @@ -34,10 +34,11 @@ diff --git a/tailwind.config.js b/tailwind.config.js index d8d39785..46710151 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,6 +12,10 @@ export default { borderColor: { DEFAULT: 'var(--porcelain)', }, + boxShadow: { + notification: + '0px 2px 24px 0px rgba(24, 27, 43, 0.04), 1px 3px 7px 0px rgba(47, 53, 77, 0.05)', + }, }, fontSize: { From 0282bf0e5c22332df7fbb8d573cc0efdbdd3a222 Mon Sep 17 00:00:00 2001 From: serafim-san Date: Thu, 12 Sep 2024 18:28:40 +0400 Subject: [PATCH 05/10] feat(notifications): covered object with types --- .../ui/core/Notifications/Notification.svelte | 9 +++-- src/lib/ui/core/Notifications/index.ts | 35 +++++++++++++------ .../Notifications/index.svelte | 4 +-- 3 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/lib/ui/core/Notifications/Notification.svelte b/src/lib/ui/core/Notifications/Notification.svelte index 86e32c3e..cb5ca0dc 100644 --- a/src/lib/ui/core/Notifications/Notification.svelte +++ b/src/lib/ui/core/Notifications/Notification.svelte @@ -8,13 +8,12 @@ icon: 'info' | 'checkmark-circle' | 'warning' | 'error' message: string description?: string | Snippet - action?: { label: string; onClick: VoidFunction; className?: string } + action?: { label: string; onClick: (event: MouseEvent) => void } } const { icon, message, description, action }: Props = $props() const dispatch = createEventDispatcher() - const hasAction = action && action.onClick && action.label const ICONS_MAP: { [key: string]: { fill: string; h?: number; w?: number } } = { info: { fill: 'fill-waterloo' }, 'checkmark-circle': { fill: 'fill-green' }, @@ -26,7 +25,7 @@
@@ -43,9 +42,9 @@ {/if}

{/if} - {#if hasAction} + {#if action}
-
diff --git a/src/lib/ui/core/Notifications/index.ts b/src/lib/ui/core/Notifications/index.ts index d8538ba1..e882db6f 100644 --- a/src/lib/ui/core/Notifications/index.ts +++ b/src/lib/ui/core/Notifications/index.ts @@ -1,12 +1,22 @@ -import { toast } from 'svelte-sonner' +import { toast, type ExternalToast } from 'svelte-sonner' export { default } from './Notifications.svelte' -import component from './Notification.svelte' +import Component from './Notification.svelte' +import type { ComponentType, Snippet } from 'svelte' -function createToast(icon: string, ...rest: any) { - const [message, options] = rest +type ModifiedExternalToastDescription = Omit< + ExternalToast, + 'description' +> & { + description?: string | Snippet +} - return toast.custom(component, { +function createToast( + icon: string, + message: string, + options: ModifiedExternalToastDescription | undefined, +) { + return toast.custom(Component, { componentProps: { icon, message, @@ -15,9 +25,14 @@ function createToast(icon: string, ...rest: any) { }) } -toast.info = (...rest) => createToast('info', ...rest) -toast.error = (...rest) => createToast('error', ...rest) -toast.warning = (...rest) => createToast('warning', ...rest) -toast.success = (...rest) => createToast('checkmark-circle', ...rest) +const notification: Record< + 'info' | 'error' | 'warning' | 'success', + (message: string, options?: ModifiedExternalToastDescription | undefined) => string | number +> = { + info: (...rest) => createToast('info', ...rest), + error: (...rest) => createToast('error', ...rest), + warning: (...rest) => createToast('warning', ...rest), + success: (...rest) => createToast('checkmark-circle', ...rest), +} -export { toast as notification } +export { notification } diff --git a/src/stories/Design System - Core UI/Notifications/index.svelte b/src/stories/Design System - Core UI/Notifications/index.svelte index 5f0f978d..e4f745c2 100644 --- a/src/stories/Design System - Core UI/Notifications/index.svelte +++ b/src/stories/Design System - Core UI/Notifications/index.svelte @@ -1,6 +1,6 @@ From e83988cb15bfd61a7f50a87e02e299ae9dcff441 Mon Sep 17 00:00:00 2001 From: serafim-san Date: Thu, 12 Sep 2024 23:49:19 +0400 Subject: [PATCH 06/10] fix(notification): used type by @DmitryVanGuard suggestion --- src/lib/ui/core/Notifications/index.ts | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/src/lib/ui/core/Notifications/index.ts b/src/lib/ui/core/Notifications/index.ts index e882db6f..94014677 100644 --- a/src/lib/ui/core/Notifications/index.ts +++ b/src/lib/ui/core/Notifications/index.ts @@ -1,20 +1,13 @@ -import { toast, type ExternalToast } from 'svelte-sonner' +import { toast } from 'svelte-sonner' export { default } from './Notifications.svelte' import Component from './Notification.svelte' -import type { ComponentType, Snippet } from 'svelte' - -type ModifiedExternalToastDescription = Omit< - ExternalToast, - 'description' -> & { - description?: string | Snippet -} +import type { ComponentProps } from 'svelte' function createToast( icon: string, message: string, - options: ModifiedExternalToastDescription | undefined, + options?: Omit, 'icon' | 'message'>, ) { return toast.custom(Component, { componentProps: { @@ -27,7 +20,10 @@ function createToast( const notification: Record< 'info' | 'error' | 'warning' | 'success', - (message: string, options?: ModifiedExternalToastDescription | undefined) => string | number + ( + message: string, + options?: Omit, 'icon' | 'message'>, + ) => string | number > = { info: (...rest) => createToast('info', ...rest), error: (...rest) => createToast('error', ...rest), From db8dcf3394fbdcc79943d54e844df2382d5d5d93 Mon Sep 17 00:00:00 2001 From: serafim-san Date: Fri, 13 Sep 2024 00:10:37 +0400 Subject: [PATCH 07/10] fix(notifications): removed custom shadow --- src/lib/ui/core/Notifications/Notification.svelte | 6 +++--- tailwind.config.js | 4 ---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/lib/ui/core/Notifications/Notification.svelte b/src/lib/ui/core/Notifications/Notification.svelte index cb5ca0dc..318a6f8f 100644 --- a/src/lib/ui/core/Notifications/Notification.svelte +++ b/src/lib/ui/core/Notifications/Notification.svelte @@ -24,8 +24,8 @@
@@ -53,7 +53,7 @@
diff --git a/tailwind.config.js b/tailwind.config.js index 8c61db66..2d846b90 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -13,10 +13,6 @@ export default { borderColor: { DEFAULT: 'var(--porcelain)', }, - boxShadow: { - notification: - '0px 2px 24px 0px rgba(24, 27, 43, 0.04), 1px 3px 7px 0px rgba(47, 53, 77, 0.05)', - }, }, screens: { From cb4698083b43e6aab956cc8a6b1c0af4c18b7200 Mon Sep 17 00:00:00 2001 From: serafim-san Date: Fri, 13 Sep 2024 17:50:01 +0400 Subject: [PATCH 08/10] fix(notifications): fixes by @DmitriVanGuard request --- .../ui/core/Notifications/Notification.svelte | 22 +++++++++++----- src/lib/ui/core/Notifications/index.ts | 26 +++++++++---------- 2 files changed, 28 insertions(+), 20 deletions(-) diff --git a/src/lib/ui/core/Notifications/Notification.svelte b/src/lib/ui/core/Notifications/Notification.svelte index 318a6f8f..9214b691 100644 --- a/src/lib/ui/core/Notifications/Notification.svelte +++ b/src/lib/ui/core/Notifications/Notification.svelte @@ -14,25 +14,30 @@ const { icon, message, description, action }: Props = $props() const dispatch = createEventDispatcher() - const ICONS_MAP: { [key: string]: { fill: string; h?: number; w?: number } } = { + const ICONS_MAP: Record = { info: { fill: 'fill-waterloo' }, 'checkmark-circle': { fill: 'fill-green' }, warning: { fill: 'fill-orange', h: 14 }, error: { fill: 'fill-red' }, } + + const currentIcon = ICONS_MAP[icon] - + diff --git a/src/lib/ui/core/Notifications/index.ts b/src/lib/ui/core/Notifications/index.ts index 9dff1c98..a403f034 100644 --- a/src/lib/ui/core/Notifications/index.ts +++ b/src/lib/ui/core/Notifications/index.ts @@ -4,11 +4,9 @@ export { default } from './Notifications.svelte' import Component from './Notification.svelte' import type { ComponentProps, ComponentType } from 'svelte' -function createToast( - icon: string, - message: string, - options?: Omit, 'icon' | 'message'>, -) { +type ToastComponentProps = Omit, 'icon' | 'message'> + +function createToast(icon: string, message: string, options?: ToastComponentProps) { return toast.custom(Component as unknown as ComponentType, { componentProps: { icon, @@ -18,17 +16,19 @@ function createToast( }) } +const createNotificationType = + (icon: string) => + (...rest: [message: string, options?: ToastComponentProps]) => + createToast(icon, ...rest) + const notification: Record< 'info' | 'error' | 'warning' | 'success', - ( - message: string, - options?: Omit, 'icon' | 'message'>, - ) => string | number + (message: string, options?: ToastComponentProps) => string | number > = { - info: (...rest) => createToast('info', ...rest), - error: (...rest) => createToast('error', ...rest), - warning: (...rest) => createToast('warning', ...rest), - success: (...rest) => createToast('checkmark-circle', ...rest), + info: createNotificationType('info'), + error: createNotificationType('error'), + warning: createNotificationType('warning'), + success: createNotificationType('checkmark-circle'), } export { notification } From 493252045d2650f25331febdd72632976d9d24ff Mon Sep 17 00:00:00 2001 From: serafim-san Date: Wed, 25 Sep 2024 12:04:26 +0400 Subject: [PATCH 09/10] fix(notification): fixes by @DmitryVanGuard review --- .../ui/core/Notifications/Notification.svelte | 28 +++++++++---------- .../Notifications/index.svelte | 1 + 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/src/lib/ui/core/Notifications/Notification.svelte b/src/lib/ui/core/Notifications/Notification.svelte index 9214b691..622a7549 100644 --- a/src/lib/ui/core/Notifications/Notification.svelte +++ b/src/lib/ui/core/Notifications/Notification.svelte @@ -9,19 +9,18 @@ message: string description?: string | Snippet action?: { label: string; onClick: (event: MouseEvent) => void } + className?: string } - const { icon, message, description, action }: Props = $props() + const { icon, message, description, action, className }: Props = $props() const dispatch = createEventDispatcher() - const ICONS_MAP: Record = { - info: { fill: 'fill-waterloo' }, - 'checkmark-circle': { fill: 'fill-green' }, - warning: { fill: 'fill-orange', h: 14 }, - error: { fill: 'fill-red' }, + const ICONS_MAP = { + info: { class: 'fill-waterloo' }, + 'checkmark-circle': { class: 'fill-green' }, + warning: { class: 'fill-orange', h: 14 }, + error: { class: 'fill-red' }, } - - const currentIcon = ICONS_MAP[icon]
- +
-
+

{message}

{#if description} @@ -49,11 +49,9 @@ {/if} {#if action} -
- -
+ {/if}
diff --git a/src/stories/Design System - Core UI/Notifications/index.svelte b/src/stories/Design System - Core UI/Notifications/index.svelte index e4f745c2..94623703 100644 --- a/src/stories/Design System - Core UI/Notifications/index.svelte +++ b/src/stories/Design System - Core UI/Notifications/index.svelte @@ -74,6 +74,7 @@ notification.warning('Warning', { description: 'To activate your SanR NFT subscription, you will need to cancel your existing Sanbase Pro subscription first.', + className: 'bg-porcelain', })} >Warning From 5dd9343b157578ea2b6724ccb26ed37f1786f079 Mon Sep 17 00:00:00 2001 From: DmitriVanGuard Date: Wed, 25 Sep 2024 11:48:07 +0200 Subject: [PATCH 10/10] feat(notifications): Mobile top-center position. Rendering notification ui in storybook --- src/lib/ui/app/PaymentForm/flow.ts | 4 +- .../ui/core/Notifications/Notification.svelte | 24 +++++----- .../core/Notifications/Notifications.svelte | 9 ++-- src/lib/ui/core/Notifications/index.ts | 23 ++++------ .../Notifications/index.svelte | 46 +++++++++---------- 5 files changed, 52 insertions(+), 54 deletions(-) diff --git a/src/lib/ui/app/PaymentForm/flow.ts b/src/lib/ui/app/PaymentForm/flow.ts index c5f8d520..a0625721 100644 --- a/src/lib/ui/app/PaymentForm/flow.ts +++ b/src/lib/ui/app/PaymentForm/flow.ts @@ -160,7 +160,7 @@ export function usePaymentFlow() { if (error) { notification.error(`Error during the payment`, { - description: error.message || 'Please try again or contact our support', + content: error.message || 'Please try again or contact our support', duration: 10000, }) trackEvent('payment_fail', { ...analytics, error_code: error.code || '3ds_error' }) @@ -212,7 +212,7 @@ export function usePaymentFlow() { }) .catch((error) => { notification.error(`Error during the payment`, { - description: 'Please try again or contact our support', + content: 'Please try again or contact our support', }) trackEvent('payment_fail', { ...analytics, error_code: 'api_error' }) diff --git a/src/lib/ui/core/Notifications/Notification.svelte b/src/lib/ui/core/Notifications/Notification.svelte index 03a2bb66..fabafef5 100644 --- a/src/lib/ui/core/Notifications/Notification.svelte +++ b/src/lib/ui/core/Notifications/Notification.svelte @@ -7,16 +7,16 @@ type Props = { icon: 'info' | 'checkmark-circle' | 'warning' | 'error' message: string - description?: string | Snippet - duration?: number + content?: string | Snippet action?: { label: string; onClick: (event: MouseEvent) => void } - className?: string + class?: string } - const { icon, message, description, action, className }: Props = $props() + const { icon, message, content, action, class: className }: Props = $props() const dispatch = createEventDispatcher() - const ICONS_MAP = { + + const ICONS = { info: { class: 'fill-waterloo' }, 'checkmark-circle': { class: 'fill-green' }, warning: { class: 'fill-orange', h: 14 }, @@ -27,24 +27,24 @@