@upstash/react-redis-browser 0.1.11-canary-2 → 0.2.0

package/README.md

@@ -1,7 +1,7 @@
-# RedisBrowser for Upstash Redis
+# Redis Browser for Upstash Redis - [Preview](https://react-redis-browser.vercel.app/)
 `@upstash/react-redis-browser` is a React component that provides a UI for browsing and editing data in your Upstash Redis instances.
 
-<img src="public%2Fredis-browser.png" width="640px" />
+<img src="https://github.com/user-attachments/assets/1b714616-310b-4250-9f92-cc28ed9881cd" width="640px" />
 
 ### Install
 
@@ -19,19 +19,34 @@ Here's a basic example of how to use the component:
 import { RedisBrowser } from "@upstash/react-redis-browser"
 import "@upstash/react-redis-browser/dist/index.css"
 
-export default function RedisBrowserDemo() {
+export default function Page() {
   return (
-    <main style={mainStyle}>
-      <RedisBrowser 
-        url={UPSTASH_REDIS_REST_URL} 
-        token={UPSTASH_REDIS_REST_TOKEN} />
-    </main>
+    <RedisBrowser
+      url={UPSTASH_REDIS_REST_URL}
+      token={UPSTASH_REDIS_REST_TOKEN}
+    />
   )
 }
+```
+
+### Persistance
+
+The state of the databrowser can be persisted using the `storage` property.
+
+```tsx
+import { RedisBrowser } from "@upstash/react-redis-browser"
+import "@upstash/react-redis-browser/dist/index.css"
 
-const mainStyle = {
-  width: "100vw",
-  maxWidth: "900px",
-  height: "500px",
-  margin: "0 auto",
+export default function Page() {
+  return (
+    <RedisBrowser
+      url={UPSTASH_REDIS_REST_URL}
+      token={UPSTASH_REDIS_REST_TOKEN}
+      storage={{
+        get: () => localStorage.getItem("databrowser") || "",
+        set: (value) => localStorage.setItem("databrowser", value),
+      }}
+    />
+  )
 }
+```

package/dist/index.css

@@ -447,6 +447,10 @@
   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;
@@ -457,6 +461,9 @@
 .ups-db .mb-3 {
   margin-bottom: 0.75rem;
 }
+.ups-db .mb-4 {
+  margin-bottom: 1rem;
+}
 .ups-db .ml-1 {
   margin-left: 0.25rem;
 }
@@ -484,6 +491,9 @@
 .ups-db .mt-6 {
   margin-top: 1.5rem;
 }
+.ups-db .mt-\[150px\] {
+  margin-top: 150px;
+}
 .ups-db .mt-\[1px\] {
   margin-top: 1px;
 }
@@ -573,18 +583,12 @@
 .ups-db .min-h-10 {
   min-height: 2.5rem;
 }
-.ups-db .min-h-\[60px\] {
-  min-height: 60px;
-}
 .ups-db .\!w-auto {
   width: auto !important;
 }
 .ups-db .w-0 {
   width: 0px;
 }
-.ups-db .w-1\.5 {
-  width: 0.375rem;
-}
 .ups-db .w-10 {
   width: 2.5rem;
 }
@@ -594,6 +598,9 @@
 .ups-db .w-24 {
   width: 6rem;
 }
+.ups-db .w-3 {
+  width: 0.75rem;
+}
 .ups-db .w-3\.5 {
   width: 0.875rem;
 }
@@ -666,9 +673,6 @@
 .ups-db .grow {
   flex-grow: 1;
 }
-.ups-db .caption-bottom {
-  caption-side: bottom;
-}
 .ups-db .origin-\[--radix-dropdown-menu-content-transform-origin\] {
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
 }
@@ -790,9 +794,6 @@
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
-.ups-db .overflow-auto {
-  overflow: auto;
-}
 .ups-db .overflow-hidden {
   overflow: hidden;
 }
@@ -898,6 +899,10 @@
   --tw-border-opacity: 1;
   border-color: rgb(192 132 252 / var(--tw-border-opacity));
 }
+.ups-db .border-red-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(248 113 113 / var(--tw-border-opacity));
+}
 .ups-db .border-red-500 {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
@@ -995,6 +1000,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(233 213 255 / var(--tw-bg-opacity));
 }
+.ups-db .bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
 .ups-db .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -1082,6 +1091,10 @@
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.ups-db .py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
 .ups-db .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -1129,9 +1142,6 @@
 .ups-db .text-right {
   text-align: right;
 }
-.ups-db .align-middle {
-  vertical-align: middle;
-}
 .ups-db .text-\[13px\] {
   font-size: 13px;
 }
@@ -1147,6 +1157,10 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+.ups-db .text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
 .ups-db .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1262,6 +1276,10 @@
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }
+.ups-db .text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
 .ups-db .text-sky-800 {
   --tw-text-opacity: 1;
   color: rgb(7 89 133 / var(--tw-text-opacity));
@@ -1485,9 +1503,6 @@
   --tw-bg-opacity: 1;
   background-color: rgb(244 244 245 / var(--tw-bg-opacity));
 }
-.ups-db .hover\:bg-zinc-100\/50:hover {
-  background-color: rgb(244 244 245 / 0.5);
-}
 .ups-db .hover\:bg-zinc-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 250 / var(--tw-bg-opacity));
@@ -1518,10 +1533,18 @@
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
+.ups-db .focus\:bg-red-500:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
 .ups-db .focus\:text-neutral-900:focus {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity));
 }
+.ups-db .focus\:text-white:focus {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .ups-db .focus\:opacity-100:focus {
   opacity: 1;
 }
@@ -1568,14 +1591,6 @@
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
-.ups-db .focus-visible\:ring-1:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
 .ups-db .focus-visible\:ring-zinc-950:focus-visible {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(9 9 11 / var(--tw-ring-opacity));
@@ -1595,9 +1610,9 @@
 .ups-db .group\/editor:hover .group-hover\/editor\:flex {
   display: flex;
 }
-.ups-db .group:hover .group-hover\:border-zinc-300 {
+.ups-db .group:hover .group-hover\:border-zinc-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(212 212 216 / var(--tw-border-opacity));
+  border-color: rgb(113 113 122 / var(--tw-border-opacity));
 }
 .ups-db .group:hover .group-hover\:opacity-100 {
   opacity: 1;
@@ -1635,6 +1650,12 @@
 .ups-db .group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
   --tw-ring-offset-color: #dc2626;
 }
+.ups-db .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
+  cursor: not-allowed;
+}
+.ups-db .peer:disabled ~ .peer-disabled\:opacity-70 {
+  opacity: 0.7;
+}
 .ups-db .data-\[disabled\]\:pointer-events-none[data-disabled] {
   pointer-events: none;
 }
@@ -1674,10 +1695,6 @@
   --tw-bg-opacity: 1;
   background-color: rgb(244 244 245 / var(--tw-bg-opacity));
 }
-.ups-db .data-\[state\=selected\]\:bg-zinc-100[data-state=selected] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(244 244 245 / var(--tw-bg-opacity));
-}
 .ups-db .data-\[state\=open\]\:text-neutral-900[data-state=open] {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity));
@@ -1877,9 +1894,6 @@
   --tw-bg-opacity: 1;
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
-.ups-db .dark\:hover\:bg-zinc-800\/50:hover:is(.dark *) {
-  background-color: rgb(39 39 42 / 0.5);
-}
 .ups-db .dark\:hover\:text-gray-100:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
@@ -1934,10 +1948,6 @@
   --tw-bg-opacity: 1;
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
-.ups-db .dark\:data-\[state\=selected\]\:bg-zinc-800[data-state=selected]:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(39 39 42 / var(--tw-bg-opacity));
-}
 .ups-db .dark\:data-\[state\=open\]\:text-neutral-50[data-state=open]:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(250 250 250 / var(--tw-text-opacity));
@@ -1989,13 +1999,6 @@
 .ups-db .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
   display: none;
 }
-.ups-db .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
-  padding-right: 0px;
-}
-.ups-db .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role=checkbox] {
-  --tw-translate-y: 2px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .ups-db .\[\&\>div\]\:\!block > div {
   display: block !important;
 }
@@ -2016,9 +2019,3 @@
 .ups-db .\[\&_svg\]\:shrink-0 svg {
   flex-shrink: 0;
 }
-.ups-db .\[\&_tr\:last-child\]\:border-0 tr:last-child {
-  border-width: 0px;
-}
-.ups-db .\[\&_tr\]\:border-b tr {
-  border-bottom-width: 1px;
-}

package/dist/index.d.mts

@@ -5,8 +5,27 @@ type RedisCredentials = {
     token?: string;
 };
 
-declare const RedisBrowser: ({ token, url, hideTabs, }: RedisCredentials & {
+/**
+ * Persistence storage interface for the Databrowser.
+ */
+type RedisBrowserStorage = {
+    set: (value: string) => void;
+    get: () => string | null;
+};
+declare const RedisBrowser: ({ token, url, hideTabs, storage, }: RedisCredentials & {
     hideTabs?: boolean;
+    /**
+     * Persistence storage for the Databrowser.
+     *
+     * @example
+     * ```tsx
+     * <RedisBrowser storage={{
+     *   set: (value: string) => localStorage.setItem("redis-browser-data", value),
+     *   get: () => localStorage.getItem("redis-browser-data") || "",
+     * }} />
+     * ```
+     */
+    storage?: RedisBrowserStorage;
 }) => react_jsx_runtime.JSX.Element;
 
-export { RedisBrowser };
+export { RedisBrowser, type RedisBrowserStorage };

package/dist/index.d.ts

@@ -5,8 +5,27 @@ type RedisCredentials = {
     token?: string;
 };
 
-declare const RedisBrowser: ({ token, url, hideTabs, }: RedisCredentials & {
+/**
+ * Persistence storage interface for the Databrowser.
+ */
+type RedisBrowserStorage = {
+    set: (value: string) => void;
+    get: () => string | null;
+};
+declare const RedisBrowser: ({ token, url, hideTabs, storage, }: RedisCredentials & {
     hideTabs?: boolean;
+    /**
+     * Persistence storage for the Databrowser.
+     *
+     * @example
+     * ```tsx
+     * <RedisBrowser storage={{
+     *   set: (value: string) => localStorage.setItem("redis-browser-data", value),
+     *   get: () => localStorage.getItem("redis-browser-data") || "",
+     * }} />
+     * ```
+     */
+    storage?: RedisBrowserStorage;
 }) => react_jsx_runtime.JSX.Element;
 
-export { RedisBrowser };
+export { RedisBrowser, type RedisBrowserStorage };