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>
2025-06-21 21:43:16 +03:00 · 2025-05-31 18:33:19 +00:00 · 2025-05-31 18:33:19 +00:00 · 585d6b9220
commit 585d6b9220
parent 6468c48b75
12 changed files with 980 additions and 443 deletions
--- 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",
--- 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() {
        </Box>
      </Flex>
      <Flex p="2" as="footer">
-        <UnorderedList p="2">
-          <ListItem>
+        <List.Root p="2">
+          <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>
-          <ListItem>
+          </List.Item>
+          <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>
-          <ListItem>
+          </List.Item>
+          <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>
-          <ListItem>
+          </List.Item>
+          <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>
-        </UnorderedList>
+          </List.Item>
+        </List.Root>
      </Flex>
    </main>
  );
--- 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
@ -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>;
+}
--- 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
@ -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>
+  );
+};
--- 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 (
    <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"
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/Pokemon.tsx
+++ b/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 = [
-  { label: 'Off', value: 0 },
-  { label: '3s', value: 3000 },
-  { label: '5s', value: 5000 },
-  { label: '10s', value: 10000 },
-  { label: '1m', value: 60000 },
-];
+const intervalOptions = createListCollection({
+  items: [
+    { label: 'Off', value: '0' },
+    { label: '3s', value: '3000' },
+    { label: '5s', value: '5000' },
+    { 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
-              value={pollingInterval}
-              onChange={({ target: { value } }) =>
-                setPollingInterval(Number(value))
+            <Select.Root
+              collection={intervalOptions}
+              value={[pollingInterval.toString()]}
+              onValueChange={({ value }) =>
+                setPollingInterval(Number(value[0]))
              }
            >
-              {intervalOptions.map(({ label, value }) => (
-                <option key={value} value={value}>
-                  {label}
-                </option>
-              ))}
-            </Select>
+              <Select.HiddenSelect />
+              <Select.Label>Polling interval</Select.Label>
+              <Select.Control>
+                <Select.Trigger>
+                  <Select.ValueText placeholder="Polling interval" />
+                </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
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx
+++ b/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">
-          <Button onClick={handleUpdate} isLoading={isLoading}>
+        <Stack gap={4} direction="row" align="center">
+          <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}
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx
@ -2,20 +2,15 @@ import {
  Box,
  Button,
  Center,
-  Divider,
+  Field,
  Flex,
-  FormControl,
-  FormLabel,
+  FormatNumber,
  Heading,
  Input,
  List,
-  ListIcon,
-  ListItem,
+  Separator,
  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}`)}>
-          <ListIcon as={MdBook} color="green.500" /> {name}
-        </ListItem>
+        <List.Item key={id} onClick={() => navigate(`/posts/${id}`)}>
+          <List.Indicator asChild color="green.500">
+            <MdBook />
+          </List.Indicator>
+          {name}
+        </List.Item>
      ))}
-    </List>
+    </List.Root>
  );
 };

@ -115,10 +113,12 @@ export const PostsCountStat = () => {
  if (!posts) return null;

  return (
-    <Stat>
-      <StatLabel>Active Posts</StatLabel>
-      <StatNumber>{posts?.length}</StatNumber>
-    </Stat>
+    <Stat.Root>
+      <Stat.Label>Active Posts</Stat.Label>
+      <Stat.ValueText>
+        <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">
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx
+++ b/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>
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/react-app-env.d.ts
+++ b/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';
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/store.ts
+++ b/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()),
 });
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml