@upstash/react-redis-browser 0.1.2-canary-2 → 0.1.2-canary-4

package/README.md

@@ -1,37 +1,17 @@
 # RedisBrowser for Upstash Redis
+`@upstash/react-redis-browser` is a React component that provides a UI for browsing and editing data in your Upstash Redis instances.
 
-`@upstash/react-redis-browser` is a React component that provides a UI for browsing and editing data in your Upstash Redis instances. It’s easy to set up and integrate into your React applications. This guide will help you get started with the installation and basic usage.
+<img src="public%2Fredis-browser.png" width="640px" />
 
-## Table of Contents
-
-- [Install](#1-install)
-- [Configuration](#2-configuration)
-- [Usage](#3-usage)
-
-## 1. Install
+### Install
 
 Install the databrowser component via npm:
 
-```sh-session
+```bash
 $ npm install @upstash/react-redis-browser
 ```
 
-## 2. Configuration
-
-### Environment Variables
-
-Configure your Upstash Redis REST URL and token as environment variables:
-
-```sh-session
-NEXT_PUBLIC_UPSTASH_REDIS_REST_URL=YOUR_REDIS_REST_URL
-NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN=YOUR_REDIS_REST_TOKEN
-```
-
-## 3. Usage
-
-### Creating the Data Browser Component
-
-In your React application, create a new component that will utilize @upstash/react-redis-browser.
+### Usage
 
 Here's a basic example of how to use the component:
 

package/dist/index.css

@@ -360,11 +360,6 @@
     max-width: 1536px;
   }
 }
-.ups-db input[type=number].plain-input::-webkit-inner-spin-button,
-.ups-db input[type=number].plain-input::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
 .ups-db .sr-only {
   position: absolute;
   width: 1px;

package/dist/index.js

@@ -4552,8 +4552,6 @@ var DisplayHeader = ({
   type,
   content
 }) => {
-  const size = _optionalChain([content, 'optionalAccess', _21 => _21.length]);
-  const length = _optionalChain([content, 'optionalAccess', _22 => _22.length]);
   const { setSelectedListItem } = useDatabrowserStore();
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", value: "", isNew: true });
@@ -4570,7 +4568,6 @@ var DisplayHeader = ({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: type, type: "badge" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SizeBadge, { dataKey }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LengthBadge, { dataKey, type, content }),
-      length && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label: "Length:", children: size }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TTLBadge, { dataKey })
     ] })
   ] });
@@ -4685,7 +4682,7 @@ var CustomEditor = ({
     if (!monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _23 => _23.editor, 'access', _24 => _24.setModelLanguage, 'call', _25 => _25(editorRef.current.getModel(), language)]);
+    _optionalChain([monaco, 'optionalAccess', _21 => _21.editor, 'access', _22 => _22.setModelLanguage, 'call', _23 => _23(editorRef.current.getModel(), language)]);
   }, [monaco, language]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
@@ -4935,7 +4932,7 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useDatabrowserStore();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _26 => _26.data, 'optionalAccess', _27 => _27.pages, 'access', _28 => _28.flatMap, 'call', _29 => _29((page) => page.keys)]), () => ( [])), [query.data]);
+  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _24 => _24.data, 'optionalAccess', _25 => _25.pages, 'access', _26 => _26.flatMap, 'call', _27 => _27((page) => page.keys)]), () => ( [])), [query.data]);
   const { mutate: editItem } = useEditListItem();
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     ItemContextMenu,
@@ -5058,7 +5055,7 @@ var EditorDisplayForm = ({
 var DataDisplay = () => {
   const { selectedKey } = useDatabrowserStore();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl border p-1", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl border p-1 bg-white", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
 // src/components/databrowser/components/add-key-modal.tsx
@@ -5185,7 +5182,7 @@ function AddKeyModal() {
       setSelectedKey(key);
       setOpen(false);
       setTimeout(() => {
-        _optionalChain([window, 'access', _30 => _30.document, 'access', _31 => _31.querySelector, 'call', _32 => _32(`[data-key="${key}"]`), 'optionalAccess', _33 => _33.scrollIntoView, 'call', _34 => _34({
+        _optionalChain([window, 'access', _28 => _28.document, 'access', _29 => _29.querySelector, 'call', _30 => _30(`[data-key="${key}"]`), 'optionalAccess', _31 => _31.scrollIntoView, 'call', _32 => _32({
           behavior: "smooth",
           block: "start",
           inline: "nearest"
@@ -5235,7 +5232,7 @@ function AddKeyModal() {
                 }
               )
             ] }),
-            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _35 => _35.errors, 'access', _36 => _36.key, 'optionalAccess', _37 => _37.message]) }),
+            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _33 => _33.errors, 'access', _34 => _34.key, 'optionalAccess', _35 => _35.message]) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-6 flex justify-end gap-2", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5316,7 +5313,7 @@ var SidebarContextMenu = ({
 
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _38 => _38.at, 'call', _39 => _39(i + 1), 'optionalAccess', _40 => _40[0]]), () => ( "")), data }, data[0])) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _36 => _36.at, 'call', _37 => _37(i + 1), 'optionalAccess', _38 => _38[0]]), () => ( "")), data }, data[0])) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5425,7 +5422,7 @@ function DataTypeSelector() {
 
 function Sidebar() {
   const { keys, query } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1 bg-white", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center justify-between pl-1", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayDbSize, {}),

package/dist/index.mjs

@@ -4552,8 +4552,6 @@ var DisplayHeader = ({
   type,
   content
 }) => {
-  const size = content?.length;
-  const length = content?.length;
   const { setSelectedListItem } = useDatabrowserStore();
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", value: "", isNew: true });
@@ -4570,7 +4568,6 @@ var DisplayHeader = ({
       /* @__PURE__ */ jsx23(TypeTag, { variant: type, type: "badge" }),
       /* @__PURE__ */ jsx23(SizeBadge, { dataKey }),
       /* @__PURE__ */ jsx23(LengthBadge, { dataKey, type, content }),
-      length && /* @__PURE__ */ jsx23(Badge, { label: "Length:", children: size }),
       /* @__PURE__ */ jsx23(TTLBadge, { dataKey })
     ] })
   ] });
@@ -5058,7 +5055,7 @@ import { Fragment as Fragment7, jsx as jsx32 } from "react/jsx-runtime";
 var DataDisplay = () => {
   const { selectedKey } = useDatabrowserStore();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ jsx32("div", { className: "h-full rounded-xl border p-1", children: !selectedKey ? /* @__PURE__ */ jsx32("div", {}) : !type ? /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx32(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx32(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx32(ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ jsx32("div", { className: "h-full rounded-xl border p-1 bg-white", children: !selectedKey ? /* @__PURE__ */ jsx32("div", {}) : !type ? /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx32(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx32(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx32(ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
 // src/components/databrowser/components/add-key-modal.tsx
@@ -5425,7 +5422,7 @@ function DataTypeSelector() {
 import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 function Sidebar() {
   const { keys, query } = useKeys();
-  return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1", children: [
+  return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1 bg-white", children: [
     /* @__PURE__ */ jsxs30("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
       /* @__PURE__ */ jsxs30("div", { className: "flex h-10 items-center justify-between pl-1", children: [
         /* @__PURE__ */ jsx41(DisplayDbSize, {}),

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.1.2-canary-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 ." }, "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.31.6", "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-canary-4", "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 ." }, "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.31.6", "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" } }