Add API routes for cloud design storage with CRUD operations

Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com>

Author: Copilot

apps/playground/app/api/designs/[id]/route.ts

@@ -0,0 +1,88 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { serverStorage } from '@/lib/serverStorage';
+
+/**
+ * GET /api/designs/:id - Get a single design
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const design = serverStorage.getDesign(id);
+
+    if (!design) {
+      return NextResponse.json(
+        { error: 'Design not found' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(design);
+  } catch (error) {
+    console.error('Error fetching design:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch design' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * PUT /api/designs/:id - Update a design
+ */
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const body = await request.json();
+    
+    const updatedDesign = serverStorage.updateDesign(id, body);
+
+    if (!updatedDesign) {
+      return NextResponse.json(
+        { error: 'Design not found' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(updatedDesign);
+  } catch (error) {
+    console.error('Error updating design:', error);
+    return NextResponse.json(
+      { error: 'Failed to update design' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * DELETE /api/designs/:id - Delete a design
+ */
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const deleted = serverStorage.deleteDesign(id);
+
+    if (!deleted) {
+      return NextResponse.json(
+        { error: 'Design not found' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Error deleting design:', error);
+    return NextResponse.json(
+      { error: 'Failed to delete design' },
+      { status: 500 }
+    );
+  }
+}

apps/playground/app/api/designs/[id]/share/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { serverStorage } from '@/lib/serverStorage';
+
+/**
+ * POST /api/designs/:id/share - Generate share link for a design
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const design = serverStorage.getDesign(id);
+
+    if (!design) {
+      return NextResponse.json(
+        { error: 'Design not found' },
+        { status: 404 }
+      );
+    }
+
+    // Generate a unique share ID
+    const shareId = crypto.randomUUID().replace(/-/g, '').substring(0, 12);
+    
+    // Store the shared design
+    serverStorage.shareDesign(id, shareId);
+
+    // Generate the share URL
+    const baseUrl = request.nextUrl.origin;
+    const shareUrl = `${baseUrl}/studio/shared/${shareId}`;
+
+    return NextResponse.json({ shareUrl, shareId });
+  } catch (error) {
+    console.error('Error sharing design:', error);
+    return NextResponse.json(
+      { error: 'Failed to share design' },
+      { status: 500 }
+    );
+  }
+}

apps/playground/app/api/designs/route.ts

@@ -0,0 +1,59 @@
+import { NextRequest, NextResponse } from 'next/server';
+import type { Design } from '@/lib/designStorage';
+import { serverStorage } from '@/lib/serverStorage';
+
+/**
+ * GET /api/designs - List all designs
+ */
+export async function GET() {
+  try {
+    const allDesigns = serverStorage.getAllDesigns();
+    return NextResponse.json(allDesigns);
+  } catch (error) {
+    console.error('Error fetching designs:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch designs' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * POST /api/designs - Create new design
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { name, description, schema, tags } = body;
+
+    if (!name || !schema) {
+      return NextResponse.json(
+        { error: 'Name and schema are required' },
+        { status: 400 }
+      );
+    }
+
+    const id = `design_${crypto.randomUUID()}`;
+    const now = new Date().toISOString();
+
+    const newDesign: Design = {
+      id,
+      name,
+      description,
+      schema,
+      tags: tags || [],
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    serverStorage.createDesign(newDesign);
+
+    return NextResponse.json(newDesign, { status: 201 });
+  } catch (error) {
+    console.error('Error creating design:', error);
+    return NextResponse.json(
+      { error: 'Failed to create design' },
+      { status: 500 }
+    );
+  }
+}

apps/playground/app/api/designs/shared/[shareId]/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { serverStorage } from '@/lib/serverStorage';
+
+/**
+ * GET /api/designs/shared/:shareId - Get a shared design
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ shareId: string }> }
+) {
+  try {
+    const { shareId } = await params;
+    const design = serverStorage.getSharedDesign(shareId);
+
+    if (!design) {
+      return NextResponse.json(
+        { error: 'Shared design not found' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(design);
+  } catch (error) {
+    console.error('Error fetching shared design:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch shared design' },
+      { status: 500 }
+    );
+  }
+}

apps/playground/lib/serverStorage.ts

@@ -0,0 +1,69 @@
+/**
+ * Server-side Design Storage
+ * 
+ * This module provides centralized storage for designs on the server.
+ * Currently uses in-memory storage for simplicity.
+ * 
+ * TODO: Replace with persistent storage (e.g., Vercel KV, database)
+ */
+
+import type { Design } from './designStorage';
+
+// In-memory storage maps (shared across all API routes)
+const designs = new Map<string, Design>();
+const sharedDesigns = new Map<string, Design>();
+
+export const serverStorage = {
+  // Design operations
+  getAllDesigns(): Design[] {
+    return Array.from(designs.values());
+  },
+
+  getDesign(id: string): Design | null {
+    return designs.get(id) || null;
+  },
+
+  createDesign(design: Design): Design {
+    designs.set(design.id, design);
+    return design;
+  },
+
+  updateDesign(id: string, updates: Partial<Design>): Design | null {
+    const existing = designs.get(id);
+    if (!existing) return null;
+
+    const updated = {
+      ...existing,
+      ...updates,
+      id: existing.id, // Preserve ID
+      createdAt: existing.createdAt, // Preserve creation date
+      updatedAt: new Date().toISOString(),
+    };
+
+    designs.set(id, updated);
+    return updated;
+  },
+
+  deleteDesign(id: string): boolean {
+    return designs.delete(id);
+  },
+
+  // Shared design operations
+  shareDesign(id: string, shareId: string): boolean {
+    const design = designs.get(id);
+    if (!design) return false;
+
+    sharedDesigns.set(shareId, design);
+    return true;
+  },
+
+  getSharedDesign(shareId: string): Design | null {
+    return sharedDesigns.get(shareId) || null;
+  },
+
+  // Utility
+  clearAll(): void {
+    designs.clear();
+    sharedDesigns.clear();
+  },
+};