opacacms 0.1.1 → 0.1.2

package/src/admin/ui/components/fields/CollapsibleField.tsx

@@ -1,75 +0,0 @@
-import type React from "react";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible";
-
-interface CollapsibleFieldProps {
-  label?: string;
-  fields: any[];
-  parentData: any;
-  disabled?: boolean;
-  readOnly?: boolean;
-  options?: {
-    initiallyCollapsed?: boolean;
-    useAsTitle?: string;
-  };
-  onChange: (fieldName: string, value: any) => void;
-  renderField: (field: any, value: any, onChange: (val: any) => void) => React.ReactNode;
-}
-
-export const CollapsibleField: React.FC<CollapsibleFieldProps> = ({
-  label,
-  fields,
-  parentData,
-  disabled,
-  readOnly,
-  options,
-  onChange,
-  renderField,
-}) => {
-  const getValue = (data: any, path: string) => {
-    return path.split(".").reduce((obj, key) => obj?.[key], data);
-  };
-
-  const resolveTitle = (template: string, data: any) => {
-    if (!template.includes("{{")) return getValue(data, template);
-    return template.replace(/\{\{(.+?)\}\}/g, (_, path) => {
-      const val = getValue(data, path.trim());
-      return val !== undefined && val !== null ? String(val) : "";
-    });
-  };
-
-  const dynamicTitle = options?.useAsTitle
-    ? resolveTitle(options.useAsTitle, parentData)
-    : undefined;
-
-  return (
-    <Collapsible
-      defaultOpen={!options?.initiallyCollapsed}
-      className="opaca-collapsible-field"
-      disabled={disabled}
-    >
-      <CollapsibleTrigger className="opaca-collapsible-field-trigger">
-        {dynamicTitle || label || "Section"}
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <div
-          style={{
-            padding: "0",
-            display: "flex",
-            flexDirection: "column",
-            gap: "1.25rem",
-          }}
-        >
-          {(fields || []).map((field, index) => (
-            <div key={field.name || `collapsible-item-${index}`} className="collapsible-field-item">
-              {renderField(
-                field,
-                field.name ? parentData?.[field.name] : undefined,
-                (val) => field.name && onChange(field.name, val),
-              )}
-            </div>
-          ))}
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};

package/src/admin/ui/components/fields/DateField.tsx

@@ -1,45 +0,0 @@
-import type React from "react";
-
-interface DateFieldProps {
-  name: string;
-  label?: string;
-  value: string | number | Date;
-  onChange: (val: string) => void;
-  required?: boolean;
-  disabled?: boolean;
-  readOnly?: boolean;
-  error?: string;
-}
-
-export const DateField: React.FC<DateFieldProps> = ({
-  name,
-  label,
-  value,
-  onChange,
-  required,
-  disabled,
-  readOnly,
-  error,
-}) => {
-  const formattedValue = value ? new Date(value).toISOString().split("T")[0] : "";
-
-  return (
-    <div className="opaca-form-group">
-      <label className="opaca-label" htmlFor={`field-${name}`}>
-        {label || name}
-        {required && <span style={{ color: "var(--opaca-error)", marginLeft: "4px" }}>*</span>}
-      </label>
-      <input
-        id={`field-${name}`}
-        type="date"
-        className={`opaca-input ${error ? "error" : ""}`}
-        value={formattedValue}
-        readOnly={readOnly}
-        disabled={disabled}
-        onChange={(e) => onChange(e.target.value)}
-        required={required}
-      />
-      {error && <span className="opaca-field-error">{error}</span>}
-    </div>
-  );
-};

package/src/admin/ui/components/fields/FileField.tsx

@@ -1,322 +0,0 @@
-import type React from "react";
-import { useEffect, useState } from "react";
-import { api, getCurrentBaseURL } from "../../../api-client";
-import { AssetManagerModal } from "../media/AssetManagerModal";
-import "../../styles/asset-manager.scss";
-
-interface FileFieldProps {
-  name: string;
-  label?: string;
-  value: any; // { assetId, url, filename, mime_type, filesize, meta: {} }
-  onChange: (value: any) => void;
-  options?: {
-    allowedmime_types?: string[];
-    maxFileSize?: number;
-    metaFields?: Array<{
-      name: string;
-      type: string;
-      label?: string;
-      required?: boolean;
-    }>;
-  };
-  disabled?: boolean;
-  readOnly?: boolean;
-  bucket?: string;
-}
-
-export const FileField: React.FC<FileFieldProps> = ({
-  name,
-  label,
-  value,
-  onChange,
-  options,
-  disabled,
-  readOnly,
-  bucket = "default",
-}) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [assetMetadata, setAssetMetadata] = useState<any>(null);
-  const [isLoadingMetadata, setIsLoadingMetadata] = useState(false);
-  const [optimisticFile, setOptimisticFile] = useState<{
-    url: string;
-    file: File;
-    progress: number;
-  } | null>(null);
-  const [uploadError, setUploadError] = useState<string | null>(null);
-
-  const isRestricted = disabled || readOnly;
-
-  // Extract ID from value (could be string ID or older object format)
-  const assetId = typeof value === "string" ? value : value?.assetId;
-
-  // Fetch metadata if we only have an ID
-  useEffect(() => {
-    if (assetId && (!value || typeof value === "string" || !value.filename)) {
-      setIsLoadingMetadata(true);
-      api
-        .get(`api/assets/${assetId}`)
-        .json<any>()
-        .then((data) => {
-          setAssetMetadata(data);
-        })
-        .catch((err) => {
-          console.error("Failed to fetch asset metadata", err);
-        })
-        .finally(() => {
-          setIsLoadingMetadata(false);
-        });
-    } else if (value && typeof value === "object" && value.filename) {
-      setAssetMetadata(value);
-    } else {
-      setAssetMetadata(null);
-    }
-  }, [assetId, value]);
-
-  // Cleanup object URLs to prevent memory leaks when the component unmounts
-  useEffect(() => {
-    return () => {
-      if (optimisticFile?.url) {
-        URL.revokeObjectURL(optimisticFile.url);
-      }
-    };
-  }, [optimisticFile]);
-
-  // Handle a direct file drop on the field (bypassing the global modal)
-  const handleDirectDrop = async (e: React.DragEvent) => {
-    e.preventDefault();
-    if (isRestricted) return;
-
-    const file = e.dataTransfer.files[0];
-    if (!file) return;
-
-    if (options?.allowedmime_types && !options.allowedmime_types.includes(file.type)) {
-      setUploadError(`Invalid file type. Allowed: ${options.allowedmime_types.join(", ")}`);
-      return;
-    }
-    if (options?.maxFileSize && file.size > options.maxFileSize) {
-      setUploadError(`File too large. Max size: ${options.maxFileSize / 1024 / 1024}MB`);
-      return;
-    }
-
-    // 1. Create Optimistic Preview Instantly
-    const tempUrl = URL.createObjectURL(file);
-    setOptimisticFile({ url: tempUrl, file, progress: 0 });
-    setUploadError(null);
-
-    // 2. Start Background Upload
-    const formData = new FormData();
-    formData.append("file", file);
-
-    try {
-      const response = await api
-        .post(`api/__system/assets/upload?bucket=${bucket}`, {
-          body: formData,
-        })
-        .json<any>();
-
-      // 3. Success! Update with the ID/Key only as requested
-      const id = response.id || response.assetId;
-      setOptimisticFile(null); // Clear optimistic state
-      onChange(id); // Update the real form state with JUST the ID
-    } catch (err: any) {
-      // 4. Failure! Revert the UI
-      setOptimisticFile(null);
-      setUploadError(err.message);
-    }
-  };
-
-  const handleRemove = () => {
-    if (isRestricted) return;
-    onChange(null);
-  };
-
-  // Note: Local metadata for the field itself is currently not handled if we only store ID.
-  // We might want to store a wrapper object if metadata is needed: { assetId, meta: {} }
-  const handleMetaChange = (fieldName: string, fieldValue: any) => {
-    if (isRestricted) return;
-
-    // If we need to support meta, we might need to keep a small object
-    // But per user request, ID only is preferred for the asset itself.
-    // For now, if meta is present, we'll store as an object.
-    const currentMeta = typeof value === "object" ? value.meta || {} : {};
-    onChange({
-      assetId: assetId,
-      meta: {
-        ...currentMeta,
-        [fieldName]: fieldValue,
-      },
-    });
-  };
-
-  const getResolvedUrl = (asset: any) => {
-    if (!asset) return "";
-    if (asset.url) return asset.url;
-    return `${getCurrentBaseURL()}/api/assets/${asset.id || asset.assetId}/view`;
-  };
-
-  return (
-    <div
-      className={`file-field-container ${isRestricted ? "is-restricted" : ""}`}
-      onDragOver={(e) => !isRestricted && e.preventDefault()}
-      onDrop={handleDirectDrop}
-    >
-      <div className="file-field-label-row">
-        <label>{label || name}</label>
-        {uploadError && <span className="upload-error">{uploadError}</span>}
-      </div>
-
-      {/* State 1: Optimistic Uploading */}
-      {optimisticFile ? (
-        <div className="file-field-optimistic-card">
-          <div className="optimistic-info">
-            {optimisticFile.file.type.startsWith("image/") ? (
-              <img src={optimisticFile.url} alt="Uploading..." />
-            ) : (
-              <div className="file-icon-placeholder">
-                <span>FILE</span>
-              </div>
-            )}
-            <div className="optimistic-details">
-              <span className="filename">{optimisticFile.file.name}</span>
-              <span className="progress-text">Uploading...</span>
-              <div className="progress-bar-bg">
-                <div className="progress-bar-fill" style={{ width: `50%` }}></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : assetMetadata ? (
-        <>
-          <div className="file-field-asset-card">
-            <div className="file-field-asset-info">
-              <div className="asset-preview">
-                {(() => {
-                  const mime = assetMetadata.mimeType || assetMetadata.mime_type;
-                  if (mime?.startsWith("image/")) {
-                    return <img src={getResolvedUrl(assetMetadata)} alt={assetMetadata.filename} />;
-                  }
-                  return (
-                    <div className="file-icon-placeholder">
-                      <span>{mime?.split("/")[1]?.toUpperCase() || "FILE"}</span>
-                    </div>
-                  );
-                })()}
-              </div>
-              <div className="asset-details">
-                <span className="filename" title={assetMetadata.filename}>
-                  {assetMetadata.filename}
-                </span>
-                <span className="filesize">
-                  {assetMetadata.filesize
-                    ? `${(assetMetadata.filesize / 1024).toFixed(1)} KB`
-                    : "..."}
-                </span>
-              </div>
-            </div>
-            {!isRestricted && (
-              <div className="asset-actions">
-                <button
-                  type="button"
-                  onClick={() => setIsModalOpen(true)}
-                  className="replace-button"
-                >
-                  Replace
-                </button>
-                <button type="button" onClick={handleRemove} className="remove-button">
-                  Remove
-                </button>
-              </div>
-            )}
-          </div>
-
-          {/* Contextual Metadata Fields */}
-          {options?.metaFields && options.metaFields.length > 0 && (
-            <div className="file-field-metadata">
-              <h4>Contextual Metadata</h4>
-              {options.metaFields.map((metaField) => (
-                <div key={metaField.name} className="metadata-field">
-                  <label htmlFor={metaField.name}>
-                    {metaField.label || metaField.name}{" "}
-                    {metaField.required && <span className="required">*</span>}
-                  </label>
-                  {metaField.type === "textarea" ? (
-                    <textarea
-                      id={metaField.name}
-                      rows={3}
-                      value={(value?.meta || {})[metaField.name] || ""}
-                      onChange={(e) => handleMetaChange(metaField.name, e.target.value)}
-                      readOnly={readOnly}
-                      disabled={disabled}
-                      placeholder={
-                        isRestricted
-                          ? ""
-                          : `Enter ${metaField.label?.toLowerCase() || metaField.name}...`
-                      }
-                    />
-                  ) : (
-                    <input
-                      type={metaField.type === "number" ? "number" : "text"}
-                      value={(value?.meta || {})[metaField.name] || ""}
-                      onChange={(e) =>
-                        handleMetaChange(
-                          metaField.name,
-                          metaField.type === "number" ? Number(e.target.value) : e.target.value,
-                        )
-                      }
-                      readOnly={readOnly}
-                      disabled={disabled}
-                      placeholder={
-                        isRestricted
-                          ? ""
-                          : `Enter ${metaField.label?.toLowerCase() || metaField.name}...`
-                      }
-                    />
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </>
-      ) : isLoadingMetadata ? (
-        <div className="file-field-optimistic-card">
-          <div className="status-text">Loading asset details...</div>
-        </div>
-      ) : (
-        // State 3: Empty state
-        <button
-          type="button"
-          onClick={() => !isRestricted && setIsModalOpen(true)}
-          disabled={isRestricted}
-          className={`file-field-empty-button ${isRestricted ? "disabled" : ""}`}
-        >
-          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
-            ></path>
-          </svg>
-          <span>{isRestricted ? "No file selected" : "Drag a file here or click to select"}</span>
-        </button>
-      )}
-
-      {/* Render the Global Modal if Open */}
-      {isModalOpen && !isRestricted && (
-        <AssetManagerModal
-          bucket={bucket}
-          onClose={() => setIsModalOpen(false)}
-          onSelect={(asset) => {
-            // Per user request, save only the ID/Key
-            if (!isRestricted) {
-              onChange(asset.assetId);
-              setIsModalOpen(false);
-            }
-          }}
-          allowedmime_types={options?.allowedmime_types}
-          maxFileSize={options?.maxFileSize}
-        />
-      )}
-    </div>
-  );
-};

package/src/admin/ui/components/fields/GroupField.tsx

@@ -1,50 +0,0 @@
-import type React from "react";
-import { Group } from "../ui/group";
-
-interface GroupFieldProps {
-  name: string;
-  label?: string;
-  fields: any[];
-  value: any;
-  onChange: (val: any) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
-  renderField: (field: any, value: any, onChange: (val: any) => void) => React.ReactNode;
-}
-
-export const GroupField: React.FC<GroupFieldProps> = ({
-  name,
-  label,
-  fields,
-  value,
-  onChange,
-  disabled,
-  readOnly,
-  renderField,
-}) => {
-  const handleFieldChange = (fieldName: string, fieldValue: any) => {
-    onChange({
-      ...(value || {}),
-      [fieldName]: fieldValue,
-    });
-  };
-
-  return (
-    <Group label={label || name} className="opaca-group-field">
-      <div
-        className="opaca-group-fields-container"
-        style={{ display: "flex", flexDirection: "column", gap: "16px" }}
-      >
-        {(fields || []).map((field, index) => (
-          <div key={field.name || `group-item-${index}`} className="group-field-item">
-            {renderField(
-              field,
-              field.name ? value?.[field.name] : undefined,
-              (val) => field.name && handleFieldChange(field.name, val),
-            )}
-          </div>
-        ))}
-      </div>
-    </Group>
-  );
-};

package/src/admin/ui/components/fields/JoinField.tsx

@@ -1,23 +0,0 @@
-import type React from "react";
-import { Join } from "../ui/join";
-
-interface JoinFieldProps {
-  name: string;
-  label?: string;
-  collection: string;
-  value: any;
-  disabled?: boolean;
-  readOnly?: boolean;
-  on?: string;
-  onChange?: (val: any) => void;
-  error?: string;
-  placeholder?: string;
-}
-
-export const JoinField: React.FC<JoinFieldProps> = ({ name, label, collection, value, on }) => {
-  return (
-    <div className="opaca-form-group">
-      <Join label={label || name} collection={collection} on={on} />
-    </div>
-  );
-};

package/src/admin/ui/components/fields/NumberField.tsx

@@ -1,46 +0,0 @@
-import type React from "react";
-
-interface NumberFieldProps {
-  name: string;
-  label?: string;
-  value: number;
-  onChange: (val: number) => void;
-  required?: boolean;
-  disabled?: boolean;
-  readOnly?: boolean;
-  placeholder?: string;
-  error?: string;
-}
-
-export const NumberField: React.FC<NumberFieldProps> = ({
-  name,
-  label,
-  value,
-  onChange,
-  required,
-  disabled,
-  readOnly,
-  placeholder,
-  error,
-}) => {
-  return (
-    <div className="opaca-form-group">
-      <label className="opaca-label" htmlFor={`field-${name}`}>
-        {label || name}
-        {required && <span style={{ color: "var(--opaca-error)", marginLeft: "4px" }}>*</span>}
-      </label>
-      <input
-        id={`field-${name}`}
-        type="number"
-        className={`opaca-input ${error ? "error" : ""}`}
-        value={value ?? ""}
-        readOnly={readOnly}
-        disabled={disabled}
-        onChange={(e) => onChange(e.target.valueAsNumber || 0)}
-        placeholder={placeholder || `Enter ${label || name}...`}
-        required={required}
-      />
-      {error && <span className="opaca-field-error">{error}</span>}
-    </div>
-  );
-};

package/src/admin/ui/components/fields/RadioField.tsx

@@ -1,62 +0,0 @@
-import type React from "react";
-import { Label } from "../ui/label";
-import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
-
-interface RadioFieldProps {
-  name: string;
-  label?: string;
-  value: string;
-  onChange: (val: string) => void;
-  choices: Array<{ label: string; value: string } | string>;
-  required?: boolean;
-  disabled?: boolean;
-  readOnly?: boolean;
-  error?: string;
-}
-
-export const RadioField: React.FC<RadioFieldProps> = ({
-  name,
-  label,
-  value,
-  onChange,
-  choices,
-  required,
-  disabled,
-  readOnly,
-  error,
-}) => {
-  const normalizedChoices = (choices || []).map((choice) =>
-    typeof choice === "string" ? { label: choice, value: choice } : choice,
-  );
-
-  return (
-    <div className="opaca-form-group">
-      <label className="opaca-label">
-        {label || name}
-        {required && <span style={{ color: "var(--opaca-error)", marginLeft: "4px" }}>*</span>}
-      </label>
-      <RadioGroup
-        value={value}
-        onValueChange={onChange}
-        disabled={disabled || readOnly}
-        name={name}
-        className="opaca-radio-field-group"
-      >
-        <div style={{ display: "flex", flexDirection: "column", gap: "8px", padding: "8px 0" }}>
-          {normalizedChoices.map((choice) => (
-            <div key={choice.value} style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-              <RadioGroupItem value={choice.value} id={`radio-${name}-${choice.value}`} />
-              <Label
-                htmlFor={`radio-${name}-${choice.value}`}
-                style={{ cursor: disabled || readOnly ? "not-allowed" : "pointer" }}
-              >
-                {choice.label}
-              </Label>
-            </div>
-          ))}
-        </div>
-      </RadioGroup>
-      {error && <span className="opaca-field-error">{error}</span>}
-    </div>
-  );
-};