Custom Components CMS Feature

apps/cms/src/app/(main)/[workspace]/(workspace)/components/page-client.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { Button } from "@marble/ui/components/button";
+import { PlusIcon, PuzzlePieceIcon } from "@phosphor-icons/react";
+import { useQuery } from "@tanstack/react-query";
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { type CustomComponent, columns } from "@/components/components/columns";
+import { ComponentsDataTable } from "@/components/components/data-table";
+import { WorkspacePageWrapper } from "@/components/layout/wrapper";
+import PageLoader from "@/components/shared/page-loader";
+import { useWorkspaceId } from "@/hooks/use-workspace-id";
+import { QUERY_KEYS } from "@/lib/queries/keys";
+
+const ComponentModal = dynamic(() =>
+  import("@/components/components/component-modals").then(
+    (mod) => mod.ComponentModal
+  )
+);
+
+export default function PageClient() {
+  const workspaceId = useWorkspaceId();
+  const [showCreateModal, setShowCreateModal] = useState(false);
+
+  const { data: components, isLoading } = useQuery({
+    // biome-ignore lint/style/noNonNullAssertion: <>
+    queryKey: QUERY_KEYS.CUSTOM_COMPONENTS(workspaceId!),
+    staleTime: 1000 * 60 * 60,
+    queryFn: async () => {
+      const res = await fetch("/api/custom-components");
+      if (!res.ok) {
+        throw new Error("Failed to fetch components");
+      }
+      const data: CustomComponent[] = await res.json();
+      return data;
+    },
+    enabled: !!workspaceId,
+  });
+
+  if (isLoading) {
+    return <PageLoader />;
+  }
+
+  return (
+    <>
+      {components && components.length > 0 ? (
+        <WorkspacePageWrapper className="flex flex-col gap-8 pt-10 pb-16">
+          <ComponentsDataTable columns={columns} data={components} />
+        </WorkspacePageWrapper>
+      ) : (
+        <WorkspacePageWrapper className="grid h-full place-content-center">
+          <div className="flex max-w-80 flex-col items-center gap-4">
+            <div className="p-2">
+              <PuzzlePieceIcon className="size-16" />
+            </div>
+            <div className="flex flex-col items-center gap-4 text-center">
+              <p className="text-muted-foreground text-sm">
+                Custom components help you build reusable content blocks. Create
+                your first component to get started.
+              </p>
+              <Button
+                className="cursor-pointer"
+                onClick={() => setShowCreateModal(true)}
+              >
+                <PlusIcon size={16} />
+                <span>Create Component</span>
+              </Button>
+            </div>
+          </div>
+        </WorkspacePageWrapper>
+      )}
+      <ComponentModal
+        mode="create"
+        open={showCreateModal}
+        setOpen={setShowCreateModal}
+      />
+    </>
+  );
+}

apps/cms/src/app/(main)/[workspace]/(workspace)/components/page.tsx

@@ -0,0 +1,12 @@
+import PageClient from "./page-client";
+
+export const metadata = {
+  title: "Components",
+  description: "Manage your custom components",
+};
+
+function Page() {
+  return <PageClient />;
+}
+
+export default Page;

apps/cms/src/app/api/custom-components/[id]/route.ts

@@ -0,0 +1,181 @@
+import { db } from "@marble/db";
+import { type NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "@/lib/auth/session";
+import {
+  type ComponentPropertyValues,
+  componentUpdateSchema,
+} from "@/lib/validations/components";
+
+type PropertyType =
+  | "string"
+  | "number"
+  | "boolean"
+  | "date"
+  | "email"
+  | "url"
+  | "textarea"
+  | "select";
+
+export async function PATCH(
+  req: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const sessionData = await getServerSession();
+
+  if (!sessionData || !sessionData.session.activeOrganizationId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const { id } = await params;
+
+  try {
+    const json = await req.json();
+    const validatedData = componentUpdateSchema.parse(json);
+    const { name, technicalName, description, properties } = validatedData;
+    const existingComponent = await db.customComponent.findUnique({
+      where: { id },
+      include: { properties: true },
+    });
+
+    if (!existingComponent) {
+      return NextResponse.json(
+        { error: "Custom component not found" },
+        { status: 404 }
+      );
+    }
+
+    const updatedComponent = await db.$transaction(async (tx) => {
+      await tx.componentProperty.deleteMany({
+        where: { customComponentId: id },
+      });
+
+      return await tx.customComponent.update({
+        where: { id },
+        data: {
+          name,
+          technicalName,
+          description,
+          properties: {
+            create:
+              properties?.map((prop: ComponentPropertyValues) => ({
+                name: prop.name,
+                type: prop.type as PropertyType,
+                required: prop.required || false,
+                defaultValue: prop.defaultValue,
+                options: prop.options,
+              })) || [],
+          },
+        },
+        include: {
+          properties: true,
+        },
+      });
+    });
+
+    return NextResponse.json(updatedComponent);
+  } catch (error) {
+    console.error("Error updating custom component:", error);
+
+    // Handle Zod validation errors
+    if (error instanceof Error && error.name === "ZodError") {
+      const zodError = error as unknown as {
+        errors: { path: string[]; message: string }[];
+      };
+      return NextResponse.json(
+        {
+          error: "Validation failed",
+          details: zodError.errors?.map((e) => ({
+            field: e.path.join("."),
+            message: e.message,
+          })),
+        },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json(
+      { error: "Failed to update custom component" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(
+  _req: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const sessionData = await getServerSession();
+
+  if (!sessionData || !sessionData.session.activeOrganizationId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const { id } = await params;
+
+  const existingComponent = await db.customComponent.findUnique({
+    where: { id, workspaceId: sessionData.session.activeOrganizationId },
+  });
+
+  if (!existingComponent) {
+    return NextResponse.json(
+      { error: "Custom component not found" },
+      { status: 404 }
+    );
+  }
+
+  try {
+    await db.customComponent.delete({
+      where: {
+        id,
+        workspaceId: sessionData.session.activeOrganizationId,
+      },
+    });
+
+    return NextResponse.json({
+      message: "Custom component deleted successfully",
+    });
+  } catch (error) {
+    console.error("Error deleting custom component:", error);
+    return NextResponse.json(
+      { error: "Failed to delete custom component" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const sessionData = await getServerSession();
+
+  if (!sessionData || !sessionData.session.activeOrganizationId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const { id } = await params;
+
+  try {
+    const customComponent = await db.customComponent.findUnique({
+      where: { id, workspaceId: sessionData.session.activeOrganizationId },
+      include: {
+        properties: true,
+      },
+    });
+
+    if (!customComponent) {
+      return NextResponse.json(
+        { error: "Custom component not found" },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(customComponent);
+  } catch (error) {
+    console.error("Error fetching custom component:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch custom component" },
+      { status: 500 }
+    );
+  }
+}