opacacms 0.1.0 → 0.1.2

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

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

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

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

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