DX-1307: New databrowser design

.gitignore

@@ -19,6 +19,7 @@
 # misc
 .DS_Store
 *.pem
+.idea
 
 # debug
 npm-debug.log*

.husky/pre-commit

@@ -1,6 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-if [ -z "$DISABLE_HUSKY" ]; then
-    npx lint-staged
-fi
+pnpm lint-staged

examples/nextjs13/README.md

@@ -1,38 +1 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+This is an example nextjs project for `@upstash/react-databrowser` and `@upstash/react-cli`

examples/nextjs13/app/layout.tsx

@@ -1,10 +1,12 @@
-import "@upstash/react-cli/dist/index.css";
-import { Inter } from "next/font/google";
-import "./global.css";
+import "@upstash/react-cli/dist/index.css"
+
+import { Inter } from "next/font/google"
+
+import "./global.css"
 
 const inter = Inter({
   subsets: ["latin"],
-});
+})
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -51,5 +53,5 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </main>
       </body>
     </html>
-  );
+  )
 }

examples/nextjs13/package.json

@@ -10,21 +10,20 @@
     "test": "playwright test"
   },
   "dependencies": {
-    "@next/font": "13.3.0",
     "@types/node": "18.15.11",
-    "@types/react": "18.0.37",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "@upstash/react-cli": "workspace:*",
     "@upstash/react-databrowser": "workspace:*",
     "next": "13.3.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "typescript": "5.0.4"
   },
   "devDependencies": {
-    "playwright": "^1.38.1",
     "@playwright/test": "^1.38.1",
     "autoprefixer": "^10.4.14",
+    "playwright": "^1.38.1",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.1"
   }

package.json

@@ -4,29 +4,32 @@
   "private": true,
   "scripts": {
     "build": "turbo run build",
-    "dev": "turbo run dev --parallel",
-    "test": "turbo run test",
-    "fmt": "pnpm biome check . --apply-unsafe ",
-    "prepare": "husky install",
+    "lint": "turbo run lint --filter='./packages/*'",
+    "dev": "turbo run dev --filter='example/nextjs13'",
+    "fmt": "prettier --write ./packages",
+    "prepare": "husky",
     "bump-versions": "pnpm changeset version && pnpm install"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
-    "husky": "^8.0.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@typescript-eslint/eslint-plugin": "8.4.0",
+    "@typescript-eslint/parser": "8.4.0",
+    "eslint": "9.10.0",
+    "eslint-plugin-unicorn": "55.0.0",
+    "husky": "^9.1.6",
     "lint-staged": "^13.0.3",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.5",
-    "turbo": "^1.9.3",
-    "@biomejs/biome": "^1.2.2"
+    "turbo": "^2.2.3"
   },
   "lint-staged": {
     "**/*.{js,ts,tsx}": [
-      "pnpm fmt",
-      "prettier --write --ignore-unknown"
+      "prettier --write"
     ]
   },
   "engines": {
     "node": ">=18.0.0"
   },
   "packageManager": "pnpm@9.0.0"
-}
+}

packages/react-cli/README.md

@@ -8,10 +8,8 @@
 </div>
 <br/>
 
-
 ![Upstash Redis CLI](img/cli.png)
 
-
 ## 1. Install
 
 ```sh-session
@@ -24,22 +22,21 @@ $ npm install @upstash/react-cli
 // /app/components/cli.tsx
 
 "use client"
-import { RedisCli } from "@upstash/react-cli";
 
-import "@upstash/react-cli/dist/index.css";
+import { RedisCli } from "@upstash/react-cli"
 
+import "@upstash/react-cli/dist/index.css"
 
-<div
-        style={{
-          width: "100%",
-          height: "100%",
-          maxWidth: "48rem",
-          maxHeight: "32rem",
-        }}
-      >
+;<div
+  style={{
+    width: "100%",
+    height: "100%",
+    maxWidth: "48rem",
+    maxHeight: "32rem",
+  }}
+>
   <RedisCli url="UPSTASH_REDIS_REST_URL" token="UPSTASH_REDIS_REST_TOKEN" />;
 </div>
-
 ```
 
 ## With Tailwind CSS
@@ -56,5 +53,4 @@ module.exports = {
   ],
   //...
 }
-
-```
+```

packages/react-cli/package.json

@@ -41,4 +41,4 @@
   "dependencies": {
     "@radix-ui/react-scroll-area": "^1.0.3"
   }
-}
+}