Switch to using shadcn's Sonner for in-app toast notifications

[rithviknishad]

Currently, notifications are dispatched via functions exported from Notifications.js.

Since we are slowly moving towards using shadcn's UI components, let's switch to using shadcn's sonner for notifications.

https://ui.shadcn.com/docs/components/sonner

Here's an example of the Toaster component added to the App.tsx file (to ensure colours are as expected).

care_fe/src/App.tsx

Lines 38 to 45 in e48d37c

	<Toaster
	position="top-right"
	theme="light"
	richColors
	// Voluntarily passing empty object as a workaround for `richColors`
	// to work. Refer: https://github.com/shadcn-ui/ui/issues/2234.
	toastOptions={{}}
	/>

Here's the full attempt diff for reference: https://github.com/ohcnetwork/care_fe/pull/9350/files

Action Items

• Install Sonner from shadcn-ui.
• Remove existing shadcn's Toaster to avoid conflicts with Sonner. Sonner support positioning without needing to write custom CSS. (i.e.: toast.tsx, toaster.tsx, useToast)
• Update functions in Notifications.js functions to instead trigger the toast of sonner instead of from pnotify library.
• Uninstall pnotify and related packages.
• Add development docs on: https://github.com/ohcnetwork/docs/tree/master/docs/care/development.

[nilay-v3rma]

May I work on this issue?

[rithviknishad]

@nilay-v3rma could you open a draft PR once you start working on it?

[nilay-v3rma]

@rithviknishad sure i'll raise it asap

[nilay-v3rma]

@rithviknishad I have raised the PR

[NikhilA8606]

Currently, notifications are dispatched via functions exported from Notifications.js.

Since we are slowly moving towards using shadcn's UI components, let's switch to using shadcn's sonner for notifications.

https://ui.shadcn.com/docs/components/sonner

Here's an example of the Toaster component added to the App.tsx file (to ensure colours are as expected).

care_fe/src/App.tsx

Lines 38 to 45 in e48d37c

<Toaster
position="top-right"
theme="light"
richColors
// Voluntarily passing empty object as a workaround for richColors
// to work. Refer: shadcn-ui/ui#2234.
toastOptions={{}}
/>
Here's the full attempt diff for reference: https://github.com/ohcnetwork/care_fe/pull/9350/files

Action Items

• Install Sonner from shadcn-ui.[ ] Remove existing shadcn's Toaster to avoid conflicts with Sonner. Sonner support positioning without needing to write custom CSS. (i.e.: toast.tsx, toaster.tsx, useToast)[ ] Update functions in Notifications.js functions to instead trigger the toast of sonner instead of from pnotify library.[ ] Uninstall pnotify and related packages.[ ] Add development docs on: https://github.com/ohcnetwork/docs/tree/master/docs/care/development.

Currently, notifications are dispatched via functions exported from Notifications.js.

Since we are slowly moving towards using shadcn's UI components, let's switch to using shadcn's sonner for notifications.

https://ui.shadcn.com/docs/components/sonner

Here's an example of the Toaster component added to the App.tsx file (to ensure colours are as expected).

care_fe/src/App.tsx

Lines 38 to 45 in e48d37c

<Toaster
position="top-right"
theme="light"
richColors
// Voluntarily passing empty object as a workaround for richColors
// to work. Refer: shadcn-ui/ui#2234.
toastOptions={{}}
/>
Here's the full attempt diff for reference: https://github.com/ohcnetwork/care_fe/pull/9350/files

Action Items

• Install Sonner from shadcn-ui.[ ] Remove existing shadcn's Toaster to avoid conflicts with Sonner. Sonner support positioning without needing to write custom CSS. (i.e.: toast.tsx, toaster.tsx, useToast)[ ] Update functions in Notifications.js functions to instead trigger the toast of sonner instead of from pnotify library.[ ] Uninstall pnotify and related packages.[ ] Add development docs on: https://github.com/ohcnetwork/docs/tree/master/docs/care/development

Currently, notifications are dispatched via functions exported from Notifications.js.

Since we are slowly moving towards using shadcn's UI components, let's switch to using shadcn's sonner for notifications.

https://ui.shadcn.com/docs/components/sonner

Here's an example of the Toaster component added to the App.tsx file (to ensure colours are as expected).

care_fe/src/App.tsx

Lines 38 to 45 in e48d37c

<Toaster
position="top-right"
theme="light"
richColors
// Voluntarily passing empty object as a workaround for richColors
// to work. Refer: shadcn-ui/ui#2234.
toastOptions={{}}
/>
Here's the full attempt diff for reference: https://github.com/ohcnetwork/care_fe/pull/9350/files

Action Items

• Install Sonner from shadcn-ui.[ ] Remove existing shadcn's Toaster to avoid conflicts with Sonner. Sonner support positioning without needing to write custom CSS. (i.e.: toast.tsx, toaster.tsx, useToast)[ ] Update functions in Notifications.js functions to instead trigger the toast of sonner instead of from pnotify library.[ ] Uninstall pnotify and related packages.[ ] Add development docs on: https://github.com/ohcnetwork/docs/tree/master/docs/care/development.

@rithviknishad Can you please assign this work to me

Currently, notifications are dispatched via functions exported from Notifications.js.

Since we are slowly moving towards using shadcn's UI components, let's switch to using shadcn's sonner for notifications.

https://ui.shadcn.com/docs/components/sonner

Here's an example of the Toaster component added to the App.tsx file (to ensure colours are as expected).

care_fe/src/App.tsx

Lines 38 to 45 in e48d37c

<Toaster
position="top-right"
theme="light"
richColors
// Voluntarily passing empty object as a workaround for richColors
// to work. Refer: shadcn-ui/ui#2234.
toastOptions={{}}
/>
Here's the full attempt diff for reference: https://github.com/ohcnetwork/care_fe/pull/9350/files

Action Items

• Install Sonner from shadcn-ui.[ ] Remove existing shadcn's Toaster to avoid conflicts with Sonner. Sonner support positioning without needing to write custom CSS. (i.e.: toast.tsx, toaster.tsx, useToast)[ ] Update functions in Notifications.js functions to instead trigger the toast of sonner instead of from pnotify library.[ ] Uninstall pnotify and related packages.[ ] Add development docs on: https://github.com/ohcnetwork/docs/tree/master/docs/care/development.

@rithviknishad I would to like to solve this, Could you please assign this task to me?

[rithviknishad]

#9262