From 585d6b922022aeb7ca8ee761c0f55b4f40b6c2ce Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sat, 31 May 2025 18:33:19 +0000 Subject: [PATCH] fix(deps): update dependency @chakra-ui/react to v3 (#1802) * fix(deps): update dependency @chakra-ui/react to v3 * Remove unnecessary packages * Add snippets * Updates * Remove unused * Remove ColorModeProvider? * Fix * Fix --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Nathan Bierema --- .../demo/package.json | 4 +- .../demo/src/App.tsx | 36 +- .../demo/src/components/ui/provider.tsx | 8 + .../demo/src/components/ui/toaster.tsx | 44 + .../features/DevTools/DevToolsSelector.tsx | 2 +- .../demo/src/features/pokemon/Pokemon.tsx | 60 +- .../demo/src/features/posts/PostDetail.tsx | 16 +- .../demo/src/features/posts/PostsManager.tsx | 56 +- .../demo/src/index.tsx | 4 +- .../demo/src/react-app-env.d.ts | 2 - .../demo/src/store.ts | 5 +- pnpm-lock.yaml | 1186 ++++++++++++----- 12 files changed, 980 insertions(+), 443 deletions(-) create mode 100644 packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/provider.tsx create mode 100644 packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/toaster.tsx diff --git a/packages/redux-devtools-rtk-query-monitor/demo/package.json b/packages/redux-devtools-rtk-query-monitor/demo/package.json index 2c26db9c..e4f18afb 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/package.json +++ b/packages/redux-devtools-rtk-query-monitor/demo/package.json @@ -11,15 +11,13 @@ }, "dependencies": { "@babel/runtime": "^7.27.1", - "@chakra-ui/react": "^2.10.9", + "@chakra-ui/react": "^3.19.1", "@emotion/react": "^11.14.0", - "@emotion/styled": "^11.14.0", "@mswjs/data": "^0.16.2", "@redux-devtools/core": "workspace:^", "@redux-devtools/dock-monitor": "workspace:^", "@redux-devtools/rtk-query-monitor": "workspace:^", "@reduxjs/toolkit": "^2.8.2", - "framer-motion": "^12.15.0", "msw": "^2.8.7", "react": "^19.1.0", "react-dom": "^19.1.0", diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx index 808cc9b2..db99805c 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx @@ -1,7 +1,7 @@ import PokemonView from './features/pokemon/PokemonView'; import PostsView from './features/posts/PostsView'; -import { Box, Flex, Heading } from '@chakra-ui/react'; -import { Link, UnorderedList, ListItem } from '@chakra-ui/react'; +import { Box, Flex, Heading, List } from '@chakra-ui/react'; +import { Link } from '@chakra-ui/react'; import { Code } from '@chakra-ui/react'; import * as React from 'react'; import { DevToolsSelector } from './features/DevTools/DevToolsSelector'; @@ -27,44 +27,48 @@ export function App() { - - + + demo source - - + + @redux-devtools/rtk-query-monitor source - - + + polling example - - + + mutations example - - + + ); diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/provider.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/provider.tsx new file mode 100644 index 00000000..a1e570bb --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/provider.tsx @@ -0,0 +1,8 @@ +'use client'; + +import React from 'react'; +import { ChakraProvider, defaultSystem } from '@chakra-ui/react'; + +export function Provider({ children }: { children: React.ReactNode }) { + return {children}; +} diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/toaster.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/toaster.tsx new file mode 100644 index 00000000..4d2a150e --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/toaster.tsx @@ -0,0 +1,44 @@ +'use client'; + +import React from 'react'; +import { + Toaster as ChakraToaster, + Portal, + Spinner, + Stack, + Toast, + createToaster, +} from '@chakra-ui/react'; + +export const toaster = createToaster({ + placement: 'bottom-end', + pauseOnPageIdle: true, +}); + +export const Toaster = () => { + return ( + + + {(toast) => ( + + {toast.type === 'loading' ? ( + + ) : ( + + )} + + {toast.title && {toast.title}} + {toast.description && ( + {toast.description} + )} + + {toast.action && ( + {toast.action.label} + )} + {toast.closable && } + + )} + + + ); +}; diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx index 676c0c76..f14334ab 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx @@ -14,7 +14,7 @@ export function DevToolsSelector() { return ( Set active devTools - + @@ -75,8 +75,6 @@ export const PostDetail = () => { const { id } = useParams<{ id: string }>(); const navigate = useNavigate(); - const toast = useToast(); - const [isEditing, setIsEditing] = useState(false); const { data: post, isLoading } = useGetPostQuery(id!); @@ -108,12 +106,12 @@ export const PostDetail = () => { try { await updatePost({ id: id!, name }).unwrap(); } catch { - toast({ + toaster.create({ title: 'An error occurred', description: "We couldn't save your changes, try again!", - status: 'error', + type: 'error', duration: 2000, - isClosable: true, + closable: true, }); } finally { setIsEditing(false); @@ -129,7 +127,7 @@ export const PostDetail = () => { - +