feat: Toast component & useToast hook (#1333)

* feat: `Toast` component & `useToast` hook

* refactor: simplify toast background color management

* fix: focus-visible styles

* cleanup: define screen size variables only once

* fix(Toast): add ring on focus-visible

* fix(useToast): rename variable in `forEach`

* fix(ci): address linux storybook error (#1336)

* fix(ci): address linux storybook error

* chore(deps): move esbuild to dev deps

---------

Co-authored-by: Dominik Stumpf <122315398+dominik-stumpf@users.noreply.github.com>

package.json

@@ -47,6 +47,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-focus-scope": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
@@ -109,6 +110,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.0",
+    "@esbuild/linux-x64": "^0.22.0",
     "@hookform/devtools": "^4.3.0",
     "@storybook/addon-essentials": "^8.1.11",
     "@storybook/addon-interactions": "^8.1.11",

src/app/globals.css

@@ -48,6 +48,16 @@
     --border: 240 6% 90%;
     --input: var(--border);
     --ring: 224 71.4% 4.1%;
+
+    --toast-success: 137 64% 98%;
+    --toast-error: 0 78% 98%;
+    --toast-warning: 40 79% 96%;
+    --toast-info: 218 80% 98%;
+
+    --sm: 640px;
+    --md: 768px;
+    --lg: 1024px;
+    --xl: 1280px;
   }
 
   :root[data-theme="dark"] {
@@ -96,10 +106,10 @@
     --input: var(--border);
     --ring: 240 0% 45%;
 
-    --sm: 640px;
-    --md: 768px;
-    --lg: 1024px;
-    --xl: 1280px;
+    --toast-success: 180 4% 35%;
+    --toast-error: 317 4% 35%;
+    --toast-warning: 30 6% 34%;
+    --toast-info: 226 7% 36%;
   }
 
   :root[data-theme="dark"] video,

src/v2/components/ui/Toast.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Button } from "./Button"
+import { useToast } from "./hooks/useToast"
+import { ToastAction, ToastActionElement, ToastProps } from "./Toast"
+import { Toaster } from "./Toaster"
+
+const ToastExample = (props: {
+  variant: ToastProps["variant"]
+  action?: ToastActionElement
+}) => {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      onClick={() =>
+        toast({
+          title: "Example toast",
+          description: "This is the toast's descriptions",
+          ...props,
+        })
+      }
+    >
+      Show toast
+    </Button>
+  )
+}
+
+const meta: Meta = {
+  title: "Design system/Toast",
+  component: ToastExample,
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <Toaster />
+      </>
+    ),
+  ],
+}
+
+type Story = StoryObj<typeof ToastExample>
+
+export const Info: Story = {
+  args: {
+    variant: "info",
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: "success",
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: "warning",
+  },
+}
+
+export const Error: Story = {
+  args: {
+    variant: "error",
+  },
+}
+
+export const WithAction: Story = {
+  name: "With action",
+  args: {
+    variant: "info",
+    action: <ToastAction altText="Try again">Try again</ToastAction>,
+  },
+}
+
+export default meta

src/v2/components/ui/Toast.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { X } from "@phosphor-icons/react/dist/ssr"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed right-0 top-0 z-[100] flex max-h-screen w-full max-w-[min(420px,_100%)] flex-col gap-2 p-4 focus:outline-none",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "bg-card text-foreground group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md p-4 pr-8 shadow-lg transition-transform data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full data-[state=open]:sm:slide-in-from-right-full focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  {
+    variants: {
+      variant: {
+        info: "bg-toast-info",
+        error: "bg-toast-error",
+        success: "bg-toast-success",
+        warning: "bg-toast-warning",
+      },
+    },
+    defaultVariants: {
+      variant: "info",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => (
+  <ToastPrimitives.Root
+    ref={ref}
+    className={cn(toastVariants({ variant }), className)}
+    {...props}
+  />
+))
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 w-max shrink-0 items-center justify-center rounded-md bg-secondary px-3 text-sm font-medium ring-offset-transparent transition-colors hover:bg-secondary-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:bg-secondary-active disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-full p-1 text-foreground/50 opacity-0 ring-ring transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus-visible:ring-4 group-hover:opacity-100",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X weight="bold" className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("font-bold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>((props, ref) => <ToastPrimitives.Description ref={ref} {...props} />)
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  type ToastActionElement,
+  type ToastProps,
+}

src/v2/components/ui/Toaster.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/Toast"
+import { useToast } from "@/components/ui/hooks/useToast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="flex flex-col gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+              {action && <div className="mt-1 flex gap-1">{action}</div>}
+            </div>
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

src/v2/components/ui/Tooltip.tsx

@@ -21,7 +21,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "bg-tooltip text-tooltip-foreground z-50 overflow-hidden rounded-xl px-3 py-1.5 text-sm shadow-md duration-0 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-xl bg-tooltip px-3 py-1.5 text-sm text-tooltip-foreground shadow-md duration-0 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}