feat(ui, dashboard): Toast rework (#7076)

**What** - Re-works how toasts work in Medusa UI. API is now built on top of `sonner` instead of `@radix-ui/react-toast`. This is a breaking change, and we will need to update the documentation once this has been merged and released (cc: @shahednasser). - Adds an example of usage in the products list table in the new admin dashboard. As part of the coming weeks cleanup we will add toasts everywhere that they are currently missing. CLOSES CORE-1977
2024-04-16 13:14:58 +00:00
1 parent 379ff7a36d
commit c3260a2c5a
@@ -9057,7 +9057,6 @@ __metadata:
    "@radix-ui/react-slot": ^1.0.2
    "@radix-ui/react-switch": ^1.0.3
    "@radix-ui/react-tabs": ^1.0.4
-    "@radix-ui/react-toast": ^1.1.4
    "@radix-ui/react-tooltip": ^1.0.6
    "@react-aria/datepicker": ^3.5.0
    "@react-stately/datepicker": ^3.5.0
@@ -9078,7 +9077,7 @@ __metadata:
    "@types/react-dom": ^18.2.0
    "@vitejs/plugin-react": ^4.0.1
    "@vitest/coverage-v8": ^0.32.2
-    autoprefixer: ^10.4.17
+    autoprefixer: ^10.4.19
    chromatic: ^6.20.0
    clsx: ^1.2.1
    copy-to-clipboard: ^3.3.3
@@ -9087,7 +9086,7 @@ __metadata:
    eslint: ^7.32.0
    eslint-plugin-storybook: ^0.6.12
    jsdom: ^22.1.0
-    postcss: ^8.4.33
+    postcss: ^8.4.38
    prism-react-renderer: ^2.0.6
    prismjs: ^1.29.0
    prop-types: ^15.8.1
@@ -9097,9 +9096,10 @@ __metadata:
    react-dom: ^18.2.0
    resize-observer-polyfill: ^1.5.1
    rimraf: ^5.0.1
+    sonner: ^1.4.41
    storybook: ^7.0.23
    tailwind-merge: ^2.2.1
-    tailwindcss: ^3.4.1
+    tailwindcss: ^3.4.3
    tsc-alias: ^1.8.7
    typescript: ^5.1.6
    vite: ^4.3.9
@@ -11418,37 +11418,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@radix-ui/react-toast@npm:^1.1.4":
-  version: 1.1.4
-  resolution: "@radix-ui/react-toast@npm:1.1.4"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-collection": 1.0.3
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-dismissable-layer": 1.0.4
-    "@radix-ui/react-portal": 1.0.3
-    "@radix-ui/react-presence": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-callback-ref": 1.0.1
-    "@radix-ui/react-use-controllable-state": 1.0.1
-    "@radix-ui/react-use-layout-effect": 1.0.1
-    "@radix-ui/react-visually-hidden": 1.0.3
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: bb8282ca87820763d3912e11c1693aa414907d08dabd10a07e77ec0ac06a27e9eed76a591fb90dec147454e674c4c57a961b541e2de76c8125ab1aefaab62c2e
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-toggle-group@npm:1.0.4":
  version: 1.0.4
  resolution: "@radix-ui/react-toggle-group@npm:1.0.4"
@@ -20976,6 +20945,24 @@ __metadata:
  languageName: node
  linkType: hard

+"autoprefixer@npm:^10.4.19":
+  version: 10.4.19
+  resolution: "autoprefixer@npm:10.4.19"
+  dependencies:
+    browserslist: ^4.23.0
+    caniuse-lite: ^1.0.30001599
+    fraction.js: ^4.3.7
+    normalize-range: ^0.1.2
+    picocolors: ^1.0.0
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.1.0
+  bin:
+    autoprefixer: bin/autoprefixer
+  checksum: fe0178eb8b1da4f15c6535cd329926609b22d1811e047371dccce50563623f8075dd06fb167daff059e4228da651b0bdff6d9b44281541eaf0ce0b79125bfd19
+  languageName: node
+  linkType: hard
+
 "autoprefixer@npm:^9.8.6":
  version: 9.8.8
  resolution: "autoprefixer@npm:9.8.8"
@@ -22388,6 +22375,20 @@ __metadata:
  languageName: node
  linkType: hard

+"browserslist@npm:^4.23.0":
+  version: 4.23.0
+  resolution: "browserslist@npm:4.23.0"
+  dependencies:
+    caniuse-lite: ^1.0.30001587
+    electron-to-chromium: ^1.4.668
+    node-releases: ^2.0.14
+    update-browserslist-db: ^1.0.13
+  bin:
+    browserslist: cli.js
+  checksum: 8e9cc154529062128d02a7af4d8adeead83ca1df8cd9ee65a88e2161039f3d68a4d40fea7353cab6bae4c16182dec2fdd9a1cf7dc2a2935498cee1af0e998943
+  languageName: node
+  linkType: hard
+
 "bs-logger@npm:0.x":
  version: 0.2.6
  resolution: "bs-logger@npm:0.2.6"
@@ -22915,6 +22916,13 @@ __metadata:
  languageName: node
  linkType: hard

+"caniuse-lite@npm:^1.0.30001587, caniuse-lite@npm:^1.0.30001599":
+  version: 1.0.30001610
+  resolution: "caniuse-lite@npm:1.0.30001610"
+  checksum: 015956a0bf2e3e233da3dc00c5632bbb4d416bcd6ced2f839e33e45b197a856234f97cb046e7427b83d7e3a3d6df314dfab1c86eb9d970970e00ad85a50b4933
+  languageName: node
+  linkType: hard
+
 "capital-case@npm:^1.0.4":
  version: 1.0.4
  resolution: "capital-case@npm:1.0.4"
@@ -26256,6 +26264,13 @@ __metadata:
  languageName: node
  linkType: hard

+"electron-to-chromium@npm:^1.4.668":
+  version: 1.4.736
+  resolution: "electron-to-chromium@npm:1.4.736"
+  checksum: f3acb515dcb9333b318f9a8ee80a0c3975162da6cc45d9c00152e0de7004b2bfe1246fe6cdf0c41a1b7016780bd4324aff848830aba4227cb55480c1aa32d248
+  languageName: node
+  linkType: hard
+
 "elliptic@npm:^6.5.3":
  version: 6.5.4
  resolution: "elliptic@npm:6.5.4"
@@ -35839,6 +35854,15 @@ __metadata:
  languageName: node
  linkType: hard

+"jiti@npm:^1.21.0":
+  version: 1.21.0
+  resolution: "jiti@npm:1.21.0"
+  bin:
+    jiti: bin/jiti.js
+  checksum: 7f361219fe6c7a5e440d5f1dba4ab763a5538d2df8708cdc22561cf25ea3e44b837687931fca7cdd8cdd9f567300e90be989dd1321650045012d8f9ed6aab07f
+  languageName: node
+  linkType: hard
+
 "jmespath@npm:0.16.0":
  version: 0.16.0
  resolution: "jmespath@npm:0.16.0"
@@ -42956,6 +42980,17 @@ __metadata:
  languageName: node
  linkType: hard

+"postcss@npm:^8.4.38":
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
+  dependencies:
+    nanoid: ^3.3.7
+    picocolors: ^1.0.0
+    source-map-js: ^1.2.0
+  checksum: 955407b8f70cf0c14acf35dab3615899a2a60a26718a63c848cf3c29f2467b0533991b985a2b994430d890bd7ec2b1963e36352b0774a19143b5f591540f7c06
+  languageName: node
+  linkType: hard
+
 "postgres-array@npm:~2.0.0":
  version: 2.0.0
  resolution: "postgres-array@npm:2.0.0"
@@ -47357,6 +47392,16 @@ __metadata:
  languageName: node
  linkType: hard

+"sonner@npm:^1.4.41":
+  version: 1.4.41
+  resolution: "sonner@npm:1.4.41"
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 31467ecab0fcbd5161fb76d158c698841b524686f7f598eecbc2a58d76bc496b5d5242df4350e274575aa3df59428d3aacd534415c968b19fc309c192c443330
+  languageName: node
+  linkType: hard
+
 "sort-keys@npm:^5.0.0":
  version: 5.0.0
  resolution: "sort-keys@npm:5.0.0"
@@ -47387,6 +47432,13 @@ __metadata:
  languageName: node
  linkType: hard

+"source-map-js@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "source-map-js@npm:1.2.0"
+  checksum: 7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4
+  languageName: node
+  linkType: hard
+
 "source-map-resolve@npm:^0.5.0":
  version: 0.5.3
  resolution: "source-map-resolve@npm:0.5.3"
@@ -48872,6 +48924,39 @@ __metadata:
  languageName: node
  linkType: hard

+"tailwindcss@npm:^3.4.3":
+  version: 3.4.3
+  resolution: "tailwindcss@npm:3.4.3"
+  dependencies:
+    "@alloc/quick-lru": ^5.2.0
+    arg: ^5.0.2
+    chokidar: ^3.5.3
+    didyoumean: ^1.2.2
+    dlv: ^1.1.3
+    fast-glob: ^3.3.0
+    glob-parent: ^6.0.2
+    is-glob: ^4.0.3
+    jiti: ^1.21.0
+    lilconfig: ^2.1.0
+    micromatch: ^4.0.5
+    normalize-path: ^3.0.0
+    object-hash: ^3.0.0
+    picocolors: ^1.0.0
+    postcss: ^8.4.23
+    postcss-import: ^15.1.0
+    postcss-js: ^4.0.1
+    postcss-load-config: ^4.0.1
+    postcss-nested: ^6.0.1
+    postcss-selector-parser: ^6.0.11
+    resolve: ^1.22.2
+    sucrase: ^3.32.0
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: 11e5546494f2888f693ebaa271b218b3a8e52fe59d7b629e54f2dffd6eaafd5ded2e9f0c37ad04e6a866dffb2b116d91becebad77e1441beee8bf016bb2392f9
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^1.0.0, tapable@npm:^1.1.3":
  version: 1.1.3
  resolution: "tapable@npm:1.1.3"