opacacms 0.1.0

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

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

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

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

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

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

@@ -0,0 +1,278 @@
+import { Check, Info, Loader2, Search } from "lucide-react";
+import type React from "react";
+import { useCallback, useEffect, useState } from "react";
+import { api } from "../../../api-client";
+import { Relationship } from "../ui/relationship";
+import { RelationshipDetailSheet } from "../ui/relationship-detail-sheet";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet";
+import { cn } from "../ui/utils";
+
+interface RelationshipFieldProps {
+  name: string;
+  label?: string;
+  relationTo: string;
+  value: any;
+  onChange: (val: any) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: string;
+  placeholder?: string;
+  displayField?: string;
+  hasMany?: boolean;
+}
+
+export const RelationshipField: React.FC<RelationshipFieldProps> = ({
+  name,
+  label,
+  relationTo,
+  value,
+  onChange,
+  disabled,
+  readOnly,
+  error,
+  displayField,
+  hasMany,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [items, setItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [detailView, setDetailView] = useState<{
+    open: boolean;
+    id: string | number;
+  }>({ open: false, id: "" });
+
+  const fetchItems = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await api.get(`api/${relationTo}`).json<any>();
+      // Handle paginated results or direct arrays
+      const docs = response.docs || response;
+      setItems(Array.isArray(docs) ? docs : []);
+    } catch (err) {
+      console.error("Failed to fetch relation items:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [relationTo]);
+
+  useEffect(() => {
+    if (isOpen && items.length === 0) {
+      fetchItems();
+    }
+  }, [isOpen, items.length, fetchItems]);
+
+  const handleSelect = (itemId: string) => {
+    if (hasMany || Array.isArray(value)) {
+      // Prevent duplicates in array payload
+      const arrValue = Array.isArray(value) ? value : [];
+      const strItemId = String(itemId);
+      const strValues = arrValue.map(String);
+      const newValue = strValues.includes(strItemId)
+        ? strValues.filter((id) => id !== strItemId)
+        : [...strValues, strItemId];
+      onChange(newValue);
+    } else {
+      onChange(String(itemId) === String(value) ? null : String(itemId));
+      setIsOpen(false);
+    }
+  };
+
+  const isSelected = (itemId: string) => {
+    if (hasMany || Array.isArray(value)) {
+      const arrValue = Array.isArray(value) ? value : [];
+      return arrValue.map(String).includes(String(itemId));
+    }
+    return String(value) === String(itemId);
+  };
+
+  const filteredItems = items.filter((item) => {
+    const searchStr = (
+      item[displayField || ""] ||
+      item.name ||
+      item.title ||
+      item.id ||
+      ""
+    ).toLowerCase();
+    return searchStr.includes(searchTerm.toLowerCase());
+  });
+
+  return (
+    <div className="opaca-form-group">
+      <Relationship
+        label={label || name}
+        relationTo={relationTo}
+        className={error ? "error" : ""}
+        onClick={() => !disabled && !readOnly && setIsOpen(true)}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            width: "100%",
+          }}
+        >
+          {value ? (
+            <div style={{ display: "flex", gap: "4px", flexWrap: "wrap", alignItems: "center" }}>
+              {Array.isArray(value) || hasMany ? (
+                <span className="opaca-badge">
+                  {(Array.isArray(value) ? value : []).length} items linked
+                </span>
+              ) : (
+                <span className="opaca-text-primary">
+                  {items.find((i) => String(i.id) === String(value))?.[displayField || ""] || value}
+                </span>
+              )}
+            </div>
+          ) : (
+            <span style={{ opacity: 0.5 }}>Select {relationTo}...</span>
+          )}
+          {value && !Array.isArray(value) && !hasMany && (
+            <button
+              type="button"
+              className="opaca-btn-ghost opaca-btn-sm"
+              style={{
+                padding: "2px",
+                marginLeft: "auto",
+                borderRadius: "50%",
+                minWidth: "24px",
+                height: "24px",
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                setDetailView({ open: true, id: value });
+              }}
+              title="View Details"
+            >
+              <Info size={14} />
+            </button>
+          )}
+        </div>
+      </Relationship>
+      {error && <span className="opaca-field-error">{error}</span>}
+
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetContent onClose={() => setIsOpen(false)}>
+          <div style={{ width: "100%", display: "flex", flexDirection: "column", height: "100%" }}>
+            <SheetHeader>
+              <SheetTitle>Select {relationTo}</SheetTitle>
+            </SheetHeader>
+
+            <div style={{ marginTop: "1.5rem", marginBottom: "1rem" }}>
+              <div className="opaca-input-wrapper" style={{ position: "relative" }}>
+                <Search
+                  size={16}
+                  style={{
+                    position: "absolute",
+                    left: "12px",
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    opacity: 0.5,
+                  }}
+                />
+                <input
+                  type="text"
+                  placeholder="Search..."
+                  className="opaca-input"
+                  style={{ paddingLeft: "36px" }}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div style={{ overflowY: "auto", flex: 1, minHeight: 0 }}>
+              {loading ? (
+                <div style={{ display: "flex", justifyContent: "center", padding: "2rem" }}>
+                  <Loader2 className="opaca-spin" size={24} />
+                </div>
+              ) : filteredItems.length === 0 ? (
+                <div style={{ textAlign: "center", padding: "2rem", opacity: 0.5 }}>
+                  No items found.
+                </div>
+              ) : (
+                <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+                  {filteredItems.map((item) => (
+                    <div key={item.id} style={{ position: "relative" }}>
+                      <button
+                        type="button"
+                        onClick={() => handleSelect(item.id)}
+                        className={cn("opaca-item-button", isSelected(item.id) && "active")}
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          padding: "0.75rem 2.5rem 0.75rem 1rem",
+                          borderRadius: "var(--opaca-radius)",
+                          border: "1px solid var(--opaca-border)",
+                          background: isSelected(item.id)
+                            ? "var(--opaca-primary-glow)"
+                            : "var(--opaca-surface)",
+                          color: "var(--opaca-text)",
+                          textAlign: "left",
+                          cursor: "pointer",
+                          transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                          width: "100%",
+                          marginBottom: "0.5rem",
+                          boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
+                        }}
+                      >
+                        <div>
+                          <div
+                            style={{
+                              fontWeight: 500,
+                              color: isSelected(item.id)
+                                ? "var(--opaca-accent)"
+                                : "var(--opaca-text)",
+                            }}
+                          >
+                            {item[displayField || ""] || item.name || item.title || item.id}
+                          </div>
+                          {(item.name || item.title || displayField) && item.id && (
+                            <div style={{ fontSize: "0.75rem", color: "var(--opaca-text-dim)" }}>
+                              ID: {item.id}
+                            </div>
+                          )}
+                        </div>
+                        {isSelected(item.id) && (
+                          <Check size={16} style={{ color: "var(--opaca-accent)" }} />
+                        )}
+                      </button>
+                      <button
+                        type="button"
+                        className="opaca-btn-ghost opaca-btn-sm"
+                        style={{
+                          position: "absolute",
+                          right: "10px",
+                          top: "50%",
+                          transform: "translateY(-50%)",
+                          padding: "4px",
+                          borderRadius: "50%",
+                          zIndex: 2,
+                        }}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setDetailView({ open: true, id: item.id });
+                        }}
+                      >
+                        <Info size={16} />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <RelationshipDetailSheet
+        isOpen={detailView.open}
+        onOpenChange={(open) => setDetailView((prev) => ({ ...prev, open }))}
+        relationTo={relationTo}
+        id={detailView.id}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+import type React from "react";
+
+interface RowFieldProps {
+  fields: any[];
+  parentData: any;
+  onChange: (fieldName: string, value: any) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  errors?: Record<string, string>;
+  renderField: (field: any, value: any, onChange: (val: any) => void) => React.ReactNode;
+}
+
+export const RowField: React.FC<RowFieldProps> = ({
+  fields,
+  parentData,
+  onChange,
+  renderField,
+}) => {
+  return (
+    <div className="opaca-row-field">
+      {fields.map((field, index) => (
+        <div
+          key={field.name || `row-item-${index}`}
+          className="row-item"
+          style={
+            field.admin?.width
+              ? { flex: `0 0 ${field.admin.width}`, width: field.admin.width }
+              : undefined
+          }
+        >
+          {renderField(
+            field,
+            field.name ? parentData?.[field.name] : undefined,
+            (val) => field.name && onChange(field.name, val),
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,59 @@
+import type React from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+
+interface SelectFieldProps {
+  name: string;
+  label?: string;
+  value: string;
+  onChange: (val: string) => void;
+  choices: Array<{ label: string; value: string } | string>;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  placeholder?: string;
+  error?: string;
+}
+
+export const SelectField: React.FC<SelectFieldProps> = ({
+  name,
+  label,
+  value,
+  onChange,
+  choices,
+  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>
+      <Select
+        value={value}
+        onValueChange={onChange}
+        disabled={disabled || readOnly}
+        placeholder={placeholder || `Select ${label || name}...`}
+      >
+        <SelectTrigger className={error ? "error" : ""}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {(choices || []).map((choice) => {
+            const normalized =
+              typeof choice === "string" ? { label: choice, value: choice } : choice;
+            return (
+              <SelectItem key={normalized.value} value={normalized.value}>
+                {normalized.label}
+              </SelectItem>
+            );
+          })}
+        </SelectContent>
+      </Select>
+      {error && <span className="opaca-field-error">{error}</span>}
+    </div>
+  );
+};

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

@@ -0,0 +1,101 @@
+import React from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+
+interface TabsFieldProps {
+  tabs: Array<{
+    label: string;
+    fields: any[];
+  }>;
+  value: any;
+  parentData?: any;
+  onChange: (val: any, secondaryVal?: any) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  renderField: (
+    field: any,
+    value: any,
+    onChange: (val: any, secondaryVal?: any) => void,
+  ) => React.ReactNode;
+}
+
+export const TabsField: React.FC<TabsFieldProps> = ({
+  tabs,
+  value,
+  onChange,
+  disabled,
+  readOnly,
+  renderField,
+}) => {
+  const [activeTab, setActiveTab] = React.useState(tabs?.[0]?.label || "");
+
+  const handleFieldChange = (fieldName: string, fieldValue: any) => {
+    // If we have a named tabs field (value is an object representing nested data)
+    // Then we update the nested object.
+    // If not, TabsField's `onChange` callback should handle it (it passes up to parentData).
+    if (value !== undefined) {
+      onChange({
+        ...(value || {}),
+        [fieldName]: fieldValue,
+      });
+    } else {
+      // In a layout context, onChange is actually updating the document root
+      // which we handled in `FieldRenderer` by `updateDocumentField` usually.
+      // But we should pass the field name correctly.
+      onChange(fieldName, fieldValue as never);
+    }
+  };
+
+  if (!tabs || tabs.length === 0) return null;
+
+  return (
+    <div className="opaca-tabs-field">
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          {tabs.map((tab) => (
+            <TabsTrigger key={tab.label} value={tab.label}>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        <div>
+          {tabs.map((tab) => (
+            <TabsContent key={tab.label} value={tab.label}>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "1.25rem",
+                }}
+              >
+                {tab.fields.map((field, index) => {
+                  const fieldValue =
+                    value !== undefined && field.name ? value[field.name] : undefined;
+
+                  return (
+                    <div
+                      key={field.name || `tab-item-${tab.label}-${index}`}
+                      className="tab-field-item"
+                    >
+                      {renderField(field, fieldValue, (val) => {
+                        if (value !== undefined && field.name) {
+                          handleFieldChange(field.name, val);
+                        } else {
+                          // We are in layout mode, let the parent onChange handle the specific field name
+                          if (field.name) {
+                            onChange(field.name, val);
+                          } else {
+                            onChange(val);
+                          }
+                        }
+                      })}
+                    </div>
+                  );
+                })}
+              </div>
+            </TabsContent>
+          ))}
+        </div>
+      </Tabs>
+    </div>
+  );
+};