@kyro-cms/admin 0.1.7 → 0.1.8

package/src/components/fields/UploadField.tsx

@@ -0,0 +1,613 @@
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { Image, Film, FileText, Music, File, X, Loader2 } from "lucide-react";
+
+interface UploadFieldProps {
+  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;
+}
+
+const getFileType = (mimeType?: string, filename?: string) => {
+  const mime = mimeType?.toLowerCase() || "";
+  const name = filename?.toLowerCase() || "";
+
+  if (
+    mime.startsWith("image/") ||
+    name.match(/\.(jpe?g|png|gif|webp|avif|svg)$/i)
+  )
+    return "image";
+  if (mime.startsWith("video/") || name.match(/\.(mp4|webm|ogg|mov)$/i))
+    return "video";
+  if (mime.startsWith("audio/") || name.match(/\.(mp3|wav|ogg|m4a)$/i))
+    return "audio";
+  if (mime.includes("pdf") || name.endsWith(".pdf")) return "pdf";
+  if (name.match(/\.(doc|docx|txt|rtf|odt)$/i)) return "document";
+  if (name.match(/\.(xls|xlsx|csv)$/i)) return "spreadsheet";
+  if (name.match(/\.(zip|tar|gz|7z|rar)$/i)) return "archive";
+
+  return "other";
+};
+
+const FileIcon = ({
+  type,
+  className,
+}: {
+  type: string;
+  className?: string;
+}) => {
+  switch (type) {
+    case "image":
+      return <Image className={className} />;
+    case "video":
+      return <Film className={className} />;
+    case "audio":
+      return <Music className={className} />;
+    case "pdf":
+    case "document":
+      return <FileText className={className} />;
+    default:
+      return <File className={className} />;
+  }
+};
+
+export function UploadField({
+  field,
+  value,
+  onChange,
+  disabled,
+}: UploadFieldProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const urlInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [showPicker, setShowPicker] = useState(false);
+  const [isPickerFullscreen, setIsPickerFullscreen] = 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 || "File";
+  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 = useMemo(() => {
+    return mediaItems.filter((item) => {
+      return (
+        !pickerSearch ||
+        item.filename?.toLowerCase().includes(pickerSearch.toLowerCase()) ||
+        item.title?.toLowerCase().includes(pickerSearch.toLowerCase())
+      );
+    });
+  }, [mediaItems, pickerSearch]);
+
+  if (uploading) {
+    return (
+      <div className="text-xs text-[var(--kyro-text-muted)] p-2">
+        Uploading...
+      </div>
+    );
+  }
+
+  const renderImagePreview = (img: any, index?: number) => {
+    const fileType = getFileType(img?.mimeType, img?.filename || img?.url);
+    const isImage = fileType === "image";
+
+    return (
+      <div
+        key={index}
+        className="flex items-center gap-3 p-2.5 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)] group"
+      >
+        <div className="w-10 h-10 rounded-md overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] flex items-center justify-center flex-shrink-0">
+          {isImage ? (
+            <img
+              src={img.url}
+              alt={img.filename || "Preview"}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <FileIcon
+              type={fileType}
+              className="w-5 h-5 text-[var(--kyro-text-secondary)]"
+            />
+          )}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-[11px] font-medium truncate text-[var(--kyro-text-primary)]">
+            {img?.originalName || img?.filename || "Unnamed File"}
+          </div>
+          <div className="text-[10px] text-[var(--kyro-text-muted)] uppercase tracking-wider font-bold">
+            {fieldLabel}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={() =>
+            index !== undefined ? removeImage(index) : onChange(null)
+          }
+          disabled={disabled}
+          className="p-1.5 rounded-md text-[var(--kyro-text-muted)] hover:text-[var(--kyro-error)] hover:bg-[var(--kyro-danger-bg)] transition-all opacity-0 group-hover:opacity-100"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </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, fieldLabel)
+        )}
+        <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={field.allowedTypes?.join(",") || "*/*"}
+        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 font-semibold 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 font-semibold 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 font-semibold 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-[var(--kyro-error)]">{urlError}</span>
+          )}
+        </div>
+      )}
+
+      {showPicker &&
+        (isPickerFullscreen ? (
+          createPortal(
+            <MediaPickerContent
+              isFullscreen
+              pickerSearch={pickerSearch}
+              setPickerSearch={setPickerSearch}
+              folders={folders}
+              selectedFolder={selectedFolder}
+              setSelectedFolder={setSelectedFolder}
+              mediaLoading={mediaLoading}
+              filteredMedia={filteredMedia}
+              selectFromLibrary={selectFromLibrary}
+              setIsPickerFullscreen={setIsPickerFullscreen}
+              setShowPicker={setShowPicker}
+            />,
+            document.body,
+          )
+        ) : (
+          <MediaPickerContent
+            isFullscreen={false}
+            pickerSearch={pickerSearch}
+            setPickerSearch={setPickerSearch}
+            folders={folders}
+            selectedFolder={selectedFolder}
+            setSelectedFolder={setSelectedFolder}
+            mediaLoading={mediaLoading}
+            filteredMedia={filteredMedia}
+            selectFromLibrary={selectFromLibrary}
+            setIsPickerFullscreen={setIsPickerFullscreen}
+            setShowPicker={setShowPicker}
+          />
+        ))}
+    </div>
+  );
+}
+
+function MediaPickerContent({
+  isFullscreen,
+  pickerSearch,
+  setPickerSearch,
+  folders,
+  selectedFolder,
+  setSelectedFolder,
+  mediaLoading,
+  filteredMedia,
+  selectFromLibrary,
+  setIsPickerFullscreen,
+  setShowPicker,
+}: {
+  isFullscreen: boolean;
+  pickerSearch: string;
+  setPickerSearch: (v: string) => void;
+  folders: MediaFolder[];
+  selectedFolder: string;
+  setSelectedFolder: (v: string) => void;
+  mediaLoading: boolean;
+  filteredMedia: MediaItem[];
+  selectFromLibrary: (item: MediaItem) => void;
+  setIsPickerFullscreen: (v: boolean) => void;
+  setShowPicker: (v: boolean) => void;
+}) {
+  return (
+    <div
+      className={`${isFullscreen
+        ? "fixed inset-0 z-[9999]"
+        : "absolute z-50 w-[360px] max-h-[400px] mt-1 rounded-lg shadow-lg"
+        } overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] 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>
+
+      {/* Picker Items */}
+      <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 gap-1 ${isFullscreen
+              ? "grid-cols-[repeat(auto-fill,minmax(140px,1fr))]"
+              : "grid-cols-3"
+              }`}
+          >
+            {filteredMedia.map((item) => (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => selectFromLibrary(item)}
+                className="border border-[var(--kyro-border)] rounded-md overflow-hidden cursor-pointer p-0 bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)] transition-all relative group"
+              >
+                <div
+                  className={`w-full flex items-center justify-center bg-[var(--kyro-surface-accent)] ${isFullscreen ? "h-[120px]" : "h-[80px]"
+                    }`}
+                >
+                  {getFileType(item.mimeType, item.filename) === "image" ? (
+                    <img
+                      src={item.thumbnailUrl || item.url}
+                      alt={item.filename}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <FileIcon
+                      type={getFileType(item.mimeType, item.filename)}
+                      className={isFullscreen ? "w-10 h-10" : "w-8 h-8"}
+                    />
+                  )}
+                </div>
+                <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center p-2">
+                  <span className="text-white text-[10px] font-medium text-center line-clamp-2 mb-1">
+                    {item.filename}
+                  </span>
+                  <span className="text-white/70 text-[9px] uppercase font-bold tracking-tighter">
+                    {getFileType(item.mimeType, 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>
+        <div className="flex gap-2 items-center">
+          <button
+            type="button"
+            onClick={() => setIsPickerFullscreen(!isFullscreen)}
+            className="p-1.5 rounded text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+            title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+          >
+            {isFullscreen ? (
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />
+              </svg>
+            ) : (
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
+              </svg>
+            )}
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setShowPicker(false);
+              setIsPickerFullscreen(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>
+  );
+}

package/src/components/fields/VideoField.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { UploadField } from "./UploadField";
+
+interface VideoFieldProps {
+  src?: string;
+  title?: string;
+  onChange: (field: string, value: string) => void;
+  onUploadChange?: (value: any) => void;
+  compact?: boolean;
+}
+
+export const VideoField: React.FC<VideoFieldProps> = ({
+  src = "",
+  title = "",
+  onChange,
+  onUploadChange,
+  compact = false,
+}) => {
+  const isExternalUrl =
+    src.includes("youtube.com") ||
+    src.includes("vimeo.com") ||
+    src.includes("youtu.be");
+
+  if (compact) {
+    return (
+      <div className="space-y-2">
+        <input
+          type="url"
+          value={src}
+          onChange={(e) => onChange("src", e.target.value)}
+          className="w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent font-mono text-xs"
+          placeholder="MP4 URL, YouTube, or Vimeo link..."
+        />
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => onChange("title", e.target.value)}
+          className="w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+          placeholder="Video title (optional)..."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <UploadField
+        field={{ label: "Video Asset", name: "src", maxCount: 1 }}
+        value={src}
+        onChange={onUploadChange || ((v) => onChange("src", v))}
+      />
+      <span className="text-xs text-[var(--kyro-text-muted)]">
+        or paste a URL
+      </span>
+      <input
+        type="url"
+        value={src}
+        onChange={(e) => onChange("src", e.target.value)}
+        className="w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent font-mono text-xs"
+        placeholder="MP4 URL, YouTube, or Vimeo link..."
+      />
+      <input
+        type="text"
+        value={title}
+        onChange={(e) => onChange("title", e.target.value)}
+        className="w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+        placeholder="Video title (optional)..."
+      />
+    </div>
+  );
+};
+
+export default VideoField;