diff --git a/packages/redux-devtools-rtk-query-monitor/demo/package.json b/packages/redux-devtools-rtk-query-monitor/demo/package.json index e4f18afb..cd7c3da5 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/package.json +++ b/packages/redux-devtools-rtk-query-monitor/demo/package.json @@ -19,6 +19,7 @@ "@redux-devtools/rtk-query-monitor": "workspace:^", "@reduxjs/toolkit": "^2.8.2", "msw": "^2.8.7", + "next-themes": "^0.4.6", "react": "^19.1.0", "react-dom": "^19.1.0", "react-icons": "^5.5.0", diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/color-mode.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/color-mode.tsx new file mode 100644 index 00000000..77339a31 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/color-mode.tsx @@ -0,0 +1,108 @@ +'use client'; + +import type { IconButtonProps, SpanProps } from '@chakra-ui/react'; +import { ClientOnly, IconButton, Skeleton, Span } from '@chakra-ui/react'; +import { ThemeProvider, useTheme } from 'next-themes'; +import type { ThemeProviderProps } from 'next-themes'; +import * as React from 'react'; +import { LuMoon, LuSun } from 'react-icons/lu'; + +export interface ColorModeProviderProps extends ThemeProviderProps {} + +export function ColorModeProvider(props: ColorModeProviderProps) { + return ( + + ); +} + +export type ColorMode = 'light' | 'dark'; + +export interface UseColorModeReturn { + colorMode: ColorMode; + setColorMode: (colorMode: ColorMode) => void; + toggleColorMode: () => void; +} + +export function useColorMode(): UseColorModeReturn { + const { resolvedTheme, setTheme, forcedTheme } = useTheme(); + const colorMode = forcedTheme || resolvedTheme; + const toggleColorMode = () => { + setTheme(resolvedTheme === 'dark' ? 'light' : 'dark'); + }; + return { + colorMode: colorMode as ColorMode, + setColorMode: setTheme, + toggleColorMode, + }; +} + +export function useColorModeValue(light: T, dark: T) { + const { colorMode } = useColorMode(); + return colorMode === 'dark' ? dark : light; +} + +export function ColorModeIcon() { + const { colorMode } = useColorMode(); + return colorMode === 'dark' ? : ; +} + +interface ColorModeButtonProps extends Omit {} + +export const ColorModeButton = React.forwardRef< + HTMLButtonElement, + ColorModeButtonProps +>(function ColorModeButton(props, ref) { + const { toggleColorMode } = useColorMode(); + return ( + }> + + + + + ); +}); + +export const LightMode = React.forwardRef( + function LightMode(props, ref) { + return ( + + ); + }, +); + +export const DarkMode = React.forwardRef( + function DarkMode(props, ref) { + return ( + + ); + }, +); 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..f3ade3af --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/provider.tsx @@ -0,0 +1,13 @@ +'use client'; + +import React from 'react'; +import { ChakraProvider, defaultSystem } from '@chakra-ui/react'; +import { ColorModeProvider, type ColorModeProviderProps } from './color-mode'; + +export function Provider(props: ColorModeProviderProps) { + return ( + + + + ); +} 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/components/ui/tooltip.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/tooltip.tsx new file mode 100644 index 00000000..72540bd5 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/tooltip.tsx @@ -0,0 +1,46 @@ +import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react'; +import * as React from 'react'; + +export interface TooltipProps extends ChakraTooltip.RootProps { + showArrow?: boolean; + portalled?: boolean; + portalRef?: React.RefObject; + content: React.ReactNode; + contentProps?: ChakraTooltip.ContentProps; + disabled?: boolean; +} + +export const Tooltip = React.forwardRef( + function Tooltip(props, ref) { + const { + showArrow, + children, + disabled, + portalled = true, + content, + contentProps, + portalRef, + ...rest + } = props; + + if (disabled) return children; + + return ( + + {children} + + + + {showArrow && ( + + + + )} + {content} + + + + + ); + }, +); diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx index 3bf42bd6..548d171c 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx @@ -1,7 +1,7 @@ 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'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d3a58c7e..92f4d9b2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2086,6 +2086,9 @@ importers: msw: specifier: ^2.8.7 version: 2.8.7(@types/node@22.15.21)(typescript@5.8.3) + next-themes: + specifier: ^0.4.6 + version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0) react: specifier: ^19.1.0 version: 19.1.0 @@ -8375,6 +8378,12 @@ packages: resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==} engines: {node: '>= 0.4.0'} + 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 + nise@1.5.3: resolution: {integrity: sha512-Ymbac/94xeIrMf59REBPOv0thr+CJVFMhrlAkW/gjCIE58BGQdCj0x7KRCb3yz+Ga2Rz3E9XXSvUyyxqqhjQAQ==} @@ -13264,13 +13273,13 @@ snapshots: '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1)(webpack@5.99.9)': dependencies: - webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack-cli@6.0.1) - webpack-cli: 6.0.1(webpack@5.99.9) + webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(webpack-cli@6.0.1) + webpack-cli: 6.0.1(webpack-dev-server@5.2.1)(webpack@5.99.9) '@webpack-cli/info@3.0.1(webpack-cli@6.0.1)(webpack@5.99.9)': dependencies: - webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack-cli@6.0.1) - webpack-cli: 6.0.1(webpack@5.99.9) + webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(webpack-cli@6.0.1) + webpack-cli: 6.0.1(webpack-dev-server@5.2.1)(webpack@5.99.9) '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1)(webpack-dev-server@5.2.1)(webpack@5.99.9)': dependencies: @@ -14639,7 +14648,7 @@ snapshots: postcss-value-parser: 4.2.0 semver: 7.7.2 optionalDependencies: - webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack-cli@6.0.1) + webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(webpack-cli@6.0.1) css-select@4.3.0: dependencies: @@ -17233,6 +17242,11 @@ snapshots: netmask@2.0.2: {} + next-themes@0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0): + dependencies: + react: 19.1.0 + react-dom: 19.1.0(react@19.1.0) + nise@1.5.3: dependencies: '@sinonjs/formatio': 3.2.2 @@ -18660,7 +18674,7 @@ snapshots: style-loader@4.0.0(webpack@5.99.9): dependencies: - webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack-cli@6.0.1) + webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(webpack-cli@6.0.1) styled-components@5.3.11(@babel/core@7.27.1)(react-dom@19.1.0(react@19.1.0))(react-is@19.1.0)(react@19.1.0): dependencies: @@ -19400,7 +19414,7 @@ snapshots: watchpack: 2.4.4 webpack-sources: 3.3.0 optionalDependencies: - webpack-cli: 6.0.1(webpack@5.99.9) + webpack-cli: 6.0.1(webpack-dev-server@5.2.1)(webpack@5.99.9) transitivePeerDependencies: - '@swc/core' - esbuild