From a5fb11e982d2e23559683c351b3814d30d6857d0 Mon Sep 17 00:00:00 2001 From: jinyang628 Date: Sat, 7 Jun 2025 21:19:46 +0800 Subject: [PATCH] Add sonner and tanstack dependencies --- frontend/package-lock.json | 61 ++++++++++++++++++++- frontend/package.json | 6 +- frontend/src/app/layout.tsx | 30 ++++++---- frontend/src/components/providers/query.tsx | 11 ++++ frontend/src/components/ui/sonner.tsx | 26 +++++++++ 5 files changed, 120 insertions(+), 14 deletions(-) create mode 100644 frontend/src/components/providers/query.tsx create mode 100644 frontend/src/components/ui/sonner.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 14dbc2d..d55c9f7 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,13 +8,17 @@ "name": "frontend", "version": "0.1.0", "dependencies": { + "@tanstack/react-query": "^5.80.6", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.513.0", "next": "15.3.3", + "next-themes": "^0.4.6", "react": "^19.0.0", "react-dom": "^19.0.0", - "tailwind-merge": "^3.3.0" + "sonner": "^2.0.5", + "tailwind-merge": "^3.3.0", + "zod": "^3.25.56" }, "devDependencies": { "@eslint/eslintrc": "^3", @@ -1415,6 +1419,32 @@ "tailwindcss": "4.1.8" } }, + "node_modules/@tanstack/query-core": { + "version": "5.80.6", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.80.6.tgz", + "integrity": "sha512-nl7YxT/TAU+VTf+e2zTkObGTyY8YZBMnbgeA1ee66lIVqzKlYursAII6z5t0e6rXgwUMJSV4dshBTNacNpZHbQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.80.6", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.80.6.tgz", + "integrity": "sha512-izX+5CnkpON3NQGcEm3/d7LfFQNo9ZpFtX2QsINgCYK9LT2VCIdi8D3bMaMSNhrAJCznRoAkFic76uvLroALBw==", + "license": "MIT", + "dependencies": { + "@tanstack/query-core": "5.80.6" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18 || ^19" + } + }, "node_modules/@trivago/prettier-plugin-sort-imports": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-5.2.2.tgz", @@ -5080,6 +5110,16 @@ } } }, + "node_modules/next-themes": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz", + "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" + } + }, "node_modules/next/node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", @@ -6004,6 +6044,16 @@ "is-arrayish": "^0.3.1" } }, + "node_modules/sonner": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.5.tgz", + "integrity": "sha512-YwbHQO6cSso3HBXlbCkgrgzDNIhws14r4MO87Ofy+cV2X7ES4pOoAK3+veSmVTvqNx1BWUxlhPmZzP00Crk2aQ==", + "license": "MIT", + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", + "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -6730,6 +6780,15 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zod": { + "version": "3.25.56", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.56.tgz", + "integrity": "sha512-rd6eEF3BTNvQnR2e2wwolfTmUTnp70aUTqr0oaGbHifzC3BKJsoV+Gat8vxUMR1hwOKBs6El+qWehrHbCpW6SQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } } } } diff --git a/frontend/package.json b/frontend/package.json index 693997f..9ff7ff3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,13 +9,17 @@ "lint": "next lint" }, "dependencies": { + "@tanstack/react-query": "^5.80.6", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.513.0", "next": "15.3.3", + "next-themes": "^0.4.6", "react": "^19.0.0", "react-dom": "^19.0.0", - "tailwind-merge": "^3.3.0" + "sonner": "^2.0.5", + "tailwind-merge": "^3.3.0", + "zod": "^3.25.56" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 76fe855..3bcfe64 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -1,17 +1,13 @@ import type { Metadata } from 'next'; -import { Geist, Geist_Mono } from 'next/font/google'; +import { ThemeProvider } from 'next-themes'; +import { Inter } from 'next/font/google'; -import './globals.css'; +import { QueryProvider } from '@/components/providers/query'; +import { Toaster } from '@/components/ui/sonner'; -const geistSans = Geist({ - variable: '--font-geist-sans', - subsets: ['latin'], -}); +import './globals.css'; -const geistMono = Geist_Mono({ - variable: '--font-geist-mono', - subsets: ['latin'], -}); +const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'Create Next App', @@ -24,8 +20,18 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - {children} + + + + {children} + + + ); } diff --git a/frontend/src/components/providers/query.tsx b/frontend/src/components/providers/query.tsx new file mode 100644 index 0000000..504874e --- /dev/null +++ b/frontend/src/components/providers/query.tsx @@ -0,0 +1,11 @@ +'use client'; + +import { ReactNode } from 'react'; + +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; + +export const queryClient = new QueryClient(); + +export const QueryProvider = ({ children }: { children: ReactNode }) => { + return {children}; +}; diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx new file mode 100644 index 0000000..660ebee --- /dev/null +++ b/frontend/src/components/ui/sonner.tsx @@ -0,0 +1,26 @@ +'use client'; + +import { useTheme } from 'next-themes'; + +import { Toaster as Sonner, ToasterProps } from 'sonner'; + +const Toaster = ({ ...props }: ToasterProps) => { + const { theme = 'system' } = useTheme(); + + return ( + + ); +}; + +export { Toaster };