@upstash/react-redis-browser 0.2.7-canary-3 → 0.2.7

package/dist/index.css

@@ -1403,6 +1403,10 @@
 .ups-db .bg-black\/50 {
   background-color: rgb(var(--color-black) / 0.5);
 }
+.ups-db .bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-blue-100) / var(--tw-bg-opacity));
+}
 .ups-db .bg-emerald-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-emerald-500) / var(--tw-bg-opacity));
@@ -1986,6 +1990,10 @@
 .ups-db .hover\:bg-black\/10:hover {
   background-color: rgb(var(--color-black) / 0.1);
 }
+.ups-db .hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-blue-600) / var(--tw-bg-opacity));
+}
 .ups-db .hover\:bg-emerald-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-emerald-600) / var(--tw-bg-opacity));
@@ -2011,6 +2019,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-zinc-50) / var(--tw-bg-opacity));
 }
+.ups-db .hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-white) / var(--tw-text-opacity));
+}
 .ups-db .hover\:text-zinc-500:hover {
   --tw-text-opacity: 1;
   color: rgb(var(--color-zinc-500) / var(--tw-text-opacity));

package/dist/index.d.mts

@@ -14,8 +14,14 @@ type RedisBrowserStorage = {
     set: (value: string) => void;
     get: () => string | null;
 };
-declare const RedisBrowser: ({ token, url, hideTabs, storage, darkMode, }: RedisCredentials & {
+declare const RedisBrowser: ({ token, url, hideTabs, storage, onFullScreenClick, theme, }: RedisCredentials & {
     hideTabs?: boolean;
+    /**
+     * If defined, the databrowser will have a full screen button in the tab bar.
+     * Clicking on the button will call this function.
+     * @returns
+     */
+    onFullScreenClick?: () => void;
     /**
      * Persistence storage for the Databrowser.
      *
@@ -29,19 +35,19 @@ declare const RedisBrowser: ({ token, url, hideTabs, storage, darkMode, }: Redis
      */
     storage?: RedisBrowserStorage;
     /**
-     * Dark mode configuration.
+     * Theme configuration (light or dark).
      *
      * @default "light"
      * @example
      * ```tsx
      * // Light mode (default)
-     * <RedisBrowser darkMode="light" />
+     * <RedisBrowser theme="light" />
      *
      * // Dark mode
-     * <RedisBrowser darkMode="dark" />
+     * <RedisBrowser theme="dark" />
      * ```
      */
-    darkMode?: DarkModeOption;
+    theme?: DarkModeOption;
 }) => react_jsx_runtime.JSX.Element;
 
 export { type DarkModeOption, RedisBrowser, type RedisBrowserStorage };

package/dist/index.d.ts

@@ -14,8 +14,14 @@ type RedisBrowserStorage = {
     set: (value: string) => void;
     get: () => string | null;
 };
-declare const RedisBrowser: ({ token, url, hideTabs, storage, darkMode, }: RedisCredentials & {
+declare const RedisBrowser: ({ token, url, hideTabs, storage, onFullScreenClick, theme, }: RedisCredentials & {
     hideTabs?: boolean;
+    /**
+     * If defined, the databrowser will have a full screen button in the tab bar.
+     * Clicking on the button will call this function.
+     * @returns
+     */
+    onFullScreenClick?: () => void;
     /**
      * Persistence storage for the Databrowser.
      *
@@ -29,19 +35,19 @@ declare const RedisBrowser: ({ token, url, hideTabs, storage, darkMode, }: Redis
      */
     storage?: RedisBrowserStorage;
     /**
-     * Dark mode configuration.
+     * Theme configuration (light or dark).
      *
      * @default "light"
      * @example
      * ```tsx
      * // Light mode (default)
-     * <RedisBrowser darkMode="light" />
+     * <RedisBrowser theme="light" />
      *
      * // Dark mode
-     * <RedisBrowser darkMode="dark" />
+     * <RedisBrowser theme="dark" />
      * ```
      */
-    darkMode?: DarkModeOption;
+    theme?: DarkModeOption;
 }) => react_jsx_runtime.JSX.Element;
 
 export { type DarkModeOption, RedisBrowser, type RedisBrowserStorage };

package/dist/index.js

@@ -7,16 +7,16 @@ var _jsxruntime = require('react/jsx-runtime');
 var DarkModeContext = _react.createContext.call(void 0, void 0);
 var DarkModeProvider = ({
   children,
-  darkMode
+  theme
 }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeContext.Provider, { value: { darkMode }, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeContext.Provider, { value: theme, children });
 };
-var useDarkMode = () => {
+var useTheme = () => {
   const context = _react.useContext.call(void 0, DarkModeContext);
   if (!context) {
     throw new Error("useDarkMode must be used within a DarkModeProvider");
   }
-  return context.darkMode;
+  return context;
 };
 
 // src/redis-context.tsx
@@ -5128,7 +5128,7 @@ var CustomEditor = ({
   const { active } = useTab();
   const monaco = _react2.useMonaco.call(void 0, );
   const editorRef = _react.useRef.call(void 0, );
-  const theme = useDarkMode();
+  const theme = useTheme();
   _react.useEffect.call(void 0, () => {
     if (!active || !monaco || !editorRef.current) {
       return;
@@ -6472,7 +6472,7 @@ var SortableTab = ({ id }) => {
     }
   );
 };
-var DatabrowserTabs = () => {
+var DatabrowserTabs = ({ onFullScreenClick }) => {
   const { tabs, reorderTabs, selectedTab, selectTab } = useDatabrowserStore();
   const sortedTabs = _react.useMemo.call(void 0, () => {
     return [...tabs].sort(([, a], [, b]) => {
@@ -6595,7 +6595,18 @@ var DatabrowserTabs = () => {
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1", children: [
         isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}),
-        tabs.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsListButton, { tabs, onSelectTab: selectTab })
+        tabs.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsListButton, { tabs, onSelectTab: selectTab }),
+        onFullScreenClick && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Button,
+          {
+            "aria-label": "Toggle fullscreen",
+            variant: "secondary",
+            size: "icon-sm",
+            onClick: onFullScreenClick,
+            className: "flex-shrink-0 bg-blue-100 hover:bg-blue-600 hover:text-white",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconMaximize, { size: 16 })
+          }
+        )
       ] })
     ] })
   ] });
@@ -6687,20 +6698,29 @@ var RedisBrowser = ({
   url,
   hideTabs,
   storage,
-  darkMode = "light"
+  onFullScreenClick,
+  theme = "light"
 }) => {
   const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
   const rootRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeProvider, { darkMode, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisBrowserRoot, { hideTabs, rootRef }) }) }) }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeProvider, { theme, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    RedisBrowserRoot,
+    {
+      hideTabs,
+      rootRef,
+      onFullScreenClick
+    }
+  ) }) }) }) }) });
 };
 var RedisBrowserRoot = ({
   hideTabs,
-  rootRef
+  rootRef,
+  onFullScreenClick
 }) => {
-  const theme = useDarkMode();
+  const theme = useTheme();
   _react.useEffect.call(void 0, () => {
     portalWrapper.classList.add("text-zinc-700");
     portalWrapper.classList.toggle("dark", theme === "dark");
@@ -6714,7 +6734,7 @@ var RedisBrowserRoot = ({
         style: { height: "100%" },
         ref: rootRef,
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col text-zinc-700", children: [
-          !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, {}),
+          !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, { onFullScreenClick }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, {})
         ] })
       }

