@kyro-cms/admin 0.1.7 → 0.1.9

package/src/components/fields/ImageField.tsx

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