@kyro-cms/admin 0.1.5 → 0.1.7

package/src/components/fields/HybridContentField.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import PortableTextField from "./PortableTextField";
+import { BlocksField } from "./BlocksField";
+
+interface HybridContentFieldProps {
+  field: any;
+  value?: any;
+  onChange?: (value: any) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export const HybridContentField: React.FC<HybridContentFieldProps> = ({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}) => {
+  const [mode, setMode] = useState<"richtext" | "blocks">(() => {
+    if (typeof value === "string" && value.trim().startsWith("<")) {
+      return "richtext";
+    }
+    if (Array.isArray(value) || (typeof value === "object" && value !== null)) {
+      return "blocks";
+    }
+    return "richtext";
+  });
+
+  const handleModeChange = (newMode: "richtext" | "blocks") => {
+    if (newMode === mode) return;
+
+    if (newMode === "blocks" && mode === "richtext") {
+      if (value && typeof value === "string" && value.trim()) {
+        onChange?.([]);
+      } else {
+        onChange?.([]);
+      }
+    } else if (newMode === "richtext" && mode === "blocks") {
+      if (Array.isArray(value) && value.length > 0) {
+        if (
+          !confirm("Switching to Rich Text will convert your blocks. Continue?")
+        ) {
+          return;
+        }
+      }
+      onChange?.("");
+    }
+    setMode(newMode);
+  };
+
+  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-1 bg-[var(--kyro-surface-accent)] p-0.5 rounded-lg">
+          <button
+            type="button"
+            onClick={() => handleModeChange("richtext")}
+            className={`px-3 py-1.5 text-xs font-medium rounded-md transition-all ${mode === "richtext"
+                ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]"
+                : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+              }`}
+          >
+            Rich Text Editor
+          </button>
+          <button
+            type="button"
+            onClick={() => handleModeChange("blocks")}
+            className={`px-3 py-1.5 text-xs font-medium rounded-md transition-all ${mode === "blocks"
+                ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]"
+                : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+              }`}
+          >
+            Block Editor
+          </button>
+        </div>
+      </div>
+
+      {mode === "richtext" ? (
+        <PortableTextField
+          field={field}
+          value={typeof value === "string" ? value : ""}
+          onChange={(newValue) => onChange?.(newValue)}
+          error={error}
+          disabled={disabled}
+        />
+      ) : (
+        <BlocksField
+          field={field}
+          value={Array.isArray(value) ? value : []}
+          onChange={(newValue) => onChange?.(newValue)}
+          error={error}
+          disabled={disabled}
+        />
+      )}
+
+      {field.admin?.description && !error && (
+        <p className="kyro-form-help mt-2">{field.admin.description}</p>
+      )}
+    </div>
+  );
+};

package/src/components/fields/ImageField.tsx

