@marimo-team/frontend 0.20.5-dev1 → 0.20.5-dev11

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

@@ -4,6 +4,7 @@ import { useState } from "react";
 import type { FieldValues } from "react-hook-form";
 import type { z } from "zod";
 import { ProtocolIcon } from "@/components/storage/components";
+import type { KnownStorageProtocol } from "@/core/storage/types";
 import { ConnectionForm, SelectorButton, SelectorGrid } from "../components";
 import {
   generateStorageCode,
@@ -12,6 +13,7 @@ import {
 } from "./as-code";
 import {
   AzureStorageSchema,
+  CoreWeaveStorageSchema,
   GCSStorageSchema,
   GoogleDriveStorageSchema,
   S3StorageSchema,
@@ -21,7 +23,6 @@ import {
 interface StorageProviderSchema {
   name: string;
   schema: z.ZodType<StorageConnection, FieldValues>;
-  color: string;
   protocol: string;
   storageLibraries: {
     libraries: StorageLibrary[];
@@ -29,11 +30,12 @@ interface StorageProviderSchema {
   };
 }
 
+const BACKGROUND_COLOR = "#232F3E";
+
 const STORAGE_PROVIDERS = [
   {
     name: "Amazon S3",
     schema: S3StorageSchema,
-    color: "#232F3E",
     protocol: "s3",
     storageLibraries: {
       libraries: ["obstore"],
@@ -43,7 +45,6 @@ const STORAGE_PROVIDERS = [
   {
     name: "Google Cloud Storage",
     schema: GCSStorageSchema,
-    color: "#4285F4",
     protocol: "gcs",
     storageLibraries: {
       libraries: ["obstore"],
@@ -53,17 +54,24 @@ const STORAGE_PROVIDERS = [
   {
     name: "Azure Blob Storage",
     schema: AzureStorageSchema,
-    color: "#0062AD",
     protocol: "azure",
     storageLibraries: {
       libraries: ["obstore"],
       preferred: "obstore",
     },
   },
+  {
+    name: "CoreWeave",
+    schema: CoreWeaveStorageSchema,
+    protocol: "coreweave",
+    storageLibraries: {
+      libraries: ["obstore"],
+      preferred: "obstore",
+    },
+  },
   {
     name: "Google Drive",
     schema: GoogleDriveStorageSchema,
-    color: "#177834",
     protocol: "gdrive",
     storageLibraries: {
       libraries: ["fsspec"],
@@ -77,18 +85,17 @@ const StorageProviderSelector: React.FC<{
 }> = ({ onSelect }) => {
   return (
     <SelectorGrid>
-      {STORAGE_PROVIDERS.map(({ name, schema, color, protocol }) => (
+      {STORAGE_PROVIDERS.map(({ name, schema, protocol }) => (
         <SelectorButton
           key={name}
           name={name}
-          color={color}
+          color={BACKGROUND_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>
+            <ProtocolIcon
+              protocol={protocol as KnownStorageProtocol}
+              forceDark={true}
+              className="w-7.5 h-7.5"
+            />
           }
           onSelect={() => onSelect(schema)}
         />

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

@@ -125,6 +125,40 @@ function generateAzureCode(
   return { imports, code };
 }
 
+function generateCoreWeaveCode(
+  connection: Extract<StorageConnection, { type: "coreweave" }>,
+  secrets: SecretContainer,
+): { imports: Set<string>; code: string } {
+  const bucket = secrets.print("bucket", connection.bucket);
+  const imports = new Set(["from obstore.store import S3Store"]);
+  const params: string[] = [
+    `    region=${secrets.print("region", connection.region)},`,
+  ];
+
+  if (connection.access_key_id) {
+    params.push(
+      `    access_key_id=${secrets.print("access_key_id", connection.access_key_id)},`,
+    );
+  }
+  if (connection.secret_access_key) {
+    params.push(
+      `    secret_access_key=${secrets.print("secret_access_key", connection.secret_access_key)},`,
+    );
+  }
+
+  params.push(
+    `    endpoint="https://${connection.bucket}.cwobject.com",`,
+    "    virtual_hosted_style_request=True,",
+  );
+
+  const paramsStr = `\n${params.join("\n")}\n`;
+
+  const code = dedent(`
+    store = S3Store(${bucket},${paramsStr})
+  `);
+  return { imports, code };
+}
+
 function generateGDriveCode(
   connection: Extract<StorageConnection, { type: "gdrive" }>,
   secrets: SecretContainer,
@@ -169,6 +203,9 @@ export function generateStorageCode(
     case "azure":
       result = generateAzureCode(connection, secrets);
       break;
+    case "coreweave":
+      result = generateCoreWeaveCode(connection, secrets);
+      break;
     case "gdrive":
       result = generateGDriveCode(connection, secrets);
       break;

package/src/components/editor/connections/storage/schemas.ts

@@ -21,7 +21,6 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Region",
           placeholder: "us-east-1",
-          optionRegex: ".*region.*",
         }),
       ),
     access_key_id: z
@@ -115,6 +114,50 @@ export const AzureStorageSchema = z
   })
   .describe(FieldOptions.of({ direction: "two-columns" }));
 
+export const CoreWeaveStorageSchema = z
+  .object({
+    type: z.literal("coreweave"),
+    bucket: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Bucket",
+          placeholder: "bucket-name",
+        }),
+      ),
+    region: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Region",
+          placeholder: "US-EAST-04A",
+        }),
+      ),
+    access_key_id: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Access Key ID",
+          inputType: "password",
+          optionRegex: ".*object_storage_key.*",
+        }),
+      ),
+    secret_access_key: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Secret Access Key",
+          inputType: "password",
+          optionRegex: ".*object_storage_secret.*",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
 export const GoogleDriveStorageSchema = z
   .object({
     type: z.literal("gdrive"),
@@ -135,6 +178,7 @@ export const StorageConnectionSchema = z.discriminatedUnion("type", [
   S3StorageSchema,
   GCSStorageSchema,
   AzureStorageSchema,
+  CoreWeaveStorageSchema,
   GoogleDriveStorageSchema,
 ]);
 

package/src/components/storage/components.tsx

@@ -75,15 +75,19 @@ const PROTOCOL_ICONS: Record<KnownStorageProtocol, IconEntry> = {
 
 export const ProtocolIcon: React.FC<{
   protocol: KnownStorageProtocol | (string & {});
+  forceDark?: boolean;
   className?: string;
-}> = ({ protocol, className }) => {
+}> = ({ protocol, forceDark, className }) => {
   const { theme } = useTheme();
   const entry =
     PROTOCOL_ICONS[protocol.toLowerCase() as KnownStorageProtocol] ??
     HardDriveIcon;
 
   if ("src" in entry) {
-    const src = theme === "dark" && entry.dark ? entry.dark : entry.src;
+    let src = entry.src;
+    if (entry.dark && (forceDark || theme === "dark")) {
+      src = entry.dark;
+    }
     return (
       <img src={src} alt={protocol} className={cn("h-3.5 w-3.5", className)} />
     );

package/src/components/ui/links.tsx

@@ -8,6 +8,7 @@ export const ExternalLink = ({
     | `https://console.anthropic.com/${string}`
     | `https://aistudio.google.com/${string}`
     | `https://github.com/${string}`
+    | `https://docs.github.com/${string}`
     | `https://openrouter.ai/${string}`
     | `https://docs.marimo.io/${string}`
     | `https://docs.python.org/${string}`