@kyro-cms/admin 0.1.7 → 0.1.8

package/src/components/fields/FileField.tsx

@@ -1,390 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-
-interface FileFieldProps {
-  field: any;
-  value: any;
-  onChange: (value: any) => void;
-  disabled?: boolean;
-}
-
-interface MediaItem {
-  id: string;
-  filename: string;
-  url: string;
-  mimeType: string;
-  size?: number;
-  title?: string;
-  folder?: string;
-}
-
-interface MediaFolder {
-  name: string;
-  path: string;
-}
-
-export function FileField({
-  field,
-  value,
-  onChange,
-  disabled,
-}: FileFieldProps) {
-  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 [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()}&mimeType=application,video,audio`;
-      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 newItem = {
-        id: result.id,
-        filename: result.filename,
-        url: result.url,
-        mimeType: result.mimeType,
-        size: result.size,
-      };
-      if (isMultiple) {
-        onChange([...currentValue, newItem]);
-      } else {
-        onChange(newItem);
-      }
-    } catch (err) {
-      console.error("Upload failed:", err);
-    } finally {
-      setUploading(false);
-    }
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    const files = Array.from(e.dataTransfer.files);
-    if (files.length > 0) {
-      uploadFile(files[0]);
-    }
-  };
-
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (files && files.length > 0) {
-      uploadFile(files[0]);
-    }
-  };
-
-  const addByUrl = async () => {
-    if (!urlValue.trim()) return;
-    setUrlError("");
-    try {
-      new URL(urlValue);
-    } catch {
-      setUrlError("Invalid URL");
-      return;
-    }
-    const newItem = {
-      id: `url-${Date.now()}`,
-      filename: urlValue.split("/").pop() || "file",
-      url: urlValue,
-      mimeType: "application/octet-stream",
-    };
-    if (isMultiple) {
-      onChange([...currentValue, newItem]);
-    } else {
-      onChange(newItem);
-    }
-    setUrlValue("");
-    setShowUrlInput(false);
-  };
-
-  const removeItem = (index: number) => {
-    const newItems = [...currentValue];
-    newItems.splice(index, 1);
-    onChange(newItems);
-  };
-
-  const formatFileSize = (bytes?: number) => {
-    if (!bytes) return "";
-    const kb = bytes / 1024;
-    if (kb < 1024) return `${kb.toFixed(1)} KB`;
-    const mb = kb / 1024;
-    return `${mb.toFixed(1)} MB`;
-  };
-
-  const getFileIcon = (mimeType?: string) => {
-    if (!mimeType) return "📄";
-    if (mimeType.startsWith("video/")) return "🎬";
-    if (mimeType.startsWith("audio/")) return "🎵";
-    if (mimeType.includes("pdf")) return "📕";
-    if (mimeType.includes("word") || mimeType.includes("document")) return "📝";
-    if (mimeType.includes("spreadsheet") || mimeType.includes("excel"))
-      return "📊";
-    if (mimeType.includes("presentation") || mimeType.includes("powerpoint"))
-      return "📽️";
-    if (mimeType.includes("zip") || mimeType.includes("archive")) return "📦";
-    return "📄";
-  };
-
-  const renderPreview = (item: any, index: number) => (
-    <div
-      key={index}
-      className="flex items-center gap-3 p-3 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-surface)]"
-    >
-      <div className="text-xl">{getFileIcon(item.mimeType)}</div>
-      <div className="flex-1 min-w-0">
-        <div className="text-sm font-medium text-[var(--kyro-text-primary)] truncate">
-          {item.filename || item.title || "Untitled"}
-        </div>
-        {item.size && (
-          <div className="text-xs text-[var(--kyro-text-muted)]">
-            {formatFileSize(item.size)}
-          </div>
-        )}
-      </div>
-      <button
-        type="button"
-        onClick={() => removeItem(index)}
-        className="text-[var(--kyro-text-muted)] hover:text-red-500 p-1"
-      >
-        <svg
-          className="w-4 h-4"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            d="M6 18L18 6M6 6l12 12"
-          />
-        </svg>
-      </button>
-    </div>
-  );
-
-  return (
-    <div className="space-y-3">
-      {currentValue.length > 0 && (
-        <div className="space-y-2">
-          {currentValue.map((item, index) => renderPreview(item, index))}
-        </div>
-      )}
-
-      {canAddMore && (
-        <>
-          <div className="flex gap-2 flex-wrap">
-            <button
-              type="button"
-              onClick={() => inputRef.current?.click()}
-              disabled={disabled || uploading}
-              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-sidebar-active)] transition-colors disabled:opacity-50"
-            >
-              {uploading ? "Uploading..." : `+ Upload ${fieldLabel}`}
-            </button>
-            <input
-              ref={inputRef}
-              type="file"
-              onChange={handleFileSelect}
-              className="hidden"
-              accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar,.7z,.mp4,.mov,.avi,.mp3,.wav"
-            />
-            <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-sidebar-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-sidebar-active)] transition-colors"
-            >
-              URL
-            </button>
-          </div>
-
-          {showUrlInput && (
-            <div className="flex gap-2 items-center">
-              <input
-                ref={urlInputRef}
-                type="url"
-                placeholder="https://example.com/file.pdf"
-                value={urlValue}
-                onChange={(e) => {
-                  setUrlValue(e.target.value);
-                  setUrlError("");
-                }}
-                onKeyDown={(e) => e.key === "Enter" && addByUrl()}
-                className="flex-1 px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)]"
-              />
-              <button
-                type="button"
-                onClick={addByUrl}
-                className="px-3 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded text-sm font-medium"
-              >
-                Add
-              </button>
-              {urlError && (
-                <span className="text-xs text-red-500">{urlError}</span>
-              )}
-            </div>
-          )}
-
-          {showPicker && (
-            <div className="border border-[var(--kyro-border)] rounded-lg p-4 space-y-3 bg-[var(--kyro-surface)]">
-              <div className="flex items-center justify-between">
-                <h3 className="text-sm font-medium">Select File</h3>
-                <button
-                  type="button"
-                  onClick={() => setShowPicker(false)}
-                  className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]"
-                >
-                  Close
-                </button>
-              </div>
-
-              {folders.length > 0 && (
-                <div className="flex gap-1 flex-wrap">
-                  <button
-                    type="button"
-                    onClick={() => setSelectedFolder("")}
-                    className={`px-2 py-1 text-xs rounded ${
-                      !selectedFolder
-                        ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-                        : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
-                    }`}
-                  >
-                    All
-                  </button>
-                  {folders.map((folder) => (
-                    <button
-                      key={folder.path}
-                      type="button"
-                      onClick={() => setSelectedFolder(folder.path)}
-                      className={`px-2 py-1 text-xs rounded ${
-                        selectedFolder === folder.path
-                          ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-                          : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
-                      }`}
-                    >
-                      {folder.name}
-                    </button>
-                  ))}
-                </div>
-              )}
-
-              {mediaLoading ? (
-                <div className="text-center py-4 text-[var(--kyro-text-muted)]">
-                  Loading...
-                </div>
-              ) : (
-                <div className="grid grid-cols-4 gap-2 max-h-48 overflow-y-auto">
-                  {mediaItems.map((item) => {
-                    const isSelected = currentValue.some(
-                      (v) => v.url === item.url,
-                    );
-                    return (
-                      <button
-                        key={item.id}
-                        type="button"
-                        onClick={() => {
-                          if (isMultiple) {
-                            onChange([...currentValue, item]);
-                          } else {
-                            onChange(item);
-                          }
-                          setShowPicker(false);
-                        }}
-                        disabled={isSelected}
-                        className={`p-2 rounded border text-left hover:border-[var(--kyro-sidebar-active)] transition-colors ${
-                          isSelected
-                            ? "border-[var(--kyro-sidebar-active)] bg-[var(--kyro-sidebar-active)]/10"
-                            : "border-[var(--kyro-border)]"
-                        }`}
-                      >
-                        <div className="text-lg mb-1 text-center">
-                          {getFileIcon(item.mimeType)}
-                        </div>
-                        <div className="text-[10px] text-[var(--kyro-text-muted)] truncate">
-                          {item.filename}
-                        </div>
-                      </button>
-                    );
-                  })}
-                </div>
-              )}
-
-              {mediaItems.length === 0 && !mediaLoading && (
-                <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm">
-                  No files found
-                </div>
-              )}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}

package/src/components/fields/HybridContentField.tsx

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