Merge branch 'develop' into experimental-standable-react

jest.config.ts

@@ -9,9 +9,12 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 const config: Config = {
   coveragePathIgnorePatterns: ["<rootDir>/.*.tsx$"],
+  globals: {
+    window: {},
+  },
   testEnvironment: "node",
   // Add more setup options before each test is run
-  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

jest.setup.ts

@@ -0,0 +1,7 @@
+import crypto from "crypto";
+
+Object.defineProperty(window, "crypto", {
+  value: {
+    randomUUID: crypto.randomUUID,
+  },
+});

package.json

@@ -35,6 +35,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.5.5",
     "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@justmiracle/result": "^1.2.0",
     "@lezer/common": "^1.2.1",
@@ -79,14 +80,16 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
-    "cookies-next": "^4.1.1",
+    "cookies-next": "^4.3.0",
     "deep-equal": "^2.2.3",
     "dexie": "^4.0.8",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.30.1",
     "eslint-plugin-jest": "^27.6.3",
     "file-saver": "^2.0.5",
+    "immer": "^10.1.1",
     "libsql-stateless-easy": "^1.6.11",
+    "lodash": "^4.17.21",
     "lucia": "^3.2.0",
     "lucide-react": "^0.309.0",
     "magic-bytes.js": "^1.10.0",
@@ -107,6 +110,7 @@
     "@types/deep-equal": "^1.0.4",
     "@types/file-saver": "^2.0.7",
     "@types/jest": "^29.5.11",
+    "@types/lodash": "^4.17.9",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/(public)/page.tsx

@@ -118,9 +118,7 @@ function SupportDriver() {
           <DatabaseBlock center link="#">
             <PostgreIcon />
             <span>PostgreSQL</span>
-            <span className="text-xs -mt-2 text-yellow-500">
-              Coming Soon 7th Oct 2024
-            </span>
+            <span className="text-xs -mt-2 text-yellow-500">Coming Soon</span>
           </DatabaseBlock>
 
           <DatabaseBlock center link="/databases/mysql">

src/app/(theme)/client/[[...driver]]/page-client.tsx

@@ -10,6 +10,7 @@ import ValtownDriver from "@/drivers/valtown-driver";
 
 import MyStudio from "@/components/my-studio";
 import CloudflareD1Driver from "@/drivers/cloudflare-d1-driver";
+import StarbaseDriver from "@/drivers/starbase-driver";
 
 export default function ClientPageBody() {
   const driver = useMemo(() => {
@@ -27,7 +28,13 @@ export default function ClientPageBody() {
         "x-account-id": config.username ?? "",
         "x-database-id": config.database ?? "",
       });
+    } else if (config.driver === "starbase") {
+      return new StarbaseDriver("/proxy/starbase", {
+        Authorization: "Bearer " + (config.token ?? ""),
+        "x-starbase-url": config.url ?? "",
+      });
     }
+
     return new TursoDriver(config.url, config.token as string, true);
   }, []);
 

src/app/(theme)/client/s/[[...driver]]/page-client.tsx

@@ -8,6 +8,7 @@ import { useMemo } from "react";
 import MyStudio from "@/components/my-studio";
 import IndexdbSavedDoc from "@/drivers/saved-doc/indexdb-saved-doc";
 import CloudflareD1Driver from "@/drivers/cloudflare-d1-driver";
+import StarbaseDriver from "@/drivers/starbase-driver";
 
 export default function ClientPageBody() {
   const params = useSearchParams();
@@ -35,6 +36,11 @@ export default function ClientPageBody() {
         "x-account-id": conn.config.username ?? "",
         "x-database-id": conn.config.database ?? "",
       });
+    } else if (conn.driver === "starbase") {
+      return new StarbaseDriver("/proxy/starbase", {
+        Authorization: "Bearer " + (conn.config.token ?? ""),
+        "x-starbase-url": conn.config.url ?? "",
+      });
     }
 
     return new TursoDriver(conn.config.url, conn.config.token, true);

src/app/(theme)/connect/driver-dropdown.tsx

@@ -13,6 +13,7 @@ import {
   MySQLIcon,
   RqliteIcon,
   SQLiteIcon,
+  StarbaseIcon,
   TursoIcon,
   ValtownIcon,
 } from "@/components/icons/outerbase-icon";