@@ -0,0 +1,429 @@
+import React, { useState, useEffect, useRef } from "react";
+
+interface ImageFieldProps {
+  field: any;
+  value: any;
+  onChange: (value: any) => void;
+  disabled?: boolean;
+}
+
+interface MediaItem {
+  id: string;
+  filename: string;
+  url: string;
+  thumbnailUrl?: string;
+  mimeType: string;
+  title?: string;
+  folder?: string;
+}
+
+interface MediaFolder {
+  name: string;
+  path: string;
+}
+
+export function ImageField({
+  field,
+  value,
+  onChange,
+  disabled,
+}: ImageFieldProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const urlInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [showPicker, setShowPicker] = useState(false);
+  const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
+  const [folders, setFolders] = useState<MediaFolder[]>([]);
+  const [selectedFolder, setSelectedFolder] = useState<string>("");
+  const [mediaLoading, setMediaLoading] = useState(false);
+  const [pickerSearch, setPickerSearch] = useState("");
+  const [showUrlInput, setShowUrlInput] = useState(false);
+  const [urlValue, setUrlValue] = useState("");
+  const [urlError, setUrlError] = useState("");
+
+  const fieldLabel = field?.label || field?.name || "Image";
+  const maxCount = field.maxCount || 1;
+  const isMultiple = maxCount > 1;
+  const currentValue = Array.isArray(value) ? value : value ? [value] : [];
+  const canAddMore = currentValue.length < maxCount;
+
+  useEffect(() => {
+    if (showPicker) {
+      loadFolders();
+      loadMedia();
+    }
+  }, [showPicker, selectedFolder]);
+
+  const loadFolders = async () => {
+    try {
+      const resp = await fetch("/api/media/folders?t=" + Date.now(), {
+        credentials: "include",
+      });
+      const result = await resp.json();
+      setFolders(result.folders || []);
+    } catch {
+      setFolders([]);
+    }
+  };
+
+  const loadMedia = async () => {
+    setMediaLoading(true);
+    try {
+      let url = `/api/media?limit=60&sortBy=createdAt&sortDir=desc&t=${Date.now()}`;
+      if (selectedFolder) {
+        url += "&folder=" + encodeURIComponent(selectedFolder);
+      }
+      const resp = await fetch(url, { credentials: "include" });
+      const result = await resp.json();
+      setMediaItems(result.docs || []);
+    } catch {
+      setMediaItems([]);
+    } finally {
+      setMediaLoading(false);
+    }
+  };
+
+  const uploadFile = async (file: File) => {
+    setUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      if (selectedFolder) {
+        formData.append("folder", selectedFolder);
+      }
+      const resp = await fetch("/api/upload", {
+        method: "POST",
+        body: formData,
+        credentials: "include",
+      });
+      if (!resp.ok) throw new Error("Upload failed");
+      const result = await resp.json();
+      const newImage = {
+        id: result.id,
+        filename: result.filename,
+        originalName: result.originalName ?? file.name,
+        url: result.url,
+        mimeType: file.type,
+      };
+      if (isMultiple) {
+        onChange([...currentValue, newImage]);
+      } else {
+        onChange(newImage);
+      }
+    } catch (err) {
+      console.error("Upload failed:", err);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const addByUrl = async () => {
+    const url = urlValue.trim();
+    if (!url) return;
+
+    setUrlError("");
+    try {
+      const resp = await fetch("/api/upload", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url }),
+        credentials: "include",
+      });
+      if (!resp.ok) {
+        const data = await resp.json();
+        throw new Error(data.error || "Failed to add URL");
+      }
+      const result = await resp.json();
+      const originalName = (() => {
+        try {
+          return (
+            new URL(url).pathname.split("/").pop() ||
+            result.originalName ||
+            "url-image"
+          );
+        } catch {
+          return result.originalName || "url-image";
+        }
+      })();
+      const newImage = {
+        id: result.id,
+        filename: result.filename,
+        originalName,
+        url: result.url,
+        mimeType: result.mimeType || "image/*",
+      };
+      if (isMultiple) {
+        onChange([...currentValue, newImage]);
+      } else {
+        onChange(newImage);
+      }
+      setUrlValue("");
+      setShowUrlInput(false);
+    } catch (err: any) {
+      setUrlError(err.message || "Invalid URL");
+    }
+  };
+
+  const selectFromLibrary = (item: MediaItem) => {
+    const newImage = {
+      id: item.id,
+      filename: item.filename,
+      url: item.url,
+      mimeType: item.mimeType,
+    };
+    if (isMultiple) {
+      onChange([...currentValue, newImage]);
+    } else {
+      onChange(newImage);
+    }
+    setShowPicker(false);
+    setPickerSearch("");
+  };
+
+  const removeImage = (index: number) => {
+    const newValue = [...currentValue];
+    newValue.splice(index, 1);
+    onChange(isMultiple ? newValue : newValue[0] || null);
+  };
+
+  const filteredMedia = mediaItems.filter(
+    (item) =>
+      !pickerSearch ||
+      item.filename?.toLowerCase().includes(pickerSearch.toLowerCase()) ||
+      item.title?.toLowerCase().includes(pickerSearch.toLowerCase()),
+  );
+
+  if (uploading) {
+    return (
+      <div className="text-xs text-[var(--kyro-text-muted)] p-2">
+        Uploading...
+      </div>
+    );
+  }
+
+  const renderImagePreview = (img: any, index?: number) => {
+    const isImage = img?.url?.match(/\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i);
+    return (
+      <div
+        key={index}
+        className="flex items-center gap-2 p-2 bg-[var(--kyro-surface-accent)] rounded-lg"
+      >
+        {isImage && (
+          <img
+            src={img.url}
+            alt={img.filename || "Image"}
+            className="w-10 h-10 object-cover rounded border border-[var(--kyro-border)]"
+          />
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="text-xs truncate text-[var(--kyro-text-primary)] overflow-hidden text-ellipsis whitespace-nowrap">
+            {img?.originalName || img?.filename || "Image"}
+          </div>
+          <button
+            type="button"
+            onClick={() =>
+              index !== undefined ? removeImage(index) : onChange(null)
+            }
+            className="text-xs text-red-600 hover:text-red-700 bg-transparent border-none cursor-pointer p-0"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  if (value) {
+    return (
+      <div className="space-y-2">
+        {isMultiple ? (
+          <div className="grid grid-cols-2 gap-2">
+            {currentValue.map((img: any, i: number) =>
+              renderImagePreview(img, i),
+            )}
+            {canAddMore && (
+              <button
+                type="button"
+                onClick={() => inputRef.current?.click()}
+                disabled={disabled}
+                className="flex items-center justify-center h-12 border-2 border-dashed border-[var(--kyro-border)] rounded-lg text-sm text-[var(--kyro-text-secondary)] hover:border-[var(--kyro-border-active)] cursor-pointer transition-colors"
+              >
+                + Add {fieldLabel}
+              </button>
+            )}
+          </div>
+        ) : (
+          renderImagePreview(value)
+        )}
+        <input
+          ref={inputRef}
+          type="file"
+          accept="image/*"
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (file) uploadFile(file);
+          }}
+          disabled={disabled}
+          className="hidden"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file) uploadFile(file);
+        }}
+        disabled={disabled}
+        className="hidden"
+      />
+      <div className="flex gap-2 flex-wrap">
+        <button
+          type="button"
+          onClick={() => inputRef.current?.click()}
+          disabled={disabled}
+          className="px-3 py-1.5 text-xs rounded border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-border-active)] transition-colors"
+        >
+          + Upload {fieldLabel}
+        </button>
+        <button
+          type="button"
+          onClick={() => setShowPicker(true)}
+          disabled={disabled}
+          className="px-3 py-1.5 text-xs rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-border-active)] transition-colors"
+        >
+          Library
+        </button>
+        <button
+          type="button"
+          onClick={() => setShowUrlInput(!showUrlInput)}
+          disabled={disabled}
+          className="px-3 py-1.5 text-xs rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-border-active)] transition-colors"
+        >
+          URL
+        </button>
+      </div>
+
+      {showUrlInput && (
+        <div className="flex gap-2 items-center">
+          <input
+            ref={urlInputRef}
+            type="url"
+            placeholder="https://example.com/image.jpg"
+            value={urlValue}
+            onChange={(e) => {
+              setUrlValue(e.target.value);
+              setUrlError("");
+            }}
+            onKeyDown={(e) => e.key === "Enter" && addByUrl()}
+            disabled={disabled}
+            className="flex-1 px-2 py-1.5 text-xs rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)]"
+          />
+          <button
+            type="button"
+            onClick={addByUrl}
+            disabled={disabled || !urlValue.trim()}
+            className="px-3 py-1.5 text-xs rounded bg-[var(--kyro-primary)] text-white cursor-pointer hover:opacity-90 transition-opacity disabled:opacity-50"
+          >
+            Add
+          </button>
+          {urlError && <span className="text-xs text-red-600">{urlError}</span>}
+        </div>
+      )}
+
+      {showPicker && (
+        <div className="absolute z-50 w-[360px] max-h-[400px] overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg shadow-lg mt-1 flex flex-col">
+          <div className="p-2 border-b border-[var(--kyro-border)] flex flex-col gap-2">
+            <input
+              type="text"
+              placeholder="Search media..."
+              value={pickerSearch}
+              onChange={(e) => setPickerSearch(e.target.value)}
+              className="w-full px-2 py-1.5 text-xs rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)]"
+            />
+            {folders.length > 0 && (
+              <div className="flex gap-1 flex-wrap">
+                <button
+                  type="button"
+                  onClick={() => setSelectedFolder("")}
+                  className={`px-2 py-1 text-xs rounded transition-colors ${
+                    selectedFolder === ""
+                      ? "bg-[var(--kyro-primary)] text-white"
+                      : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
+                  }`}
+                >
+                  All
+                </button>
+                {folders.slice(0, 6).map((folder) => (
+                  <button
+                    key={folder.path}
+                    type="button"
+                    onClick={() => setSelectedFolder(folder.path)}
+                    className={`px-2 py-1 text-xs rounded transition-colors ${
+                      selectedFolder === folder.path
+                        ? "bg-[var(--kyro-primary)] text-white"
+                        : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
+                    }`}
+                  >
+                    {folder.name}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="flex-1 overflow-auto p-2">
+            {mediaLoading ? (
+              <div className="text-center py-5 text-xs text-[var(--kyro-text-muted)]">
+                Loading...
+              </div>
+            ) : filteredMedia.length === 0 ? (
+              <div className="text-center py-5 text-xs text-[var(--kyro-text-muted)]">
+                No media found
+              </div>
+            ) : (
+              <div className="grid grid-cols-3 gap-1">
+                {filteredMedia.map((item) => (
+                  <button
+                    key={item.id}
+                    type="button"
+                    onClick={() => selectFromLibrary(item)}
+                    className="border border-[var(--kyro-border)] rounded overflow-hidden cursor-pointer p-0 bg-none hover:border-[var(--kyro-primary)] transition-colors relative group"
+                  >
+                    <img
+                      src={item.thumbnailUrl || item.url}
+                      alt={item.filename}
+                      className="w-full h-[80px] object-cover"
+                    />
+                    <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                      <span className="text-white text-xs px-1 text-center truncate">
+                        {item.filename}
+                      </span>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="p-2 border-t border-[var(--kyro-border)] flex justify-between items-center">
+            <span className="text-xs text-[var(--kyro-text-muted)]">
+              {filteredMedia.length} items
+            </span>
+            <button
+              type="button"
+              onClick={() => setShowPicker(false)}
+              className="text-xs text-[var(--kyro-text-secondary)] bg-transparent border-none cursor-pointer hover:text-[var(--kyro-text-primary)]"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}