@upstash/react-redis-browser 0.1.2-canary-7 → 0.1.2

package/dist/index.js

@@ -222,6 +222,20 @@ var _iconsreact = require('@tabler/icons-react');
 
 var _reactresizablepanels = require('react-resizable-panels');
 
+// src/components/ui/toaster.tsx
+var _reactportal = require('@radix-ui/react-portal');
+
+// src/lib/portal-root.ts
+var root;
+if (typeof document !== "undefined") {
+  const id = "react-redis-browser-portal-root";
+  root = _nullishCoalesce(document.querySelector(`#${id}`), () => ( document.createElement("div")));
+  root.classList.add("ups-db");
+  root.id = "react-redis-browser-portal-root";
+  document.body.append(root);
+}
+var portalRoot = root;
+
 // src/components/ui/toast.tsx
 
 var _reacticons = require('@radix-ui/react-icons');
@@ -2874,7 +2888,7 @@ ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 function Toaster() {
   const { toasts } = useToast();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ToastProvider, { children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactportal.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ToastProvider, { children: [
     toasts.map(({ id, title, description, action, ...props }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Toast, { ...props, children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-1", children: [
         title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToastTitle, { children: title }),
@@ -2884,7 +2898,7 @@ function Toaster() {
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToastClose, {})
     ] }, id)),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToastViewport, {})
-  ] });
+  ] }) });
 }
 
 // src/components/databrowser/hooks/use-keys.tsx