package/dist/index.mjs

@@ -7,16 +7,16 @@ import { jsx } from "react/jsx-runtime";
 var DarkModeContext = createContext(void 0);
 var DarkModeProvider = ({
   children,
-  darkMode
+  theme
 }) => {
-  return /* @__PURE__ */ jsx(DarkModeContext.Provider, { value: { darkMode }, children });
+  return /* @__PURE__ */ jsx(DarkModeContext.Provider, { value: theme, children });
 };
-var useDarkMode = () => {
+var useTheme = () => {
   const context = useContext(DarkModeContext);
   if (!context) {
     throw new Error("useDarkMode must be used within a DarkModeProvider");
   }
-  return context.darkMode;
+  return context;
 };
 
 // src/redis-context.tsx
@@ -5128,7 +5128,7 @@ var CustomEditor = ({
   const { active } = useTab();
   const monaco = useMonaco();
   const editorRef = useRef2();
-  const theme = useDarkMode();
+  const theme = useTheme();
   useEffect7(() => {
     if (!active || !monaco || !editorRef.current) {
       return;
@@ -6165,7 +6165,7 @@ import {
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { IconChevronDown as IconChevronDown2, IconPlus as IconPlus2 } from "@tabler/icons-react";
+import { IconChevronDown as IconChevronDown2, IconMaximize, IconPlus as IconPlus2 } from "@tabler/icons-react";
 
 // src/components/ui/command.tsx
 import * as React13 from "react";
@@ -6472,7 +6472,7 @@ var SortableTab = ({ id }) => {
     }
   );
 };
-var DatabrowserTabs = () => {
+var DatabrowserTabs = ({ onFullScreenClick }) => {
   const { tabs, reorderTabs, selectedTab, selectTab } = useDatabrowserStore();
   const sortedTabs = useMemo8(() => {
     return [...tabs].sort(([, a], [, b]) => {
@@ -6595,7 +6595,18 @@ var DatabrowserTabs = () => {
       ] }),
       /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 pl-1", children: [
         isOverflow && /* @__PURE__ */ jsx52(AddTabButton, {}),
-        tabs.length > 1 && /* @__PURE__ */ jsx52(TabsListButton, { tabs, onSelectTab: selectTab })
+        tabs.length > 1 && /* @__PURE__ */ jsx52(TabsListButton, { tabs, onSelectTab: selectTab }),
+        onFullScreenClick && /* @__PURE__ */ jsx52(
+          Button,
+          {
+            "aria-label": "Toggle fullscreen",
+            variant: "secondary",
+            size: "icon-sm",
+            onClick: onFullScreenClick,
+            className: "flex-shrink-0 bg-blue-100 hover:bg-blue-600 hover:text-white",
+            children: /* @__PURE__ */ jsx52(IconMaximize, { size: 16 })
+          }
+        )
       ] })
     ] })
   ] });
