@upstash/react-redis-browser 0.1.2-canary-2 → 0.1.2-canary-3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -25
- package/dist/index.css +0 -5
- package/dist/index.js +2 -2
- package/dist/index.mjs +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,37 +1,17 @@
|
|
|
1
1
|
# RedisBrowser for Upstash Redis
|
|
2
|
+
`@upstash/react-redis-browser` is a React component that provides a UI for browsing and editing data in your Upstash Redis instances.
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
<img src="public%2Fredis-browser.png" width="640px" />
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- [Install](#1-install)
|
|
8
|
-
- [Configuration](#2-configuration)
|
|
9
|
-
- [Usage](#3-usage)
|
|
10
|
-
|
|
11
|
-
## 1. Install
|
|
6
|
+
### Install
|
|
12
7
|
|
|
13
8
|
Install the databrowser component via npm:
|
|
14
9
|
|
|
15
|
-
```
|
|
10
|
+
```bash
|
|
16
11
|
$ npm install @upstash/react-redis-browser
|
|
17
12
|
```
|
|
18
13
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
### Environment Variables
|
|
22
|
-
|
|
23
|
-
Configure your Upstash Redis REST URL and token as environment variables:
|
|
24
|
-
|
|
25
|
-
```sh-session
|
|
26
|
-
NEXT_PUBLIC_UPSTASH_REDIS_REST_URL=YOUR_REDIS_REST_URL
|
|
27
|
-
NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN=YOUR_REDIS_REST_TOKEN
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
## 3. Usage
|
|
31
|
-
|
|
32
|
-
### Creating the Data Browser Component
|
|
33
|
-
|
|
34
|
-
In your React application, create a new component that will utilize @upstash/react-redis-browser.
|
|
14
|
+
### Usage
|
|
35
15
|
|
|
36
16
|
Here's a basic example of how to use the component:
|
|
37
17
|
|
package/dist/index.css
CHANGED
|
@@ -360,11 +360,6 @@
|
|
|
360
360
|
max-width: 1536px;
|
|
361
361
|
}
|
|
362
362
|
}
|
|
363
|
-
.ups-db input[type=number].plain-input::-webkit-inner-spin-button,
|
|
364
|
-
.ups-db input[type=number].plain-input::-webkit-outer-spin-button {
|
|
365
|
-
-webkit-appearance: none;
|
|
366
|
-
margin: 0;
|
|
367
|
-
}
|
|
368
363
|
.ups-db .sr-only {
|
|
369
364
|
position: absolute;
|
|
370
365
|
width: 1px;
|
package/dist/index.js
CHANGED
|
@@ -5058,7 +5058,7 @@ var EditorDisplayForm = ({
|
|
|
5058
5058
|
var DataDisplay = () => {
|
|
5059
5059
|
const { selectedKey } = useDatabrowserStore();
|
|
5060
5060
|
const type = useKeyType(selectedKey);
|
|
5061
|
-
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 }) }) });
|
|
5061
|
+
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 }) }) });
|
|
5062
5062
|
};
|
|
5063
5063
|
|
|
5064
5064
|
// src/components/databrowser/components/add-key-modal.tsx
|
|
@@ -5425,7 +5425,7 @@ function DataTypeSelector() {
|
|
|
5425
5425
|
|
|
5426
5426
|
function Sidebar() {
|
|
5427
5427
|
const { keys, query } = useKeys();
|
|
5428
|
-
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1", children: [
|
|
5428
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1 bg-white", children: [
|
|
5429
5429
|
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
|
|
5430
5430
|
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center justify-between pl-1", children: [
|
|
5431
5431
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayDbSize, {}),
|
package/dist/index.mjs
CHANGED
|
@@ -5058,7 +5058,7 @@ import { Fragment as Fragment7, jsx as jsx32 } from "react/jsx-runtime";
|
|
|
5058
5058
|
var DataDisplay = () => {
|
|
5059
5059
|
const { selectedKey } = useDatabrowserStore();
|
|
5060
5060
|
const type = useKeyType(selectedKey);
|
|
5061
|
-
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 }) }) });
|
|
5061
|
+
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 }) }) });
|
|
5062
5062
|
};
|
|
5063
5063
|
|
|
5064
5064
|
// src/components/databrowser/components/add-key-modal.tsx
|
|
@@ -5425,7 +5425,7 @@ function DataTypeSelector() {
|
|
|
5425
5425
|
import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
5426
5426
|
function Sidebar() {
|
|
5427
5427
|
const { keys, query } = useKeys();
|
|
5428
|
-
return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1", children: [
|
|
5428
|
+
return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1 bg-white", children: [
|
|
5429
5429
|
/* @__PURE__ */ jsxs30("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
|
|
5430
5430
|
/* @__PURE__ */ jsxs30("div", { className: "flex h-10 items-center justify-between pl-1", children: [
|
|
5431
5431
|
/* @__PURE__ */ jsx41(DisplayDbSize, {}),
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{ "name": "@upstash/react-redis-browser", "version": "v0.1.2-canary-
|
|
1
|
+
{ "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" } }
|