opacacms 0.1.0

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

@@ -0,0 +1,54 @@
+import type React from "react";
+
+interface TextAreaFieldProps {
+  name: string;
+  label?: string;
+  value: string | null;
+  onChange: (val: string | null) => void;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  placeholder?: string;
+  error?: string;
+}
+
+export const TextAreaField: React.FC<TextAreaFieldProps> = ({
+  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>
+      <textarea
+        id={`field-${name}`}
+        className={`opaca-input ${error ? "error" : ""}`}
+        style={{
+          minHeight: "160px",
+          resize: "vertical",
+          padding: "1rem",
+          lineHeight: "1.5",
+        }}
+        value={value || ""}
+        readOnly={readOnly}
+        disabled={disabled}
+        onChange={(e) => {
+          const val = e.target.value;
+          onChange(val === "" && !required ? null : val);
+        }}
+        placeholder={placeholder || `Enter ${label || name}...`}
+        required={required}
+      />
+      {error && <span className="opaca-field-error">{error}</span>}
+    </div>
+  );
+};

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

@@ -0,0 +1,49 @@
+import type React from "react";
+
+interface TextFieldProps {
+  name: string;
+  label?: string;
+  value: string | null;
+  onChange: (val: string | null) => void;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  placeholder?: string;
+  error?: string;
+}
+
+export const TextField: React.FC<TextFieldProps> = ({
+  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="text"
+        className={`opaca-input ${error ? "error" : ""}`}
+        value={value || ""}
+        readOnly={readOnly}
+        disabled={disabled}
+        onChange={(e) => {
+          const val = e.target.value;
+          onChange(val === "" && !required ? null : val);
+        }}
+        placeholder={placeholder || `Enter ${label || name}...`}
+        required={required}
+      />
+      {error && <span className="opaca-field-error">{error}</span>}
+    </div>
+  );
+};

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