@@ -3174,6 +3188,7 @@ var useAddKey = () => {
   const { redis } = useDatabrowser();
   const mutation = _reactquery.useMutation.call(void 0, {
     mutationFn: async ({ key, type }) => {
+      if (await redis.exists(key)) throw new Error(`Key "${key}" already exists`);
       switch (type) {
         case "set": {
           await redis.sadd(key, "value");
@@ -3577,19 +3592,6 @@ var _reactcontextmenu = require('@radix-ui/react-context-menu'); var ContextMenu
 
 
 
-// src/lib/portal-root.ts
-var root;
-if (typeof document !== "undefined") {
-  const id = "react-redis-browser-portal-root";
-  root = _nullishCoalesce(document.querySelector(`#${id}`), () => ( document.createElement("div")));
-  root.classList.add("ups-db");
-  root.id = "react-redis-browser-portal-root";
-  document.body.append(root);
-}
-var portalRoot = root;
-
-// src/components/ui/context-menu.tsx
-
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -4708,7 +4710,8 @@ var CustomEditor = ({
   value,
   onChange,
   height,
-  showCopyButton
+  showCopyButton,
+  readOnly
 }) => {
   const monaco = _react2.useMonaco.call(void 0, );
   const editorRef = _react.useRef.call(void 0, );
@@ -4739,6 +4742,7 @@ var CustomEditor = ({
             },
             defaultLanguage: language,
             options: {
+              readOnly,
               wordWrap: "on",
               overviewRulerBorder: false,
               overviewRulerLanes: 0,
@@ -4784,7 +4788,8 @@ var useField = ({
   name,
   form,
   height,
-  showCopyButton
+  showCopyButton,
+  readOnly
 }) => {
   const { field, fieldState } = _reacthookform.useController.call(void 0, {
     name,
@@ -4822,7 +4827,8 @@ var useField = ({
         value: field.value,
         onChange: field.onChange,
         height,
-        showCopyButton
+        showCopyButton,
+        readOnly
       }
     ) })
   };
@@ -4873,8 +4879,24 @@ var ListEditForm = ({
   });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacthookform.FormProvider, { ...form, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit, className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow flex-col gap-2", children: [
-      type !== "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "key", height: type === "set" ? 250 : 100, label: keyLabel }),
-      type === "zset" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "value", height: type === "list" ? 250 : 100, label: valueLabel })
+      type !== "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        FormItem,
+        {
+          readOnly: type === "stream",
+          name: "key",
+          height: type === "set" ? 250 : 100,
+          label: keyLabel
+        }
+      ),
+      type === "zset" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        FormItem,
+        {
+          readOnly: type === "stream",
+          name: "value",
+          height: type === "list" ? 250 : 100,
+          label: valueLabel
+        }
+      )
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex justify-end gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -4927,14 +4949,16 @@ var NumberFormItem = ({ name, label }) => {
 var FormItem = ({
   name,
   label,
-  height
+  height,
+  readOnly
 }) => {
   const form = _reacthookform.useFormContext.call(void 0, );
   const { editor, selector } = useField({
     name,
     form,
     height,
-    showCopyButton: true
+    showCopyButton: true,
+    readOnly
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 text-xs", children: [
@@ -5225,23 +5249,16 @@ function AddKeyModal() {
     }
   });
   const onSubmit = handleSubmit(async ({ key, type }) => {
-    try {
-      await addKey({ key, type });
-      setSelectedKey(key);
-      setOpen(false);
-      setTimeout(() => {
-        _optionalChain([window, 'access', _32 => _32.document, 'access', _33 => _33.querySelector, 'call', _34 => _34(`[data-key="${key}"]`), 'optionalAccess', _35 => _35.scrollIntoView, 'call', _36 => _36({
-          behavior: "smooth",
-          block: "start",
-          inline: "nearest"
-        })]);
-      }, 100);
-    } catch (error) {
-      toast({
-        description: error instanceof Error ? error.message : "An error occurred",
-        variant: "destructive"
-      });
-    }
+    await addKey({ key, type });
+    setSelectedKey(key);
+    setOpen(false);
+    setTimeout(() => {
+      _optionalChain([window, 'access', _32 => _32.document, 'access', _33 => _33.querySelector, 'call', _34 => _34(`[data-key="${key}"]`), 'optionalAccess', _35 => _35.scrollIntoView, 'call', _36 => _36({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest"
+      })]);
+    }, 100);
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     Dialog,
@@ -5506,6 +5523,9 @@ function Sidebar() {
 
 var RedisBrowser = ({ token, url }) => {
   const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
+  _react.useEffect.call(void 0, () => {
+    queryClient.resetQueries();
+  }, [credentials.url]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ups-db", style: { height: "100%" }, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       _reactresizablepanels.PanelGroup,

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/databrowser/index.tsx
-import { useMemo as useMemo6 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo6 } from "react";
 
 // src/store.tsx
 import { createContext, useContext, useMemo, useState as useState2 } from "react";
@@ -222,6 +222,20 @@ import { IconDotsVertical as IconDotsVertical2 } from "@tabler/icons-react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
+// src/components/ui/toaster.tsx
+import { Portal } from "@radix-ui/react-portal";
+
+// src/lib/portal-root.ts
+var root;
+if (typeof document !== "undefined") {
+  const id = "react-redis-browser-portal-root";
+  root = document.querySelector(`#${id}`) ?? document.createElement("div");
+  root.classList.add("ups-db");
+  root.id = "react-redis-browser-portal-root";
+  document.body.append(root);
+}
+var portalRoot = root;
+
 // src/components/ui/toast.tsx
 import * as React2 from "react";
 import { Cross2Icon } from "@radix-ui/react-icons";
@@ -2874,7 +2888,7 @@ ToastDescription.displayName = ToastPrimitives.Description.displayName;
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function Toaster() {
   const { toasts } = useToast();
-  return /* @__PURE__ */ jsxs(ToastProvider, { children: [
+  return /* @__PURE__ */ jsx3(Portal, { container: portalRoot, children: /* @__PURE__ */ jsxs(ToastProvider, { children: [
     toasts.map(({ id, title, description, action, ...props }) => /* @__PURE__ */ jsxs(Toast, { ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
         title && /* @__PURE__ */ jsx3(ToastTitle, { children: title }),
@@ -2884,7 +2898,7 @@ function Toaster() {
       /* @__PURE__ */ jsx3(ToastClose, {})
     ] }, id)),
     /* @__PURE__ */ jsx3(ToastViewport, {})
-  ] });
+  ] }) });
 }
 
 // src/components/databrowser/hooks/use-keys.tsx
@@ -3174,6 +3188,7 @@ var useAddKey = () => {
   const { redis } = useDatabrowser();
   const mutation = useMutation({
     mutationFn: async ({ key, type }) => {
+      if (await redis.exists(key)) throw new Error(`Key "${key}" already exists`);
       switch (type) {
         case "set": {
           await redis.sadd(key, "value");
@@ -3576,19 +3591,6 @@ import { ContextMenuSeparator as ContextMenuSeparator2 } from "@radix-ui/react-c
 import * as React4 from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
-
-// src/lib/portal-root.ts
-var root;
-if (typeof document !== "undefined") {
-  const id = "react-redis-browser-portal-root";
-  root = document.querySelector(`#${id}`) ?? document.createElement("div");
-  root.classList.add("ups-db");
-  root.id = "react-redis-browser-portal-root";
-  document.body.append(root);
-}
-var portalRoot = root;
-
-// src/components/ui/context-menu.tsx
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
@@ -4708,7 +4710,8 @@ var CustomEditor = ({
   value,
   onChange,
   height,
-  showCopyButton
+  showCopyButton,
+  readOnly
 }) => {
   const monaco = useMonaco();
   const editorRef = useRef3();
@@ -4739,6 +4742,7 @@ var CustomEditor = ({
             },
             defaultLanguage: language,
             options: {
+              readOnly,
               wordWrap: "on",
               overviewRulerBorder: false,
               overviewRulerLanes: 0,
@@ -4784,7 +4788,8 @@ var useField = ({
   name,
   form,
   height,
-  showCopyButton
+  showCopyButton,
+  readOnly
 }) => {
   const { field, fieldState } = useController({
     name,
@@ -4822,7 +4827,8 @@ var useField = ({
         value: field.value,
         onChange: field.onChange,
         height,
-        showCopyButton
+        showCopyButton,
+        readOnly
       }
     ) })
   };
@@ -4873,8 +4879,24 @@ var ListEditForm = ({
   });
   return /* @__PURE__ */ jsx29(FormProvider, { ...form, children: /* @__PURE__ */ jsxs19("form", { onSubmit, className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsxs19("div", { className: "flex grow flex-col gap-2", children: [
-      type !== "list" && /* @__PURE__ */ jsx29(FormItem, { name: "key", height: type === "set" ? 250 : 100, label: keyLabel }),
-      type === "zset" ? /* @__PURE__ */ jsx29(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx29(FormItem, { name: "value", height: type === "list" ? 250 : 100, label: valueLabel })
+      type !== "list" && /* @__PURE__ */ jsx29(
+        FormItem,
+        {
+          readOnly: type === "stream",
+          name: "key",
+          height: type === "set" ? 250 : 100,
+          label: keyLabel
+        }
+      ),
+      type === "zset" ? /* @__PURE__ */ jsx29(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx29(
+        FormItem,
+        {
+          readOnly: type === "stream",
+          name: "value",
+          height: type === "list" ? 250 : 100,
+          label: valueLabel
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs19("div", { className: "flex justify-end gap-2", children: [
       /* @__PURE__ */ jsx29(
@@ -4927,14 +4949,16 @@ var NumberFormItem = ({ name, label }) => {
 var FormItem = ({
   name,
   label,
-  height
+  height,
+  readOnly
 }) => {
   const form = useFormContext();
   const { editor, selector } = useField({
     name,
     form,
     height,
-    showCopyButton: true
+    showCopyButton: true,
+    readOnly
   });
   return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 text-xs", children: [
@@ -5225,23 +5249,16 @@ function AddKeyModal() {
     }
   });
   const onSubmit = handleSubmit(async ({ key, type }) => {
-    try {
-      await addKey({ key, type });
-      setSelectedKey(key);
-      setOpen(false);
-      setTimeout(() => {
-        window.document.querySelector(`[data-key="${key}"]`)?.scrollIntoView({
-          behavior: "smooth",
-          block: "start",
-          inline: "nearest"
-        });
-      }, 100);
-    } catch (error) {
-      toast({
-        description: error instanceof Error ? error.message : "An error occurred",
-        variant: "destructive"
+    await addKey({ key, type });
+    setSelectedKey(key);
+    setOpen(false);
+    setTimeout(() => {
+      window.document.querySelector(`[data-key="${key}"]`)?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest"
       });
-    }
+    }, 100);
   });
   return /* @__PURE__ */ jsxs23(
     Dialog,
@@ -5506,6 +5523,9 @@ function Sidebar() {
 import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var RedisBrowser = ({ token, url }) => {
   const credentials = useMemo6(() => ({ token, url }), [token, url]);
+  useEffect9(() => {
+    queryClient.resetQueries();
+  }, [credentials.url]);
   return /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(TooltipProvider, { children: /* @__PURE__ */ jsx42(DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx42(KeysProvider, { children: /* @__PURE__ */ jsxs31("div", { className: "ups-db", style: { height: "100%" }, children: [
     /* @__PURE__ */ jsxs31(
       PanelGroup,

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.1.2-canary-7", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ./src" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.34.3", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }
+{ "name": "@upstash/react-redis-browser", "version": "v0.1.2", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ./src" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-portal": "^1.1.2", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.34.3", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }