@codaijs/keel 0.1.0

package/sails/r2-storage/files/frontend/components/ProfilePictureUpload.tsx

@@ -0,0 +1,167 @@
+import { useState, useRef } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiPost, apiPatch } from "@/lib/api";
+import { isNative } from "@/lib/capacitor";
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+interface PresignedUrlResponse {
+  uploadUrl: string;
+  publicUrl: string;
+}
+
+export default function ProfilePictureUpload() {
+  const { user } = useAuth();
+  const [isUploading, setIsUploading] = useState(false);
+  const [error, setError] = useState("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = async (file: File) => {
+    setError("");
+
+    if (file.size > MAX_FILE_SIZE) {
+      setError("File size must be less than 5MB.");
+      return;
+    }
+
+    if (!file.type.startsWith("image/")) {
+      setError("Please select an image file.");
+      return;
+    }
+
+    setIsUploading(true);
+
+    try {
+      // Get presigned upload URL
+      const { uploadUrl, publicUrl } = await apiPost<PresignedUrlResponse>(
+        "/api/user/profile/avatar/upload-url",
+        {
+          contentType: file.type,
+          fileName: file.name,
+        },
+      );
+
+      // Upload file to R2
+      await fetch(uploadUrl, {
+        method: "PUT",
+        headers: { "Content-Type": file.type },
+        body: file,
+      });
+
+      // Update profile with new image URL
+      await apiPatch("/api/user/profile", { image: publicUrl });
+
+      // Force page reload to show new avatar
+      window.location.reload();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to upload image.",
+      );
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleClick = async () => {
+    if (isNative) {
+      try {
+        const { Camera, CameraResultType, CameraSource } = await import(
+          "@capacitor/camera"
+        );
+        const photo = await Camera.getPhoto({
+          quality: 80,
+          allowEditing: true,
+          resultType: CameraResultType.Uri,
+          source: CameraSource.Prompt,
+          width: 512,
+          height: 512,
+        });
+
+        if (photo.webPath) {
+          const response = await fetch(photo.webPath);
+          const blob = await response.blob();
+          const file = new File([blob], "avatar.jpg", {
+            type: `image/${photo.format}`,
+          });
+          await handleFileSelect(file);
+        }
+      } catch {
+        // User cancelled
+      }
+    } else {
+      fileInputRef.current?.click();
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      handleFileSelect(file);
+    }
+  };
+
+  const avatarUrl = user?.image;
+  const initials = user?.name?.charAt(0)?.toUpperCase() || "U";
+
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <button
+        onClick={handleClick}
+        disabled={isUploading}
+        className="group relative h-20 w-20 overflow-hidden rounded-full border-2 border-keel-gray-800 transition-colors hover:border-keel-blue disabled:opacity-50"
+      >
+        {avatarUrl ? (
+          <img
+            src={avatarUrl}
+            alt={user?.name || "Avatar"}
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-keel-blue/20 text-2xl font-semibold text-keel-blue">
+            {initials}
+          </div>
+        )}
+
+        <div className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
+          {isUploading ? (
+            <div className="h-6 w-6 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+          ) : (
+            <svg
+              className="h-6 w-6 text-white"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+              />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+              />
+            </svg>
+          )}
+        </div>
+      </button>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleInputChange}
+        className="hidden"
+      />
+
+      <p className="text-xs text-keel-gray-400">
+        {isUploading ? "Uploading..." : "Click to change"}
+      </p>
+
+      {error && <p className="text-xs text-red-400">{error}</p>}
+    </div>
+  );
+}

package/sails/r2-storage/install.ts