@@ -0,0 +1,53 @@
+import type React from "react";
+
+interface VirtualFieldProps {
+  name: string;
+  label?: string;
+  value: any;
+}
+
+export const VirtualField: React.FC<VirtualFieldProps> = ({ name, label, value }) => {
+  const displayValue =
+    value === null || value === undefined
+      ? ""
+      : typeof value === "object"
+        ? JSON.stringify(value)
+        : String(value);
+
+  return (
+    <div className="opaca-form-group">
+      <label className="opaca-label" htmlFor={`field-${name}`}>
+        {label || name}
+        <span
+          style={{
+            color: "rgba(255, 255, 255, 0.4)",
+            marginLeft: "8px",
+            fontSize: "11px",
+            fontWeight: "normal",
+            textTransform: "uppercase",
+            letterSpacing: "0.5px",
+          }}
+        >
+          (Computed)
+        </span>
+      </label>
+      <div
+        className="opaca-input read-only virtual"
+        style={{
+          backgroundColor: "rgba(255, 255, 255, 0.03)",
+          minHeight: "42px",
+          display: "flex",
+          alignItems: "center",
+          padding: "0 12px",
+          borderRadius: "8px",
+          border: "1px solid rgba(255, 255, 255, 0.05)",
+          color: "rgba(255, 255, 255, 0.7)",
+          fontSize: "14px",
+          fontFamily: "monospace",
+        }}
+      >
+        {displayValue}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,371 @@
+import React, { useEffect, useRef } from "react";
+import { ArrayField } from "./ArrayField";
+import { BlocksField } from "./BlocksField";
+import { BooleanField } from "./BooleanField";
+import { CollapsibleField } from "./CollapsibleField";
+import { DateField } from "./DateField";
+import { FileField } from "./FileField";
+import { GroupField } from "./GroupField";
+import { JoinField } from "./JoinField";
+import { NumberField } from "./NumberField";
+import { RadioField } from "./RadioField";
+import { RelationshipField } from "./RelationshipField";
+import { RowField } from "./RowField";
+import { RichTextEditor } from "./richtext-editor";
+import { SelectField } from "./SelectField";
+import { TabsField } from "./TabsField";
+import { TextAreaField } from "./TextAreaField";
+import { TextField } from "./TextField";
+import { capitalize } from "./utils";
+import { VirtualField } from "./VirtualField";
+
+export {
+  ArrayField,
+  BlocksField,
+  BooleanField,
+  CollapsibleField,
+  DateField,
+  FileField,
+  GroupField,
+  JoinField,
+  NumberField,
+  RadioField,
+  RelationshipField,
+  SelectField,
+  TabsField,
+  TextAreaField,
+  TextField,
+  VirtualField,
+};
+
+interface FieldRendererProps {
+  field: any; // Collection Field definition
+  value: any;
+  onChange: (val: any, secondaryVal?: any) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: string;
+  parentData?: any;
+}
+
+const CustomFieldWrapper: React.FC<{
+  tagName: string;
+  field: any;
+  value: any;
+  onChange: (val: any) => void;
+  isDisabled: boolean;
+  isReadOnly: boolean;
+  error?: string;
+  parentData?: any;
+}> = ({ tagName, field, value, onChange, isDisabled, isReadOnly, error, parentData }) => {
+  const ref = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (el) {
+      // Pass complex data via object properties to the Web Component
+      (el as any).value = value;
+      (el as any).fieldConfig = field;
+      (el as any).error = error;
+      (el as any).parentData = parentData;
+
+      const handleCustomChange = (e: Event) => {
+        const detail = (e as CustomEvent).detail;
+        if (detail && "value" in detail) {
+          onChange(detail.value);
+        }
+      };
+
+      el.addEventListener("opacachange", handleCustomChange);
+      return () => {
+        el.removeEventListener("opacachange", handleCustomChange);
+      };
+    }
+  }, [value, field, onChange, error, parentData]);
+
+  return (
+    <div className="opaca-form-group">
+      <label htmlFor={field.name} className="opaca-label">
+        {field.label || (field.name ? capitalize(field.name) : undefined)}
+        {field.required && (
+          <span style={{ color: "var(--opaca-error)", marginLeft: "4px" }}>*</span>
+        )}
+      </label>
+      {React.createElement(tagName, {
+        ref,
+        id: field.name,
+        "data-name": field.name,
+        "data-disabled": isDisabled ? "true" : undefined,
+        "data-readonly": isReadOnly ? "true" : undefined,
+        className: "opaca-custom-field",
+      })}
+      {error && <span className="opaca-field-error">{error}</span>}
+    </div>
+  );
+};
+
+export const FieldRenderer: React.FC<FieldRendererProps> = ({
+  field,
+  value,
+  onChange,
+  disabled,
+  readOnly,
+  error,
+  parentData,
+}) => {
+  const fieldAccess = field.name ? parentData?._access?.[field.name] || {} : {};
+
+  const isReadOnly =
+    readOnly ||
+    fieldAccess.readOnly ||
+    (typeof field.access?.readOnly === "boolean" ? field.access.readOnly : false);
+
+  const isDisabled =
+    disabled ||
+    fieldAccess.disabled ||
+    (typeof field.access?.disabled === "boolean" ? field.access.disabled : false) ||
+    isReadOnly;
+
+  const isHidden =
+    field.type === "slug" ||
+    fieldAccess.hidden ||
+    (typeof field.access?.hidden === "boolean" ? field.access.hidden : false);
+
+  if (isHidden) return null;
+
+  const commonProps = {
+    name: field.name,
+    label: field.label || (field.name ? capitalize(field.name) : undefined),
+    value,
+    onChange,
+    required: field.required,
+    disabled: isDisabled,
+    readOnly: isReadOnly,
+    error,
+    placeholder: field.placeholder,
+  };
+
+  // 0. Handle Custom Field Components
+  // Since we are in a web/workers environment, the custom component
+  // needs to be resolved or looked up. For now, we assume it's a string identifier
+  // or that the user has provided a way to register them.
+  // In a real framework, this might use a Context or a registry.
+  // We'll add a placeholder or a simple dynamic lookup if possible.
+  if (field.admin?.components?.Field && typeof field.admin.components.Field === "string") {
+    return (
+      <CustomFieldWrapper
+        tagName={field.admin.components.Field}
+        field={field}
+        value={value}
+        onChange={onChange}
+        isDisabled={isDisabled}
+        isReadOnly={isReadOnly}
+        error={error}
+        parentData={parentData}
+      />
+    );
+  }
+
+  switch (field.type) {
+    case "text":
+      return <TextField {...commonProps} />;
+    case "virtual":
+      return <VirtualField name={commonProps.name} label={commonProps.label} value={value} />;
+    case "textarea":
+      return <TextAreaField {...commonProps} />;
+    case "number":
+      return <NumberField {...commonProps} />;
+    case "date":
+      return <DateField {...commonProps} />;
+    case "boolean":
+      return <BooleanField {...commonProps} />;
+    case "select":
+      return (
+        <SelectField {...commonProps} choices={field.choices || field.options?.choices || []} />
+      );
+    case "file":
+      return <FileField {...commonProps} options={field.options} bucket={field.bucket} />;
+    case "radio":
+      return (
+        <RadioField {...commonProps} choices={field.choices || field.options?.choices || []} />
+      );
+    case "row":
+      return (
+        <RowField
+          fields={field.fields || []}
+          parentData={parentData}
+          disabled={isDisabled}
+          readOnly={isReadOnly}
+          onChange={(name, val) => {
+            // Merge nested updates into parentData for layout fields
+            if (parentData && typeof parentData === "object" && !Array.isArray(parentData)) {
+              onChange({ ...parentData, [name]: val });
+            } else {
+              onChange(val);
+            }
+          }}
+          renderField={(f, v, subOnChange) => (
+            <FieldRenderer
+              field={f}
+              value={f.name && v === undefined ? parentData?.[f.name] : v}
+              onChange={subOnChange}
+              disabled={isDisabled}
+              readOnly={isReadOnly}
+              parentData={parentData}
+            />
+          )}
+        />
+      );
+
+    case "group":
+      return (
+        <GroupField
+          {...commonProps}
+          fields={field.fields || []}
+          renderField={(f, v, subOnChange) => (
+            <FieldRenderer
+              field={f}
+              value={f.name && v === undefined ? parentData?.[f.name] : v}
+              onChange={subOnChange}
+              disabled={isDisabled}
+              readOnly={isReadOnly}
+              parentData={value} // Pass group data as parentData
+            />
+          )}
+        />
+      );
+
+    case "tabs":
+      return (
+        <TabsField
+          {...commonProps}
+          tabs={field.tabs || []}
+          parentData={parentData}
+          onChange={(name, val) => {
+            // Merge nested updates into parentData for layout fields
+            if (parentData && typeof parentData === "object" && !Array.isArray(parentData)) {
+              onChange({ ...parentData, [name]: val });
+            } else {
+              onChange(val);
+            }
+          }}
+          renderField={(f, v, subOnChange) => (
+            <FieldRenderer
+              field={f}
+              value={f.name && value === undefined ? parentData?.[f.name] : v}
+              onChange={subOnChange}
+              disabled={isDisabled}
+              readOnly={isReadOnly}
+              parentData={parentData}
+            />
+          )}
+        />
+      );
+
+    case "collapsible":
+      return (
+        <CollapsibleField
+          {...commonProps}
+          fields={field.fields || []}
+          parentData={parentData}
+          options={field.options}
+          onChange={(name, val) => {
+            // Merge nested updates into parentData for layout fields
+            if (parentData && typeof parentData === "object" && !Array.isArray(parentData)) {
+              onChange({ ...parentData, [name]: val });
+            } else {
+              onChange(val);
+            }
+          }}
+          renderField={(f, v, subOnChange) => (
+            <FieldRenderer
+              field={f}
+              value={v}
+              onChange={subOnChange}
+              disabled={isDisabled}
+              readOnly={isReadOnly}
+              parentData={parentData}
+            />
+          )}
+        />
+      );
+
+    case "blocks":
+      return (
+        <BlocksField
+          {...commonProps}
+          blocks={field.blocks || field.options?.blocks || []}
+          renderField={(f, v, subOnChange) => (
+            <FieldRenderer
+              field={f}
+              value={v}
+              onChange={subOnChange}
+              disabled={isDisabled}
+              readOnly={isReadOnly}
+              parentData={v} // In blocks, the item itself is the parent data
+            />
+          )}
+        />
+      );
+    case "relationship":
+      return (
+        <RelationshipField
+          {...commonProps}
+          relationTo={field.relationTo || field.options?.relationTo}
+          displayField={field.displayField || field.options?.displayField}
+          hasMany={field.hasMany}
+        />
+      );
+    case "join":
+      return (
+        <JoinField {...commonProps} collection={field.collection || field.options?.collection} />
+      );
+    case "array":
+      return (
+        <ArrayField
+          {...commonProps}
+          fields={field.fields || []}
+          renderField={(f, v, subOnChange) => (
+            <FieldRenderer
+              field={f}
+              value={v}
+              onChange={subOnChange}
+              disabled={isDisabled}
+              readOnly={isReadOnly}
+              parentData={v}
+            />
+          )}
+        />
+      );
+    case "richtext":
+      return (
+        <div className="opaca-form-group">
+          <label htmlFor={field.name} className="opaca-label">
+            {field.label || (field.name ? capitalize(field.name) : undefined)}
+            {field.required && (
+              <span style={{ color: "var(--opaca-error)", marginLeft: "4px" }}>*</span>
+            )}
+          </label>
+          <RichTextEditor
+            value={value || ""}
+            onChange={onChange}
+            disabled={isDisabled} // Use isDisabled
+            readOnly={isReadOnly} // Use isReadOnly
+            defaultMode={field.options?.defaultMode}
+          />
+          {error && <span className="opaca-field-error">{error}</span>}
+        </div>
+      );
+    default:
+      console.warn("FieldRenderer: fallback to default for type:", field.type, field);
+      return (
+        <div className="opaca-form-group">
+          <label htmlFor={field.name} className="opaca-label">
+            {field.label || (field.name ? capitalize(field.name) : undefined)} (Unknown Type:{" "}
+            {field.type}) {/* Fixed label using capitalize */}
+          </label>
+          <input type="text" className="opaca-input" value={value || ""} readOnly disabled />
+        </div>
+      );
+  }
+};