chore(ui): added API reference comments for Toast component (#7129)

packages/design-system/ui/README.md

@@ -36,7 +36,7 @@
 ### Installation
 
 ```sh
-yarn add @medusajs/medusa-ui
+yarn add @medusajs/ui
 ```
 
 ### Usage

packages/design-system/ui/src/components/toast/toast.tsx

@@ -14,13 +14,49 @@ interface ToastComponentProps {
   dismissLabel?: string
 }
 
+/**
+ * This component is based on the [Sonner](https://sonner.emilkowal.ski/toast) toast library.
+ */
 export const Toast = ({
+  /**
+   * Optional ID of the toast.
+   */
   id,
+  /**
+   * @ignore
+   * 
+   * @privateRemarks
+   * As the Toast component is created using
+   * the `toast` utility functions, the variant is inferred
+   * from the utility function.
+   */
   variant = "info",
+  /**
+   * @ignore
+   * 
+   * @privateRemarks
+   * The `toast` utility functions accept this as a parameter.
+   */
   title,
+  /**
+   * The toast's text.
+   */
   description,
+  /**
+   * The toast's action buttons.
+   */
   action,
+  /**
+   * @ignore
+   * 
+   * @privateRemarks
+   * The `toast` utility functions don't allow
+   * passing this prop.
+   */
   onDismiss,
+  /**
+   * The label of the dismiss button, if available.
+   */
   dismissLabel = "Close",
 }: ToastComponentProps) => {
   const hasActionables = !!action || onDismiss

packages/design-system/ui/src/components/toaster/toaster.tsx

@@ -18,10 +18,28 @@ interface ToasterProps
     | "toastOptions"
   > {}
 
+/**
+ * This component is based on the [Toaster component of the Sonner library](https://sonner.emilkowal.ski/toaster).
+ */
 const Toaster = ({
+  /**
+   * The position of the created toasts.
+   */
   position = "bottom-right",
+  /**
+   * The gap between the toast components.
+   */
   gap = 12,
+  /**
+   * The space from the edges of the screen.
+   */
   offset = 24,
+  /**
+   * The time in milliseconds that a toast is shown before it's
+   * automatically dismissed.
+   * 
+   * @defaultValue 4000
+   */
   duration,
   ...props
 }: ToasterProps) => {

packages/design-system/ui/src/types.ts

@@ -36,8 +36,20 @@ export type ToastVariant =
 export type ToastActionVariant = "default" | "destructive"
 
 export type ToastAction = {
+  /**
+   * The button's text.
+   */
   label: string
+  /**
+   * The button's alt text.
+   */
   altText: string
+  /**
+   * The function to execute when the button is clicked.
+   */
   onClick: () => void | Promise<void>
+  /**
+   * The button's variant.
+   */
   variant?: ToastActionVariant
 }