@@ -84,6 +85,17 @@ export default function DriverDropdown({
                 </div>
               </DropdownMenuItem>
 
+              <DropdownMenuItem
+                onClick={() => {
+                  onSelect("starbase");
+                }}
+              >
+                <div className="flex gap-4 px-2 items-center h-8">
+                  <StarbaseIcon className="w-6 h-6" />
+                  <div className="font-semibold">StarbaseDB</div>
+                </div>
+              </DropdownMenuItem>
+
               <DropdownMenuSeparator />
 
               <DropdownMenuItem

src/app/(theme)/connect/saved-connection-card.tsx

@@ -51,14 +51,16 @@ export default function ConnectionItemCard({
               : `/client/r?p=${conn.id}`
           }
         >
-          <div className="py-4 shrink-0 ml-3 mr-2 flex flex-col gap-3">
-            <div className="flex gap-2">
-              <div className="w-10 h-10 bg-accent flex justify-center items-center rounded">
+          <div className="py-4 shrink-0 ml-3 mr-2 flex flex-col gap-3 flex-1">
+            <div className="flex gap-2 overflow-hidden">
+              <div className="w-10 h-10 bg-accent flex justify-center items-center rounded flex-shrink-0">
                 <DatabaseIcon className="w-6 h-6 text-accent-foreground" />
               </div>
 
-              <div>
-                <div className="line-clamp-1 text-primary">{conn.name}</div>
+              <div className="flex-1">
+                <div className="text-primary text-ellipsis overflow-hidden whitespace-nowrap w-[220px]">
+                  {conn.name}
+                </div>
                 <div className="text-xs text-muted-foreground">
                   {DRIVER_DETAIL[conn.driver ?? "turso"].displayName}
                 </div>

src/app/(theme)/connect/saved-connection-storage.ts

@@ -2,6 +2,7 @@ import {
   CloudflareIcon,
   RqliteIcon,
   SQLiteIcon,
+  StarbaseIcon,
   TursoIcon,
   ValtownIcon,
 } from "@/components/icons/outerbase-icon";
@@ -91,6 +92,41 @@ export const DRIVER_DETAIL: Record<SupportedDriver, DriverDetail> =
         },
       ],
     },
+    starbase: {
+      name: "starbase",
+      displayName: "StarbaseDB",
+      icon: StarbaseIcon,
+      disableRemote: true,
+      prefill: "",
+      fields: [
+        {
+          name: "url",
+          title: "Endpoint",
+          required: true,
+          type: "text",
+          secret: false,
+          invalidate: (url: string): null | string => {
+            const trimmedUrl = url.trim();
+            const valid =
+              trimmedUrl.startsWith("https://") ||
+              trimmedUrl.startsWith("http://");
+
+            if (!valid) {
+              return "Endpoint must start with https:// or http://";
+            }
+
+            return null;
+          },
+        },
+        {
+          name: "token",
+          title: "API Token",
+          required: true,
+          type: "text",
+          secret: true,
+        },
+      ],
+    },
     "cloudflare-d1": {
       name: "cloudflare-d1",
       displayName: "Cloudflare D1",
@@ -211,8 +247,10 @@ export type SupportedDriver =
   | "turso"
   | "rqlite"
   | "valtown"
+  | "starbase"
   | "cloudflare-d1"
   | "sqlite-filehandler";
+
 export type SavedConnectionStorage = "remote" | "local";
 export type SavedConnectionLabel = "gray" | "red" | "yellow" | "green" | "blue";
 

src/app/(theme)/embed/starbase/page-client.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { Studio } from "@/components/gui/studio";
+import { IframeSQLiteDriver } from "@/drivers/iframe-driver";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useMemo } from "react";
+
+export default function EmbedPageClient() {
+  const searchParams = useSearchParams();
+  const driver = useMemo(
+    () => new IframeSQLiteDriver({ supportPragmaList: false }),
+    []
+  );
+
+  useEffect(() => {
+    return driver.listen();
+  }, [driver]);
+
+  return (
+    <Studio
+      driver={driver}
+      name={searchParams.get("name") || "Unnamed Connection"}
+      color={searchParams.get("color") || "blue"}
+    />
+  );
+}

src/app/(theme)/embed/starbase/page.tsx

@@ -0,0 +1,10 @@
+import ThemeLayout from "../../theme_layout";
+import EmbedPageClient from "./page-client";
+
+export default async function EmbedPage() {
+  return (
+    <ThemeLayout overrideTheme={"dark"} disableToggle={true}>
+      <EmbedPageClient />
+    </ThemeLayout>
+  );
+}