kobotoolbox / kpi / 27149856596

82%

master: 76%

push

github

feat(frontend): add Mantine notifications DEV-2211 (#7120)

### 📣 Summary

Enabled Mantine notifications across the app and Storybook, and added a
Design System story that demonstrates triggering a notification with
notifications.show.

### 💭 Notes

Changes here:
- Added dependency and lockfile updates for Mantine notifications:
  - `package.json`
  - `package-lock.json`
- Imported notifications styles globally (after Mantine core styles) so
notifications render correctly:
  - `main.js`
  - `preview.tsx`
- Mounted the Notifications container at app roots so
`notifications.show` can render in real UI contexts:
  - `app.jsx`
  - `basicLayout.component.tsx`
- Mounted Notifications in Storybook Mantine decorator so notification
APIs work in stories:
  - `preview.tsx`
- Added an interactive Notification story that uses `notifications.show`
on button click:
  - `Notification.stories.tsx`
- Removed redundant local Mantine core style imports from stories now
that styles are globally loaded in Storybook:
  - `Menu.stories.tsx`
  - `ButtonNew.stories.tsx`

### 👀 Preview steps

1. Open Storybook for this branch.
2. Navigate to Design system → Notification.
3. Open story NotificationsShowApi.
4. Click Show notification.
5. 🔴 On main: this story does not exist.
6. 🟢 On this branch: a Mantine notification appears with
title/message/icon.
7. Optional sanity check: open Design system → Menu and Design system →
Button stories and confirm styles still render correctly after removing
local style imports.

9017 of 12249 branches covered (73.61%)

29580 of 36268 relevant lines covered (81.56%)

5.56 hits per line