@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/fields/TextField.tsx

@@ -1,4 +1,4 @@
-import type { TextField as TextFieldType } from '@kyro-cms/core';
+import type { TextField as TextFieldType } from "@kyro-cms/core/client";
 
 interface TextFieldComponentProps {
   field: TextFieldType;
@@ -8,18 +8,30 @@ interface TextFieldComponentProps {
   disabled?: boolean;
 }
 
-export default function TextField({ field, value = '', onChange, error, disabled }: TextFieldComponentProps) {
-  const inputType = field.variant === 'email' ? 'email' 
-    : field.variant === 'password' ? 'password'
-    : field.variant === 'url' ? 'url'
-    : 'text';
+export default function TextField({
+  field,
+  value = "",
+  onChange,
+  error,
+  disabled,
+}: TextFieldComponentProps) {
+  const inputType =
+    field.variant === "email"
+      ? "email"
+      : field.variant === "password"
+        ? "password"
+        : field.variant === "url"
+          ? "url"
+          : "text";
 
   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 text-[var(--kyro-text-primary)]">
           {field.label}
-          {field.required && <span className="text-red-500 ml-1">*</span>}
+          {field.required && (
+            <span className="text-[var(--kyro-error)] ml-1">*</span>
+          )}
         </label>
       )}
       <input
@@ -34,16 +46,20 @@ export default function TextField({ 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-[var(--kyro-error)] focus:border-[var(--kyro-error)] focus:ring-[var(--kyro-error)]"
+            : "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"
+            : "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+        }`}
       />
       {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-muted)]">
+          {field.admin.description}
+        </p>
       )}
+      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
     </div>
   );
 }

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>
+  );
+}