opacacms 0.1.0

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

@@ -0,0 +1,202 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,45 @@
+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

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