From 3d5d843c98063bb69f1fe3cd1cb60a182301345a Mon Sep 17 00:00:00 2001 From: Isaac Hermel Date: Mon, 12 May 2025 22:55:03 -0300 Subject: [PATCH 1/2] fix(sonner): update sonner to work properly in the website --- app/(docs)/docs/[[...slug]]/page.tsx | 2 +- app/layout.tsx | 2 +- components/retroui/Sonner.tsx | 18 +++++++++++------- package.json | 1 + pnpm-lock.yaml | 14 ++++++++++++++ preview/components/sonner-style-default.tsx | 3 +++ 6 files changed, 31 insertions(+), 9 deletions(-) diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx index 789229b..602c950 100644 --- a/app/(docs)/docs/[[...slug]]/page.tsx +++ b/app/(docs)/docs/[[...slug]]/page.tsx @@ -5,7 +5,7 @@ import { format } from "date-fns"; import MDX from "@/components/MDX"; import { Text } from "@/components/retroui/Text"; import { Metadata } from "next"; -import { MoveRightIcon, MoveUpRightIcon } from "lucide-react"; +import { MoveUpRightIcon } from "lucide-react"; interface IProps { params: { slug: string[] }; diff --git a/app/layout.tsx b/app/layout.tsx index c094d77..73e0120 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -68,7 +68,7 @@ export default function RootLayout({ />
diff --git a/components/retroui/Sonner.tsx b/components/retroui/Sonner.tsx index 60c0529..7bab373 100644 --- a/components/retroui/Sonner.tsx +++ b/components/retroui/Sonner.tsx @@ -1,27 +1,31 @@ "use client"; +import { useTheme } from "next-themes"; import { Toaster as Sonner } from "sonner"; type ToasterProps = React.ComponentProps; const Toaster = ({ ...props }: ToasterProps) => { + const { theme = "system" } = useTheme(); + return ( diff --git a/package.json b/package.json index 60a7205..2e89f26 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "lucide-react": "^0.445.0", "next": "14.2.7", "next-contentlayer": "^0.3.4", + "next-themes": "^0.4.6", "react": "^18", "react-dom": "^18", "rehype-pretty-code": "^0.14.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5fa3acc..642be61 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -80,6 +80,9 @@ importers: next-contentlayer: specifier: ^0.3.4 version: 0.3.4(contentlayer@0.3.4(esbuild@0.18.20))(esbuild@0.18.20)(next@14.2.7(@babel/core@7.26.9)(@opentelemetry/api@1.9.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + next-themes: + specifier: ^0.4.6 + version: 0.4.6(react-dom@18.0.0(react@18.0.0))(react@18.0.0) react: specifier: ^18 version: 18.0.0 @@ -3550,6 +3553,12 @@ packages: react: '*' react-dom: '*' + next-themes@0.4.6: + resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==} + peerDependencies: + react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc + react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc + next@14.2.7: resolution: {integrity: sha512-4Qy2aK0LwH4eQiSvQWyKuC7JXE13bIopEQesWE0c/P3uuNRnZCQanI0vsrMLmUQJLAto+A+/8+sve2hd+BQuOQ==} engines: {node: '>=18.17.0'} @@ -8342,6 +8351,11 @@ snapshots: - markdown-wasm - supports-color + next-themes@0.4.6(react-dom@18.0.0(react@18.0.0))(react@18.0.0): + dependencies: + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + next@14.2.7(@babel/core@7.26.9)(@opentelemetry/api@1.9.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0): dependencies: '@next/env': 14.2.7 diff --git a/preview/components/sonner-style-default.tsx b/preview/components/sonner-style-default.tsx index 916680e..b3d3281 100644 --- a/preview/components/sonner-style-default.tsx +++ b/preview/components/sonner-style-default.tsx @@ -1,8 +1,11 @@ +"use client"; + import { Button } from "@/components/retroui"; import { toast } from "sonner"; export default function SonnerStyleDefault() { const onClick = () => { + console.log("clicked"); toast("Event has been created", { description: "Sunday, December 03, 2025", cancel: { From 0c1cdfd4d3799f54abb03c2aa417844965146137 Mon Sep 17 00:00:00 2001 From: Isaac Hermel Date: Mon, 12 May 2025 23:17:04 -0300 Subject: [PATCH 2/2] chore(sonner demo): remove console.log --- preview/components/sonner-style-default.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/preview/components/sonner-style-default.tsx b/preview/components/sonner-style-default.tsx index b3d3281..c66ca21 100644 --- a/preview/components/sonner-style-default.tsx +++ b/preview/components/sonner-style-default.tsx @@ -5,7 +5,6 @@ import { toast } from "sonner"; export default function SonnerStyleDefault() { const onClick = () => { - console.log("clicked"); toast("Event has been created", { description: "Sunday, December 03, 2025", cancel: {