@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/fields/BlocksField.tsx

@@ -0,0 +1,323 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useBlocksStore, createNewBlock } from "./extensions/blocksStore";
+import { BlockDrawer, DraggableBlockType } from "../ui/BlockDrawer";
+import { Plus, Box } from "lucide-react";
+import {
+  BLOCK_COMPONENTS,
+  getBlockComponent,
+  blockCategories,
+  blockIcons,
+} from "./extensions/blockComponents";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  KeyboardSensor,
+  useDraggable,
+  DragOverlay,
+} from "@dnd-kit/core";
+import type { DragEndEvent, DragStartEvent, Active } from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+interface BlocksFieldProps {
+  field: any;
+  value: any;
+  onChange?: (value: any) => void;
+  onBlocksChange?: () => void;
+  error?: string;
+  disabled?: boolean;
+  documentStatus?: "draft" | "published" | "scheduled" | "archived";
+  justSaved?: boolean;
+}
+
+import { GripVertical } from "lucide-react";
+
+// Sortable block wrapper for drag-and-drop
+const SortableBlockComponent = ({
+  block,
+  index,
+}: {
+  block: any;
+  index: number;
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: block.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : 1,
+    opacity: isDragging ? 0.8 : 1,
+  };
+
+  const Component = getBlockComponent(block.type);
+
+  return (
+    <div ref={setNodeRef} style={style} className="relative group pl-8">
+      <div
+        className="absolute left-0 top-1/2 -translate-y-1/2 p-1.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded"
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical className="w-4 h-4" />
+      </div>
+      {Component ? (
+        <Component block={block} index={index} />
+      ) : (
+        <div className="p-4 border border-[var(--kyro-border)] rounded-md">
+          Unknown block: {block.type}
+        </div>
+      )}
+    </div>
+  );
+};
+// Memoize per-block to minimize re-renders when unrelated blocks change
+const SortableBlock = React.memo(SortableBlockComponent);
+
+export const BlocksField: React.FC<BlocksFieldProps> = ({
+  field,
+  value,
+  onChange,
+  onBlocksChange,
+  error,
+  disabled,
+  documentStatus,
+  justSaved,
+}) => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const { blocks, setBlocks, addBlock, setOnBlocksChange } = useBlocksStore();
+  const [activeDrag, setActiveDrag] = useState<Active | null>(null);
+
+  // Register blocks change callback
+  useEffect(() => {
+    if (onBlocksChange) {
+      setOnBlocksChange(onBlocksChange);
+    }
+    return () => {
+      setOnBlocksChange(() => { });
+    };
+  }, [onBlocksChange, setOnBlocksChange]);
+
+  // Sync external value changes (e.g., auto-save restore) to store
+  useEffect(() => {
+    const currentIds = blocks.map((b) => b.id).join(",");
+    const valueIds = (value || []).map((b: any) => b.id).join(",");
+
+    // Only update if the IDs don't match (external change)
+    if (valueIds !== currentIds) {
+      if (value && Array.isArray(value) && value.length > 0) {
+        setBlocks(value);
+      } else if (!value || (Array.isArray(value) && value.length === 0)) {
+        setBlocks([]);
+      }
+    }
+  }, [value]);
+
+  // Debounced sync of store changes back to parent form to reduce re-renders
+  const onChangeTimer = useRef<number | null>(null);
+  useEffect(() => {
+    if (!onChange) return;
+    if (onChangeTimer.current) {
+      window.clearTimeout(onChangeTimer.current);
+      onChangeTimer.current = null;
+    }
+    onChangeTimer.current = window.setTimeout(() => {
+      onChange(blocks);
+    }, 250);
+    return () => {
+      if (onChangeTimer.current) {
+        window.clearTimeout(onChangeTimer.current);
+        onChangeTimer.current = null;
+      }
+    };
+  }, [blocks, onChange]);
+
+  // Determine left border style based on document status
+  const getBorderClass = () => {
+    if (justSaved) {
+      return "border-l-[3px] border-green-500";
+    }
+    if (
+      documentStatus === "draft" ||
+      documentStatus === "scheduled" ||
+      documentStatus === "archived"
+    ) {
+      return "border-l-[3px] border-amber-500";
+    }
+    return "";
+  };
+
+  const handleAddBlock = useCallback(
+    (blockType: string) => {
+      addBlock(blockType);
+    },
+    [addBlock],
+  );
+
+  // Set up dnd-kit sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor),
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveDrag(event.active);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveDrag(null);
+
+    if (!over) return;
+
+    // Case 1: Dragged from drawer
+    if (active.id.toString().startsWith("drawer-")) {
+      const blockType = active.id.toString().replace("drawer-", "");
+
+      // Check if dropped on a container
+      if (over.id.toString().startsWith("container-")) {
+        const containerId = over.id.toString().replace("container-", "");
+        const container = blocks.find((b) => b.id === containerId);
+        if (container) {
+          const { updateBlock } = useBlocksStore.getState();
+          const newBlock = createNewBlock(blockType);
+          updateBlock(containerId, {
+            children: [...(container.children || []), newBlock],
+          });
+        }
+      } else {
+        // Dropped on root level - add as top-level block
+        addBlock(blockType);
+      }
+      return;
+    }
+
+    // Case 2: Reordering existing blocks
+    if (active.id !== over.id) {
+      const oldIndex = blocks.findIndex((b) => b.id === active.id);
+      const newIndex = blocks.findIndex((b) => b.id === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newBlocks = [...blocks];
+        const [movedBlock] = newBlocks.splice(oldIndex, 1);
+        newBlocks.splice(newIndex, 0, movedBlock);
+        setBlocks(newBlocks);
+      }
+    }
+  };
+
+  // Render active drag overlay
+  const activeBlock = activeDrag
+    ? blockCategories
+      .flatMap((cat) => cat.blocks)
+      .find((b) => `drawer-${b.type}` === activeDrag.id) ||
+    blocks.find((b) => b.id === activeDrag.id)
+    : null;
+
+  const activeBlockLabel = activeBlock
+    ? "label" in activeBlock
+      ? (activeBlock as any).label
+      : activeBlock.type
+    : "Block";
+
+  const borderClass = getBorderClass();
+
+  return (
+    <div className={`kyro-form-field ${borderClass}`}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        {/* Block Builder Toolbar */}
+        <div className="flex items-center justify-between mb-2">
+          <label className="kyro-form-label">{field.label || field.name}</label>
+          <button
+            type="button"
+            onClick={() => setIsDrawerOpen(true)}
+            disabled={disabled}
+            className="flex items-center gap-2 px-3 py-2 text-sm text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)]/30 rounded-md transition-colors disabled:opacity-50"
+          >
+            <Plus className="w-4 h-4" />
+            Add Block
+          </button>
+          <BlockDrawer
+            open={isDrawerOpen}
+            onClose={() => setIsDrawerOpen(false)}
+            onSelect={handleAddBlock}
+          >
+            <div className="space-y-4">
+              {blockCategories.map((category) => (
+                <div key={category.title}>
+                  <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)] mb-2 uppercase tracking-wider">
+                    {category.title}
+                  </h3>
+                  <div className="grid grid-cols-3 gap-2">
+                    {category.blocks.map((block) => (
+                      <DraggableBlockType
+                        key={block.type}
+                        block={block}
+                        onSelect={handleAddBlock}
+                      >
+                        <div className="w-6 h-6 flex items-center justify-center rounded group-hover:bg-[var(--kyro-primary)]/10 group-hover:text-[var(--kyro-primary)] transition-all duration-300">
+                          <span className="text-[var(--kyro-text-muted)]">
+                            {blockIcons[
+                              block.icon as keyof typeof blockIcons
+                            ] || <Box className="w-4 h-4" />}
+                          </span>
+                        </div>
+                      </DraggableBlockType>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </BlockDrawer>
+        </div>
+
+        {/* Block List with Drag-and-Drop */}
+        <SortableContext
+          items={blocks.map((b) => b.id)}
+          strategy={verticalListSortingStrategy}
+        >
+          <div className="space-y-4">
+            {blocks.map((block, index) => (
+              <SortableBlock key={block.id} block={block} index={index} />
+            ))}
+            {blocks.length === 0 && (
+              <div className="text-center py-12 text-[var(--kyro-text-muted)] border-2 border-dashed border-[var(--kyro-border)] rounded-lg">
+                Click the button above to add your first block
+              </div>
+            )}
+          </div>
+        </SortableContext>
+        <DragOverlay>
+          {activeDrag && activeBlock && (
+            <div className="bg-[var(--kyro-surface)] border border-[var(--kyro-primary)] rounded-md p-3 shadow-lg">
+              {(activeBlock as any).label || activeBlock.type || "Block"}
+            </div>
+          )}
+        </DragOverlay>
+      </DndContext>
+      {error && <p className="kyro-form-error">{error}</p>}
+    </div>
+  );
+};

package/src/components/fields/CheckboxField.tsx

@@ -1,4 +1,4 @@
-import type { CheckboxField as CheckboxFieldType } from '@kyro-cms/core';
+import type { CheckboxField as CheckboxFieldType } from "@kyro-cms/core";
 
 interface CheckboxFieldComponentProps {
   field: CheckboxFieldType;
@@ -8,7 +8,13 @@ interface CheckboxFieldComponentProps {
   disabled?: boolean;
 }
 
-export default function CheckboxField({ field, value = false, onChange, error, disabled }: CheckboxFieldComponentProps) {
+export default function CheckboxField({
+  field,
+  value = false,
+  onChange,
+  error,
+  disabled,
+}: CheckboxFieldComponentProps) {
   return (
     <div className="space-y-1">
       <label className="flex items-center gap-2 cursor-pointer">
@@ -17,21 +23,21 @@ export default function CheckboxField({ field, value = false, onChange, error, d
           checked={value}
           onChange={(e) => onChange?.(e.target.checked)}
           disabled={disabled || field.admin?.readOnly}
-          className={`w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 ${
-            disabled || field.admin?.readOnly ? 'opacity-50' : ''
+          className={`w-4 h-4 rounded border-[var(--kyro-border)] text-[var(--kyro-sidebar-active)] focus:ring-[var(--kyro-sidebar-active)] ${
+            disabled || field.admin?.readOnly ? "opacity-50" : ""
           }`}
         />
-        <span className="text-sm font-medium text-gray-700">
+        <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
           {field.label || field.name}
           {field.required && <span className="text-red-500 ml-1">*</span>}
         </span>
       </label>
       {field.admin?.description && !error && (
-        <p className="text-xs text-gray-500 ml-6">{field.admin.description}</p>
-      )}
-      {error && (
-        <p className="text-xs text-red-600 ml-6">{error}</p>
+        <p className="text-xs text-[var(--kyro-text-secondary)] ml-6">
+          {field.admin.description}
+        </p>
       )}
+      {error && <p className="text-xs text-red-500 ml-6">{error}</p>}
     </div>
   );
 }

package/src/components/fields/CodeField.tsx

@@ -0,0 +1,234 @@
+import React, {
+  useCallback,
+  useMemo,
+  useEffect,
+  useState,
+  Suspense,
+  lazy,
+} from "react";
+import { githubLight } from "@uiw/codemirror-theme-github";
+import { aura } from "@uiw/codemirror-theme-aura";
+import type { CodeField as CodeFieldType } from "@kyro-cms/core";
+
+interface CodeFieldProps {
+  field: CodeFieldType;
+  value?: string;
+  onChange?: (value: string) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+// Lazy-loaded CodeMirror wrapper component
+const CodeMirrorEditor = lazy(() =>
+  import("@uiw/react-codemirror").then((mod) => ({ default: mod.default })),
+);
+
+const LANGUAGES = [
+  { value: "javascript", label: "JavaScript", ext: "javascript" },
+  { value: "typescript", label: "TypeScript", ext: "javascript" },
+  { value: "json", label: "JSON", ext: "json" },
+  { value: "html", label: "HTML", ext: "html" },
+  { value: "css", label: "CSS", ext: "css" },
+  { value: "sql", label: "SQL", ext: "sql" },
+  { value: "python", label: "Python", ext: "python" },
+  { value: "rust", label: "Rust", ext: "rust" },
+  { value: "java", label: "Java", ext: "java" },
+  { value: "cpp", label: "C++", ext: "cpp" },
+  { value: "php", label: "PHP", ext: "php" },
+  { value: "markdown", label: "Markdown", ext: "markdown" },
+];
+
+// Language extension loader
+const languageExtensions: Record<string, () => Promise<any>> = {
+  javascript: () =>
+    import("@codemirror/lang-javascript").then((m) =>
+      m.javascript({ jsx: true, typescript: true }),
+    ),
+  typescript: () =>
+    import("@codemirror/lang-javascript").then((m) =>
+      m.javascript({ jsx: true, typescript: true }),
+    ),
+  js: () =>
+    import("@codemirror/lang-javascript").then((m) =>
+      m.javascript({ jsx: true }),
+    ),
+  jsx: () =>
+    import("@codemirror/lang-javascript").then((m) =>
+      m.javascript({ jsx: true }),
+    ),
+  ts: () =>
+    import("@codemirror/lang-javascript").then((m) =>
+      m.javascript({ typescript: true }),
+    ),
+  json: () => import("@codemirror/lang-json").then((m) => m.json()),
+  css: () => import("@codemirror/lang-css").then((m) => m.css()),
+  sql: () => import("@codemirror/lang-sql").then((m) => m.sql()),
+  python: () => import("@codemirror/lang-python").then((m) => m.python()),
+  html: () => import("@codemirror/lang-html").then((m) => m.html()),
+  rust: () => import("@codemirror/lang-rust").then((m) => m.rust()),
+  java: () => import("@codemirror/lang-java").then((m) => m.java()),
+  cpp: () => import("@codemirror/lang-cpp").then((m) => m.cpp()),
+  c: () => import("@codemirror/lang-cpp").then((m) => m.cpp()),
+  php: () => import("@codemirror/lang-php").then((m) => m.php()),
+  markdown: () => import("@codemirror/lang-markdown").then((m) => m.markdown()),
+  py: () => import("@codemirror/lang-python").then((m) => m.python()),
+};
+
+export const CodeField: React.FC<CodeFieldProps> = ({
+  field,
+  value = "",
+  onChange,
+  error,
+  disabled,
+}) => {
+  const [isMounted, setIsMounted] = useState(false);
+  const [isDark, setIsDark] = useState(false);
+  const [extensions, setExtensions] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const language = field.language?.toLowerCase() || "javascript";
+
+  useEffect(() => {
+    setIsMounted(true);
+    setIsDark(document.documentElement.classList.contains("dark"));
+
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  // Load language extensions dynamically
+  useEffect(() => {
+    if (!isMounted) return;
+
+    const loadExtensions = async () => {
+      setLoading(true);
+      try {
+        const loader =
+          languageExtensions[language] || languageExtensions.javascript;
+        const ext = await loader();
+        setExtensions([ext]);
+      } catch (err) {
+        console.error("Failed to load language extension:", err);
+        setExtensions([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadExtensions();
+  }, [language, isMounted]);
+
+  const handleChange = useCallback(
+    (val: string) => {
+      onChange?.(val);
+    },
+    [onChange],
+  );
+
+  const theme = isDark ? aura : githubLight;
+
+  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-[300px] bg-[var(--kyro-surface)] animate-pulse rounded-md" />
+      </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>
+
+        {/* Language indicator */}
+        <div className="flex items-center gap-2">
+          {loading && (
+            <span className="text-xs text-[var(--kyro-text-muted)] animate-pulse">
+              Loading...
+            </span>
+          )}
+          <span className="text-xs text-[var(--kyro-text-muted)]">
+            {LANGUAGES.find((l) => l.value === language)?.label || language}
+          </span>
+        </div>
+      </div>
+
+      <div
+        className={`border border-[var(--kyro-border)] rounded-md overflow-hidden ${
+          disabled ? "opacity-50 cursor-not-allowed" : ""
+        } ${error ? "border-red-500" : ""}`}
+      >
+        <Suspense
+          fallback={
+            <div className="h-[300px] bg-[var(--kyro-surface)] animate-pulse flex items-center justify-center">
+              <span className="text-xs text-[var(--kyro-text-muted)]">
+                Loading editor...
+              </span>
+            </div>
+          }
+        >
+          <CodeMirrorEditor
+            value={value}
+            height="300px"
+            extensions={extensions}
+            theme={theme}
+            onChange={handleChange}
+            editable={!disabled}
+            basicSetup={true}
+            style={{
+              fontSize: "13px",
+              fontFamily:
+                "'Fira Code', 'JetBrains Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace",
+            }}
+          />
+        </Suspense>
+      </div>
+
+      {/* Editor hints */}
+      <div className="flex items-center gap-4 mt-2 text-xs text-[var(--kyro-text-muted)]">
+        <span>
+          <kbd className="px-1.5 py-0.5 bg-[var(--kyro-surface-accent)] rounded text-[10px] font-mono">
+            Ctrl+F
+          </kbd>{" "}
+          Search
+        </span>
+        <span>
+          <kbd className="px-1.5 py-0.5 bg-[var(--kyro-surface-accent)] rounded text-[10px] font-mono">
+            Ctrl+Space
+          </kbd>{" "}
+          Autocomplete
+        </span>
+        <span>
+          <kbd className="px-1.5 py-0.5 bg-[var(--kyro-surface-accent)] rounded text-[10px] font-mono">
+            Ctrl+Z
+          </kbd>{" "}
+          Undo
+        </span>
+      </div>
+
+      {field.admin?.description && !error && (
+        <p className="kyro-form-help">{field.admin.description}</p>
+      )}
+      {error && <p className="kyro-form-error">{error}</p>}
+    </div>
+  );
+};

package/src/components/fields/DateField.tsx

@@ -1,4 +1,5 @@
-import type { DateField as DateFieldType } from '@kyro-cms/core';
+import { useEffect, useState } from "react";
+import type { DateField as DateFieldType } from "@kyro-cms/core";
 
 interface DateFieldComponentProps {
   field: DateFieldType;
@@ -8,17 +9,37 @@ interface DateFieldComponentProps {
   disabled?: boolean;
 }
 
-export default function DateField({ field, value = '', onChange, error, disabled }: DateFieldComponentProps) {
+export default function DateField({
+  field,
+  value = "",
+  onChange,
+  error,
+  disabled,
+}: DateFieldComponentProps) {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    setIsDark(document.documentElement.classList.contains("dark"));
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains("dark"));
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div className="space-y-1">
       {field.label && (
-        <label className="block text-sm font-medium text-gray-700">
+        <label className="block text-sm font-medium">
           {field.label}
           {field.required && <span className="text-red-500 ml-1">*</span>}
         </label>
       )}
       <input
-        type={field.time ? 'datetime-local' : 'date'}
+        type={field.time ? "datetime-local" : "date"}
         value={value}
         onChange={(e) => onChange?.(e.target.value)}
         disabled={disabled || field.admin?.readOnly}
@@ -27,16 +48,22 @@ export default function DateField({ field, value = '', onChange, error, disabled
         required={field.required}
         className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
           error
-            ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
-            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
-        } ${disabled || field.admin?.readOnly ? 'bg-gray-50 text-gray-500' : 'bg-white'}`}
+            ? "border-red-300 focus:border-red-500 focus:ring-red-500"
+            : "border-[var(--kyro-border)] focus:border-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
+        } ${
+          disabled || field.admin?.readOnly
+            ? "bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] opacity-50"
+            : isDark
+              ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+              : "bg-white text-gray-900"
+        }`}
       />
       {field.admin?.description && !error && (
-        <p className="text-xs text-gray-500">{field.admin.description}</p>
-      )}
-      {error && (
-        <p className="text-xs text-red-600">{error}</p>
+        <p className="text-xs text-[var(--kyro-text-secondary)]">
+          {field.admin.description}
+        </p>
       )}
+      {error && <p className="text-xs text-red-600">{error}</p>}
     </div>
   );
 }