feat: Toast component with Sonner

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",

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>

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",
+          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 };

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">
+                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,
+  },
+};