@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/GraphQLExplorer.tsx

@@ -1,675 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-
-interface TypeInfo {
-  name: string;
-  kind: string;
-  description?: string;
-  fields?: FieldInfo[];
-  inputFields?: FieldInfo[];
-  enumValues?: { name: string; description?: string; isDeprecated: boolean }[];
-  isDeprecated?: boolean;
-}
-
-interface FieldInfo {
-  name: string;
-  description?: string;
-  type: string;
-  args: ArgInfo[];
-  isDeprecated?: boolean;
-  deprecationReason?: string;
-}
-
-interface ArgInfo {
-  name: string;
-  description?: string;
-  type: { name?: string; kind?: string } | string;
-  defaultValue?: string;
-}
-
-interface SchemaInfo {
-  queryType: { name: string };
-  mutationType?: { name: string };
-  subscriptionType?: { name: string };
-  types: TypeInfo[];
-}
-
-export function GraphQLExplorer({
-  endpoint = "/api/graphql",
-}: {
-  endpoint?: string;
-}) {
-  const [schema, setSchema] = useState<SchemaInfo | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [selectedType, setSelectedType] = useState<TypeInfo | null>(null);
-  const [activeSection, setActiveSection] = useState<
-    "types" | "queries" | "mutations"
-  >("types");
-  const [expandedTypes, setExpandedTypes] = useState<Set<string>>(new Set());
-
-  const fetchSchema = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const response = await fetch(endpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          query: `
-            {
-              __schema {
-                queryType { name }
-                mutationType { name }
-                subscriptionType { name }
-                types {
-                  name
-                  kind
-                  description
-                  fields {
-                    name
-                    description
-                    type { name kind }
-                    args {
-                      name
-                      description
-                      type { name kind }
-                      defaultValue
-                    }
-                    isDeprecated
-                    deprecationReason
-                  }
-                  inputFields {
-                    name
-                    description
-                    type { name kind }
-                    defaultValue
-                  }
-                  enumValues {
-                    name
-                    description
-                    isDeprecated
-                  }
-                }
-              }
-            }
-          `,
-        }),
-      });
-
-      const data = await response.json();
-      if (data.errors) {
-        setError(data.errors[0]?.message || "Failed to fetch schema");
-        return;
-      }
-      setSchema(data.data.__schema);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to connect");
-    } finally {
-      setLoading(false);
-    }
-  }, [endpoint]);
-
-  useEffect(() => {
-    fetchSchema();
-  }, [fetchSchema]);
-
-  const scalarTypes = [
-    "String",
-    "Int",
-    "Float",
-    "Boolean",
-    "ID",
-    "JSON",
-    "DateTime",
-  ];
-  const builtInTypes = [
-    "Query",
-    "Mutation",
-    "Subscription",
-    "__Schema",
-    "__Type",
-    "__Field",
-    "__InputValue",
-    "__EnumValue",
-    "__Directive",
-  ];
-
-  const filteredTypes =
-    schema?.types.filter((type) => {
-      if (
-        !type.name ||
-        builtInTypes.includes(type.name) ||
-        type.name.startsWith("__")
-      )
-        return false;
-      if (!searchQuery) return true;
-      const query = searchQuery.toLowerCase();
-      if (type.name.toLowerCase().includes(query)) return true;
-      if (type.description?.toLowerCase().includes(query)) return true;
-      return false;
-    }) || [];
-
-  const queryTypes =
-    schema?.types.filter((t) => t.name === schema.queryType?.name) || [];
-  const mutationTypes =
-    schema?.types.filter((t) => t.name === schema.mutationType?.name) || [];
-
-  const toggleType = (name: string) => {
-    setExpandedTypes((prev) => {
-      const next = new Set(prev);
-      if (next.has(name)) next.delete(name);
-      else next.add(name);
-      return next;
-    });
-  };
-
-  const getTypeColor = (kind: string) => {
-    switch (kind) {
-      case "OBJECT":
-        return "text-blue-400";
-      case "INPUT_OBJECT":
-        return "text-orange-400";
-      case "ENUM":
-        return "text-purple-400";
-      case "INTERFACE":
-        return "text-green-400";
-      case "SCALAR":
-        return "text-yellow-400";
-      case "UNION":
-        return "text-pink-400";
-      default:
-        return "text-gray-400";
-    }
-  };
-
-  const formatType = (type: any): string => {
-    if (!type) return "Unknown";
-    if (type.name) return type.name;
-    if (type.kind === "NON_NULL") return `${formatType(type.ofType)}!`;
-    if (type.kind === "LIST") return `[${formatType(type.ofType)}]`;
-    return type.kind || "Unknown";
-  };
-
-  const generateExample = (
-    type: TypeInfo,
-    operation: "query" | "mutation" = "query",
-  ): string => {
-    const fields =
-      type.fields?.filter((f) => !f.isDeprecated).slice(0, 5) || [];
-    const fieldList = fields.map((f) => `      ${f.name}`).join("\n");
-
-    if (operation === "query") {
-      return `query Get${type.name} {
-  ${type.name.toLowerCase().replace(/_type$/, "")} {
-${fieldList}
-  }
-}`;
-    } else {
-      return `mutation Create${type.name} {
-  create${type.name}(input: {}) {
-${fieldList}
-  }
-}`;
-    }
-  };
-
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-center">
-          <div className="animate-spin w-12 h-12 border-2 border-pink-500 border-t-transparent rounded-full mx-auto mb-4" />
-          <p className="text-[var(--kyro-text-secondary)]">
-            Fetching schema...
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-center max-w-md">
-          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-red-500/10 flex items-center justify-center">
-            <svg
-              className="w-8 h-8 text-red-500"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              />
-            </svg>
-          </div>
-          <h3 className="text-lg font-bold text-[var(--kyro-text-primary)] mb-2">
-            Connection Error
-          </h3>
-          <p className="text-sm text-[var(--kyro-text-secondary)] mb-4">
-            {error}
-          </p>
-          <button type="button"
-            onClick={fetchSchema}
-            className="px-4 py-2 bg-pink-500 text-white rounded-lg font-bold text-sm hover:bg-pink-600"
-          >
-            Retry
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full flex gap-6">
-      {/* Left Panel - Type List */}
-      <div className="w-80 flex-shrink-0 flex flex-col">
-        {/* Search */}
-        <div className="mb-4">
-          <div className="relative">
-            <svg
-              className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              />
-            </svg>
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search types..."
-              className="w-full pl-10 pr-4 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg text-sm focus:outline-none focus:border-pink-500"
-            />
-          </div>
-        </div>
-
-        {/* Section Tabs */}
-        <div className="flex gap-1 mb-4">
-          {(["types", "queries", "mutations"] as const).map((section) => (
-            <button type="button"
-              key={section}
-              onClick={() => setActiveSection(section)}
-              className={`flex-1 px-3 py-1.5 text-xs font-bold rounded transition-colors ${
-                activeSection === section
-                  ? "bg-pink-500 text-white"
-                  : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
-              }`}
-            >
-              {section.charAt(0).toUpperCase() + section.slice(1)}
-            </button>
-          ))}
-        </div>
-
-        {/* Type List */}
-        <div className="flex-1 overflow-y-auto space-y-1">
-          {activeSection === "types" &&
-            filteredTypes.map((type) => (
-              <button type="button"
-                key={type.name}
-                onClick={() => {
-                  setSelectedType(type);
-                  toggleType(type.name);
-                }}
-                className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
-                  selectedType?.name === type.name
-                    ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-                    : "hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
-                }`}
-              >
-                <div className="flex items-center gap-2">
-                  <span
-                    className={`text-xs font-mono ${getTypeColor(type.kind)}`}
-                  >
-                    {type.kind === "OBJECT"
-                      ? "{ }"
-                      : type.kind === "ENUM"
-                        ? "[ ]"
-                        : type.kind === "INPUT_OBJECT"
-                          ? "( )"
-                          : "~"}
-                  </span>
-                  <span className="font-medium">{type.name}</span>
-                </div>
-                {type.description && (
-                  <p className="text-xs text-[var(--kyro-text-muted)] mt-1 line-clamp-2">
-                    {type.description}
-                  </p>
-                )}
-              </button>
-            ))}
-
-          {activeSection === "queries" &&
-            queryTypes.map((type) => (
-              <div key={type.name}>
-                <div className="px-3 py-2 text-xs font-bold text-[var(--kyro-text-muted)] uppercase">
-                  {type.name} Root
-                </div>
-                {type.fields?.map((field) => (
-                  <button type="button"
-                    key={field.name}
-                    onClick={() => {
-                      const queryType = schema?.types.find((t) => {
-                        const fieldType = field.type as any;
-                        return t.name === (fieldType?.name || fieldType);
-                      });
-                      if (queryType) setSelectedType(queryType);
-                    }}
-                    className="w-full text-left px-3 py-2 rounded-lg text-sm hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
-                  >
-                    <span className="text-green-400 font-mono">
-                      {field.name}
-                    </span>
-                    {field.args.length > 0 && (
-                      <span className="text-[var(--kyro-text-muted)]">
-                        ({field.args.length} args)
-                      </span>
-                    )}
-                  </button>
-                ))}
-              </div>
-            ))}
-
-          {activeSection === "mutations" && (
-            <>
-              {mutationTypes.length === 0 && (
-                <p className="text-sm text-[var(--kyro-text-muted)] px-3 py-4 text-center">
-                  No mutations available
-                </p>
-              )}
-              {mutationTypes.map((type) => (
-                <div key={type.name}>
-                  <div className="px-3 py-2 text-xs font-bold text-[var(--kyro-text-muted)] uppercase">
-                    {type.name} Root
-                  </div>
-                  {type.fields?.map((field) => (
-                    <button type="button"
-                      key={field.name}
-                      onClick={() => {
-                        const mutationType = schema?.types.find((t) => {
-                          const fieldType = field.type as any;
-                          return t.name === (fieldType?.name || fieldType);
-                        });
-                        if (mutationType) setSelectedType(mutationType);
-                      }}
-                      className="w-full text-left px-3 py-2 rounded-lg text-sm hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
-                    >
-                      <span className="text-red-400 font-mono">
-                        {field.name}
-                      </span>
-                      {field.args.length > 0 && (
-                        <span className="text-[var(--kyro-text-muted)]">
-                          ({field.args.length} args)
-                        </span>
-                      )}
-                    </button>
-                  ))}
-                </div>
-              ))}
-            </>
-          )}
-        </div>
-      </div>
-
-      {/* Right Panel - Type Details */}
-      <div className="flex-1 flex flex-col min-w-0">
-        {selectedType ? (
-          <>
-            {/* Type Header */}
-            <div className="mb-6">
-              <div className="flex items-center gap-3 mb-2">
-                <span
-                  className={`text-xs font-mono px-2 py-1 rounded bg-[var(--kyro-surface-accent)] ${getTypeColor(selectedType.kind)}`}
-                >
-                  {selectedType.kind}
-                </span>
-                <h2 className="text-2xl font-black text-[var(--kyro-text-primary)]">
-                  {selectedType.name}
-                </h2>
-              </div>
-              {selectedType.description && (
-                <p className="text-sm text-[var(--kyro-text-secondary)]">
-                  {selectedType.description}
-                </p>
-              )}
-            </div>
-
-            {/* Quick Actions */}
-            <div className="flex gap-2 mb-6">
-              <button type="button"
-                onClick={() =>
-                  copyToClipboard(generateExample(selectedType, "query"))
-                }
-                className="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg text-sm hover:bg-[var(--kyro-surface)] transition-colors"
-              >
-                <svg
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
-                  />
-                </svg>
-                Copy Query
-              </button>
-              <button type="button"
-                onClick={() =>
-                  copyToClipboard(generateExample(selectedType, "mutation"))
-                }
-                className="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg text-sm hover:bg-[var(--kyro-surface)] transition-colors"
-              >
-                <svg
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M12 4v16m8-8H4"
-                  />
-                </svg>
-                Copy Mutation
-              </button>
-              <a
-                href={`/admin/graphql?query=${encodeURIComponent(generateExample(selectedType, "query"))}`}
-                className="flex items-center gap-2 px-4 py-2 bg-pink-500 text-white rounded-lg text-sm hover:bg-pink-600 transition-colors"
-              >
-                <svg
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M13 10V3L4 14h7v7l9-11h-7z"
-                  />
-                </svg>
-                Open in Playground
-              </a>
-            </div>
-
-            {/* Fields */}
-            {selectedType.fields && selectedType.fields.length > 0 && (
-              <div className="mb-6">
-                <h3 className="text-sm font-bold text-[var(--kyro-text-primary)] mb-3">
-                  Fields
-                </h3>
-                <div className="space-y-3">
-                  {selectedType.fields.map((field) => (
-                    <div
-                      key={field.name}
-                      className="p-4 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)]"
-                    >
-                      <div className="flex items-start justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <code className="text-sm font-mono text-pink-400">
-                            {field.name}
-                          </code>
-                          {field.args.length > 0 && (
-                            <span className="text-xs text-[var(--kyro-text-muted)]">
-                              ({field.args.map((a) => a.name).join(", ")})
-                            </span>
-                          )}
-                          <span className="text-xs text-[var(--kyro-text-muted)]">
-                            :
-                          </span>
-                          <code className="text-sm font-mono text-blue-400">
-                            {formatType(field.type as any)}
-                          </code>
-                        </div>
-                        {field.isDeprecated && (
-                          <span className="px-2 py-0.5 bg-yellow-500/10 text-yellow-500 text-xs rounded">
-                            Deprecated
-                          </span>
-                        )}
-                      </div>
-                      {field.description && (
-                        <p className="text-xs text-[var(--kyro-text-secondary)] mb-2">
-                          {field.description}
-                        </p>
-                      )}
-                      {field.deprecationReason && (
-                        <p className="text-xs text-yellow-500 italic">
-                          {field.deprecationReason}
-                        </p>
-                      )}
-                      {field.args.length > 0 && (
-                        <div className="mt-2 pl-4 border-l-2 border-[var(--kyro-border)]">
-                          <p className="text-xs font-bold text-[var(--kyro-text-muted)] mb-1">
-                            Arguments:
-                          </p>
-                          {field.args.map((arg) => (
-                            <div
-                              key={arg.name}
-                              className="flex items-center gap-2 text-xs"
-                            >
-                              <code className="text-[var(--kyro-text-secondary)]">
-                                {arg.name}
-                              </code>
-                              <span className="text-[var(--kyro-text-muted)]">
-                                :
-                              </span>
-                              <code className="text-blue-400">
-                                {formatType(arg.type as any)}
-                              </code>
-                              {arg.defaultValue && (
-                                <span className="text-[var(--kyro-text-muted)]">
-                                  = {arg.defaultValue}
-                                </span>
-                              )}
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Input Fields */}
-            {selectedType.inputFields &&
-              selectedType.inputFields.length > 0 && (
-                <div className="mb-6">
-                  <h3 className="text-sm font-bold text-[var(--kyro-text-primary)] mb-3">
-                    Input Fields
-                  </h3>
-                  <div className="space-y-2">
-                    {selectedType.inputFields.map((field) => (
-                      <div
-                        key={field.name}
-                        className="flex items-center gap-3 p-3 bg-[var(--kyro-surface-accent)] rounded-lg"
-                      >
-                        <code className="text-sm font-mono text-orange-400">
-                          {field.name}
-                        </code>
-                        <span className="text-[var(--kyro-text-muted)]">:</span>
-                        <code className="text-sm font-mono text-blue-400">
-                          {formatType(field.type as any)}
-                        </code>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-            {/* Enum Values */}
-            {selectedType.enumValues && selectedType.enumValues.length > 0 && (
-              <div className="mb-6">
-                <h3 className="text-sm font-bold text-[var(--kyro-text-primary)] mb-3">
-                  Enum Values
-                </h3>
-                <div className="grid grid-cols-2 gap-2">
-                  {selectedType.enumValues.map((value) => (
-                    <div
-                      key={value.name}
-                      className={`p-3 rounded-lg border ${
-                        value.isDeprecated
-                          ? "bg-yellow-500/5 border-yellow-500/20"
-                          : "bg-[var(--kyro-surface-accent)] border-[var(--kyro-border)]"
-                      }`}
-                    >
-                      <code className="text-sm font-mono text-purple-400">
-                        {value.name}
-                      </code>
-                      {value.isDeprecated && (
-                        <span className="ml-2 text-xs text-yellow-500">
-                          Deprecated
-                        </span>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </>
-        ) : (
-          <div className="flex-1 flex items-center justify-center">
-            <div className="text-center">
-              <svg
-                className="w-16 h-16 mx-auto mb-4 text-[var(--kyro-text-muted)] opacity-50"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="1.5"
-                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                />
-              </svg>
-              <p className="text-[var(--kyro-text-secondary)]">
-                Select a type to view its details
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/Icons.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Menu, Home, Database, User } from 'lucide-react';
-
-interface IconProps {
-  size?: number;
-  className?: string;
-}
-
-export const MenuIcon: React.FC<IconProps> = ({ size = 24, className = '' }) => (
-  <Menu size={size} className={className} />
-);
-
-export const HomeIcon: React.FC<IconProps> = ({ size = 18, className = '' }) => (
-  <Home size={size} className={className} />
-);
-
-export const DatabaseIcon: React.FC<IconProps> = ({ size = 18, className = '' }) => (
-  <Database size={size} className={className} />
-);
-
-export const UserIcon: React.FC<IconProps> = ({ size = 20, className = '' }) => (
-  <User size={size} className={className} />
-);