upstash
diff --git a/‎.github/workflows/playwright.yml‎
Lines changed: 1 addition & 1 deletion b/‎.github/workflows/playwright.yml‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎.github/workflows/tests.yaml‎
Lines changed: 1 addition & 1 deletion b/‎.github/workflows/tests.yaml‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎CLAUDE.md‎
Lines changed: 50 additions & 0 deletions b/‎CLAUDE.md‎
Lines changed: 50 additions & 0 deletions
diff --git a/‎bun.lockb‎
22 KB b/‎bun.lockb‎
22 KB
diff --git a/‎components.json‎
Lines changed: 1 addition & 1 deletion b/‎components.json‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎package.json‎
Lines changed: 23 additions & 15 deletions b/‎package.json‎
Lines changed: 23 additions & 15 deletions
diff --git a/‎playground.ts‎
Lines changed: 217 additions & 0 deletions b/‎playground.ts‎
Lines changed: 217 additions & 0 deletions
diff --git a/‎…c/components/databrowser/copy-button.tsx‎ ‎src/components/common/copy-button.tsx‎src/components/databrowser/copy-button.tsx renamed to src/components/common/copy-button.tsx b/‎…c/components/databrowser/copy-button.tsx‎ ‎src/components/common/copy-button.tsx‎src/components/databrowser/copy-button.tsx renamed to src/components/common/copy-button.tsx
@@ -1,4 +1,4 @@
-name: Playwright Tests
+name: E2E Test
 on:
   push:
     branches: [ main, master ]
 
@@ -1,4 +1,4 @@
-name: Tests
+name: Lint & Test
 on:
   push:
     branches:
 
@@ -0,0 +1,50 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+`@upstash/react-redis-browser` is a React component library that provides a UI for browsing and editing data in Upstash Redis instances. It exports `RedisBrowser` and `RedisBrowserStorage` as its public API. Supports string, list, hash, set, sorted set, JSON, stream, and search index data types.
+
+## Architecture
+
+### Provider Stack (nested in this order)
+
+`DarkModeProvider` → `RedisProvider` → `QueryClientProvider` → `DatabrowserProvider` → `TabIdProvider`
+
+- **RedisProvider** (`src/redis-context.tsx`): Supplies pipelined and non-pipelined Redis client instances
+- **DatabrowserProvider** (`src/store.tsx`): Zustand store for UI state (tabs, search, selections, filters)
+- **TabIdProvider** (`src/tab-provider.tsx`): Current tab context; hooks `useTabId()` and `useTab()`
+
+### State Management
+
+- **Zustand** with persistence middleware manages tabs, key search, type filters, selections, and search history
+- **React Query** handles server state (key lists, values, metadata)
+- **Persistence:** Optional `RedisBrowserStorage` interface for localStorage/custom storage. Schema is at version 7 with automated migrations from earlier versions.
+
+### Key Source Locations
+
+- `src/index.ts` — Public exports
+- `src/components/databrowser/index.tsx` — Root `RedisBrowser` component
+- `src/components/databrowser/components/sidebar/` — Key list, search, filters
+- `src/components/databrowser/components/search/` — Search index UI (create, query, schema editor)
+- `src/components/databrowser/components/display/` — Data rendering per type
+- `src/components/ui/` — shadcn/ui primitives (Radix-based)
+- `src/lib/clients.ts` — Redis client initialization and QueryClient setup
+- `src/playground/` — Local dev playground app
+
+### CSS Namespacing
+
+All generated CSS classes are prefixed with `.ups-db` via postcss-prefix-selector. Tailwind uses CSS variables for theming with class-based dark mode.
+
+## Code Conventions
+
+- **Semicolons:** Off (Prettier enforced)
+- **Quotes:** Double quotes
+- **Print width:** 100 characters
+- **Import order:** Enforced by `@ianvs/prettier-plugin-sort-imports` — React first, then third-party, then types/config/lib/hooks, then components, then relative imports
+- **Unused variables:** Prefix with `_` to suppress lint errors
+- **No `console.log`:** Only `console.warn` and `console.error` allowed
+- **No null:** Unicorn rule `no-null` is enabled
+- **Type imports:** Use `import type` consistently (`consistent-type-imports` rule)
+- **Pre-commit hooks:** Husky + lint-staged runs Prettier and ESLint --fix automatically
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "app/globals.css",
+    "css": "src/globals.css",
     "baseColor": "neutral",
     "cssVariables": false
   },
 
@@ -23,7 +23,10 @@
     "build": "tsup",
     "dev": "vite",
     "lint": "tsc && eslint",
