opacacms 0.1.0 → 0.1.2

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

@@ -1,202 +0,0 @@
-import { Plus, Trash2 } from "lucide-react";
-import type React from "react";
-import { Blocks } from "../ui/blocks";
-import { Button } from "../ui/button";
-import { capitalize } from "./utils";
-
-interface BlocksFieldProps {
-  name: string;
-  label?: string;
-  blocks: Array<{
-    slug: string;
-    fields: any[];
-    label?: string;
-  }>;
-  value: any[];
-  onChange: (val: any[]) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
-  renderField: (field: any, value: any, onChange: (val: any) => void) => React.ReactNode;
-}
-
-export const BlocksField: React.FC<BlocksFieldProps> = ({
-  name,
-  label,
-  blocks,
-  value = [],
-  onChange,
-  disabled,
-  readOnly,
-  renderField,
-}) => {
-  const addBlock = (blockSlug: string) => {
-    const currentValue = Array.isArray(value) ? value : [];
-    const blockDef = blocks.find((b) => b.slug === blockSlug);
-
-    const initialData: Record<string, any> = { blockType: blockSlug };
-
-    if (blockDef) {
-      blockDef.fields.forEach((f) => {
-        if (f.name) {
-          if (f.defaultValue !== undefined) {
-            initialData[f.name] = f.defaultValue;
-          } else if (f.type === "boolean") {
-            initialData[f.name] = false;
-          } else if (f.type === "number") {
-            initialData[f.name] = 0;
-          } else if (f.type === "relationship" && f.hasMany) {
-            initialData[f.name] = [];
-          } else if (f.type === "blocks") {
-            initialData[f.name] = [];
-          } else {
-            initialData[f.name] = "";
-          }
-        }
-      });
-    }
-
-    onChange([...currentValue, initialData]);
-  };
-
-  const removeBlock = (index: number) => {
-    const currentValue = Array.isArray(value) ? value : [];
-    const newValue = [...currentValue];
-    newValue.splice(index, 1);
-    onChange(newValue);
-  };
-
-  const updateBlockData = (index: number, fieldName: string, fieldValue: any) => {
-    const currentValue = Array.isArray(value) ? value : [];
-    const newValue = [...currentValue];
-    newValue[index] = {
-      ...newValue[index],
-      [fieldName]: fieldValue,
-    };
-    onChange(newValue);
-  };
-
-  return (
-    <Blocks label={label || name} className="opaca-blocks-field">
-      <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
-        {(Array.isArray(value) ? value : []).map((item, index) => {
-          const blockDef = blocks.find((b) => b.slug === item.blockType);
-          if (!blockDef) return null;
-
-          return (
-            <div
-              key={`${item.blockType}-${index}`}
-              style={{
-                border: "1px solid var(--opaca-border)",
-                borderRadius: "var(--opaca-radius-lg)",
-                backgroundColor: "rgba(255, 255, 255, 0.02)",
-                padding: "1.25rem",
-                position: "relative",
-                transition: "border-color var(--opaca-transition)",
-              }}
-              className="opaca-block-item"
-            >
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  marginBottom: "1.25rem",
-                  borderBottom: "1px solid var(--opaca-border)",
-                  paddingBottom: "0.75rem",
-                }}
-              >
-                <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                  <div
-                    style={{
-                      width: "8px",
-                      height: "8px",
-                      borderRadius: "50%",
-                      backgroundColor: "var(--opaca-primary)",
-                    }}
-                  ></div>
-                  <h4
-                    style={{
-                      margin: 0,
-                      fontSize: "0.8125rem",
-                      fontWeight: 600,
-                      color: "var(--opaca-text)",
-                    }}
-                  >
-                    {blockDef.label || capitalize(blockDef.slug)}
-                  </h4>
-                </div>
-                {!disabled && !readOnly && (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => removeBlock(index)}
-                    style={{ color: "var(--opaca-text-dim)", height: "24px", width: "24px" }}
-                  >
-                    <Trash2 size={14} />
-                  </Button>
-                )}
-              </div>
-              <div style={{ display: "flex", flexDirection: "column", gap: "1.25rem" }}>
-                {blockDef.fields.map((field) => (
-                  <div key={field.name} className="block-field-item">
-                    {renderField(field, item[field.name], (val) =>
-                      updateBlockData(index, field.name, val),
-                    )}
-                  </div>
-                ))}
-              </div>
-            </div>
-          );
-        })}
-
-        {!disabled && !readOnly && (
-          <div
-            style={{
-              marginTop: "0.5rem",
-              padding: "1.25rem",
-              border: "1px dashed var(--opaca-border)",
-              borderRadius: "var(--opaca-radius-lg)",
-              textAlign: "center",
-            }}
-          >
-            <p
-              style={{
-                fontSize: "0.75rem",
-                fontWeight: 500,
-                color: "var(--opaca-text-muted)",
-                textTransform: "uppercase",
-                letterSpacing: "0.03em",
-                marginBottom: "1rem",
-              }}
-            >
-              Add a new block:
-            </p>
-            <div
-              style={{
-                display: "flex",
-                flexWrap: "wrap",
-                gap: "0.75rem",
-                justifyContent: "center",
-              }}
-            >
-              {blocks.map((block) => (
-                <Button
-                  type="button"
-                  key={block.slug}
-                  variant="outline"
-                  size="sm"
-                  onClick={() => addBlock(block.slug)}
-                  style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "0.75rem" }}
-                >
-                  <Plus size={12} />
-                  {block.label || capitalize(block.slug)}
-                </Button>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </Blocks>
-  );
-};

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

@@ -1,50 +0,0 @@
-import type React from "react";
-
-interface BooleanFieldProps {
-  name: string;
-  label?: string;
-  value: boolean;
-  onChange: (val: boolean) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
-  error?: string;
-  renderType?: "switch" | "toggle" | "checkbox";
-}
-
-export const BooleanField: React.FC<BooleanFieldProps> = ({
-  name,
-  label,
-  value,
-  onChange,
-  disabled,
-  readOnly,
-  error,
-  renderType = "switch",
-}) => {
-  const isDisabled = disabled || readOnly;
-
-  return (
-    <div className="opaca-form-group">
-      <label className="opaca-label" htmlFor={`field-${name}`}>
-        {label || name}
-      </label>
-
-      <label className="opaca-switch">
-        <input
-          id={`field-${name}`}
-          type="checkbox"
-          checked={!!value}
-          disabled={isDisabled}
-          onChange={(e) => onChange(e.target.checked)}
-        />
-        <div className="opaca-switch-track">
-          <div className="opaca-switch-thumb" />
-        </div>
-        <span className="opaca-switch-label" style={{ minWidth: "60px" }}>
-          {value ? "Enabled" : "Disabled"}
-        </span>
-      </label>
-      {error && <span className="opaca-field-error">{error}</span>}
-    </div>
-  );
-};

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