@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/fields/JSONField.tsx

@@ -0,0 +1,361 @@
+import React, { useState, useCallback, useMemo, useEffect } from "react";
+import type { JSONField as JSONFieldType } from "@kyro-cms/core";
+
+interface JSONFieldProps {
+  field: JSONFieldType;
+  value?: any;
+  onChange?: (value: any) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+interface TreeNode {
+  key: string;
+  value: any;
+  type: "object" | "array" | "string" | "number" | "boolean" | "null";
+  path: string[];
+  collapsed?: boolean;
+}
+
+export const JSONField: React.FC<JSONFieldProps> = ({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}) => {
+  const [textValue, setTextValue] = useState<string>(() => {
+    if (typeof value === "string") return value;
+    return JSON.stringify(value || {}, null, 2);
+  });
+  const [parseError, setParseError] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<"text" | "tree">("text");
+  const [isMounted, setIsMounted] = useState(false);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    setIsDark(document.documentElement.classList.contains("dark"));
+
+    // Listen for theme changes
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const handleTextChange = useCallback(
+    (text: string) => {
+      setTextValue(text);
+      try {
+        const parsed = JSON.parse(text);
+        setParseError(null);
+        onChange?.(parsed);
+      } catch (e) {
+        if (text.trim()) {
+          setParseError((e as Error).message);
+        }
+      }
+    },
+    [onChange],
+  );
+
+  const formatJSON = useCallback(() => {
+    try {
+      const parsed = JSON.parse(textValue);
+      const formatted = JSON.stringify(parsed, null, 2);
+      setTextValue(formatted);
+      onChange?.(parsed);
+      setParseError(null);
+    } catch (e) {
+      setParseError((e as Error).message);
+    }
+  }, [textValue, onChange]);
+
+  const minifyJSON = useCallback(() => {
+    try {
+      const parsed = JSON.parse(textValue);
+      const minified = JSON.stringify(parsed);
+      setTextValue(minified);
+      onChange?.(parsed);
+      setParseError(null);
+    } catch (e) {
+      setParseError((e as Error).message);
+    }
+  }, [textValue, onChange]);
+
+  const treeData = useMemo(() => {
+    try {
+      const parsed = JSON.parse(textValue);
+      return buildTree(parsed, []);
+    } catch {
+      return null;
+    }
+  }, [textValue]);
+
+  if (!isMounted) {
+    return (
+      <div className="kyro-form-field">
+        <label className="kyro-form-label">
+          {field.label || field.name}
+          {field.required && (
+            <span className="kyro-form-label-required">*</span>
+          )}
+        </label>
+        <div className="h-[200px] bg-[var(--kyro-surface)] animate-pulse rounded-md border border-[var(--kyro-border)]" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="kyro-form-field">
+      <div className="flex items-center justify-between mb-2">
+        <label className="kyro-form-label">
+          {field.label || field.name}
+          {field.required && (
+            <span className="kyro-form-label-required">*</span>
+          )}
+        </label>
+        <div className="flex items-center gap-2">
+          {/* View mode toggle */}
+          <div className="flex rounded-md overflow-hidden border border-[var(--kyro-border)]">
+            <button
+              type="button"
+              onClick={() => setViewMode("text")}
+              className={`px-3 py-1 text-xs font-medium transition-colors ${
+                viewMode === "text"
+                  ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                  : "bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Text
+            </button>
+            <button
+              type="button"
+              onClick={() => setViewMode("tree")}
+              className={`px-3 py-1 text-xs font-medium transition-colors ${
+                viewMode === "tree"
+                  ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                  : "bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Tree
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Action buttons */}
+      <div className="flex items-center gap-2 mb-2">
+        <button
+          type="button"
+          onClick={formatJSON}
+          className="px-3 py-1.5 text-xs font-medium bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] rounded-md hover:bg-[var(--kyro-surface)] hover:text-[var(--kyro-text-primary)] transition-colors"
+        >
+          Format
+        </button>
+        <button
+          type="button"
+          onClick={minifyJSON}
+          className="px-3 py-1.5 text-xs font-medium bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] rounded-md hover:bg-[var(--kyro-surface)] hover:text-[var(--kyro-text-primary)] transition-colors"
+        >
+          Minify
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            navigator.clipboard.writeText(textValue);
+          }}
+          className="px-3 py-1.5 text-xs font-medium bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] rounded-md hover:bg-[var(--kyro-surface)] hover:text-[var(--kyro-text-primary)] transition-colors"
+        >
+          Copy
+        </button>
+        {parseError && (
+          <span className="text-xs text-red-500 ml-auto">{parseError}</span>
+        )}
+      </div>
+
+      {/* Editor area */}
+      <div
+        className={`border border-[var(--kyro-border)] rounded-md overflow-hidden ${
+          disabled ? "opacity-50 cursor-not-allowed" : ""
+        } ${error || parseError ? "border-red-500" : ""}`}
+      >
+        {viewMode === "text" ? (
+          <textarea
+            value={textValue}
+            onChange={(e) => handleTextChange(e.target.value)}
+            disabled={disabled}
+            rows={8}
+            className={`w-full p-4 font-mono text-sm resize-y focus:outline-none ${
+              isDark
+                ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+                : "bg-white text-gray-900"
+            }`}
+            placeholder='{"key": "value"}'
+          />
+        ) : (
+          <div
+            className={`p-4 max-h-[400px] overflow-auto ${
+              isDark
+                ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+                : "bg-white text-gray-900"
+            }`}
+          >
+            {treeData ? (
+              <TreeView data={treeData} />
+            ) : (
+              <p className="text-sm text-[var(--kyro-text-muted)] italic">
+                Invalid JSON - switch to Text view to fix
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {field.admin?.description && !error && !parseError && (
+        <p className="kyro-form-help">{field.admin.description}</p>
+      )}
+      {(error || parseError) && (
+        <p className="kyro-form-error">{error || parseError}</p>
+      )}
+    </div>
+  );
+};
+
+// Tree view component
+const TreeView: React.FC<{ data: TreeNode }> = ({ data }) => {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const renderValue = (node: TreeNode) => {
+    if (node.type === "object") {
+      const entries = Object.entries(node.value);
+      return (
+        <div className="pl-4 border-l border-[var(--kyro-border)]">
+          {entries.map(([key, val]) => (
+            <TreeNodeView
+              key={key}
+              name={key}
+              value={val}
+              path={[...node.path, key]}
+            />
+          ))}
+        </div>
+      );
+    }
+    if (node.type === "array") {
+      return (
+        <div className="pl-4 border-l border-[var(--kyro-border)]">
+          {node.value.map((item: any, index: number) => (
+            <TreeNodeView
+              key={index}
+              name={String(index)}
+              value={item}
+              path={[...node.path, String(index)]}
+            />
+          ))}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  const getTypeColor = (type: string) => {
+    switch (type) {
+      case "string":
+        return "text-green-600";
+      case "number":
+        return "text-blue-600";
+      case "boolean":
+        return "text-purple-600";
+      case "null":
+        return "text-gray-500";
+      default:
+        return "text-[var(--kyro-text-primary)]";
+    }
+  };
+
+  const getValueDisplay = (item: TreeNode) => {
+    if (item.type === "string") return `"${item.value}"`;
+    if (item.type === "null") return "null";
+    return String(item.value);
+  };
+
+  const getPreview = (item: TreeNode) => {
+    if (item.type === "object") {
+      const keys = Object.keys(item.value);
+      return `{${keys.length} ${keys.length === 1 ? "key" : "keys"}}`;
+    }
+    if (item.type === "array") {
+      return `[${item.value.length} ${item.value.length === 1 ? "item" : "items"}]`;
+    }
+    return null;
+  };
+
+  const isExpandable = data.type === "object" || data.type === "array";
+
+  return (
+    <div className="py-0.5">
+      <div
+        className="flex items-center gap-2 cursor-pointer hover:bg-[var(--kyro-surface-accent)] rounded px-1 -ml-1"
+        onClick={() => isExpandable && setCollapsed(!collapsed)}
+      >
+        {isExpandable && (
+          <span className="text-[var(--kyro-text-muted)] text-xs">
+            {collapsed ? "▶" : "▼"}
+          </span>
+        )}
+        <span className="font-medium text-[var(--kyro-text-primary)]">
+          {data.key}
+        </span>
+        <span className="text-[var(--kyro-text-muted)]">:</span>
+        {isExpandable ? (
+          <span className="text-xs text-[var(--kyro-text-muted)]">
+            {collapsed ? getPreview(data) : data.type === "object" ? "{" : "["}
+          </span>
+        ) : (
+          <span className={`font-mono text-sm ${getTypeColor(data.type)}`}>
+            {getValueDisplay(data)}
+          </span>
+        )}
+      </div>
+      {!collapsed && isExpandable && renderValue(data)}
+      {collapsed && isExpandable && (
+        <span className="text-[var(--kyro-text-muted)] ml-6 text-xs">
+          {data.type === "object" ? "}" : "]"}
+        </span>
+      )}
+    </div>
+  );
+};
+
+const TreeNodeView: React.FC<{ name: string; value: any; path: string[] }> = ({
+  name,
+  value,
+  path,
+}) => {
+  const type = getType(value);
+  const treeNode: TreeNode = { key: name, value, type, path };
+  return <TreeView data={treeNode} />;
+};
+
+function getType(value: any): TreeNode["type"] {
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "array";
+  return typeof value as TreeNode["type"];
+}
+
+function buildTree(value: any, path: string[]): TreeNode {
+  return {
+    key: path[path.length - 1] || "root",
+    value,
+    type: getType(value),
+    path,
+  };
+}

package/src/components/fields/MarkdownField.tsx

@@ -0,0 +1,282 @@
+import React, { useState, useCallback, useMemo, useEffect } from "react";
+import type { MarkdownField as MarkdownFieldType } from "@kyro-cms/core";
+
+interface MarkdownFieldProps {
+  field: MarkdownFieldType;
+  value?: string;
+  onChange?: (value: string) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+// Simple markdown parser for basic formatting
+function parseMarkdown(text: string): string {
+  if (!text) return "";
+
+  let html = text
+    // Escape HTML
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+
+    // Code blocks
+    .replace(
+      /```(\w+)?\n([\s\S]*?)```/g,
+      '<pre class="bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto my-2"><code>$2</code></pre>',
+    )
+
+    // Inline code
+    .replace(
+      /`([^`]+)`/g,
+      '<code class="bg-gray-100 dark:bg-gray-800 px-1 rounded text-sm font-mono">$1</code>',
+    )
+
+    // Headers
+    .replace(
+      /^### (.+)$/gm,
+      '<h3 class="text-lg font-semibold mt-4 mb-2">$1</h3>',
+    )
+    .replace(
+      /^## (.+)$/gm,
+      '<h2 class="text-xl font-semibold mt-4 mb-2">$1</h2>',
+    )
+    .replace(/^# (.+)$/gm, '<h1 class="text-2xl font-bold mt-4 mb-2">$1</h1>')
+
+    // Bold and Italic
+    .replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>")
+    .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+    .replace(/\*(.+?)\*/g, "<em>$1</em>")
+    .replace(/___(.+?)___/g, "<strong><em>$1</em></strong>")
+    .replace(/__(.+?)__/g, "<strong>$1</strong>")
+    .replace(/_(.+?)_/g, "<em>$1</em>")
+
+    // Strikethrough
+    .replace(/~~(.+?)~~/g, "<del>$1</del>")
+
+    // Blockquotes
+    .replace(
+      /^> (.+)$/gm,
+      '<blockquote class="border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic my-2 text-gray-600 dark:text-gray-400">$1</blockquote>',
+    )
+
+    // Links
+    .replace(
+      /\[([^\]]+)\]\(([^)]+)\)/g,
+      '<a href="$2" class="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">$1</a>',
+    )
+
+    // Images
+    .replace(
+      /!\[([^\]]*)\]\(([^)]+)\)/g,
+      '<img src="$2" alt="$1" class="max-w-full h-auto rounded my-2" />',
+    )
+
+    // Horizontal rules
+    .replace(
+      /^---$/gm,
+      '<hr class="border-gray-300 dark:border-gray-600 my-4" />',
+    )
+    .replace(
+      /^\*\*\*$/gm,
+      '<hr class="border-gray-300 dark:border-gray-600 my-4" />',
+    )
+
+    // Unordered lists
+    .replace(/^[\*\-] (.+)$/gm, '<li class="ml-4">$1</li>')
+
+    // Ordered lists
+    .replace(/^\d+\. (.+)$/gm, '<li class="ml-4 list-decimal">$1</li>')
+
+    // Paragraphs (lines that don't start with special chars)
+    .replace(/^(?!<[a-z]|$)(.+)$/gm, '<p class="my-2">$1</p>')
+
+    // Clean up empty paragraphs
+    .replace(/<p class="my-2"><\/p>/g, "")
+
+    // Wrap consecutive list items in ul/ol
+    .replace(
+      /(<li class="ml-4">.*<\/li>\n?)+/g,
+      '<ul class="list-disc pl-6 my-2">$&</ul>',
+    );
+
+  return html;
+}
+
+export const MarkdownField: React.FC<MarkdownFieldProps> = ({
+  field,
+  value = "",
+  onChange,
+  error,
+  disabled,
+}) => {
+  const [showPreview, setShowPreview] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    setIsDark(document.documentElement.classList.contains("dark"));
+
+    // Listen for theme changes
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange?.(e.target.value);
+    },
+    [onChange],
+  );
+
+  const wordCount = useMemo(() => {
+    if (!value) return 0;
+    return value.trim().split(/\s+/).filter(Boolean).length;
+  }, [value]);
+
+  const characterCount = value?.length || 0;
+
+  if (!isMounted) {
+    return (
+      <div className="kyro-form-field">
+        <label className="kyro-form-label">
+          {field.label || field.name}
+          {field.required && (
+            <span className="kyro-form-label-required">*</span>
+          )}
+        </label>
+        <div className="h-[200px] bg-[var(--kyro-surface)] animate-pulse rounded-md border border-[var(--kyro-border)]" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="kyro-form-field"
+      style={{ position: "relative", zIndex: 10, pointerEvents: "auto" }}
+    >
+      <div className="flex items-center justify-between mb-2">
+        <label className="kyro-form-label">
+          {field.label || field.name}
+          {field.required && (
+            <span className="kyro-form-label-required">*</span>
+          )}
+        </label>
+        <div className="flex items-center gap-3">
+          {/* Stats */}
+          <span className="text-xs text-[var(--kyro-text-muted)]">
+            {wordCount} words • {characterCount} chars
+          </span>
+
+          {/* Preview toggle */}
+          <div className="flex rounded-md overflow-hidden border border-[var(--kyro-border)]">
+            <button
+              type="button"
+              onClick={() => setShowPreview(false)}
+              className={`px-3 py-1 text-xs font-medium transition-colors ${
+                !showPreview
+                  ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                  : "bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Write
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowPreview(true)}
+              className={`px-3 py-1 text-xs font-medium transition-colors ${
+                showPreview
+                  ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                  : "bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Preview
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div
+        style={{ pointerEvents: "auto", position: "relative", zIndex: 50 }}
+        className={`border border-[var(--kyro-border)] rounded-md overflow-hidden ${
+          disabled ? "opacity-50 cursor-not-allowed" : ""
+        } ${error ? "border-red-500" : ""}`}
+      >
+        {!showPreview ? (
+          <textarea
+            value={value}
+            onChange={handleChange}
+            disabled={disabled}
+            rows={12}
+            style={{ pointerEvents: "auto", cursor: "text", zIndex: 100 }}
+            className={`w-full p-4 font-mono text-sm resize-y focus:outline-none ${
+              isDark
+                ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+                : "bg-white text-gray-900"
+            }`}
+            placeholder="Enter markdown content...
+
+# Heading 1
+## Heading 2
+
+**Bold text** and *italic text*
+
+- List item 1
+- List item 2
+
+[Link text](https://example.com)
+
+`inline code`
+
+```
+code block
+```"
+          />
+        ) : (
+          <div
+            className={`p-6 min-h-[300px] overflow-auto ${
+              isDark
+                ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+                : "bg-white text-gray-900"
+            }`}
+          >
+            {value ? (
+              <div
+                className="prose prose-sm dark:prose-invert max-w-none"
+                dangerouslySetInnerHTML={{ __html: parseMarkdown(value) }}
+              />
+            ) : (
+              <p className="text-[var(--kyro-text-muted)] italic">
+                Nothing to preview
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Toolbar with markdown hints */}
+      {!showPreview && (
+        <div className="flex items-center gap-4 mt-2 text-xs text-[var(--kyro-text-muted)]">
+          <span>**bold**</span>
+          <span>*italic*</span>
+          <span>`code`</span>
+          <span>[link](url)</span>
+          <span># heading</span>
+        </div>
+      )}
+
+      {field.admin?.description && !error && (
+        <p className="kyro-form-help">{field.admin.description}</p>
+      )}
+      {error && <p className="kyro-form-error">{error}</p>}
+    </div>
+  );
+};