-    "fmt": "prettier --write ./src"
+    "fmt": "prettier --write ./src",
+    "test": "bun test src",
+    "test:e2e": "playwright test",
+    "prepare": "husky"
   },
   "lint-staged": {
     "**/*.{js,ts,tsx}": [
@@ -36,24 +39,26 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
     "@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.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-portal": "^1.1.2",
-    "@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",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-portal": "^1.1.10",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tabler/icons-react": "^3.19.0",
     "@tanstack/react-query": "^5.32.0",
     "@types/bytes": "^3.1.4",
-    "@upstash/redis": "^1.35.8",
+    "@upstash/redis": "1.37.0-rc.9",
     "bytes": "^3.1.2",
     "cmdk": "^1.1.1",
     "react-hook-form": "^7.53.0",
@@ -62,6 +67,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",
+    "@types/bun": "^1.3.7",
     "@types/node": "^22.8.4",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -74,6 +80,8 @@
     "dotenv": "^16.5.0",
     "eslint": "9.10.0",
     "eslint-plugin-unicorn": "55.0.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
     "postcss": "^8.4.31",
     "postcss-prefix-selector": "^2.1.0",
     "prettier": "^3.0.3",
 
@@ -0,0 +1,217 @@
+/* eslint-disable no-console */
+import { Redis, s } from "@upstash/redis"
+
+const redis = Redis.fromEnv()
+
+// Random data pools
+const firstNames = [
+  "Yusuf",
+  "Fatima",
+  "Josh",
+  "Arda",
+  "Ali",
+  "Sertug",
+  "Emma",
+  "Liam",
+  "Olivia",
+  "Noah",
+  "Ava",
+  "Ethan",
+  "Sophia",
+  "Mason",
+  "Isabella",
+  "William",
+  "Mia",
+  "James",
+  "Charlotte",
+  "Benjamin",
+  "Amelia",
+  "Lucas",
+  "Harper",
+  "Henry",
+  "Evelyn",
+  "Alexander",
+  "Abigail",
+  "Michael",
+  "Emily",
+  "Daniel",
+  "Elizabeth",
+  "Matthew",
+  "Sofia",
+  "Jackson",
+  "Avery",
+  "Sebastian",
+  "Ella",
+  "David",
+  "Scarlett",
+  "Joseph",
+  "Grace",
+  "Samuel",
+  "Chloe",
+  "Owen",
+  "Victoria",
+  "John",
+  "Riley",
+  "Luke",
+  "Aria",
+  "Gabriel",
+]
+
+const lastNames = [
+  "Smith",
+  "Johnson",
+  "Williams",
+  "Brown",
+  "Jones",
+  "Garcia",
+  "Miller",
+  "Davis",
+  "Rodriguez",
+  "Martinez",
+  "Hernandez",
+  "Lopez",
+  "Gonzalez",
+  "Wilson",
+  "Anderson",
+  "Thomas",
+  "Taylor",
+  "Moore",
+  "Jackson",
+  "Martin",
+  "Lee",
+  "Perez",
+  "Thompson",
+  "White",
+  "Harris",
+  "Sanchez",
+  "Clark",
+  "Ramirez",
+  "Lewis",
+  "Robinson",
+]
+
+const emailDomains = [
+  "gmail.com",
+  "yahoo.com",
+  "outlook.com",
+  "hotmail.com",
+  "proton.me",
+  "icloud.com",
+  "mail.com",
+]
+
+const areaCodes = ["212", "310", "415", "305", "312", "206", "404", "617", "702", "503"]
+
+// Helper functions
+function randomElement<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)]
+}
+
+function randomInt(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+function randomPhone(): string {
+  return `${randomElement(areaCodes)}${randomInt(100, 999)}${randomInt(1000, 9999)}`
+}
+
+function generateUser(id: number) {
+  const firstName = randomElement(firstNames)
+  const lastName = randomElement(lastNames)
+  const name = `${firstName} ${lastName}`
+  const age = randomInt(5, 65)
+  const isStudent = age < 25 ? Math.random() > 0.3 : Math.random() > 0.8
+  const isEmployed = age >= 18 ? Math.random() > 0.3 : false
+  const gender = Math.random() > 0.5 ? "M" : "F"
+  const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}${id}@${randomElement(emailDomains)}`
+  const phone = randomPhone()
+
+  return {
+    name,
+    age,
+    isStudent,
+    isEmployed,
+    gender,
+    contact: {
+      email,
+      phone,
+    },
+  }
+}
+
+const schema = s.object({
+  name: s.string(),
+  age: s.number(),
+  isStudent: s.boolean(),
+  isEmployed: s.boolean(),
+  gender: s.string(),
+  contact: s.object({
+    email: s.string(),
+    phone: s.string(),
+  }),
+})
+
+const INDEX_COUNT = 10
+console.log(`Creating ${INDEX_COUNT} indexes...`)
+
+for (let i = 1; i <= INDEX_COUNT; i++) {
+  const indexName = `user-index-${i}`
+  const index = redis.search.index({
+    name: indexName,
+    schema: schema,
+  })
+
+  try {
+    if (await index.describe()) {
+      console.log(`Index ${indexName} exists, dropping`)
+      await index.drop()
+    }
+  } catch {
+    // Index doesn't exist, that's fine
+  }
+
+  await redis.search.createIndex({
+    dataType: "string",
+    prefix: "user:",
+    name: indexName,
+    schema: schema,
+  })
+
+  console.log(`Created index ${i}/${INDEX_COUNT}: ${indexName}`)
+}
+
+console.log("All indexes created")
+
+// Create 100 user entries
+const USER_COUNT = 100
+console.log(`\nCreating ${USER_COUNT} user entries...`)
+
+const userData: Record<string, string> = {}
+for (let i = 1; i <= USER_COUNT; i++) {
+  const user = generateUser(i)
+  const key = `user:${user.name.toLowerCase().replace(" ", "-")}-${i}`
+  userData[key] = JSON.stringify(user)
+}
+
+await redis.mset(userData)
+
+console.log(`Created ${USER_COUNT} user entries`)
+
+// Test query on first index
+const testIndex = redis.search.index({
+  name: "user-index-1",
+  schema: schema,
+})
+
+console.log("\nWaiting for indexing...")
+await new Promise((resolve) => setTimeout(resolve, 2000))
+
+const queryResult = await testIndex.query({
+  filter: {
+    isStudent: true,
+  },
+})
+
+console.log(`Test query result (students): found ${queryResult.length} results`)
+
+console.log("\nDone!")
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-name: Playwright Tests`
	`1`	`+name: E2E Test`
`2`	`2`	`on:`
`3`	`3`	`push:`
`4`	`4`	`branches: [ main, master ]`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-name: Tests`
	`1`	`+name: Lint & Test`
`2`	`2`	`on:`
`3`	`3`	`push:`
`4`	`4`	`branches:`