feat: added devtools component that render conditionally

Author: Arif-un

frontend/components/Devtools.tsx

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+export default function Devtools({ jotai, reactQuery }: { jotai?: boolean; reactQuery?: boolean }) {
+  const [DevtoolsComponents, setDevtoolsComponents] = useState<ReactNode | undefined>()
+
+  useEffect(() => {
+    if (import.meta.env.DEV) {
+      Promise.all([
+        jotai ? import('jotai-devtools') : undefined,
+        reactQuery ? import('@tanstack/react-query-devtools') : undefined,
+        jotai ? import('jotai-devtools/styles.css') : undefined
+      ]).then(([jotaiDevtools, reactQueryDevtools]) => {
+        const DevelopmentToolsUI = (
+          <>
+            {jotai && jotaiDevtools ? <jotaiDevtools.DevTools position="bottom-right" /> : undefined}
+            {reactQuery && reactQueryDevtools ? (
+              <reactQueryDevtools.ReactQueryDevtools initialIsOpen={false} position="bottom" />
+            ) : undefined}
+          </>
+        )
+        setDevtoolsComponents(DevelopmentToolsUI)
+      })
+    }
+  }, [jotai, reactQuery])
+
+  if (!import.meta.env.DEV) return
+
+  return DevtoolsComponents ? createPortal(DevtoolsComponents, document.body) : undefined
+}

package.json

@@ -43,6 +43,7 @@
     "immer": "^10.1.1",
     "jotai": "^2.8.3",
     "jotai-immer": "^0.4.1",
+    "jotai-devtools": "^0.10.1",
     "localforage": "^1.10.0",
     "lucide-react": "^0.397.0",
     "react": "^18.3.1",
@@ -141,4 +142,4 @@
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^1.6.0"
   }
-}
+}