@@ -6687,20 +6698,29 @@ var RedisBrowser = ({
   url,
   hideTabs,
   storage,
-  darkMode = "light"
+  onFullScreenClick,
+  theme = "light"
 }) => {
   const credentials = useMemo9(() => ({ token, url }), [token, url]);
   const rootRef = useRef6(null);
   useEffect14(() => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ jsx53(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx53(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx53(DarkModeProvider, { darkMode, children: /* @__PURE__ */ jsx53(DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ jsx53(TooltipProvider, { children: /* @__PURE__ */ jsx53(RedisBrowserRoot, { hideTabs, rootRef }) }) }) }) }) });
+  return /* @__PURE__ */ jsx53(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx53(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx53(DarkModeProvider, { theme, children: /* @__PURE__ */ jsx53(DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ jsx53(TooltipProvider, { children: /* @__PURE__ */ jsx53(
+    RedisBrowserRoot,
+    {
+      hideTabs,
+      rootRef,
+      onFullScreenClick
+    }
+  ) }) }) }) }) });
 };
 var RedisBrowserRoot = ({
   hideTabs,
-  rootRef
+  rootRef,
+  onFullScreenClick
 }) => {
-  const theme = useDarkMode();
+  const theme = useTheme();
   useEffect14(() => {
     portalWrapper.classList.add("text-zinc-700");
     portalWrapper.classList.toggle("dark", theme === "dark");
@@ -6714,7 +6734,7 @@ var RedisBrowserRoot = ({
         style: { height: "100%" },
         ref: rootRef,
         children: /* @__PURE__ */ jsxs36("div", { className: "flex h-full flex-col text-zinc-700", children: [
-          !hideTabs && /* @__PURE__ */ jsx53(DatabrowserTabs, {}),
+          !hideTabs && /* @__PURE__ */ jsx53(DatabrowserTabs, { onFullScreenClick }),
           /* @__PURE__ */ jsx53(DatabrowserInstances, {})
         ] })
       }

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.2.7-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 ./src" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@dnd-kit/core": "^6.3.1", "@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", "@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-icons": "1.3.0", "@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", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.35.3", "bytes": "^3.1.2", "cmdk": "^1.1.1", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "@playwright/test": "^1.53.1", "@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", "dotenv": "^16.5.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "postcss-prefix-selector": "^2.1.0", "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" } }
+{ "name": "@upstash/react-redis-browser", "version": "v0.2.7", "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 ./src" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@dnd-kit/core": "^6.3.1", "@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", "@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-icons": "1.3.0", "@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", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.35.3", "bytes": "^3.1.2", "cmdk": "^1.1.1", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "@playwright/test": "^1.56.1", "@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", "dotenv": "^16.5.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "postcss-prefix-selector": "^2.1.0", "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" } }