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

package/README.md

@@ -1,74 +1,37 @@
 # 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:
 
 ```tsx
 import { RedisBrowser } from "@upstash/react-redis-browser"
-
 import "@upstash/react-redis-browser/dist/index.css"
 
 export default function RedisBrowserDemo() {
-  const redisUrl = process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL
-  const redisToken = process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN
-
   return (
     <main style={mainStyle}>
-      <div style={divStyle}>
-        <RedisBrowser token={redisToken} url={redisUrl} />
-      </div>
+      <RedisBrowser 
+        url={UPSTASH_REDIS_REST_URL} 
+        token={UPSTASH_REDIS_REST_TOKEN} />
     </main>
   )
 }
 
 const mainStyle = {
-  height: "100vh",
   width: "100vw",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  flexDirection: "column",
-  background: "rgb(250,250,250)",
+  maxWidth: "900px",
+  height: "500px",
+  margin: "0 auto",
 }
-
-const divStyle = {
-  height: "100%",
-  width: "100%",
-  maxHeight: "45rem",
-  maxWidth: "64rem",
-  borderRadius: "0.5rem",
-  overflow: "hidden",
-}
-```

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;
@@ -449,10 +444,6 @@
   margin-left: -0.25rem;
   margin-right: -0.25rem;
 }
-.ups-db .mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
 .ups-db .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -543,9 +534,6 @@
 .ups-db .h-\[100px\] {
   height: 100px;
 }
-.ups-db .h-\[600px\] {
-  height: 600px;
-}
 .ups-db .h-\[var\(--radix-select-trigger-height\)\] {
   height: var(--radix-select-trigger-height);
 }
@@ -555,9 +543,6 @@
 .ups-db .h-px {
   height: 1px;
 }
-.ups-db .max-h-full {
-  max-height: 100%;
-}
 .ups-db .max-h-screen {
   max-height: 100vh;
 }
@@ -633,9 +618,6 @@
 .ups-db .max-w-lg {
   max-width: 32rem;
 }
-.ups-db .max-w-screen-lg {
-  max-width: 1024px;
-}
 .ups-db .flex-1 {
   flex: 1 1 0%;
 }
@@ -977,9 +959,6 @@
 .ups-db .p-1 {
   padding: 0.25rem;
 }
-.ups-db .p-10 {
-  padding: 2.5rem;
-}
 .ups-db .p-2 {
   padding: 0.5rem;
 }

package/dist/index.js

@@ -5058,7 +5058,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
@@ -5425,7 +5425,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, {}),
@@ -5445,7 +5445,7 @@ function Sidebar() {
 var RedisBrowser = ({ token, url }) => {
   const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, 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.jsxs.call(void 0, KeysProvider, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ups-db h-full", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ups-db", style: { height: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       _reactresizablepanels.PanelGroup,
       {
         autoSaveId: "persistence",
@@ -5453,7 +5453,7 @@ var RedisBrowser = ({ token, url }) => {
         className: "h-full w-full gap-0.5 text-sm antialiased",
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Sidebar, {}) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.PanelResizeHandle, { className: "h-full flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.PanelResizeHandle, { className: "h-fullm flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _iconsreact.IconDotsVertical,
             {
               size: 16,

package/dist/index.mjs

@@ -5058,7 +5058,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 +5425,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, {}),
@@ -5445,7 +5445,7 @@ import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var RedisBrowser = ({ token, url }) => {
   const credentials = useMemo6(() => ({ token, url }), [token, url]);
   return /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(TooltipProvider, { children: /* @__PURE__ */ jsx42(DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsxs31(KeysProvider, { children: [
-    /* @__PURE__ */ jsx42("div", { className: "ups-db h-full", children: /* @__PURE__ */ jsxs31(
+    /* @__PURE__ */ jsx42("div", { className: "ups-db", style: { height: "100%" }, children: /* @__PURE__ */ jsxs31(
       PanelGroup,
       {
         autoSaveId: "persistence",
@@ -5453,7 +5453,7 @@ var RedisBrowser = ({ token, url }) => {
         className: "h-full w-full gap-0.5 text-sm antialiased",
         children: [
           /* @__PURE__ */ jsx42(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx42(Sidebar, {}) }),
-          /* @__PURE__ */ jsx42(PanelResizeHandle, { className: "h-full flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx42(PanelResizeHandle, { className: "h-fullm flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ jsx42(
             IconDotsVertical2,
             {
               size: 16,

package/package.json

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