@@ -0,0 +1,412 @@
+/**
+ * Cloudflare R2 Storage Sail Installer
+ *
+ * Adds file uploads via Cloudflare R2 with presigned URLs.
+ * Includes profile picture upload component and avatar management endpoints.
+ *
+ * Usage:
+ *   npx tsx sails/r2-storage/install.ts
+ */
+
+import {
+  readFileSync,
+  writeFileSync,
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+} from "node:fs";
+import { resolve, dirname, join } from "node:path";
+import { execSync } from "node:child_process";
+import { input, confirm } from "@inquirer/prompts";
+
+// ---------------------------------------------------------------------------
+// Paths
+// ---------------------------------------------------------------------------
+
+const SAIL_DIR = dirname(new URL(import.meta.url).pathname);
+const PROJECT_ROOT = resolve(SAIL_DIR, "../..");
+const BACKEND_ROOT = join(PROJECT_ROOT, "packages/backend");
+const FRONTEND_ROOT = join(PROJECT_ROOT, "packages/frontend");
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+interface SailManifest {
+  name: string;
+  displayName: string;
+  version: string;
+  requiredEnvVars: { key: string; description: string }[];
+  dependencies: { backend: Record<string, string>; frontend: Record<string, string> };
+}
+
+function loadManifest(): SailManifest {
+  return JSON.parse(readFileSync(join(SAIL_DIR, "addon.json"), "utf-8"));
+}
+
+function insertAtMarker(filePath: string, marker: string, code: string): void {
+  if (!existsSync(filePath)) {
+    console.warn(`  Warning: File not found: ${filePath}`);
+    return;
+  }
+  let content = readFileSync(filePath, "utf-8");
+  if (!content.includes(marker)) {
+    console.warn(`  Warning: Marker "${marker}" not found in ${filePath}`);
+    return;
+  }
+  if (content.includes(code.trim())) {
+    console.log(`  Skipped (already present) -> ${filePath}`);
+    return;
+  }
+  content = content.replace(marker, `${marker}\n${code}`);
+  writeFileSync(filePath, content, "utf-8");
+  console.log(`  Modified -> ${filePath}`);
+}
+
+function copyFile(src: string, dest: string, label: string): void {
+  mkdirSync(dirname(dest), { recursive: true });
+  copyFileSync(src, dest);
+  console.log(`  Copied -> ${label}`);
+}
+
+function appendToEnvFiles(entries: Record<string, string>, section: string): void {
+  for (const envFile of [".env.example", ".env"]) {
+    const envPath = join(PROJECT_ROOT, envFile);
+    if (!existsSync(envPath)) continue;
+    let content = readFileSync(envPath, "utf-8");
+    const lines: string[] = [];
+    for (const [key, val] of Object.entries(entries)) {
+      if (!content.includes(key)) lines.push(`${key}=${val}`);
+    }
+    if (lines.length > 0) {
+      content += `\n# ${section}\n${lines.join("\n")}\n`;
+      writeFileSync(envPath, content, "utf-8");
+      console.log(`  Updated ${envFile}`);
+    }
+  }
+}
+
+function installDeps(deps: Record<string, string>, workspace: string): void {
+  const entries = Object.entries(deps);
+  if (entries.length === 0) return;
+  const packages = entries.map(([n, v]) => `${n}@${v}`).join(" ");
+  const cmd = `npm install ${packages} --workspace=${workspace}`;
+  console.log(`  Running: ${cmd}`);
+  execSync(cmd, { cwd: PROJECT_ROOT, stdio: "inherit" });
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+async function main(): Promise<void> {
+  const manifest = loadManifest();
+
+  // -- Step 1: Welcome message ------------------------------------------------
+  console.log("\n------------------------------------------------------------");
+  console.log(`  Cloudflare R2 Storage Sail Installer (v${manifest.version})`);
+  console.log("------------------------------------------------------------");
+  console.log();
+  console.log("  This sail adds file upload support via Cloudflare R2:");
+  console.log("    - Presigned URL generation for direct browser uploads");
+  console.log("    - Profile picture upload component");
+  console.log("    - Avatar management API endpoints (upload URL + delete)");
+  console.log("    - S3-compatible storage via Cloudflare R2");
+  console.log();
+
+  const pkgPath = join(PROJECT_ROOT, "package.json");
+  if (existsSync(pkgPath)) {
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+    console.log(`  Template version: ${pkg.version ?? "unknown"}`);
+    console.log();
+  }
+
+  // -- Step 2: R2 bucket setup ------------------------------------------------
+  const hasBucket = await confirm({
+    message: "Do you already have a Cloudflare R2 bucket set up?",
+    default: false,
+  });
+
+  if (!hasBucket) {
+    console.log();
+    console.log("  Create a Cloudflare R2 bucket:");
+    console.log();
+    console.log("  1. Go to the Cloudflare dashboard:");
+    console.log("       https://dash.cloudflare.com/?to=/:account/r2/new");
+    console.log("  2. Click 'Create bucket'");
+    console.log("  3. Choose a bucket name (e.g., 'avatars' or 'uploads')");
+    console.log("  4. Select a location hint closest to your users");
+    console.log("  5. Click 'Create bucket'");
+    console.log();
+    console.log("  Then create an API token:");
+    console.log("  1. Go to R2 > Overview > Manage R2 API Tokens");
+    console.log("  2. Click 'Create API token'");
+    console.log("  3. Give it 'Object Read & Write' permissions");
+    console.log("  4. Copy the Access Key ID and Secret Access Key");
+    console.log();
+
+    await confirm({
+      message: "I have created my R2 bucket and API token, ready to continue",
+      default: false,
+    });
+  }
+
+  // -- Step 3: Collect env vars -----------------------------------------------
+  console.log();
+  console.log("  Enter your Cloudflare R2 credentials:");
+  console.log("  (Find your Account ID in the Cloudflare dashboard URL or R2 overview page)");
+  console.log();
+
+  const r2AccountId = await input({
+    message: "R2 Account ID:",
+    validate: (value) => {
+      if (!value || value.trim().length === 0) return "Account ID is required.";
+      return true;
+    },
+  });
+
+  const r2AccessKeyId = await input({
+    message: "R2 Access Key ID:",
+    validate: (value) => {
+      if (!value || value.trim().length === 0) return "Access Key ID is required.";
+      return true;
+    },
+  });
+
+  const r2SecretAccessKey = await input({
+    message: "R2 Secret Access Key:",
+    validate: (value) => {
+      if (!value || value.trim().length === 0) return "Secret Access Key is required.";
+      return true;
+    },
+  });
+
+  const r2BucketName = await input({
+    message: "R2 Bucket Name:",
+    default: "avatars",
+    validate: (value) => {
+      if (!value || value.trim().length === 0) return "Bucket name is required.";
+      return true;
+    },
+  });
+
+  const r2PublicUrl = await input({
+    message: "R2 Public URL (e.g., https://pub-xxx.r2.dev):",
+    validate: (value) => {
+      if (!value || value.trim().length === 0) return "Public URL is required.";
+      if (!value.startsWith("http")) return "Public URL should start with http:// or https://";
+      return true;
+    },
+  });
+
+  // -- Step 4: CORS reminder --------------------------------------------------
+  console.log();
+  console.log("  Important: Configure CORS on your R2 bucket!");
+  console.log();
+  console.log("  Go to your bucket settings and add a CORS policy:");
+  console.log("  [");
+  console.log('    {');
+  console.log('      "AllowedOrigins": ["http://localhost:5173", "https://yourdomain.com"],');
+  console.log('      "AllowedMethods": ["GET", "PUT"],');
+  console.log('      "AllowedHeaders": ["Content-Type"],');
+  console.log('      "MaxAgeSeconds": 3600');
+  console.log("    }");
+  console.log("  ]");
+  console.log();
+
+  await confirm({
+    message: "I have configured CORS (or will do it later)",
+    default: true,
+  });
+
+  // -- Step 5: Summary --------------------------------------------------------
+  console.log();
+  console.log("  Summary of changes:");
+  console.log("  -------------------");
+  console.log("  Files to copy (backend):");
+  console.log("    + packages/backend/src/services/storage.ts");
+  console.log();
+  console.log("  Files to copy (frontend):");
+  console.log("    + packages/frontend/src/components/profile/ProfilePictureUpload.tsx");
+  console.log();
+  console.log("  Files to modify:");
+  console.log("    ~ packages/backend/src/routes/profile.ts  (add avatar endpoints)");
+  console.log("    ~ packages/backend/src/env.ts             (add R2 env vars)");
+  console.log("    ~ packages/frontend/src/components/profile/ProfilePage.tsx (add upload component)");
+  console.log("    ~ .env.example / .env");
+  console.log();
+  console.log("  Environment variables:");
+  console.log(`    R2_ACCOUNT_ID=${r2AccountId.slice(0, 8)}...`);
+  console.log(`    R2_ACCESS_KEY_ID=${r2AccessKeyId.slice(0, 8)}...`);
+  console.log(`    R2_SECRET_ACCESS_KEY=${r2SecretAccessKey.slice(0, 8)}...`);
+  console.log(`    R2_BUCKET_NAME=${r2BucketName}`);
+  console.log(`    R2_PUBLIC_URL=${r2PublicUrl}`);
+  console.log();
+
+  const proceed = await confirm({ message: "Proceed with installation?", default: true });
+  if (!proceed) { console.log("\n  Installation cancelled.\n"); process.exit(0); }
+
+  // -- Step 6: Execute --------------------------------------------------------
+  console.log();
+  console.log("  Installing...");
+  console.log();
+
+  console.log("  Copying backend files...");
+  copyFile(
+    join(SAIL_DIR, "files/backend/services/storage.ts"),
+    join(BACKEND_ROOT, "src/services/storage.ts"),
+    "src/services/storage.ts",
+  );
+
+  console.log();
+  console.log("  Copying frontend files...");
+  copyFile(
+    join(SAIL_DIR, "files/frontend/components/ProfilePictureUpload.tsx"),
+    join(FRONTEND_ROOT, "src/components/profile/ProfilePictureUpload.tsx"),
+    "src/components/profile/ProfilePictureUpload.tsx",
+  );
+
+  console.log();
+  console.log("  Modifying backend files...");
+
+  // Add R2 env vars to env.ts
+  insertAtMarker(
+    join(BACKEND_ROOT, "src/env.ts"),
+    "// [SAIL_ENV_VARS]",
+    `  R2_ACCOUNT_ID: z.string().default(""),\n  R2_ACCESS_KEY_ID: z.string().default(""),\n  R2_SECRET_ACCESS_KEY: z.string().default(""),\n  R2_BUCKET_NAME: z.string().default("avatars"),\n  R2_PUBLIC_URL: z.string().default(""),`,
+  );
+
+  // Add avatar routes to profile.ts — insert import and route blocks
+  const profilePath = join(BACKEND_ROOT, "src/routes/profile.ts");
+  if (existsSync(profilePath)) {
+    let profileContent = readFileSync(profilePath, "utf-8");
+
+    // Add storage import if not present
+    if (!profileContent.includes("storage")) {
+      profileContent = profileContent.replace(
+        'import { db } from "../db/index.js";',
+        'import { db } from "../db/index.js";\nimport { generateUploadUrl, deleteObject } from "../services/storage.js";',
+      );
+    }
+
+    // Add avatar routes if not present
+    if (!profileContent.includes("/avatar/upload-url")) {
+      const avatarRoutes = `
+// POST /avatar/upload-url — generate presigned upload URL
+router.post("/avatar/upload-url", async (req, res) => {
+  const { fileType } = req.body as { fileType?: string };
+
+  if (!fileType || typeof fileType !== "string") {
+    res.status(400).json({ error: "fileType is required" });
+    return;
+  }
+
+  const result = await generateUploadUrl(req.user!.id, fileType);
+  res.json(result);
+});
+
+// DELETE /avatar — delete current avatar
+router.delete("/avatar", async (req, res) => {
+  const user = req.user!;
+
+  if (user.image) {
+    try {
+      // Extract key from the image URL or stored key
+      await deleteObject(user.image);
+    } catch {
+      // Continue even if R2 deletion fails
+    }
+  }
+
+  const [updated] = await db
+    .update(users)
+    .set({ image: null, updatedAt: new Date() })
+    .where(eq(users.id, user.id))
+    .returning();
+
+  res.json({ user: updated });
+});`;
+
+      // Insert before "export default router"
+      profileContent = profileContent.replace(
+        "export default router;",
+        `${avatarRoutes}\n\nexport default router;`,
+      );
+    }
+
+    writeFileSync(profilePath, profileContent, "utf-8");
+    console.log(`  Modified -> ${profilePath}`);
+  }
+
+  console.log();
+  console.log("  Modifying frontend files...");
+
+  // Add ProfilePictureUpload to ProfilePage.tsx
+  const profilePagePath = join(FRONTEND_ROOT, "src/components/profile/ProfilePage.tsx");
+  if (existsSync(profilePagePath)) {
+    let pageContent = readFileSync(profilePagePath, "utf-8");
+
+    // Add import if not present
+    if (!pageContent.includes("ProfilePictureUpload")) {
+      pageContent = pageContent.replace(
+        'import { apiPatch } from "@/lib/api";',
+        'import { apiPatch } from "@/lib/api";\nimport ProfilePictureUpload from "./ProfilePictureUpload";',
+      );
+
+      // Add the component in the profile card layout
+      pageContent = pageContent.replace(
+        '<div className="flex flex-col items-start gap-6 sm:flex-row">',
+        '<div className="flex flex-col items-start gap-6 sm:flex-row">\n          <ProfilePictureUpload />',
+      );
+    }
+
+    writeFileSync(profilePagePath, pageContent, "utf-8");
+    console.log(`  Modified -> ${profilePagePath}`);
+  }
+
+  console.log();
+  console.log("  Installing dependencies...");
+  installDeps(manifest.dependencies.backend, "packages/backend");
+  installDeps(manifest.dependencies.frontend, "packages/frontend");
+
+  console.log();
+  console.log("  Updating environment files...");
+  appendToEnvFiles(
+    {
+      R2_ACCOUNT_ID: r2AccountId,
+      R2_ACCESS_KEY_ID: r2AccessKeyId,
+      R2_SECRET_ACCESS_KEY: r2SecretAccessKey,
+      R2_BUCKET_NAME: r2BucketName,
+      R2_PUBLIC_URL: r2PublicUrl,
+    },
+    "Cloudflare R2 Storage",
+  );
+
+  // -- Step 7: Next steps -----------------------------------------------------
+  console.log();
+  console.log("------------------------------------------------------------");
+  console.log("  Cloudflare R2 Storage installed successfully!");
+  console.log("------------------------------------------------------------");
+  console.log();
+  console.log("  Next steps:");
+  console.log();
+  console.log("  1. Make sure CORS is configured on your R2 bucket");
+  console.log("     (allow PUT from your frontend origin)");
+  console.log();
+  console.log("  2. If using a custom domain for R2 public access,");
+  console.log("     set R2_PUBLIC_URL to that domain in your .env");
+  console.log();
+  console.log("  3. Start your dev server:");
+  console.log("       npm run dev");
+  console.log();
+  console.log("  4. Navigate to your profile page and try uploading");
+  console.log("     a profile picture to verify the integration works.");
+  console.log();
+  console.log("  Troubleshooting:");
+  console.log("    - CORS errors: Check your R2 bucket CORS configuration");
+  console.log("    - 403 errors: Verify your API token has read/write permissions");
+  console.log("    - Upload fails: Check that R2_ACCOUNT_ID is correct");
+  console.log();
+}
+
+main().catch((err) => { console.error("Installation failed:", err); process.exit(1); });