Skip to content

Commit 9cd6cc7

Browse files
ytkimirtiytkimirti
committed
initial commit
0 parents  commit 9cd6cc7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+10770
-0
lines changed

‎.env.example

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
NEXT_PUBLIC_UPSTASH_REDIS_REST_URL=
2+
NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN=

‎.gitignore

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
.env
3+
4+
# dependencies
5+
**node_modules
6+
/.pnp
7+
.pnp.js
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
.idea
23+
24+
# debug
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*
28+
.pnpm-debug.log*
29+
30+
# local env files
31+
.env*.local
32+
33+
# vercel
34+
.vercel
35+
36+
# typescript
37+
*.tsbuildinfo
38+
next-env.d.ts
39+
40+
.turbo
41+
dist

‎.husky/pre-commit

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
pnpm lint-staged

‎README.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# @upstash/react-databrowser
2+
3+
<p align="center">
4+
<h2 align="center">Databrowser for Upstash Redis</h2>
5+
</p>
6+
7+
---
8+
9+
## Introduction
10+
11+
`@upstash/react-databrowser` is a React component that provides a UI for browsing 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.
12+
13+
## Table of Contents
14+
15+
- [Install](#1-install)
16+
- [Configuration](#2-configuration)
17+
- [Usage](#3-usage)
18+
19+
## 1. Install
20+
21+
Install the databrowser component via npm:
22+
23+
```sh-session
24+
$ npm install @upstash/react-databrowser
25+
```
26+
27+
## 2. Configuration
28+
29+
### Environment Variables
30+
31+
Configure your Upstash Redis REST URL and token as environment variables:
32+
33+
```sh-session
34+
NEXT_PUBLIC_UPSTASH_REDIS_REST_URL=YOUR_REDIS_REST_URL
35+
NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN=YOUR_REDIS_REST_TOKEN
36+
```
37+
38+
## 3. Usage
39+
40+
### Creating the Data Browser Component
41+
42+
In your React application, create a new component that will utilize @upstash/react-databrowser.
43+
44+
Here's a basic example of how to use the component:
45+
46+
```tsx
47+
// /app/components/DatabrowserDemo.tsx
48+
49+
import { Databrowser } from "@upstash/react-databrowser"
50+
51+
import "@upstash/react-databrowser/dist/index.css"
52+
53+
export default function DatabrowserDemo() {
54+
const redisUrl = process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL
55+
const redisToken = process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN
56+
57+
return (
58+
<main style={mainStyle}>
59+
<div style={divStyle}>
60+
<Databrowser token={redisToken} url={redisUrl} />
61+
</div>
62+
</main>
63+
)
64+
}
65+
66+
const mainStyle = {
67+
height: "100vh",
68+
width: "100vw",
69+
display: "flex",
70+
alignItems: "center",
71+
justifyContent: "center",
72+
flexDirection: "column",
73+
background: "rgb(250,250,250)",
74+
}
75+
76+
const divStyle = {
77+
height: "100%",
78+
width: "100%",
79+
maxHeight: "45rem",
80+
maxWidth: "64rem",
81+
borderRadius: "0.5rem",
82+
overflow: "hidden",
83+
}
84+
```

‎components.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": false
11+
},
12+
"aliases": {
13+
"components": "@/components",
14+
"utils": "@/lib/utils"
15+
}
16+
}

‎eslint.config.mjs

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import path from "node:path"
2+
import { fileURLToPath } from "node:url"
3+
import { FlatCompat } from "@eslint/eslintrc"
4+
import js from "@eslint/js"
5+
import typescriptEslint from "@typescript-eslint/eslint-plugin"
6+
import unicorn from "eslint-plugin-unicorn"
7+
8+
const __filename = fileURLToPath(import.meta.url)
9+
const __dirname = path.dirname(__filename)
10+
const compat = new FlatCompat({
11+
baseDirectory: __dirname,
12+
recommendedConfig: js.configs.recommended,
13+
allConfig: js.configs.all,
14+
})
15+
16+
export default [
17+
{
18+
ignores: ["**/*.config.*", "**/examples", "**/dist"],
19+
},
20+
...compat.extends(
21+
"eslint:recommended",
22+
"plugin:unicorn/recommended",
23+
"plugin:@typescript-eslint/recommended"
24+
),
25+
{
26+
plugins: {
27+
"@typescript-eslint": typescriptEslint,
28+
unicorn,
29+
},
30+
31+
languageOptions: {
32+
globals: {},
33+
ecmaVersion: 5,
34+
sourceType: "script",
35+
36+
parserOptions: {
37+
project: "./tsconfig.json",
38+
},
39+
},
40+
41+
rules: {
42+
"no-console": [
43+
"error",
44+
{
45+
allow: ["warn", "error"],
46+
},
47+
],
48+
49+
"@typescript-eslint/no-magic-numbers": "off",
50+
"@typescript-eslint/unbound-method": "off",
51+
"@typescript-eslint/prefer-as-const": "error",
52+
"@typescript-eslint/consistent-type-imports": "error",
53+
"@typescript-eslint/no-explicit-any": "off",
54+
"@typescript-eslint/restrict-template-expressions": "off",
55+
56+
"@typescript-eslint/no-unused-vars": [
57+
"error",
58+
{
59+
varsIgnorePattern: "^_",
60+
argsIgnorePattern: "^_",
61+
},
62+
],
63+
64+
"@typescript-eslint/prefer-ts-expect-error": "off",
65+
66+
"@typescript-eslint/no-misused-promises": [
67+
"error",
68+
{
69+
checksVoidReturn: false,
70+
},
71+
],
72+
73+
"unicorn/prevent-abbreviations": "off",
74+
75+
"no-implicit-coercion": [
76+
"error",
77+
{
78+
boolean: true,
79+
},
80+
],
81+
82+
"no-extra-boolean-cast": [
83+
"error",
84+
{
85+
enforceForLogicalOperands: true,
86+
},
87+
],
88+
89+
"no-unneeded-ternary": [
90+
"error",
91+
{
92+
defaultAssignment: true,
93+
},
94+
],
95+
96+
"unicorn/no-array-reduce": ["off"],
97+
"unicorn/no-nested-ternary": "off",
98+
"unicorn/no-null": "off",
99+
"unicorn/filename-case": "off",
100+
},
101+
},
102+
]

‎index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
6+
<title>Databrowser Playground</title>
7+
</head>
8+
<body>
9+
<div id="root" style="height: 100vh"></div>
10+
<script src="/src/playground.tsx" type="module"></script>
11+
</body>
12+
</html>

‎package.json

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
{
2+
"name": "@upstash/react-databrowser",
3+
"version": "0.3.20",
4+
"main": "./dist/index.js",
5+
"types": "./dist/index.d.ts",
6+
"license": "MIT",
7+
"private": false,
8+
"publishConfig": {
9+
"access": "public"
10+
},
11+
"bugs": {
12+
"url": "https://github.com/upstash/react-ui/issues"
13+
},
14+
"homepage": "https://github.com/upstash/react-ui#readme",
15+
"files": [
16+
"./dist/**"
17+
],
18+
"author": "Oguzhan Olguncu <oguzhan@upstash.com>",
19+
"scripts": {
20+
"build": "tsup",
21+
"dev": "vite",
22+
"lint": "tsc && eslint",
23+
"fmt": "prettier --write ."
24+
},
25+
"lint-staged": {
26+
"**/*.{js,ts,tsx}": [
27+
"prettier --write",
28+
"eslint --fix"
29+
]
30+
},
31+
"dependencies": {
32+
"@ianvs/prettier-plugin-sort-imports": "^4.4.0",
33+
"@monaco-editor/react": "^4.6.0",
34+
"@radix-ui/react-alert-dialog": "^1.0.5",
35+
"@radix-ui/react-context-menu": "^2.2.2",
36+
"@radix-ui/react-dialog": "^1.0.5",
37+
"@radix-ui/react-dropdown-menu": "^2.1.2",
38+
"@radix-ui/react-icons": "1.3.0",
39+
"@radix-ui/react-popover": "^1.0.7",
40+
"@radix-ui/react-scroll-area": "^1.0.3",
41+
"@radix-ui/react-select": "^2.0.0",
42+
"@radix-ui/react-slot": "^1.0.2",
43+
"@radix-ui/react-toast": "^1.1.5",
44+
"@radix-ui/react-tooltip": "^1.0.7",
45+
"@tabler/icons-react": "^3.19.0",
46+
"@tanstack/react-query": "^5.32.0",
47+
"@types/bytes": "^3.1.4",
48+
"@upstash/redis": "^1.31.6",
49+
"bytes": "^3.1.2",
50+
"react-hook-form": "^7.53.0",
51+
"react-resizable-panels": "^2.1.4",
52+
"zustand": "5.0.0"
53+
},
54+
"devDependencies": {
55+
"@types/node": "^22.8.4",
56+
"@types/react": "^18.3.12",
57+
"@types/react-dom": "^18.3.1",
58+
"@typescript-eslint/eslint-plugin": "8.4.0",
59+
"@typescript-eslint/parser": "8.4.0",
60+
"@vitejs/plugin-react": "^4.1.0",
61+
"autoprefixer": "^10.4.14",
62+
"class-variance-authority": "^0.7.0",
63+
"clsx": "^2.0.0",
64+
"eslint": "9.10.0",
65+
"eslint-plugin-unicorn": "55.0.0",
66+
"postcss": "^8.4.31",
67+
"prettier": "^3.0.3",
68+
"prettier-plugin-tailwindcss": "^0.5.5",
69+
"react": "^18.3.1",
70+
"react-dom": "^18.3.1",
71+
"tailwind-merge": "^2.5.4",
72+
"tailwindcss": "^3.4.14",
73+
"tailwindcss-animate": "^1.0.7",
74+
"tsup": "^8.3.5",
75+
"typescript": "^5.0.4",
76+
"vite": "^5.4.10",
77+
"vite-tsconfig-paths": "^5.0.1"
78+
},
79+
"peerDependencies": {
80+
"react": "^18.2.0 || ^19",
81+
"react-dom": "^18.2.0 || ^19"
82+
}
83+
}

0 commit comments

Comments
 (0)