Files
AutoGPT/autogpt_platform/frontend/package.json
Ubbe b3b5eefe2c feat(frontend): change to use Sonner toast (#10334)
## Changes 🏗️

Makes changes to use [Sonner for Toasts](https://sonner.emilkowal.ski/)
rather than the [Radix UI
primitive](https://www.radix-ui.com/primitives/docs/components/toast).

<img width="431" alt="Screenshot 2025-07-09 at 15 49 47"
src="https://github.com/user-attachments/assets/c09c3c1e-fd80-44d2-9336-c955c2d4f288"
/>
<img width="444" alt="Screenshot 2025-07-09 at 15 51 05"
src="https://github.com/user-attachments/assets/cc2a3491-7b76-44e2-8bec-3ad0ac917148"
/>
<img width="450" alt="Screenshot 2025-07-09 at 15 51 50"
src="https://github.com/user-attachments/assets/e8ede05d-3488-43f4-aa43-7d3cba92a050"
/>


https://github.com/user-attachments/assets/deb4ce1c-13bb-4f69-890e-9b8680c848e7

<img width="500" alt="Screenshot 2025-07-09 at 15 59 09"
src="https://github.com/user-attachments/assets/5636969d-4c9a-41e6-acd1-afa49b8e70c6"
/>

Sonner is [the one used in
shadcn](https://ui.shadcn.com/docs/components/toast) nowadays, because
it brings great UX on touch devices:
- allows to swipe to dismiss
- they can stack nicely if multiple toasts appear ( see video 📹 )
- when stack, hovering over them reveals them all nicely ( see video 📹 )

I kept the existing `useToast()` API used on the pages, so I had to only
refactor the hook not the calls 🏁

## Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Login
  - [x] Click around the app and trigger toasts
  - [x] Toasts look good 

### For configuration changes

Nope
2025-07-09 17:09:16 +00:00

141 lines
4.8 KiB
JSON

{
"name": "frontend",
"version": "0.3.4",
"private": true,
"scripts": {
"dev": "next dev --turbo",
"build": "cross-env pnpm run generate:api-client && SKIP_STORYBOOK_TESTS=true next build",
"start": "next start",
"start:standalone": "cd .next/standalone && node server.js",
"lint": "next lint && prettier --check .",
"format": "prettier --write .",
"type-check": "tsc --noEmit",
"test": "next build --turbo && playwright test",
"test-ui": "next build --turbo && playwright test --ui",
"test:no-build": "playwright test",
"gentests": "playwright codegen http://localhost:3000",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"test-storybook": "test-storybook",
"test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run build-storybook -- --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && pnpm run test-storybook\"",
"fetch:openapi": "curl http://localhost:8006/openapi.json > ./src/app/api/openapi.json && prettier --write ./src/app/api/openapi.json",
"generate:api-client": "orval --config ./orval.config.ts",
"generate:api-all": "pnpm run fetch:openapi && pnpm run generate:api-client"
},
"browserslist": [
"defaults"
],
"dependencies": {
"@faker-js/faker": "9.9.0",
"@hookform/resolvers": "5.1.1",
"@next/third-parties": "15.3.5",
"@phosphor-icons/react": "2.1.10",
"@radix-ui/react-alert-dialog": "1.1.14",
"@radix-ui/react-avatar": "1.1.10",
"@radix-ui/react-checkbox": "1.3.2",
"@radix-ui/react-collapsible": "1.1.11",
"@radix-ui/react-context-menu": "2.2.15",
"@radix-ui/react-dialog": "1.1.14",
"@radix-ui/react-dropdown-menu": "2.1.15",
"@radix-ui/react-icons": "1.3.2",
"@radix-ui/react-label": "2.1.7",
"@radix-ui/react-popover": "1.1.14",
"@radix-ui/react-radio-group": "1.3.7",
"@radix-ui/react-scroll-area": "1.2.9",
"@radix-ui/react-select": "2.2.5",
"@radix-ui/react-separator": "1.1.7",
"@radix-ui/react-slot": "1.2.3",
"@radix-ui/react-switch": "1.2.5",
"@radix-ui/react-tabs": "1.1.12",
"@radix-ui/react-toast": "1.2.14",
"@radix-ui/react-tooltip": "1.2.7",
"@sentry/nextjs": "9.35.0",
"@supabase/ssr": "0.6.1",
"@supabase/supabase-js": "2.50.3",
"@tanstack/react-query": "5.81.5",
"@tanstack/react-table": "8.21.3",
"@types/jaro-winkler": "0.2.4",
"@xyflow/react": "12.8.1",
"ajv": "8.17.1",
"boring-avatars": "1.11.2",
"class-variance-authority": "0.7.1",
"clsx": "2.1.1",
"cmdk": "1.1.1",
"cookie": "1.0.2",
"date-fns": "4.1.0",
"dotenv": "16.5.0",
"elliptic": "6.6.1",
"embla-carousel-react": "8.6.0",
"framer-motion": "12.23.0",
"geist": "1.4.2",
"jaro-winkler": "0.2.8",
"launchdarkly-react-client-sdk": "3.8.1",
"lodash": "4.17.21",
"lucide-react": "0.525.0",
"moment": "2.30.1",
"next": "15.3.5",
"next-themes": "0.4.6",
"party-js": "2.2.0",
"react": "18.3.1",
"react-day-picker": "9.8.0",
"react-dom": "18.3.1",
"react-drag-drop-files": "2.4.0",
"react-hook-form": "7.60.0",
"react-icons": "5.5.0",
"react-markdown": "9.0.3",
"react-modal": "3.16.3",
"react-shepherd": "6.1.8",
"recharts": "2.15.3",
"shepherd.js": "14.5.0",
"sonner": "2.0.6",
"tailwind-merge": "2.6.0",
"tailwindcss-animate": "1.0.7",
"uuid": "11.1.0",
"vaul": "1.1.2",
"zod": "3.25.76"
},
"devDependencies": {
"@chromatic-com/storybook": "4.0.1",
"@playwright/test": "1.53.2",
"@storybook/addon-a11y": "9.0.16",
"@storybook/addon-docs": "9.0.16",
"@storybook/addon-links": "9.0.16",
"@storybook/addon-onboarding": "9.0.16",
"@storybook/nextjs": "9.0.16",
"@tanstack/eslint-plugin-query": "5.81.2",
"@tanstack/react-query-devtools": "5.81.5",
"@types/canvas-confetti": "1.9.0",
"@types/lodash": "4.17.20",
"@types/negotiator": "0.6.4",
"@types/node": "22.15.30",
"@types/react": "18.3.17",
"@types/react-dom": "18.3.5",
"@types/react-modal": "3.16.3",
"axe-playwright": "2.1.0",
"chromatic": "11.25.2",
"concurrently": "9.2.0",
"cross-env": "7.0.3",
"eslint": "8.57.1",
"eslint-config-next": "15.3.5",
"eslint-plugin-storybook": "9.0.16",
"import-in-the-middle": "1.14.2",
"msw": "2.10.3",
"msw-storybook-addon": "2.0.5",
"orval": "7.10.0",
"pbkdf2": "3.1.3",
"postcss": "8.5.6",
"prettier": "3.6.2",
"prettier-plugin-tailwindcss": "0.6.13",
"require-in-the-middle": "7.5.2",
"storybook": "9.0.16",
"tailwindcss": "3.4.17",
"typescript": "5.8.3"
},
"msw": {
"workerDirectory": [
"public"
]
},
"packageManager": "pnpm@10.11.1+sha256.211e9990148495c9fc30b7e58396f7eeda83d9243eb75407ea4f8650fb161f7c"
}