opacacms 0.1.1 → 0.1.2

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

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

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

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

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

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