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

package/README.md

@@ -37,38 +37,21 @@ 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

@@ -449,10 +449,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 +539,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 +548,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 +623,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 +964,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

@@ -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

@@ -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-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" } }