@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/GraphQLExplorer.tsx

@@ -0,0 +1,675 @@
+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>
+  );
+}