@marimo-team/islands 0.20.3-dev94 → 0.20.3-dev97

package/src/components/editor/connections/database/add-database-form.tsx

@@ -0,0 +1,303 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useState } from "react";
+import type { FieldValues } from "react-hook-form";
+import type { z } from "zod";
+import { DatabaseLogo, type DBLogoName } from "@/components/databases/icon";
+import { ConnectionForm, SelectorButton, SelectorGrid } from "../components";
+import {
+  ConnectionDisplayNames,
+  type ConnectionLibrary,
+  generateDatabaseCode,
+} from "./as-code";
+import {
+  BigQueryConnectionSchema,
+  ChdbConnectionSchema,
+  ClickhouseConnectionSchema,
+  type DatabaseConnection,
+  DatabricksConnectionSchema,
+  DataFusionConnectionSchema,
+  DuckDBConnectionSchema,
+  IcebergConnectionSchema,
+  MotherDuckConnectionSchema,
+  MySQLConnectionSchema,
+  PostgresConnectionSchema,
+  PySparkConnectionSchema,
+  RedshiftConnectionSchema,
+  SnowflakeConnectionSchema,
+  SQLiteConnectionSchema,
+  SupabaseConnectionSchema,
+  TimeplusConnectionSchema,
+  TrinoConnectionSchema,
+} from "./schemas";
+
+interface ConnectionSchema {
+  name: string;
+  schema: z.ZodType<DatabaseConnection, FieldValues>;
+  color: string;
+  logo: DBLogoName;
+  connectionLibraries: {
+    libraries: ConnectionLibrary[];
+    preferred: ConnectionLibrary;
+  };
+}
+
+const DATABASES = [
+  {
+    name: "PostgreSQL",
+    schema: PostgresConnectionSchema,
+    color: "#336791",
+    logo: "postgres",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "MySQL",
+    schema: MySQLConnectionSchema,
+    color: "#00758F",
+    logo: "mysql",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "SQLite",
+    schema: SQLiteConnectionSchema,
+    color: "#003B57",
+    logo: "sqlite",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "DuckDB",
+    schema: DuckDBConnectionSchema,
+    color: "#FFD700",
+    logo: "duckdb",
+    connectionLibraries: {
+      libraries: ["duckdb"],
+      preferred: "duckdb",
+    },
+  },
+  {
+    name: "MotherDuck",
+    schema: MotherDuckConnectionSchema,
+    color: "#ff9538",
+    logo: "motherduck",
+    connectionLibraries: {
+      libraries: ["duckdb"],
+      preferred: "duckdb",
+    },
+  },
+  {
+    name: "Snowflake",
+    schema: SnowflakeConnectionSchema,
+    color: "#29B5E8",
+    logo: "snowflake",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "ClickHouse",
+    schema: ClickhouseConnectionSchema,
+    color: "#2C2C1D",
+    logo: "clickhouse",
+    connectionLibraries: {
+      libraries: ["clickhouse_connect"],
+      preferred: "clickhouse_connect",
+    },
+  },
+  {
+    name: "Timeplus",
+    schema: TimeplusConnectionSchema,
+    color: "#B83280",
+    logo: "timeplus",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "BigQuery",
+    schema: BigQueryConnectionSchema,
+    color: "#4285F4",
+    logo: "bigquery",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "ClickHouse Embedded",
+    schema: ChdbConnectionSchema,
+    color: "#f2b611",
+    logo: "clickhouse",
+    connectionLibraries: {
+      libraries: ["chdb"],
+      preferred: "chdb",
+    },
+  },
+  {
+    name: "Trino",
+    schema: TrinoConnectionSchema,
+    color: "#d466b6",
+    logo: "trino",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "DataFusion",
+    schema: DataFusionConnectionSchema,
+    color: "#202A37",
+    logo: "datafusion",
+    connectionLibraries: {
+      libraries: ["ibis"],
+      preferred: "ibis",
+    },
+  },
+  {
+    name: "PySpark",
+    schema: PySparkConnectionSchema,
+    color: "#1C5162",
+    logo: "pyspark",
+    connectionLibraries: {
+      libraries: ["ibis"],
+      preferred: "ibis",
+    },
+  },
+  {
+    name: "Redshift",
+    schema: RedshiftConnectionSchema,
+    color: "#522BAE",
+    logo: "redshift",
+    connectionLibraries: {
+      libraries: ["redshift"],
+      preferred: "redshift",
+    },
+  },
+  {
+    name: "Databricks",
+    schema: DatabricksConnectionSchema,
+    color: "#c41e0c",
+    logo: "databricks",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel", "ibis"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "Supabase",
+    schema: SupabaseConnectionSchema,
+    color: "#238F5F",
+    logo: "supabase",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+] satisfies ConnectionSchema[];
+
+const DATA_CATALOGS = [
+  {
+    name: "Iceberg",
+    schema: IcebergConnectionSchema,
+    color: "#000000",
+    logo: "iceberg",
+    connectionLibraries: {
+      libraries: ["pyiceberg"],
+      preferred: "pyiceberg",
+    },
+  },
+] satisfies ConnectionSchema[];
+
+const ALL_ENTRIES = [...DATABASES, ...DATA_CATALOGS];
+
+const DatabaseSchemaSelector: React.FC<{
+  onSelect: (schema: z.ZodType<DatabaseConnection, FieldValues>) => void;
+}> = ({ onSelect }) => {
+  return (
+    <>
+      <SelectorGrid>
+        {DATABASES.map(({ name, schema, color, logo }) => (
+          <SelectorButton
+            key={name}
+            name={name}
+            color={color}
+            icon={
+              <DatabaseLogo
+                name={logo}
+                className="w-8 h-8 text-white brightness-0 invert dark:invert"
+              />
+            }
+            onSelect={() => onSelect(schema)}
+          />
+        ))}
+      </SelectorGrid>
+      <h4 className="font-semibold text-muted-foreground text-lg flex items-center gap-4 my-2">
+        Data Catalogs
+        <hr className="flex-1" />
+      </h4>
+      <SelectorGrid>
+        {DATA_CATALOGS.map(({ name, schema, color, logo }) => (
+          <SelectorButton
+            key={name}
+            name={name}
+            color={color}
+            icon={
+              <DatabaseLogo
+                name={logo}
+                className="w-8 h-8 text-white brightness-0 invert dark:invert"
+              />
+            }
+            onSelect={() => onSelect(schema)}
+          />
+        ))}
+      </SelectorGrid>
+    </>
+  );
+};
+
+export const AddDatabaseForm: React.FC<{
+  onSubmit: () => void;
+  header?: React.ReactNode;
+}> = ({ onSubmit, header }) => {
+  const [selectedSchema, setSelectedSchema] = useState<z.ZodType<
+    DatabaseConnection,
+    FieldValues
+  > | null>(null);
+
+  if (!selectedSchema) {
+    return (
+      <>
+        {header}
+        <div>
+          <DatabaseSchemaSelector onSelect={setSelectedSchema} />
+        </div>
+      </>
+    );
+  }
+
+  const entry = ALL_ENTRIES.find((e) => e.schema === selectedSchema);
+  const libs = entry?.connectionLibraries;
+
+  return (
+    <ConnectionForm<DatabaseConnection, ConnectionLibrary>
+      schema={selectedSchema}
+      libraries={libs?.libraries ?? []}
+      preferredLibrary={libs?.preferred ?? "sqlalchemy"}
+      displayNames={ConnectionDisplayNames}
+      libraryLabel="Preferred connection library"
+      generateCode={(values, library) => generateDatabaseCode(values, library)}
+      onSubmit={onSubmit}
+      onBack={() => setSelectedSchema(null)}
+    />
+  );
+};

package/src/components/editor/{database → connections/database}/as-code.ts

@@ -2,8 +2,8 @@
 
 import dedent from "string-dedent";
 import { assertNever } from "@/utils/assertNever";
+import { isSecret, unprefixSecret } from "../secrets";
 import { type DatabaseConnection, DatabaseConnectionSchema } from "./schemas";
-import { isSecret, unprefixSecret } from "./secrets";
 
 export type ConnectionLibrary =
   | "sqlmodel"

package/src/components/editor/connections/storage/__tests__/__snapshots__/as-code.test.ts.snap

@@ -0,0 +1,100 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateStorageCode > Azure > basic connection with account key 1`] = `
+"from obstore.store import AzureStore
+
+store = AzureStore("my-container",
+    account_name="storageaccount",
+    account_key="base64accountkey==",
+)"
+`;
+
+exports[`generateStorageCode > Azure > with secrets 1`] = `
+"from obstore.store import AzureStore
+import os
+
+_account_name = os.environ.get("AZURE_ACCOUNT")
+_account_key = os.environ.get("AZURE_KEY")
+store = AzureStore("my-container",
+    account_name=_account_name,
+    account_key=_account_key,
+)"
+`;
+
+exports[`generateStorageCode > Azure > without account key 1`] = `
+"from obstore.store import AzureStore
+
+store = AzureStore("my-container",
+    account_name="storageaccount",
+)"
+`;
+
+exports[`generateStorageCode > GCS > with service account key 1`] = `
+"from obstore.store import GCSStore
+import json
+
+_credentials = json.loads("""{"type": "service_account", "project_id": "test"}""")
+store = GCSStore("my-bucket",
+    service_account_key=_credentials,
+)"
+`;
+
+exports[`generateStorageCode > GCS > without service account key (default credentials) 1`] = `
+"from obstore.store import GCSStore
+
+store = GCSStore("my-bucket")"
+`;
+
+exports[`generateStorageCode > Google Drive > with browser auth (no credentials) 1`] = `
+"from gdrive_fsspec import GoogleDriveFileSystem
+
+fs = GoogleDriveFileSystem(token="browser")"
+`;
+
+exports[`generateStorageCode > Google Drive > with service account credentials 1`] = `
+"from gdrive_fsspec import GoogleDriveFileSystem
+import json
+
+_creds = json.loads("""{"type": "service_account", "client_email": "test@test.iam.gserviceaccount.com"}""")
+fs = GoogleDriveFileSystem(creds=_creds, token="service_account")"
+`;
+
+exports[`generateStorageCode > S3 > basic connection with all fields 1`] = `
+"from obstore.store import S3Store
+
+store = S3Store("my-bucket",
+    region="us-east-1",
+    access_key_id="AKIAIOSFODNN7EXAMPLE",
+    secret_access_key="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
+)"
+`;
+
+exports[`generateStorageCode > S3 > minimal connection (bucket only) 1`] = `
+"from obstore.store import S3Store
+
+store = S3Store("my-bucket",)"
+`;
+
+exports[`generateStorageCode > S3 > with custom endpoint 1`] = `
+"from obstore.store import S3Store
+
+store = S3Store("my-bucket",
+    region="us-east-1",
+    access_key_id="AKIAIOSFODNN7EXAMPLE",
+    secret_access_key="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
+    endpoint_url="https://minio.example.com:9000",
+)"
+`;
+
+exports[`generateStorageCode > S3 > with secrets 1`] = `
+"from obstore.store import S3Store
+import os
+
+_access_key_id = os.environ.get("AWS_ACCESS_KEY_ID")
+_secret_access_key = os.environ.get("AWS_SECRET_ACCESS_KEY")
+store = S3Store("my-bucket",
+    region="us-east-1",
+    access_key_id=_access_key_id,
+    secret_access_key=_secret_access_key,
+)"
+`;

package/src/components/editor/connections/storage/__tests__/as-code.test.ts

@@ -0,0 +1,166 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import { prefixSecret } from "../../secrets";
+import { generateStorageCode } from "../as-code";
+import type { StorageConnection } from "../schemas";
+
+describe("generateStorageCode", () => {
+  const baseS3: StorageConnection = {
+    type: "s3",
+    bucket: "my-bucket",
+    region: "us-east-1",
+    access_key_id: "AKIAIOSFODNN7EXAMPLE",
+    secret_access_key: "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
+    endpoint_url: undefined,
+  };
+
+  const baseGCS: StorageConnection = {
+    type: "gcs",
+    bucket: "my-bucket",
+    service_account_key: '{"type": "service_account", "project_id": "test"}',
+  };
+
+  const baseAzure: StorageConnection = {
+    type: "azure",
+    container: "my-container",
+    account_name: "storageaccount",
+    account_key: "base64accountkey==",
+  };
+
+  const baseGDrive: StorageConnection = {
+    type: "gdrive",
+    credentials_json:
+      '{"type": "service_account", "client_email": "test@test.iam.gserviceaccount.com"}',
+  };
+
+  describe("S3", () => {
+    it("basic connection with all fields", () => {
+      expect(generateStorageCode(baseS3, "obstore")).toMatchSnapshot();
+    });
+
+    it("minimal connection (bucket only)", () => {
+      const conn: StorageConnection = {
+        type: "s3",
+        bucket: "my-bucket",
+      };
+      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+    });
+
+    it("with custom endpoint", () => {
+      const conn: StorageConnection = {
+        ...baseS3,
+        endpoint_url: "https://minio.example.com:9000",
+      };
+      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+    });
+
+    it("with secrets", () => {
+      const conn: StorageConnection = {
+        type: "s3",
+        bucket: "my-bucket",
+        region: "us-east-1",
+        access_key_id: prefixSecret("AWS_ACCESS_KEY_ID"),
+        secret_access_key: prefixSecret("AWS_SECRET_ACCESS_KEY"),
+      };
+      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+    });
+  });
+
+  describe("GCS", () => {
+    it("with service account key", () => {
+      expect(generateStorageCode(baseGCS, "obstore")).toMatchSnapshot();
+    });
+
+    it("without service account key (default credentials)", () => {
+      const conn: StorageConnection = {
+        type: "gcs",
+        bucket: "my-bucket",
+      };
+      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+    });
+  });
+
+  describe("Azure", () => {
+    it("basic connection with account key", () => {
+      expect(generateStorageCode(baseAzure, "obstore")).toMatchSnapshot();
+    });
+
+    it("without account key", () => {
+      const conn: StorageConnection = {
+        type: "azure",
+        container: "my-container",
+        account_name: "storageaccount",
+      };
+      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+    });
+
+    it("with secrets", () => {
+      const conn: StorageConnection = {
+        type: "azure",
+        container: "my-container",
+        account_name: prefixSecret("AZURE_ACCOUNT"),
+        account_key: prefixSecret("AZURE_KEY"),
+      };
+      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+    });
+  });
+
+  describe("Google Drive", () => {
+    it("with service account credentials", () => {
+      expect(generateStorageCode(baseGDrive, "fsspec")).toMatchSnapshot();
+    });
+
+    it("with browser auth (no credentials)", () => {
+      const conn: StorageConnection = {
+        type: "gdrive",
+      };
+      expect(generateStorageCode(conn, "fsspec")).toMatchSnapshot();
+    });
+  });
+
+  describe("invalid cases", () => {
+    it("throws for empty S3 bucket", () => {
+      expect(() =>
+        generateStorageCode(
+          { type: "s3", bucket: "" } as StorageConnection,
+          "obstore",
+        ),
+      ).toThrow();
+    });
+
+    it("throws for empty GCS bucket", () => {
+      expect(() =>
+        generateStorageCode(
+          { type: "gcs", bucket: "" } as StorageConnection,
+          "obstore",
+        ),
+      ).toThrow();
+    });
+
+    it("throws for empty Azure container", () => {
+      expect(() =>
+        generateStorageCode(
+          {
+            type: "azure",
+            container: "",
+            account_name: "acct",
+          } as StorageConnection,
+          "obstore",
+        ),
+      ).toThrow();
+    });
+
+    it("throws for empty Azure account name", () => {
+      expect(() =>
+        generateStorageCode(
+          {
+            type: "azure",
+            container: "my-container",
+            account_name: "",
+          } as StorageConnection,
+          "obstore",
+        ),
+      ).toThrow();
+    });
+  });
+});

package/src/components/editor/connections/storage/add-storage-form.tsx

@@ -0,0 +1,135 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useState } from "react";
+import type { FieldValues } from "react-hook-form";
+import type { z } from "zod";
+import { ProtocolIcon } from "@/components/storage/components";
+import { ConnectionForm, SelectorButton, SelectorGrid } from "../components";
+import {
+  generateStorageCode,
+  type StorageLibrary,
+  StorageLibraryDisplayNames,
+} from "./as-code";
+import {
+  AzureStorageSchema,
+  GCSStorageSchema,
+  GoogleDriveStorageSchema,
+  S3StorageSchema,
+  type StorageConnection,
+} from "./schemas";
+
+interface StorageProviderSchema {
+  name: string;
+  schema: z.ZodType<StorageConnection, FieldValues>;
+  color: string;
+  protocol: string;
+  storageLibraries: {
+    libraries: StorageLibrary[];
+    preferred: StorageLibrary;
+  };
+}
+
+const STORAGE_PROVIDERS = [
+  {
+    name: "Amazon S3",
+    schema: S3StorageSchema,
+    color: "#232F3E",
+    protocol: "s3",
+    storageLibraries: {
+      libraries: ["obstore"],
+      preferred: "obstore",
+    },
+  },
+  {
+    name: "Google Cloud Storage",
+    schema: GCSStorageSchema,
+    color: "#4285F4",
+    protocol: "gcs",
+    storageLibraries: {
+      libraries: ["obstore"],
+      preferred: "obstore",
+    },
+  },
+  {
+    name: "Azure Blob Storage",
+    schema: AzureStorageSchema,
+    color: "#0062AD",
+    protocol: "azure",
+    storageLibraries: {
+      libraries: ["obstore"],
+      preferred: "obstore",
+    },
+  },
+  {
+    name: "Google Drive",
+    schema: GoogleDriveStorageSchema,
+    color: "#177834",
+    protocol: "gdrive",
+    storageLibraries: {
+      libraries: ["fsspec"],
+      preferred: "fsspec",
+    },
+  },
+] satisfies StorageProviderSchema[];
+
+const StorageProviderSelector: React.FC<{
+  onSelect: (schema: z.ZodType<StorageConnection, FieldValues>) => void;
+}> = ({ onSelect }) => {
+  return (
+    <SelectorGrid>
+      {STORAGE_PROVIDERS.map(({ name, schema, color, protocol }) => (
+        <SelectorButton
+          key={name}
+          name={name}
+          color={color}
+          icon={
+            <span className="w-8 h-8 flex items-center justify-center">
+              <ProtocolIcon
+                protocol={protocol}
+                className="w-7 h-7 brightness-0 invert"
+              />
+            </span>
+          }
+          onSelect={() => onSelect(schema)}
+        />
+      ))}
+    </SelectorGrid>
+  );
+};
+
+export const AddStorageForm: React.FC<{
+  onSubmit: () => void;
+  header?: React.ReactNode;
+}> = ({ onSubmit, header }) => {
+  const [selectedSchema, setSelectedSchema] = useState<z.ZodType<
+    StorageConnection,
+    FieldValues
+  > | null>(null);
+
+  if (!selectedSchema) {
+    return (
+      <>
+        {header}
+        <div>
+          <StorageProviderSelector onSelect={setSelectedSchema} />
+        </div>
+      </>
+    );
+  }
+
+  const provider = STORAGE_PROVIDERS.find((p) => p.schema === selectedSchema);
+  const libs = provider?.storageLibraries;
+
+  return (
+    <ConnectionForm<StorageConnection, StorageLibrary>
+      schema={selectedSchema}
+      libraries={libs?.libraries ?? []}
+      preferredLibrary={libs?.preferred ?? "obstore"}
+      displayNames={StorageLibraryDisplayNames}
+      libraryLabel="Preferred storage library"
+      generateCode={(values, library) => generateStorageCode(values, library)}
+      onSubmit={onSubmit}
+      onBack={() => setSelectedSchema(null)}
+    />
+  );
+};