@kyro-cms/admin 0.9.7 → 0.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "engines": {
     "node": ">=22"
   },
@@ -120,7 +120,7 @@
     "vitest": "^4.1.4"
   },
   "peerDependencies": {
-    "@kyro-cms/core": "^0.9.2",
+    "@kyro-cms/core": "^0.9.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/src/components/GraphQLPlayground.tsx

@@ -2,6 +2,7 @@ import React, {
   useState,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   Suspense,
   lazy,
@@ -52,6 +53,8 @@ const CodeMirrorEditor = lazy(() =>
   import("@uiw/react-codemirror").then((mod) => ({ default: mod.default })),
 );
 import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { CompletionContext, autocompletion } from "@codemirror/autocomplete";
 import { aura } from "@uiw/codemirror-theme-aura";
 
 function prettifyQuery(query: string): string {
@@ -71,6 +74,94 @@ function prettifyQuery(query: string): string {
   return result.trim();
 }
 
+function resolveTypeName(type: Record<string, unknown>): string {
+  if (!type) return "Unknown";
+  if (type.name) return type.name as string;
+  if (type.ofType) return resolveTypeName(type.ofType as Record<string, unknown>);
+  return "Unknown";
+}
+
+function isScalarType(typeName: string): boolean {
+  return ["String", "Int", "Float", "Boolean", "ID"].includes(typeName);
+}
+
+function generateSkeletonQuery(field: FieldInfo, schema: SchemaInfo, isMutation: boolean): string {
+  const returnTypeName = resolveTypeName(field.type);
+  const returnType = schema.types.find((t) => t.name === returnTypeName);
+
+  const scalarFields = returnType?.fields
+    ?.filter((f) => !f.isDeprecated && isScalarType(resolveTypeName(f.type)))
+    .map((f) => `    ${f.name}`) || [];
+  const listFields = returnType?.fields
+    ?.filter((f) => resolveTypeName(f.type).startsWith("["))
+    .map((f) => `    ${f.name} { id }`) || [];
+  const docField = returnType?.fields?.find((f) => f.name === "doc");
+  const messageField = returnType?.fields?.find((f) => f.name === "message");
+
+  let selection = "";
+
+  if (docField && isMutation) {
+    const docTypeName = resolveTypeName(docField.type);
+    const docType = schema.types.find((t) => t.name === docTypeName);
+    const docScalars = docType?.fields
+      ?.filter((f) => !f.isDeprecated && isScalarType(resolveTypeName(f.type)))
+      .map((f) => `    ${f.name}`) || ["    id"];
+    selection = ["  doc {", ...docScalars, "  }"]
+      .concat(messageField ? ["  message"] : [])
+      .join("\n");
+  } else {
+    selection = [...scalarFields, ...listFields].join("\n");
+  }
+
+  const args = field.args
+    ?.filter((a) => {
+      const t = renderType(a.type);
+      return t.endsWith("!");
+    })
+    .map((a) => {
+      const t = renderType(a.type).replace("!", "");
+      const val = t === "String" ? '""' : t === "Int" ? "0" : t === "Float" ? "0" : t === "Boolean" ? "false" : '""';
+      return `${a.name}: ${val}`;
+    })
+    .join(", ");
+
+  const fieldCall = `${field.name}${args ? `(${args})` : ""}`;
+
+  if (isMutation) {
+    return `mutation {\n  ${fieldCall} {\n${selection}\n  }\n}`;
+  }
+  return `${fieldCall} {\n${selection}\n}`;
+}
+
+function buildSchemaCompletionOverride(schema: SchemaInfo) {
+  const queryType = schema.types.find((t) => t.name === schema.queryType.name);
+  const mutationType = schema.mutationType
+    ? schema.types.find((t) => t.name === schema.mutationType!.name)
+    : null;
+
+  const queryFields = queryType?.fields || [];
+  const mutationFields = mutationType?.fields || [];
+
+  const operationNames = [...queryFields.map((f) => f.name), ...mutationFields.map((f) => f.name)];
+
+  return (context: CompletionContext) => {
+    const word = context.matchBefore(/\w*/);
+    if (!word || (word.from === word.to && !context.explicit)) return null;
+    return {
+      from: word.from,
+      options: [
+        ...operationNames.map((n) => ({
+          label: n,
+          type: "function" as const,
+          detail: "operation",
+        })),
+        { label: "query", type: "keyword" as const, detail: "operation type" },
+        { label: "mutation", type: "keyword" as const, detail: "operation type" },
+      ],
+    };
+  };
+}
+
 const DEFAULT_QUERY = `# Welcome to Kyro CMS GraphQL Playground
 # Cmd+Enter to run, Cmd+Shift+P to prettify
 
@@ -163,6 +254,7 @@ export function GraphQLPlayground({
   const [splitPos, setSplitPos] = useState(50);
   const [mobilePanel, setMobilePanel] = useState<"editor" | "response">("editor");
   const [isDragging, setIsDragging] = useState(false);
+  const [isDesktop, setIsDesktop] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const cursorPos = useRef({ line: 1, col: 1 });
 
@@ -170,6 +262,13 @@ export function GraphQLPlayground({
     setIsMounted(true);
   }, []);
 
+  useEffect(() => {
+    const check = () => setIsDesktop(window.innerWidth >= 768);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+
   const fetchSchema = useCallback(async () => {
     setLoadingSchema(true);
     try {
@@ -336,7 +435,24 @@ export function GraphQLPlayground({
     setTab((prev) => ({ ...prev, query: "" }));
   };
 
-  const extensions = [javascript()];
+  const handleInsertQuery = useCallback(
+    (field: FieldInfo) => {
+      const isMutation = schema?.mutationType?.name
+        ? schema.types
+            .find((t) => t.name === schema.mutationType!.name)
+            ?.fields?.some((f) => f.name === field.name)
+        : false;
+      if (!schema) return;
+      const q = generateSkeletonQuery(field, schema, !!isMutation);
+      setTab((prev) => ({ ...prev, query: q }));
+      setRightTab("response");
+    },
+    [schema],
+  );
+
+  const queryExt = useMemo(() => [javascript(), schema ? autocompletion({ override: [buildSchemaCompletionOverride(schema)] }) : []].flat(), [schema]);
+  const jsonExt = useMemo(() => [json()], []);
+  const extensions = activeEditorTab === "query" ? queryExt : jsonExt;
   const theme = aura;
 
   const renderType = (type: Record<string, unknown>): string => {
@@ -478,7 +594,7 @@ export function GraphQLPlayground({
         </div>
 
         {/* Left: editor */}
-        <div className={`${mobilePanel === "editor" ? "flex" : "hidden"} md:flex flex-col overflow-hidden border-r border-[var(--kyro-border)] w-full md:w-auto`} style={{ flex: 'none', width: typeof window !== "undefined" && window.innerWidth >= 768 ? `${splitPos}%` : "100%" }}>
+        <div className={`${mobilePanel === "editor" ? "flex" : "hidden"} md:flex flex-col overflow-hidden border-r border-[var(--kyro-border)] w-full md:w-auto`} style={{ flex: 'none', width: isDesktop ? `${splitPos}%` : "100%" }}>
           {/* Editor pills */}
           <div className="flex gap-0.5 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
             {editorPills.map((p) => (
@@ -533,7 +649,7 @@ export function GraphQLPlayground({
         </div>
 
         {/* Right panel */}
-        <div className={`${mobilePanel === "response" ? "flex" : "hidden"} md:flex flex-1 flex-col overflow-hidden min-w-0 w-full md:w-auto`} style={{ flex: undefined, width: typeof window !== "undefined" && window.innerWidth >= 768 ? `${100 - splitPos}%` : "100%" }}>
+        <div className={`${mobilePanel === "response" ? "flex" : "hidden"} md:flex flex-1 flex-col overflow-hidden min-w-0 w-full md:w-auto`} style={{ flex: undefined, width: isDesktop ? `${100 - splitPos}%` : "100%" }}>
           {/* Right pills */}
           <div className="flex gap-0.5 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
             {rightPills.map((p) => (
@@ -584,25 +700,33 @@ export function GraphQLPlayground({
                           {selectedType.fields && (
                             <div className="space-y-2">
                               <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">Fields</h4>
-                              {selectedType.fields.map(f => (
-                                <div key={f.name} className="p-2.5 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)]">
-                                  <div className="flex items-center justify-between gap-2">
-                                    <span className="font-semibold text-[11px] text-[var(--kyro-text-primary)]">{f.name}</span>
-                                    <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
-                                  </div>
-                                  {f.description && <p className="text-[10px] text-[var(--kyro-text-secondary)] mt-1">{f.description}</p>}
-                                  {f.args && f.args.length > 0 && (
-                                    <div className="mt-1.5 pl-3 border-l-2 border-[var(--kyro-border)] space-y-0.5">
-                                      {f.args.map(a => (
-                                        <div key={a.name} className="text-[9px]">
-                                          <span className="text-[var(--kyro-text-muted)]">{a.name}:</span>{" "}
-                                          <span className="text-[var(--kyro-primary)]">{renderType(a.type)}</span>
-                                        </div>
-                                      ))}
+                              {selectedType.fields.map(f => {
+                                const isRootOp = (selectedType.name === "Query" || selectedType.name === "Mutation") && !!schema;
+                                return (
+                                  <button
+                                    key={f.name}
+                                    type="button"
+                                    onClick={isRootOp ? () => handleInsertQuery(f) : undefined}
+                                    className={`w-full text-left p-2.5 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)] transition-all ${isRootOp ? "hover:border-[var(--kyro-primary)] hover:shadow-sm cursor-pointer" : ""}`}
+                                  >
+                                    <div className="flex items-center justify-between gap-2">
+                                      <span className="font-semibold text-[11px] text-[var(--kyro-text-primary)]">{f.name}</span>
+                                      <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
                                     </div>
-                                  )}
-                                </div>
-                              ))}
+                                    {f.description && <p className="text-[10px] text-[var(--kyro-text-secondary)] mt-1">{f.description}</p>}
+                                    {f.args && f.args.length > 0 && (
+                                      <div className="mt-1.5 pl-3 border-l-2 border-[var(--kyro-border)] space-y-0.5">
+                                        {f.args.map(a => (
+                                          <div key={a.name} className="text-[9px]">
+                                            <span className="text-[var(--kyro-text-muted)]">{a.name}:</span>{" "}
+                                            <span className="text-[var(--kyro-primary)]">{renderType(a.type)}</span>
+                                          </div>
+                                        ))}
+                                      </div>
+                                    )}
+                                  </button>
+                                );
+                              })}
                             </div>
                           )}
                         </div>