From 08168c2b80bbc73c7503e71e199fc1f54fd9b007 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <92519134+BrickheadJohnny@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:31:55 +0100
Subject: [PATCH] feat: Toast component with Sonner (#1559)

* feat: Toast component with Sonner

* fix: button width in storybook

* fix(Toaster): add ring on focus-visible
---
 package.json                  |  1 +
 src/app/layout.tsx            |  2 ++
 src/components/ui/Toaster.tsx | 31 +++++++++++++++++++
 src/stories/Toast.stories.tsx | 56 +++++++++++++++++++++++++++++++++++
 4 files changed, 90 insertions(+)
 create mode 100644 src/components/ui/Toaster.tsx
 create mode 100644 src/stories/Toast.stories.tsx

diff --git a/package.json b/package.json
index e18764f217..0952095441 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-hook-form": "^7.53.2",
+    "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.1",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 646f617485..14103eaca6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import "@/styles/globals.css";
 import { Header } from "@/components/Header";
 import { Providers } from "@/components/Providers";
 import { SignInDialog } from "@/components/SignInDialog";
+import { Toaster } from "@/components/ui/Toaster";
 import { dystopian, inter } from "@/lib/fonts";
 import { cn } from "lib/cssUtils";
 
@@ -30,6 +31,7 @@ const RootLayout = ({
 
           {/* TODO: maybe load this dynamically? */}
           <SignInDialog />
+          <Toaster />
         </Providers>
       </body>
     </html>
diff --git a/src/components/ui/Toaster.tsx b/src/components/ui/Toaster.tsx
new file mode 100644
index 0000000000..79341a0d64
--- /dev/null
+++ b/src/components/ui/Toaster.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg data-[button]:bg-button-primary-background gap-2 focus-visible:ring-2",
+          description: "group-[.toast]:text-foreground-secondary",
+          actionButton:
+            "group-[.toast]:!bg-button-primary-background group-[.toast]:!text-button-primary-foreground",
+          closeButton:
+            "group-[.toast]:bg-background group-[.toast]:text-foreground group-[.toast]:border-border",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
diff --git a/src/stories/Toast.stories.tsx b/src/stories/Toast.stories.tsx
new file mode 100644
index 0000000000..b8b567602d
--- /dev/null
+++ b/src/stories/Toast.stories.tsx
@@ -0,0 +1,56 @@
+import { Button } from "@/components/ui/Button";
+import { Toaster } from "@/components/ui/Toaster";
+import type { Meta, StoryObj } from "@storybook/react";
+import { toast } from "sonner";
+
+type ToastExampleProps = {
+  title: string;
+  description?: string;
+  action?: boolean;
+  closeButton?: boolean;
+};
+const ToastExample = ({
+  title = "Toast example",
+  description,
+  action,
+  closeButton,
+}: ToastExampleProps) => {
+  return (
+    <>
+      <Button
+        onClick={() =>
+          toast(title, {
+            description,
+            action: action ? (
+              <Button size="xs" className="ml-auto min-w-max">
+                Action
+              </Button>
+            ) : undefined,
+            closeButton,
+          })
+        }
+      >
+        Show toast!
+      </Button>
+      <Toaster />
+    </>
+  );
+};
+
+const meta: Meta<typeof ToastExample> = {
+  title: "Design system/Toast",
+  component: ToastExample,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToastExample>;
+
+export const Default: Story = {
+  args: {
+    title: "Toast example",
+    description: "",
+    action: false,
+    closeButton: false,
+  },
+};