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 <nbierema@gmail.com>

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

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 { Box, Flex, Heading, List } from '@chakra-ui/react';
-import { Link, UnorderedList, ListItem } 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() {
         </Box>
       </Flex>
       <Flex p="2" as="footer">
-        <UnorderedList p="2">
+        <List.Root p="2">
-          <ListItem>
+          <List.Item>
             <Link
               className="link"
-              isExternal
+              target="_blank"
+              rel="noopener noreferrer"
               href="https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-monitor/demo"
             >
               demo source
             </Link>
-          </ListItem>
+          </List.Item>
-          <ListItem>
+          <List.Item>
             <Link
               className="link"
-              isExternal
+              target="_blank"
+              rel="noopener noreferrer"
               href="https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-monitor"
             >
               @redux-devtools/rtk-query-monitor source
             </Link>
-          </ListItem>
+          </List.Item>
-          <ListItem>
+          <List.Item>
             <Link
               className="link"
-              isExternal
+              target="_blank"
+              rel="noopener noreferrer"
               href="https://github.com/reduxjs/redux-toolkit/tree/master/examples/query/react/polling"
             >
               polling example
             </Link>
-          </ListItem>
+          </List.Item>
-          <ListItem>
+          <List.Item>
             <Link
               className="link"
-              isExternal
+              target="_blank"
+              rel="noopener noreferrer"
               href="https://github.com/reduxjs/redux-toolkit/tree/master/examples/query/react/mutations"
             >
               mutations example
             </Link>
-          </ListItem>
+          </List.Item>
-        </UnorderedList>
+        </List.Root>
       </Flex>
     </main>
   );

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 <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>;
+}

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 (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
+        {(toast) => (
+          <Toast.Root width={{ md: 'sm' }}>
+            {toast.type === 'loading' ? (
+              <Spinner size="sm" color="blue.solid" />
+            ) : (
+              <Toast.Indicator />
+            )}
+            <Stack gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && (
+                <Toast.Description>{toast.description}</Toast.Description>
+              )}
+            </Stack>
+            {toast.action && (
+              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+            )}
+            {toast.closable && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  );
+};

packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx

@@ -14,7 +14,7 @@ export function DevToolsSelector() {
   return (
     <Box as="section" p="2">
       <Heading as="h2">Set active devTools</Heading>
-      <ButtonGroup variant="outline" spacing="4" p="4">
+      <ButtonGroup variant="outline" gap="4" p="4">
         <Button
           aria-selected={!extensionEnabled}
           colorScheme="blue"

packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/Pokemon.tsx

@@ -1,15 +1,17 @@
 import React, { useState } from 'react';
-import { Button, Select } from '@chakra-ui/react';
+import { Button, createListCollection, Portal, Select } from '@chakra-ui/react';
 import { useGetPokemonByNameQuery } from '../../services/pokemon';
 import type { PokemonName } from '../../pokemon.data';
 
-const intervalOptions = [
+const intervalOptions = createListCollection({
-  { label: 'Off', value: 0 },
+  items: [
-  { label: '3s', value: 3000 },
+    { label: 'Off', value: '0' },
-  { label: '5s', value: 5000 },
+    { label: '3s', value: '3000' },
-  { label: '10s', value: 10000 },
+    { label: '5s', value: '5000' },
-  { label: '1m', value: 60000 },
+    { label: '10s', value: '10000' },
-];
+    { label: '1m', value: '60000' },
+  ],
+});
 
 export function Pokemon({ name }: { name: PokemonName }) {
   const [pollingInterval, setPollingInterval] = useState(60000);
@@ -41,19 +43,39 @@ export function Pokemon({ name }: { name: PokemonName }) {
             />
           </div>
           <div>
-            <label style={{ display: 'block' }}>Polling interval</label>
+            <Select.Root
-            <Select
+              collection={intervalOptions}
-              value={pollingInterval}
+              value={[pollingInterval.toString()]}
-              onChange={({ target: { value } }) =>
+              onValueChange={({ value }) =>
-                setPollingInterval(Number(value))
+                setPollingInterval(Number(value[0]))
               }
             >
-              {intervalOptions.map(({ label, value }) => (
+              <Select.HiddenSelect />
-                <option key={value} value={value}>
+              <Select.Label>Polling interval</Select.Label>
-                  {label}
+              <Select.Control>
-                </option>
+                <Select.Trigger>
-              ))}
+                  <Select.ValueText placeholder="Polling interval" />
-            </Select>
+                </Select.Trigger>
+                <Select.IndicatorGroup>
+                  <Select.Indicator />
+                </Select.IndicatorGroup>
+              </Select.Control>
+              <Portal>
+                <Select.Positioner>
+                  <Select.Content>
+                    {intervalOptions.items.map((intervalOption) => (
+                      <Select.Item
+                        item={intervalOption}
+                        key={intervalOption.value}
+                      >
+                        {intervalOption.label}
+                        <Select.ItemIndicator />
+                      </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select.Positioner>
+              </Portal>
+            </Select.Root>
           </div>
           <div>
             <Button

packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx

@@ -15,8 +15,8 @@ import {
   Input,
   Spacer,
   Stack,
-  useToast,
 } from '@chakra-ui/react';
+import { toaster } from '../../components/ui/toaster';
 
 const EditablePostName = ({
   name: initialName,
@@ -50,8 +50,8 @@ const EditablePostName = ({
       </Box>
       <Spacer />
       <Box>
-        <Stack spacing={4} direction="row" align="center">
+        <Stack gap={4} direction="row" align="center">
-          <Button onClick={handleUpdate} isLoading={isLoading}>
+          <Button onClick={handleUpdate} loading={isLoading}>
             Update
           </Button>
           <CloseButton bg="red" onClick={handleCancel} disabled={isLoading} />
@@ -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 = () => {
           </Box>
           <Spacer />
           <Box>
-            <Stack spacing={4} direction="row" align="center">
+            <Stack gap={4} direction="row" align="center">
               <Button
                 onClick={() => setIsEditing(true)}
                 disabled={isDeleting || isUpdating}

packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx

@@ -2,20 +2,15 @@ import {
   Box,
   Button,
   Center,
-  Divider,
+  Field,
   Flex,
-  FormControl,
+  FormatNumber,
-  FormLabel,
   Heading,
   Input,
   List,
-  ListIcon,
+  Separator,
-  ListItem,
   Spacer,
   Stat,
-  StatLabel,
-  StatNumber,
-  useToast,
 } from '@chakra-ui/react';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 import { MdBook } from 'react-icons/md';
@@ -26,12 +21,12 @@ import {
   useGetPostsQuery,
 } from '../../services/posts';
 import { PostDetail } from './PostDetail';
+import { toaster } from '../../components/ui/toaster';
 
 const AddPost = () => {
   const initialValue = { name: '' };
   const [post, setPost] = useState<Pick<Post, 'name'>>(initialValue);
   const [addPost, { isLoading }] = useAddPostMutation();
-  const toast = useToast();
 
   const handleChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
     setPost((prev) => ({
@@ -45,12 +40,12 @@ const AddPost = () => {
       await addPost(post).unwrap();
       setPost(initialValue);
     } catch {
-      toast({
+      toaster.create({
         title: 'An error occurred',
         description: "We couldn't save your post, try again!",
-        status: 'error',
+        type: 'error',
         duration: 2000,
-        isClosable: true,
+        closable: true,
       });
     }
   };
@@ -58,11 +53,11 @@ const AddPost = () => {
   return (
     <Flex p={'5px 0'} flexDirection="row" flexWrap="wrap" maxWidth={'85%'}>
       <Box flex={'5 0 auto'} padding="0 5px 0 0">
-        <FormControl
+        <Field.Root
           flexDirection="column"
-          isInvalid={Boolean(post.name.length < 3 && post.name)}
+          invalid={Boolean(post.name.length < 3 && post.name)}
         >
-          <FormLabel htmlFor="name">Post name</FormLabel>
+          <Field.Label htmlFor="name">Post name</Field.Label>
           <Input
             id="name"
             name="name"
@@ -70,13 +65,13 @@ const AddPost = () => {
             value={post.name}
             onChange={handleChange}
           />
-        </FormControl>
+        </Field.Root>
       </Box>
       <Box>
         <Button
           mt={8}
           colorScheme="purple"
-          isLoading={isLoading}
+          loading={isLoading}
           onClick={handleAddPost}
         >
           Add Post
@@ -99,13 +94,16 @@ const PostList = () => {
   }
 
   return (
-    <List spacing={3}>
+    <List.Root gap={3}>
       {posts.map(({ id, name }) => (
-        <ListItem key={id} onClick={() => navigate(`/posts/${id}`)}>
+        <List.Item key={id} onClick={() => navigate(`/posts/${id}`)}>
-          <ListIcon as={MdBook} color="green.500" /> {name}
+          <List.Indicator asChild color="green.500">
-        </ListItem>
+            <MdBook />
+          </List.Indicator>
+          {name}
+        </List.Item>
       ))}
-    </List>
+    </List.Root>
   );
 };
 
@@ -115,10 +113,12 @@ export const PostsCountStat = () => {
   if (!posts) return null;
 
   return (
-    <Stat>
+    <Stat.Root>
-      <StatLabel>Active Posts</StatLabel>
+      <Stat.Label>Active Posts</Stat.Label>
-      <StatNumber>{posts?.length}</StatNumber>
+      <Stat.ValueText>
-    </Stat>
+        <FormatNumber value={posts?.length} />
+      </Stat.ValueText>
+    </Stat.Root>
   );
 };
 
@@ -134,9 +134,9 @@ export const PostsManager = () => {
           <PostsCountStat />
         </Box>
       </Flex>
-      <Divider />
+      <Separator />
       <AddPost />
-      <Divider />
+      <Separator />
       <Flex wrap="wrap">
         <Box flex={1} borderRight="1px solid #eee">
           <Box p={4} borderBottom="1px solid #eee">

packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { ChakraProvider } from '@chakra-ui/react';
+import { Provider as ChakraProvider } from './components/ui/provider';
 import './index.css';
 import { store } from './store';
 import DevTools from './features/DevTools/DevTools';
 import { BrowserRouter } from 'react-router-dom';
 import { App } from './App';
 import { worker } from './mocks/browser';
+import { Toaster } from './components/ui/toaster';
 
 function renderApp() {
   const rootElement = document.getElementById('root');
@@ -17,6 +18,7 @@ function renderApp() {
       <ChakraProvider>
         <BrowserRouter>
           <App />
+          <Toaster />
           <DevTools />
         </BrowserRouter>
       </ChakraProvider>

packages/redux-devtools-rtk-query-monitor/demo/src/react-app-env.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react-scripts" />
-
 declare module '@redux-devtools/app';
 
 declare module 'remote-redux-devtools';

packages/redux-devtools-rtk-query-monitor/demo/src/store.ts

@@ -21,5 +21,8 @@ export const store: EnhancedStore<ReturnType<typeof reducer>> = configureStore({
   // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat([pokemonApi.middleware, postsApi.middleware]),
-  enhancers: (devTools ? [] : [DevTools.instrument()]) as any,
+  enhancers: devTools
+    ? undefined
+    : (getDefaultEnhancers) =>
+        getDefaultEnhancers().concat(DevTools.instrument()),
 });