asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: added documentation for toast component changes (#7141)

Browse Source 
* docs: added documentation for toast component changes

* added redirect from use-toast docs to upgrade guide

* remove unused file

* content linting fixes

* update UI package version

* updated ui preset

* fix upgrade guides main page
This commit is contained in:
Shahed Nasser
2024-05-01 18:12:10 +03:00
committed by GitHub
parent 8387d03370
commit b6083ce104
24 changed files with 559 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
www/apps/docs/content/upgrade-guides/medusa-ui/3-0-0.mdx Normal file
View File

@@ -0,0 +1,115 @@
---
description: "Actions Required for v.3.0.0"
sidebar_custom_props:
iconName: "component-solid"
---
import Tabs from "@theme/Tabs"
import TabItem from "@theme/TabItem"
# v3.0.0
Version 3.0.0 of Medusa UI introduces a breaking change for the toast components. This is due to a change in the underlying toast library from Radix UI to [Sonner](https://sonner.emilkowal.ski/).
## How to Update
Run the following command in your project:
```bash npm2yarn
npm install @medusajs/ui@3.0.0
```
---
## Breaking Changes
### useToast Hook
Previously, you created a toast using the `useToast` hook, which provides a utility function. In this version, the `useToast` hook is removed and, instead, a new `toast` utility is exported. The `toast` utility has functions that create toasts for different variants, such as `warning` and `error`.
For example, here's before and after update code to see the difference:
<Tabs groupId="ui" isCodeTabs={true}>
<TabItem label="Before" value="before">
```tsx
import { Button, Toaster, useToast } from "@medusajs/ui"
export default function ToasterDemo() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Info",
description: "Hello there",
})
}
>
Show
</Button>
</>
)
}
```
</TabItem>
<TabItem label="After" value="after">
```tsx
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterDemo() {
return (
<>
<Toaster />
<Button
onClick={() =>
toast.info("Info", {
description: "Hello there",
})
}
>
Show
</Button>
</>
)
}
```
</TabItem>
</Tabs>
Learn more about the `toast` utility in the [UI documentation](https://docs.medusajs.com/ui/components/toast).
### Toaster Default Position
The default position has changed from `top-right` to `bottom-right`. You can change the position of the created toasts by passing the `position` prop to the `Toaster` component.
For example:
```tsx
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterDemo() {
return (
<>
<Toaster position="top-right" />
<Button
onClick={() =>
toast.info("Info", {
description: "Hello there",
})
}
>
Show
</Button>
</>
)
}
```
Learn more about the `Toaster`'s props in the [UI documentation](https://docs.medusajs.com/ui/components/toast).

2
www/apps/docs/src/utils/get-first-category-item.ts
View File

@@ -14,7 +14,7 @@ export function getCategoryItems({ categoryLabel, categoryCustomId }: Options) {
useDocsSidebar().items,
(item) =>
item.label === categoryLabel ||
item.customProps.category_id === categoryCustomId
(categoryCustomId && item.customProps.category_id === categoryCustomId)
)?.items
}

4
www/apps/ui/package.json
View File

@@ -15,8 +15,8 @@
"dependencies": {
"@faker-js/faker": "^8.0.2",
"@medusajs/icons": "^1.2.0",
"@medusajs/ui": "^2.4.1",
"@medusajs/ui-preset": "latest",
"@medusajs/ui": "^3.0.0",
"@medusajs/ui-preset": "^1.1.3",
"@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-scroll-area": "^1.0.4",
"@radix-ui/react-tabs": "^1.0.4",

250
www/apps/ui/src/config/colors.ts
View File

@@ -1,33 +1,8 @@
export const colors = {
dark: {
"--button-transparent-pressed": "rgba(46, 48, 53, 1)",
"--border-base": "rgba(46, 48, 53, 1)",
"--tag-neutral-icon": "rgba(125, 130, 138, 1)",
"--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
"--fg-on-color": "rgba(255, 255, 255, 1)",
"--bg-switch-off": "rgba(53, 55, 60, 1)",
"--border-strong": "rgba(53, 55, 60, 1)",
"--fg-subtle": "rgba(173, 177, 184, 1)",
"--fg-base": "rgba(237, 238, 240, 1)",
"--bg-base-hover": "rgba(39, 40, 45, 1)",
"--bg-subtle-hover": "rgba(27, 27, 31, 1)",
"--fg-disabled": "rgba(60, 63, 68, 1)",
"--bg-subtle": "rgba(24, 24, 26, 1)",
"--tag-neutral-border": "rgba(60, 63, 68, 1)",
"--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
"--tag-neutral-text": "rgba(173, 177, 184, 1)",
"--fg-muted": "rgba(105, 110, 119, 1)",
"--border-loud": "rgba(237, 238, 240, 1)",
"--bg-base-pressed": "rgba(46, 48, 53, 1)",
"--bg-disabled": "rgba(39, 40, 45, 1)",
"--code-fg-subtle": "rgba(105, 110, 119, 1)",
"--code-fg-base": "rgba(237, 238, 240, 1)",
"--code-bg-subtle": "rgba(24, 24, 26, 1)",
"--code-fg-muted": "rgba(70, 75, 80, 1)",
"--bg-highlight-hover": "rgba(30, 58, 138, 1)",
"--border-danger": "rgba(190, 18, 60, 1)",
"--border-interactive": "rgba(96, 165, 250, 1)",
"--bg-highlight": "rgba(23, 37, 84, 1)",
"--fg-interactive-hover": "rgba(59, 130, 246, 1)",
"--fg-error": "rgba(251, 113, 133, 1)",
"--bg-interactive": "rgba(96, 165, 250, 1)",
@@ -36,24 +11,18 @@ export const colors = {
"--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
"--fg-interactive": "rgba(96, 165, 250, 1)",
"--bg-overlay": "rgba(24, 24, 26, 0.7)",
"--fg-on-inverted": "rgba(24, 24, 26, 1)",
"--tag-red-border": "rgba(136, 19, 55, 1)",
"--tag-red-bg": "rgba(76, 5, 25, 1)",
"--button-transparent-hover": "rgba(39, 40, 45, 1)",
"--tag-blue-text": "rgba(96, 165, 250, 1)",
"--tag-orange-text": "rgba(251, 191, 36, 1)",
"--tag-green-text": "rgba(52, 211, 153, 1)",
"--tag-neutral-bg": "rgba(46, 48, 53, 1)",
"--tag-orange-border": "rgba(120, 53, 15, 1)",
"--tag-green-border": "rgba(6, 78, 59, 1)",
"--bg-base": "rgba(27, 27, 31, 1)",
"--tag-red-text": "rgba(251, 113, 133, 1)",
"--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
"--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
"--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
"--border-transparent": "rgba(255, 255, 255, 0)",
"--code-border": "rgba(46, 48, 53, 1)",
"--tag-orange-icon": "rgba(245, 158, 11, 1)",
"--tag-purple-bg": "rgba(46, 16, 100, 1)",
"--tag-blue-bg": "rgba(23, 37, 84, 1)",
@@ -63,42 +32,11 @@ export const colors = {
"--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
"--tag-orange-bg": "rgba(69, 26, 3, 1)",
"--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
"--code-bg-base": "rgba(27, 27, 31, 1)",
"--button-neutral": "rgba(39, 40, 45, 1)",
"--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
"--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
"--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
"--tag-blue-icon": "rgba(59, 130, 246, 1)",
"--tag-red-icon": "rgba(244, 63, 94, 1)",
"--tag-purple-icon": "rgba(139, 92, 246, 1)",
"--tag-purple-text": "rgba(167, 139, 250, 1)",
"--tag-green-icon": "rgba(16, 185, 129, 1)",
"--button-inverted": "rgba(237, 238, 240, 1)",
"--button-inverted-gradient-from": "rgba(24, 24, 26, 0)",
"--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
"--bg-component": "rgba(39, 40, 45, 1)",
"--bg-field": "rgba(39, 40, 45, 1)",
"--bg-field-hover": "rgba(46, 48, 53, 1)",
"--contrast-fg-primary": "rgba(28, 32, 36, 1)",
"--contrast-bg-base": "rgba(228, 228, 233, 1)",
"--contrast-fg-secondary": "rgba(96, 100, 108, 1)",
"--contrast-border-base": "rgba(185, 187, 198, 1)",
"--contrast-bg-base-pressed": "rgba(242, 242, 245, 1)",
"--contrast-bg-subtle": "rgba(211, 212, 219, 1)",
"--contrast-bg-base-hover": "rgba(235, 235, 239, 1)",
"--contrast-bg-highlight": "rgba(242, 242, 245, 1)",
"--button-neutral-pressed": "rgba(60, 63, 68, 1)",
"--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)",
"--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-pressed": "rgba(237, 238, 240, 1)",
"--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 0)",
"--button-inverted-pressed-gradient-to": "rgba(24, 24, 26, 1)",
"--button-neutral-hover": "rgba(53, 55, 60, 1)",
"--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-hover": "rgba(255, 255, 255, 1)",
"--button-inverted-hover-gradient-from": "rgba(24, 24, 26, 0)",
"--button-inverted-hover-gradient-to": "rgba(24, 24, 26, 1)",
"--button-danger-pressed": "rgba(225, 29, 72, 1)",
"--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
@@ -106,113 +44,183 @@ export const colors = {
"--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--button-transparent": "rgba(0, 0, 0, 0.01)",
},
light: {
"--button-inverted": "rgba(3, 7, 18, 1)",
"--code-bg-base": "rgba(9, 9, 11, 1)",
"--button-neutral": "rgba(39, 39, 42, 1)",
"--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
"--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
"--button-transparent-hover": "rgba(39, 39, 42, 1)",
"--code-fg-subtle": "rgba(161, 161, 170, 1)",
"--tag-neutral-bg-hover": "rgba(63, 63, 70, 1)",
"--contrast-border-base": "rgba(82, 82, 91, 1)",
"--button-neutral-pressed": "rgba(82, 82, 91, 1)",
"--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)",
"--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)",
"--tag-neutral-bg": "rgba(39, 39, 42, 1)",
"--bg-highlight": "rgba(23, 37, 84, 1)",
"--border-base": "rgba(255, 255, 255, 0.1)",
"--code-fg-base": "rgba(250, 250, 250, 1)",
"--tag-neutral-icon": "rgba(113, 113, 122, 1)",
"--bg-switch-off-hover": "rgba(82, 82, 91, 1)",
"--bg-base": "rgba(24, 24, 27, 1)",
"--button-inverted-pressed": "rgba(161, 161, 170, 1)",
"--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
"--button-neutral-hover": "rgba(63, 63, 70, 1)",
"--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--bg-switch-off": "rgba(63, 63, 70, 1)",
"--border-strong": "rgba(255, 255, 255, 0.15)",
"--fg-subtle": "rgba(161, 161, 170, 1)",
"--bg-highlight-hover": "rgba(30, 58, 138, 1)",
"--button-inverted": "rgba(82, 82, 91, 1)",
"--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
"--code-fg-subtle": "rgba(156, 163, 175, 1)",
"--code-fg-muted": "rgba(107, 114, 128, 1)",
"--code-bg-subtle": "rgba(31, 41, 55, 1)",
"--code-fg-base": "rgba(249, 250, 251, 1)",
"--fg-base": "rgba(250, 250, 250, 1)",
"--code-border": "rgba(39, 39, 42, 1)",
"--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
"--contrast-bg-base-hover": "rgba(82, 82, 91, 1)",
"--bg-base-hover": "rgba(39, 39, 42, 1)",
"--bg-subtle-hover": "rgba(24, 24, 27, 1)",
"--fg-disabled": "rgba(63, 63, 70, 1)",
"--bg-subtle": "rgba(9, 9, 11, 1)",
"--tag-neutral-border": "rgba(63, 63, 70, 1)",
"--bg-subtle-pressed": "rgba(39, 39, 42, 1)",
"--tag-neutral-text": "rgba(161, 161, 170, 1)",
"--fg-muted": "rgba(82, 82, 91, 1)",
"--bg-overlay": "rgba(9, 9, 11, 0.7)",
"--button-inverted-hover": "rgba(113, 113, 122, 1)",
"--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--fg-on-inverted": "rgba(9, 9, 11, 1)",
"--code-bg-subtle": "rgba(24, 24, 27, 1)",
"--bg-component": "rgba(39, 39, 42, 1)",
"--border-loud": "rgba(250, 250, 250, 1)",
"--bg-base-pressed": "rgba(63, 63, 70, 1)",
"--bg-disabled": "rgba(39, 39, 42, 1)",
"--contrast-bg-highlight": "rgba(82, 82, 91, 1)",
"--button-transparent-pressed": "rgba(63, 63, 70, 1)",
"--code-fg-muted": "rgba(82, 82, 91, 1)",
"--contrast-fg-secondary": "rgba(161, 161, 170, 1)",
"--contrast-bg-base-pressed": "rgba(113, 113, 122, 1)",
"--contrast-fg-primary": "rgba(250, 250, 250, 1)",
"--contrast-bg-base": "rgba(63, 63, 70, 1)",
"--bg-component-pressed": "rgba(82, 82, 91, 1)",
"--bg-component-hover": "rgba(63, 63, 70, 1)",
"--bg-field": "rgba(39, 39, 42, 1)",
"--bg-field-component": "rgba(24, 24, 27, 1)",
"--bg-field-component-hover": "rgba(24, 24, 27, 1)",
"--bg-field-hover": "rgba(39, 39, 42, 1)",
},
light: {
"--tag-green-bg": "rgba(209, 250, 229, 1)",
"--border-strong": "rgba(209, 213, 219, 1)",
"--border-interactive": "rgba(59, 130, 246, 1)",
"--bg-highlight": "rgba(239, 246, 255, 1)",
"--tag-neutral-bg": "rgba(243, 244, 246, 1)",
"--tag-red-bg": "rgba(255, 228, 230, 1)",
"--tag-orange-bg": "rgba(254, 244, 199, 1)",
"--bg-base": "rgba(255, 255, 255, 1)",
"--border-base": "rgba(229, 231, 235, 1)",
"--tag-green-icon": "rgba(5, 150, 105, 1)",
"--tag-purple-bg-hover": "rgba(221, 214, 254, 1)",
"--tag-blue-border": "rgba(191, 219, 254, 1)",
"--tag-orange-icon": "rgba(217, 119, 6, 1)",
"--tag-purple-bg": "rgba(237, 233, 254, 1)",
"--bg-subtle": "rgba(249, 250, 251, 1)",
"--tag-purple-text": "rgba(109, 40, 217, 1)",
"--tag-blue-bg": "rgba(219, 234, 254, 1)",
"--tag-blue-icon": "rgba(37, 99, 235, 1)",
"--border-error": "rgba(225, 29, 72, 1)",
"--border-loud": "rgba(3, 7, 18, 1)",
"--fg-on-inverted": "rgba(255, 255, 255, 1)",
"--fg-on-color": "rgba(255, 255, 255, 1)",
"--fg-interactive-hover": "rgba(37, 99, 235, 1)",
"--fg-interactive": "rgba(59, 130, 246, 1)",
"--fg-error": "rgba(225, 29, 72, 1)",
"--border-danger": "rgba(190, 18, 60, 1)",
"--border-transparent": "rgba(3, 7, 18, 0)",
"--fg-base": "rgba(3, 7, 18, 1)",
"--fg-disabled": "rgba(209, 213, 219, 1)",
"--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
"--fg-subtle": "rgba(75, 85, 99, 1)",
"--fg-muted": "rgba(156, 163, 175, 1)",
"--bg-subtle-hover": "rgba(243, 244, 246, 1)",
"--tag-neutral-border": "rgba(229, 231, 235, 1)",
"--fg-muted": "rgba(161, 161, 170, 1)",
"--bg-subtle-pressed": "rgba(228, 228, 231, 1)",
"--tag-green-bg-hover": "rgba(167, 243, 208, 1)",
"--tag-blue-bg-hover": "rgba(191, 219, 254, 1)",
"--tag-red-icon": "rgba(225, 29, 72, 1)",
"--tag-neutral-text": "rgba(75, 85, 99, 1)",
"--tag-red-bg-hover": "rgba(254, 205, 211, 1)",
"--tag-red-text": "rgba(190, 18, 60, 1)",
"--tag-purple-icon": "rgba(124, 58, 237, 1)",
"--tag-blue-text": "rgba(29, 78, 216, 1)",
"--tag-orange-bg-hover": "rgba(253, 230, 138, 1)",
"--tag-neutral-bg-hover": "rgba(229, 231, 235, 1)",
"--tag-purple-border": "rgba(221, 214, 254, 1)",
"--tag-orange-text": "rgba(180, 83, 9, 1)",
"--tag-neutral-icon": "rgba(107, 114, 128, 1)",
"--tag-orange-border": "rgba(253, 230, 138, 1)",
"--tag-red-border": "rgba(254, 205, 211, 1)",
"--tag-green-border": "rgba(167, 243, 208, 1)",
"--tag-green-text": "rgba(4, 120, 87, 1)",
"--code-bg-base": "rgba(17, 24, 39, 1)",
"--code-border": "rgba(55, 65, 81, 1)",
"--button-neutral": "rgba(255, 255, 255, 1)",
"--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
"--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
"--button-danger": "rgba(225, 29, 72, 1)",
"--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-pressed": "rgba(31, 41, 55, 1)",
"--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
"--button-danger-pressed": "rgba(159, 18, 57, 1)",
"--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-hover": "rgba(17, 24, 39, 1)",
"--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--button-danger-hover": "rgba(190, 18, 60, 1)",
"--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--bg-component": "rgba(241, 243, 245, 1)",
"--bg-overlay": "rgba(3, 7, 18, 0.4)",
"--bg-switch-off": "rgba(229, 231, 235, 1)",
"--bg-field-hover": "rgba(243, 244, 246, 1)",
"--bg-field": "rgba(249, 250, 251, 1)",
"--bg-interactive": "rgba(59, 130, 246, 1)",
"--bg-highlight-hover": "rgba(219, 234, 254, 1)",
"--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
"--bg-disabled": "rgba(243, 244, 246, 1)",
"--contrast-bg-subtle": "rgba(46, 48, 53, 1)",
"--contrast-bg-base": "rgba(27, 27, 31, 1)",
"--contrast-border-base": "rgba(60, 63, 68, 1)",
"--contrast-fg-primary": "rgba(237, 238, 240, 1)",
"--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)",
"--contrast-fg-secondary": "rgba(173, 177, 184, 1)",
"--contrast-bg-highlight": "rgba(53, 55, 60, 1)",
"--contrast-bg-base-hover": "rgba(46, 48, 53, 1)",
"--button-transparent-hover": "rgba(243, 244, 246, 1)",
"--button-neutral-pressed": "rgba(229, 231, 235, 1)",
"--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
"--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
"--button-transparent-pressed": "rgba(229, 231, 235, 1)",
"--button-neutral-hover": "rgba(243, 244, 246, 1)",
"--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
"--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
"--bg-base-pressed": "rgba(243, 244, 246, 1)",
"--bg-base-hover": "rgba(249, 250, 251, 1)",
"--button-transparent": "rgba(255, 255, 255, 0.01)",
"--bg-overlay": "rgba(9, 9, 11, 0.4)",
"--tag-neutral-border": "rgba(228, 228, 231, 1)",
"--border-loud": "rgba(9, 9, 11, 1)",
"--contrast-fg-primary": "rgba(250, 250, 250, 1)",
"--bg-switch-off": "rgba(228, 228, 231, 1)",
"--contrast-bg-base-pressed": "rgba(63, 63, 70, 1)",
"--bg-base-pressed": "rgba(228, 228, 231, 1)",
"--tag-neutral-text": "rgba(82, 82, 91, 1)",
"--button-transparent-hover": "rgba(244, 244, 245, 1)",
"--contrast-bg-base": "rgba(24, 24, 27, 1)",
"--fg-disabled": "rgba(212, 212, 216, 1)",
"--bg-field": "rgba(250, 250, 250, 1)",
"--border-strong": "rgba(212, 212, 216, 1)",
"--bg-field-hover": "rgba(244, 244, 245, 1)",
"--contrast-border-base": "rgba(82, 82, 91, 1)",
"--fg-base": "rgba(9, 9, 11, 1)",
"--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
"--contrast-fg-secondary": "rgba(161, 161, 170, 1)",
"--code-fg-subtle": "rgba(161, 161, 170, 1)",
"--tag-neutral-bg": "rgba(244, 244, 245, 1)",
"--button-transparent-pressed": "rgba(228, 228, 231, 1)",
"--tag-neutral-bg-hover": "rgba(228, 228, 231, 1)",
"--code-fg-muted": "rgba(113, 113, 122, 1)",
"--contrast-bg-highlight": "rgba(63, 63, 70, 1)",
"--tag-neutral-icon": "rgba(113, 113, 122, 1)",
"--border-base": "rgba(228, 228, 231, 1)",
"--code-bg-base": "rgba(24, 24, 27, 1)",
"--button-neutral": "rgba(255, 255, 255, 1)",
"--button-neutral-gradient-from": "rgba(9, 9, 11, 0)",
"--button-neutral-gradient-to": "rgba(9, 9, 11, 1)",
"--code-bg-subtle": "rgba(39, 39, 42, 1)",
"--button-neutral-hover": "rgba(244, 244, 245, 1)",
"--button-neutral-hover-gradient-from": "rgba(9, 9, 11, 0)",
"--button-neutral-hover-gradient-to": "rgba(9, 9, 11, 1)",
"--contrast-bg-base-hover": "rgba(39, 39, 42, 1)",
"--bg-subtle": "rgba(250, 250, 250, 1)",
"--bg-switch-off-hover": "rgba(212, 212, 216, 1)",
"--code-fg-base": "rgba(250, 250, 250, 1)",
"--bg-disabled": "rgba(244, 244, 245, 1)",
"--code-border": "rgba(63, 63, 70, 1)",
"--fg-subtle": "rgba(82, 82, 91, 1)",
"--bg-subtle-hover": "rgba(244, 244, 245, 1)",
"--button-neutral-pressed": "rgba(228, 228, 231, 1)",
"--button-neutral-pressed-gradient-from": "rgba(9, 9, 11, 0)",
"--button-neutral-pressed-gradient-to": "rgba(9, 9, 11, 1)",
"--border-transparent": "rgba(9, 9, 11, 0)",
"--button-inverted": "rgba(9, 9, 11, 1)",
"--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-pressed": "rgba(39, 39, 42, 1)",
"--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-hover": "rgba(24, 24, 27, 1)",
"--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--bg-component-hover": "rgba(244, 244, 245, 1)",
"--bg-field-component": "rgba(255, 255, 255, 1)",
"--bg-field-component-hover": "rgba(250, 250, 250, 1)",
"--bg-component-pressed": "rgba(228, 228, 231, 1)",
"--bg-component": "rgba(250, 250, 250, 1)",
"--bg-base-hover": "rgba(244, 244, 245, 1)",
},
}

5
www/apps/ui/src/config/docs.tsx
View File

@@ -261,11 +261,6 @@ export const docsConfig: DocsConfig = {
path: "/hooks/use-prompt",
isPathHref: true,
},
{
title: "useToast",
path: "/hooks/use-toast",
isPathHref: true,
},
{
title: "useToggleState",
path: "/hooks/use-toggle-state",

45
www/apps/ui/src/content/docs/components/toast.mdx
View File

@@ -10,31 +10,25 @@ component: true
---
Add the Toaster component somewhere in your tree
Import the `toast` utility and `Toaster` component from `@medusajs/ui`:
```tsx
import { Toaster } from "@medusajs/ui"
import { Toaster, toast } from "@medusajs/ui"
```
Then, add the `Toaster` component somewhere in your tree:
```tsx
<Toaster />
```
The `useToast` hook returns a `toast` function that you can use to display a toast.
Finally, use the `toast` utility to display a toast:
```tsx
import { useToast } from "@medusajs/ui"
```
```tsx
const { toast } = useToast()
return (
<Button
onClick={() =>
toast({
title: "Toast title",
toast.info("Toast title", {
description: "Toast body",
})
}
@@ -46,12 +40,39 @@ return (
## API Reference
---
### Toast Utility Functions
The `toast` utility has the following functions to display different variants of toasts:
- `info`
- `error`
- `success`
- `warning`
- `loading`
Each of these functions accept two parameters:
1. A string indicating the title of the toast.
2. An object of props to pass to the underlying `Toast` component.
### Toast Props
<ComponentReference mainComponent="Toast" />
### Toaster Props
<ComponentReference mainComponent="Toaster" />
## Examples
---
### Dismissable Toast
<ComponentExample name="toaster-dismiss" />
### Warning
<ComponentExample name="toaster-warning" />

30
www/apps/ui/src/content/docs/hooks/use-toast.mdx
View File

@@ -1,30 +0,0 @@
---
title: "useToast"
description: ""
component: true
---
This hook is used to display and manage toasts. To learn how to make it usable and to see some examples, please check the [Toast component page](/components/toast).
```tsx
import { useToast } from "@medusajs/ui"
```
## API Reference
---
### Call Signature
`useToast()`
### useToast return
<HookValues hook="useToast" />
### ToasterToast
Important type used when pushing or retrieving toasts. This extends the [Radix UI Toast Root](https://www.radix-ui.com/primitives/docs/components/toast#root) primitive type.
<HookValues hook="ToasterToast" />

7
www/apps/ui/src/examples/toaster-demo.tsx
View File

@@ -1,15 +1,12 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterDemo() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Info",
toast.info("Info", {
description: "The quick brown fox jumps over the lazy dog.",
})
}

19
www/apps/ui/src/examples/toaster-dismiss.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { Button, Toaster, toast } from "@medusajs/ui"
export default function DismissableToaster() {
return (
<>
<Toaster />
<Button
onClick={() =>
toast.info("Info", {
description: "The quick brown fox jumps over the lazy dog.",
dismissable: true,
})
}
>
Show
</Button>
</>
)
}

8
www/apps/ui/src/examples/toaster-error.tsx
View File

@@ -1,17 +1,13 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterError() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Error",
toast.error("Error", {
description: "The quick brown fox jumps over the lazy dog.",
variant: "error",
duration: 5000,
})
}

8
www/apps/ui/src/examples/toaster-loading.tsx
View File

@@ -1,17 +1,13 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterLoading() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Loading",
toast.loading("Loading", {
description: "The quick brown fox jumps over the lazy dog.",
variant: "loading",
duration: 5000,
})
}

8
www/apps/ui/src/examples/toaster-success.tsx
View File

@@ -1,17 +1,13 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterSuccess() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Success",
toast.success("Success", {
description: "The quick brown fox jumps over the lazy dog.",
variant: "success",
duration: 5000,
})
}

8
www/apps/ui/src/examples/toaster-warning.tsx
View File

@@ -1,17 +1,13 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterWarning() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Warning",
toast.warning("Warning", {
description: "The quick brown fox jumps over the lazy dog.",
variant: "warning",
duration: 5000,
})
}

8
www/apps/ui/src/examples/toaster-with-action.tsx
View File

@@ -1,17 +1,13 @@
import { Button, Toaster, useToast } from "@medusajs/ui"
import { Button, Toaster, toast } from "@medusajs/ui"
export default function ToasterWithAction() {
const { toast } = useToast()
return (
<>
<Toaster />
<Button
onClick={() =>
toast({
title: "Created Product",
toast.success("Created Product", {
description: "The product has been created.",
variant: "success",
action: {
altText: "Undo product creation",
onClick: () => {},

44
www/apps/ui/src/props/hooks/ToasterToast.tsx
View File

@@ -1,44 +0,0 @@
import { HookTable } from "@/components/hook-table"
import { HookDataMap } from "@/types/hooks"
const ToasterToastValues: HookDataMap = [
{
value: "id",
type: "string",
},
{
value: "title",
type: "ReactNode",
},
{
value: "description",
type: "ReactNode",
},
{
value: "variant",
type: {
type: "enum",
values: ["info", "success", "warning", "error", "loading"],
},
description: `Defaults to "info"`,
},
{
value: "action",
type: {
type: "object",
name: "ToastActionElement",
shape:
"{\n label: string\n altText: string\n onClick: () => void | Promise<void>\n}",
},
},
{
value: "disableDismiss",
type: "boolean",
},
]
const Props = () => {
return <HookTable props={ToasterToastValues} />
}
export default Props

34
www/apps/ui/src/props/hooks/useToast.tsx
View File

@@ -1,34 +0,0 @@
import { HookTable } from "@/components/hook-table"
import { HookDataMap } from "@/types/hooks"
const useToastValues: HookDataMap = [
{
value: "toast",
type: {
type: "function",
signature: `(toast: Omit<ToasterToast, "id">) => {\n id: string,\n dismiss: () => void,\n update: (toast: ToasterToast) => void\n}`,
},
description:
"Function used to display new toasts. For the toast options, please check the ToasterToast reference below.",
},
{
value: "dismiss",
type: {
type: "function",
signature: "(toastId?: string) => void",
},
description: "Function used to hide a toast based on its id.",
},
{
value: "toasts",
type: "ToasterToast[]",
description:
"All the toasts that have been pushed to the context this hook was invoked in.",
},
]
const Props = () => {
return <HookTable props={useToastValues} />
}
export default Props

5
www/apps/ui/src/registries/example-registry.tsx
View File

@@ -395,6 +395,11 @@ export const ExampleRegistry: Record<string, ExampleType> = {
component: React.lazy(async () => import("@/examples/toaster-demo")),
file: "src/examples/toaster-demo.tsx",
},
"toaster-dismiss": {
name: "toaster-dismiss",
component: React.lazy(async () => import("@/examples/toaster-dismiss")),
file: "src/examples/toaster-dismiss.tsx",
},
"toaster-warning": {
name: "toaster-warning",
component: React.lazy(async () => import("@/examples/toaster-warning")),

6
www/apps/ui/src/registries/hook-registry.tsx
View File

@@ -2,12 +2,6 @@ import { HookRegistryItem } from "@/types/hooks"
import * as React from "react"
export const HookRegistry: Record<string, HookRegistryItem> = {
useToast: {
table: React.lazy(async () => import("../props/hooks/useToast")),
},
ToasterToast: {
table: React.lazy(async () => import("../props/hooks/ToasterToast")),
},
usePrompt: {
table: React.lazy(async () => import("../props/hooks/usePrompt")),
},

6
www/apps/ui/src/specs/Toast/Toast.Viewport.json
View File

@@ -1,6 +0,0 @@
{
"description": "",
"methods": [],
"displayName": "Toast.Viewport",
"props": {}
}

106
www/apps/ui/src/specs/Toast/Toast.json
View File

@@ -1,67 +1,103 @@
{
"description": "This component is based on the [Radix UI Toast](https://www.radix-ui.com/primitives/docs/components/toast) primitives.",
"description": "This component is based on the [Sonner](https://sonner.emilkowal.ski/toast) toast library.",
"methods": [],
"displayName": "Toast",
"props": {
"variant": {
"required": false,
"id": {
"required": true,
"tsType": {
"name": "union",
"raw": "\"info\" | \"success\" | \"warning\" | \"error\" | \"loading\"",
"raw": "string | number",
"elements": [
{
"name": "literal",
"value": "\"info\""
"name": "string"
},
{
"name": "literal",
"value": "\"success\""
},
{
"name": "literal",
"value": "\"warning\""
},
{
"name": "literal",
"value": "\"error\""
},
{
"name": "literal",
"value": "\"loading\""
"name": "number"
}
]
},
"description": "The toast's style."
},
"title": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The toast's title."
"description": "Optional ID of the toast."
},
"description": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The toast's content."
"description": "The toast's text."
},
"action": {
"required": false,
"tsType": {
"name": "ActionProps"
"name": "signature",
"type": "object",
"raw": "&#123; altText: string ; label: string ; onClick: () => void \\| Promise&#60;void&#62; ; variant?: ToastActionVariant &#125;",
"signature": {
"properties": [
{
"key": "altText",
"value": {
"name": "string"
},
"description": "The button's alt text."
},
{
"key": "label",
"value": {
"name": "string"
},
"description": "The button's text."
},
{
"key": "onClick",
"value": {
"name": "signature",
"type": "function",
"raw": "() => void \\| Promise&#60;void&#62;",
"signature": {
"arguments": [],
"return": {
"name": "void \\| Promise&#60;void&#62;"
}
}
},
"description": "The function to execute when the button is clicked."
},
{
"key": "variant",
"value": {
"name": "ToastActionVariant",
"elements": [
{
"name": "union",
"raw": "\"default\" \\| \"destructive\"",
"elements": [
{
"name": "\"default\""
},
{
"name": "\"destructive\""
}
]
}
],
"raw": "ToastActionVariant"
},
"description": "The button's variant."
}
]
}
},
"description": "The actions to show in the toast as buttons."
"description": "The toast's action buttons."
},
"disableDismiss": {
"dismissLabel": {
"required": false,
"tsType": {
"name": "boolean"
"name": "string"
},
"description": "Whether to hide the Close button.",
"description": "The label of the dismiss button, if available.",
"defaultValue": {
"value": "false",
"value": "\"Close\"",
"computed": false
}
}

6
www/apps/ui/src/specs/ToastProvider/ToastProvider.json
View File

@@ -1,6 +0,0 @@
{
"description": "",
"methods": [],
"displayName": "ToastProvider",
"props": {}
}

93
www/apps/ui/src/specs/Toaster/Toaster.json
View File

@@ -1,6 +1,95 @@
{
"description": "",
"description": "This component is based on the [Toaster component of the Sonner library](https://sonner.emilkowal.ski/toaster).",
"methods": [],
"displayName": "Toaster",
"props": {}
"props": {
"position": {
"defaultValue": {
"value": "\"bottom-right\"",
"computed": false
},
"description": "The position of the created toasts.",
"tsType": {
"name": "Position",
"elements": [
{
"name": "union",
"raw": "\"top-left\" \\| \"top-right\" \\| \"bottom-left\" \\| \"bottom-right\" \\| \"top-center\" \\| \"bottom-center\"",
"elements": [
{
"name": "literal",
"value": "\"top-left\""
},
{
"name": "literal",
"value": "\"top-right\""
},
{
"name": "literal",
"value": "\"bottom-left\""
},
{
"name": "literal",
"value": "\"bottom-right\""
},
{
"name": "literal",
"value": "\"top-center\""
},
{
"name": "literal",
"value": "\"bottom-center\""
}
]
}
],
"raw": "Position"
},
"required": false
},
"gap": {
"defaultValue": {
"value": "12",
"computed": false
},
"description": "The gap between the toast components.",
"tsType": {
"name": "number"
},
"required": false
},
"offset": {
"defaultValue": {
"value": "24",
"computed": false
},
"description": "The space from the edges of the screen.",
"tsType": {
"name": "union",
"raw": "string \\| number",
"elements": [
{
"name": "string"
},
{
"name": "number"
}
]
},
"required": false
},
"duration": {
"description": "The time in milliseconds that a toast is shown before it's\nautomatically dismissed.\n\n",
"tsType": {
"name": "number"
},
"defaultValue": {
"value": "4000",
"computed": false
}
}
},
"composes": [
"Omit"
]
}

8
www/apps/ui/vercel.json
View File

@@ -3,5 +3,11 @@
"installCommand": "yarn install",
"buildCommand": "turbo run build",
"outputDirectory": ".next",
"ignoreCommand": "bash ../../ignore-build-script.sh"
"ignoreCommand": "bash ../../ignore-build-script.sh",
"redirects": [
{
"source": "/ui/hooks/use-toast",
"destination": "/upgrade-guides/medusa-ui/3-0-0"
}
]
}

77
www/yarn.lock
View File

@@ -4337,7 +4337,16 @@ __metadata:
languageName: node
linkType: hard
"@medusajs/ui-preset@npm:^1.1.2, @medusajs/ui-preset@npm:latest":
"@medusajs/icons@npm:^1.2.1":
version: 1.2.1
resolution: "@medusajs/icons@npm:1.2.1"
peerDependencies:
react: ^16.x || ^17.x || ^18.x
checksum: bdda0af295d5cd83682b5689a8fc711a03639b7d4eb5aa2a6648e99af969363ec942dc7fe3cb21e27b6b70ea5a94a9e1b5e10b28f57ae4c7211a8807f84200c8
languageName: node
linkType: hard
"@medusajs/ui-preset@npm:^1.1.2":
version: 1.1.2
resolution: "@medusajs/ui-preset@npm:1.1.2"
dependencies:
@@ -4349,6 +4358,18 @@ __metadata:
languageName: node
linkType: hard
"@medusajs/ui-preset@npm:^1.1.3":
version: 1.1.3
resolution: "@medusajs/ui-preset@npm:1.1.3"
dependencies:
"@tailwindcss/forms": ^0.5.3
tailwindcss-animate: ^1.0.6
peerDependencies:
tailwindcss: ">=3.0.0"
checksum: 36b3cbe3d1b3ab2666abe84499dc19a57fe88e886704ca82b42105b5ba078638c6af8d2032d09da12d2324c485966ef2840f6a06192690b986b3c5f025308c68
languageName: node
linkType: hard
"@medusajs/ui@npm:^2.4.1":
version: 2.4.1
resolution: "@medusajs/ui@npm:2.4.1"
@@ -4388,6 +4409,46 @@ __metadata:
languageName: node
linkType: hard
"@medusajs/ui@npm:^3.0.0":
version: 3.0.0
resolution: "@medusajs/ui@npm:3.0.0"
dependencies:
"@medusajs/icons": ^1.2.1
"@radix-ui/react-accordion": ^1.1.2
"@radix-ui/react-alert-dialog": ^1.0.4
"@radix-ui/react-avatar": ^1.0.3
"@radix-ui/react-checkbox": ^1.0.4
"@radix-ui/react-dialog": ^1.0.4
"@radix-ui/react-dropdown-menu": ^2.0.5
"@radix-ui/react-label": ^2.0.2
"@radix-ui/react-popover": ^1.0.6
"@radix-ui/react-portal": ^1.0.3
"@radix-ui/react-radio-group": ^1.1.3
"@radix-ui/react-scroll-area": ^1.0.4
"@radix-ui/react-select": ^2.0.0
"@radix-ui/react-slot": ^1.0.2
"@radix-ui/react-switch": ^1.0.3
"@radix-ui/react-tabs": ^1.0.4
"@radix-ui/react-tooltip": ^1.0.6
"@react-aria/datepicker": ^3.5.0
"@react-stately/datepicker": ^3.5.0
clsx: ^1.2.1
copy-to-clipboard: ^3.3.3
cva: 1.0.0-beta.1
date-fns: ^2.30.0
prism-react-renderer: ^2.0.6
prismjs: ^1.29.0
react-currency-input-field: ^3.6.11
react-day-picker: ^8.8.0
sonner: ^1.4.41
tailwind-merge: ^2.2.1
peerDependencies:
react: ^18.0.0
react-dom: ^18.0.0
checksum: 06d34783a4954f51ef3a5282e59cb3fd367f58d435739525a543af84213fc22c745f10849f0178fdf7c4e19bda3872a7e3ca628e1f4498ac03c95affa98b5266
languageName: node
linkType: hard
"@next/bundle-analyzer@npm:^14.1.3":
version: 14.1.3
resolution: "@next/bundle-analyzer@npm:14.1.3"
@@ -21823,6 +21884,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-css-media-queries@npm:2.1.0":
version: 2.1.0
resolution: "sort-css-media-queries@npm:2.1.0"
@@ -23033,8 +23104,8 @@ __metadata:
dependencies:
"@faker-js/faker": ^8.0.2
"@medusajs/icons": ^1.2.0
"@medusajs/ui": ^2.4.1
"@medusajs/ui-preset": latest
"@medusajs/ui": ^3.0.0
"@medusajs/ui-preset": ^1.1.3
"@radix-ui/react-dialog": ^1.0.4
"@radix-ui/react-scroll-area": ^1.0.4
"@radix-ui/react-tabs": ^1.0.4