@kyro-cms/admin 0.3.1 → 0.3.4

package/src/collections/portfolio/index.ts

@@ -1,343 +0,0 @@
-import type { CollectionConfig } from "@kyro-cms/core";
-
-export const portfolioCollections: Record<string, CollectionConfig> = {
-  projects: {
-    slug: "projects",
-    label: "Projects",
-    labelPlural: "Projects",
-    singularLabel: "Project",
-    admin: {
-      useAsTitle: "title",
-      defaultColumns: ["title", "featured", "status", "createdAt"],
-      description: "Portfolio projects and case studies",
-    },
-    fields: [
-      {
-        name: "title",
-        type: "text",
-        required: true,
-        label: "Title",
-        admin: { description: "Project title" },
-      },
-      {
-        name: "slug",
-        type: "text",
-        required: true,
-        label: "Slug",
-        admin: { description: "URL-friendly identifier" },
-      },
-      {
-        name: "client",
-        type: "text",
-        label: "Client",
-        admin: { description: "Client name" },
-      },
-      {
-        name: "description",
-        type: "richtext",
-        label: "Description",
-        admin: { description: "Project description" },
-      },
-      {
-        name: "featuredImage",
-        type: "upload",
-        label: "Featured Image",
-        relationTo: "media",
-        admin: { description: "Main project image" },
-      },
-      {
-        name: "gallery",
-        type: "array",
-        label: "Gallery",
-        fields: [
-          {
-            name: "image",
-            type: "upload",
-            label: "Image",
-            relationTo: "media",
-          },
-          {
-            name: "caption",
-            type: "text",
-            label: "Caption",
-          },
-        ],
-        admin: { description: "Additional project images" },
-      },
-      {
-        name: "technologies",
-        type: "array",
-        label: "Technologies",
-        fields: [
-          {
-            name: "name",
-            type: "text",
-            label: "Technology",
-          },
-        ],
-        admin: { description: "Tools and technologies used" },
-      },
-      {
-        name: "link",
-        type: "text",
-        label: "Project URL",
-        admin: { description: "Live project link" },
-      },
-      {
-        name: "github",
-        type: "text",
-        label: "GitHub URL",
-        admin: { description: "Repository link" },
-      },
-      {
-        name: "featured",
-        type: "checkbox",
-        label: "Featured",
-        defaultValue: false,
-        admin: { description: "Show on homepage" },
-      },
-      {
-        name: "status",
-        type: "select",
-        label: "Status",
-        options: [
-          { label: "Draft", value: "draft" },
-          { label: "Published", value: "published" },
-          { label: "Archived", value: "archived" },
-        ],
-        defaultValue: "draft",
-      },
-      {
-        name: "order",
-        type: "number",
-        label: "Display Order",
-        defaultValue: 0,
-        admin: { description: "Sort order" },
-      },
-      {
-        name: "completedAt",
-        type: "date",
-        label: "Completed At",
-        admin: { description: "Project completion date" },
-      },
-    ],
-    timestamps: true,
-  },
-
-  team: {
-    slug: "team",
-    label: "Team Members",
-    labelPlural: "Team Members",
-    singularLabel: "Team Member",
-    admin: {
-      useAsTitle: "name",
-      defaultColumns: ["name", "role", "order", "createdAt"],
-      description: "Team members and staff",
-    },
-    fields: [
-      {
-        name: "name",
-        type: "text",
-        required: true,
-        label: "Name",
-        admin: { description: "Full name" },
-      },
-      {
-        name: "role",
-        type: "text",
-        required: true,
-        label: "Role",
-        admin: { description: "Job title or role" },
-      },
-      {
-        name: "bio",
-        type: "markdown",
-        label: "Bio",
-        admin: { description: "Short biography" },
-      },
-      {
-        name: "photo",
-        type: "upload",
-        label: "Photo",
-        relationTo: "media",
-        admin: { description: "Profile photo" },
-      },
-      {
-        name: "gallery",
-        type: "array",
-        label: "Gallery",
-        fields: [
-          {
-            name: "image",
-            type: "upload",
-            label: "Image",
-            relationTo: "media",
-          },
-          {
-            name: "caption",
-            type: "text",
-            label: "Caption",
-          },
-        ],
-        admin: { description: "Additional photos" },
-      },
-      {
-        name: "email",
-        type: "email",
-        label: "Email",
-        admin: { description: "Contact email" },
-      },
-      {
-        name: "phone",
-        type: "text",
-        label: "Phone",
-        admin: { description: "Contact phone" },
-      },
-      {
-        name: "linkedin",
-        type: "text",
-        label: "LinkedIn",
-        admin: { description: "LinkedIn profile URL" },
-      },
-      {
-        name: "twitter",
-        type: "text",
-        label: "Twitter",
-        admin: { description: "Twitter handle" },
-      },
-      {
-        name: "github",
-        type: "text",
-        label: "GitHub",
-        admin: { description: "GitHub profile URL" },
-      },
-      {
-        name: "website",
-        type: "text",
-        label: "Website",
-        admin: { description: "Personal website" },
-      },
-      {
-        name: "order",
-        type: "number",
-        label: "Display Order",
-        defaultValue: 0,
-        admin: { description: "Sort order" },
-      },
-      {
-        name: "status",
-        type: "select",
-        label: "Status",
-        options: [
-          { label: "Active", value: "active" },
-          { label: "Inactive", value: "inactive" },
-        ],
-        defaultValue: "active",
-      },
-    ],
-    timestamps: true,
-  },
-
-  menus: {
-    slug: "menus",
-    label: "Menus",
-    labelPlural: "Menus",
-    singularLabel: "Menu",
-    admin: {
-      useAsTitle: "name",
-      defaultColumns: ["name", "location", "createdAt"],
-      description: "Navigation menus",
-    },
-    fields: [
-      {
-        name: "name",
-        type: "text",
-        required: true,
-        label: "Name",
-        admin: { description: "Menu name" },
-      },
-      {
-        name: "location",
-        type: "select",
-        label: "Location",
-        required: true,
-        options: [
-          { label: "Header", value: "header" },
-          { label: "Footer", value: "footer" },
-          { label: "Mobile", value: "mobile" },
-          { label: "Sidebar", value: "sidebar" },
-        ],
-        admin: { description: "Where to display this menu" },
-      },
-      {
-        name: "items",
-        type: "array",
-        label: "Menu Items",
-        admin: { description: "Navigation items" },
-        fields: [
-          {
-            name: "label",
-            type: "text",
-            label: "Label",
-          },
-          {
-            name: "url",
-            type: "text",
-            label: "URL",
-            admin: { description: "Link address" },
-          },
-          {
-            name: "target",
-            type: "select",
-            label: "Target",
-            options: [
-              { label: "Same tab", value: "_self" },
-              { label: "New tab", value: "_blank" },
-            ],
-            defaultValue: "_self",
-          },
-          {
-            name: "icon",
-            type: "text",
-            label: "Icon",
-            admin: { description: "Icon name" },
-          },
-          {
-            name: "order",
-            type: "number",
-            label: "Order",
-            defaultValue: 0,
-          },
-          {
-            name: "children",
-            type: "array",
-            label: "Sub-items",
-            fields: [
-              {
-                name: "label",
-                type: "text",
-                label: "Label",
-              },
-              {
-                name: "url",
-                type: "text",
-                label: "URL",
-              },
-              {
-                name: "target",
-                type: "select",
-                label: "Target",
-                options: [
-                  { label: "Same tab", value: "_self" },
-                  { label: "New tab", value: "_blank" },
-                ],
-                defaultValue: "_self",
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    timestamps: true,
-  },
-};

package/src/components/ApiExplorer.tsx

@@ -1,325 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-
-interface Collection {
-  name: string;
-  slug: string;
-  fields: number;
-  endpoints: {
-    list: string;
-    create: string;
-    read: string;
-    update: string;
-    delete: string;
-  };
-}
-
-interface ApiExplorerProps {
-  collections: Collection[];
-}
-
-export function ApiExplorer({ collections }: ApiExplorerProps) {
-  const [selectedEndpoint, setSelectedEndpoint] = useState<{
-    collection: string;
-    method: string;
-    url: string;
-    description: string;
-  } | null>(null);
-  const [response, setResponse] = useState<string>("");
-  const [loading, setLoading] = useState(false);
-  const [method, setMethod] = useState<"GET" | "POST" | "PATCH" | "DELETE">(
-    "GET",
-  );
-  const [url, setUrl] = useState("");
-  const [requestBody, setRequestBody] = useState("");
-  const [status, setStatus] = useState<number | null>(null);
-
-  useEffect(() => {
-    if (collections.length > 0) {
-      const first = collections[0];
-      setSelectedEndpoint({
-        collection: first.slug,
-        method: "GET",
-        url: `/api/${first.slug}`,
-        description: `List all ${first.name}`,
-      });
-      setUrl(`/api/${first.slug}`);
-    }
-  }, [collections]);
-
-  const handleEndpointClick = useCallback(
-    (endpoint: typeof selectedEndpoint) => {
-      if (!endpoint) return;
-      setSelectedEndpoint(endpoint);
-      setUrl(endpoint.url);
-      setMethod(endpoint.method as "GET" | "POST" | "PATCH" | "DELETE");
-      setRequestBody("");
-      setResponse("");
-      setStatus(null);
-    },
-    [],
-  );
-
-  const executeRequest = async () => {
-    if (!url) return;
-
-    setLoading(true);
-    setResponse("");
-    setStatus(null);
-
-    try {
-      const options: RequestInit = {
-        method,
-        headers: {
-          "Content-Type": "application/json",
-        },
-      };
-
-      if (["POST", "PATCH"].includes(method) && requestBody) {
-        options.body = requestBody;
-      }
-
-      const res = await fetch(url, options);
-      setStatus(res.status);
-
-      const contentType = res.headers.get("content-type");
-      if (contentType?.includes("application/json")) {
-        const data = await res.json();
-        setResponse(JSON.stringify(data, null, 2));
-      } else {
-        const text = await res.text();
-        setResponse(text);
-      }
-    } catch (error) {
-      setResponse(
-        `Error: ${error instanceof Error ? error.message : "Unknown error"}`,
-      );
-      setStatus(500);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const getMethodColor = (m: string) => {
-    switch (m) {
-      case "GET":
-        return "bg-green-500/10 text-green-600 border-green-500/20";
-      case "POST":
-        return "bg-blue-500/10 text-blue-600 border-blue-500/20";
-      case "PATCH":
-        return "bg-yellow-500/10 text-yellow-600 border-yellow-500/20";
-      case "DELETE":
-        return "bg-red-500/10 text-red-600 border-red-500/20";
-      default:
-        return "bg-gray-500/10 text-gray-600 border-gray-500/20";
-    }
-  };
-
-  const getStatusColor = (s: number) => {
-    if (s >= 200 && s < 300) return "text-green-600 bg-green-500/10";
-    if (s >= 400 && s < 500) return "text-yellow-600 bg-yellow-500/10";
-    if (s >= 500) return "text-red-600 bg-red-500/10";
-    return "text-gray-600 bg-gray-500/10";
-  };
-
-  return (
-    <div className="h-[calc(100vh-200px)] min-h-[600px] flex gap-6">
-      {/* Sidebar - Collections */}
-      <div className="w-80 flex-shrink-0 overflow-y-auto">
-        <div className="space-y-4">
-          {collections.map((collection) => (
-            <div key={collection.slug} className="space-y-2">
-              <h3 className="font-bold text-[var(--kyro-text-primary)] px-3 py-2 bg-[var(--kyro-surface-accent)] rounded-lg">
-                {collection.name}
-              </h3>
-              <div className="space-y-1 pl-2">
-                <button type="button"
-                  onClick={() =>
-                    handleEndpointClick({
-                      collection: collection.slug,
-                      method: "GET",
-                      url: `/api/${collection.slug}`,
-                      description: `List all ${collection.name}`,
-                    })
-                  }
-                  className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
-                    selectedEndpoint?.url === `/api/${collection.slug}` &&
-                    method === "GET"
-                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-                      : "hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
-                  }`}
-                >
-                  <span
-                    className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold mr-2 ${getMethodColor("GET")}`}
-                  >
-                    GET
-                  </span>
-                  List
-                </button>
-                <button type="button"
-                  onClick={() =>
-                    handleEndpointClick({
-                      collection: collection.slug,
-                      method: "POST",
-                      url: `/api/${collection.slug}`,
-                      description: `Create new ${collection.name}`,
-                    })
-                  }
-                  className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
-                    selectedEndpoint?.url === `/api/${collection.slug}` &&
-                    method === "POST"
-                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-                      : "hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
-                  }`}
-                >
-                  <span
-                    className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold mr-2 ${getMethodColor("POST")}`}
-                  >
-                    POST
-                  </span>
-                  Create
-                </button>
-                <button type="button"
-                  onClick={() =>
-                    handleEndpointClick({
-                      collection: collection.slug,
-                      method: "GET",
-                      url: `/api/${collection.slug}/:id`,
-                      description: `Get ${collection.name} by ID`,
-                    })
-                  }
-                  className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
-                    selectedEndpoint?.url === `/api/${collection.slug}/:id` &&
-                    method === "GET"
-                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-                      : "hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
-                  }`}
-                >
-                  <span
-                    className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold mr-2 ${getMethodColor("GET")}`}
-                  >
-                    GET
-                  </span>
-                  Get by ID
-                </button>
-                <button type="button"
-                  onClick={() =>
-                    handleEndpointClick({
-                      collection: collection.slug,
-                      method: "PATCH",
-                      url: `/api/${collection.slug}/:id`,
-                      description: `Update ${collection.name}`,
-                    })
-                  }
-                  className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
-                    selectedEndpoint?.url === `/api/${collection.slug}/:id` &&
-                    method === "PATCH"
-                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-                      : "hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
-                  }`}
-                >
-                  <span
-                    className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold mr-2 ${getMethodColor("PATCH")}`}
-                  >
-                    PATCH
-                  </span>
-                  Update
-                </button>
-                <button type="button"
-                  onClick={() =>
-                    handleEndpointClick({
-                      collection: collection.slug,
-                      method: "DELETE",
-                      url: `/api/${collection.slug}/:id`,
-                      description: `Delete ${collection.name}`,
-                    })
-                  }
-                  className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
-                    selectedEndpoint?.url === `/api/${collection.slug}/:id` &&
-                    method === "DELETE"
-                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-                      : "hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
-                  }`}
-                >
-                  <span
-                    className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold mr-2 ${getMethodColor("DELETE")}`}
-                  >
-                    DEL
-                  </span>
-                  Delete
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="flex-1 flex flex-col min-w-0">
-        {/* URL Bar */}
-        <div className="flex gap-3 mb-4">
-          <select
-            value={method}
-            onChange={(e) =>
-              setMethod(e.target.value as "GET" | "POST" | "PATCH" | "DELETE")
-            }
-            className={`px-4 py-2 rounded-lg font-bold text-sm border ${getMethodColor(method)}`}
-          >
-            <option value="GET">GET</option>
-            <option value="POST">POST</option>
-            <option value="PATCH">PATCH</option>
-            <option value="DELETE">DELETE</option>
-          </select>
-          <input
-            type="text"
-            value={url}
-            onChange={(e) => setUrl(e.target.value)}
-            placeholder="/api/collection"
-            className="flex-1 px-4 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg text-sm font-mono focus:outline-none focus:border-[var(--kyro-sidebar-active)]"
-          />
-          <button type="button"
-            onClick={executeRequest}
-            disabled={loading || !url}
-            className="px-6 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm hover:opacity-90 transition-opacity disabled:opacity-50"
-          >
-            {loading ? "Sending..." : "Send"}
-          </button>
-        </div>
-
-        {/* Request Body (for POST/PATCH) */}
-        {["POST", "PATCH"].includes(method) && (
-          <div className="mb-4">
-            <label className="block text-sm font-bold text-[var(--kyro-text-secondary)] mb-2">
-              Request Body (JSON)
-            </label>
-            <textarea
-              value={requestBody}
-              onChange={(e) => setRequestBody(e.target.value)}
-              placeholder='{"field": "value"}'
-              rows={6}
-              className="w-full px-4 py-3 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg text-sm font-mono focus:outline-none focus:border-[var(--kyro-sidebar-active)] resize-y"
-            />
-          </div>
-        )}
-
-        {/* Response */}
-        <div className="flex-1 flex flex-col min-h-0">
-          <div className="flex items-center justify-between mb-2">
-            <label className="text-sm font-bold text-[var(--kyro-text-secondary)]">
-              Response
-            </label>
-            {status && (
-              <span
-                className={`px-3 py-1 rounded-lg text-sm font-bold ${getStatusColor(status)}`}
-              >
-                {status}
-              </span>
-            )}
-          </div>
-          <pre className="flex-1 p-4 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg text-xs font-mono overflow-auto whitespace-pre-wrap">
-            {response || "Send a request to see the response"}
-          </pre>
-        </div>
-      </div>
-    </div>
-  );
-}