opacacms 0.1.0

package/src/admin/ui/components/DataDetailSheet.tsx

@@ -0,0 +1,141 @@
+import { Edit2, Save, X } from "lucide-react";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { DataDetailView } from "./DataDetailView";
+import { Button } from "./ui/button";
+import { ScrollArea } from "./ui/scroll-area";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./ui/sheet";
+import "../styles/data-detail.scss";
+
+interface DataDetailSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  data: any;
+  onSave?: (updatedData: any) => void;
+  field?: string;
+}
+
+import { useStore } from "@nanostores/react";
+import { $config } from "../../stores/config";
+
+export const DataDetailSheet: React.FC<DataDetailSheetProps> = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  data: initialData,
+  onSave,
+  field,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [data, setData] = useState(initialData);
+
+  const config = useStore($config) as any;
+  const i18nConfig = config?.i18n;
+
+  const [activeLocale, setActiveLocale] = useState(i18nConfig?.defaultLocale || "default");
+
+  useEffect(() => {
+    setData(initialData);
+    setIsEditing(false);
+    if (i18nConfig) {
+      setActiveLocale(i18nConfig.defaultLocale);
+    }
+  }, [initialData, open, i18nConfig]);
+
+  const handleSave = () => {
+    if (onSave) {
+      onSave(data);
+    }
+    setIsEditing(false);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent onClose={() => onOpenChange(false)} className="opaca-data-detail-sheet">
+        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+          <SheetHeader>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+              <div>
+                <SheetTitle>{title}</SheetTitle>
+                {description && <SheetDescription>{description}</SheetDescription>}
+              </div>
+              {onSave && (
+                <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
+                  {isEditing && i18nConfig && i18nConfig.locales.length > 0 && (
+                    <div
+                      style={{
+                        display: "flex",
+                        borderRight: "1px solid var(--border)",
+                        paddingRight: "0.5rem",
+                        marginRight: "0.5rem",
+                        gap: "0.25rem",
+                      }}
+                    >
+                      {i18nConfig.locales.map((locale: string) => (
+                        <Button
+                          key={locale}
+                          variant={activeLocale === locale ? "default" : "outline"}
+                          size="sm"
+                          onClick={() => setActiveLocale(locale)}
+                          style={{ height: "32px", fontSize: "12px" }}
+                        >
+                          {locale.toUpperCase()}
+                        </Button>
+                      ))}
+                    </div>
+                  )}
+                  {!isEditing ? (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setIsEditing(true)}
+                      style={{ height: "32px", gap: "4px" }}
+                    >
+                      <Edit2 size={14} />
+                      Edit
+                    </Button>
+                  ) : (
+                    <>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                          setData(initialData);
+                          setIsEditing(false);
+                        }}
+                        style={{ height: "32px", gap: "4px" }}
+                      >
+                        <X size={14} />
+                        Cancel
+                      </Button>
+                      <Button
+                        variant="default"
+                        size="sm"
+                        onClick={handleSave}
+                        style={{ height: "32px", gap: "4px" }}
+                      >
+                        <Save size={14} />
+                        Save
+                      </Button>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+          </SheetHeader>
+
+          <div style={{ flex: 1, minHeight: 0, marginTop: "1.5rem" }}>
+            <ScrollArea style={{ height: "100%" }}>
+              <div style={{ paddingRight: "1rem", paddingBottom: "2rem" }}>
+                <DataDetailView data={data} isEditing={isEditing} onChange={setData} />
+              </div>
+            </ScrollArea>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};

package/src/admin/ui/components/DataDetailView.tsx

@@ -0,0 +1,175 @@
+import { RichTextEditor } from "./fields/richtext-editor";
+import { Input } from "./ui/input";
+import { cn } from "./ui/utils";
+
+interface DataDetailViewProps {
+  data: any;
+  label?: string;
+  depth?: number;
+  isEditing?: boolean;
+  onChange?: (data: any) => void;
+}
+
+export const DataDetailView: React.FC<DataDetailViewProps> = ({
+  data,
+  label,
+  depth = 0,
+  isEditing,
+  onChange,
+}) => {
+  if (data === null || data === undefined) {
+    return <span className="opaca-text-muted">None</span>;
+  }
+
+  // Handle arrays (Blocks or HasMany Relationships)
+  if (Array.isArray(data)) {
+    if (data.length === 0) return <span className="opaca-text-muted">Empty</span>;
+
+    return (
+      <div className="opaca-detail-list">
+        {data.map((item, index) => (
+          <div key={item || index} className="opaca-detail-item-card">
+            {item?.blockType && (
+              <div className="opaca-detail-item-header">
+                <span className="opaca-badge">{item.blockType}</span>
+              </div>
+            )}
+            <div className="opaca-detail-item-content">
+              {typeof item === "object" ? (
+                <DataDetailView
+                  data={item}
+                  depth={depth + 1}
+                  isEditing={isEditing}
+                  onChange={(val) => {
+                    const newData = [...data];
+                    newData[index] = val;
+                    onChange?.(newData);
+                  }}
+                />
+              ) : isEditing ? (
+                <Input
+                  value={String(item)}
+                  onChange={(e) => {
+                    const newData = [...data];
+                    newData[index] = e.target.value;
+                    onChange?.(newData);
+                  }}
+                />
+              ) : (
+                <span className="opaca-detail-value">{String(item)}</span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // Handle objects or strings that might be Lexical JSON
+  const isLexicalJSON = (val: unknown): boolean => {
+    if (!val) return false;
+
+    if (typeof val === "object") {
+      return val !== null && "root" in val;
+    }
+
+    if (typeof val === "string") {
+      const trimmed = val.trim();
+
+      if (!trimmed.startsWith("{")) return false;
+
+      try {
+        const parsed = JSON.parse(trimmed);
+        return parsed && typeof parsed === "object" && "root" in parsed;
+      } catch {
+        return false;
+      }
+    }
+
+    return false;
+  };
+
+  if (isLexicalJSON(data) && depth === 0) {
+    let valueToEdit = data;
+    if (typeof data === "object") {
+      try {
+        valueToEdit = JSON.stringify(data);
+      } catch (e) {}
+    }
+
+    return (
+      <div className="opaca-detail-richtext-preview">
+        <RichTextEditor
+          value={valueToEdit}
+          onChange={(val) => {
+            try {
+              onChange?.(JSON.parse(val));
+            } catch (e) {
+              onChange?.(val);
+            }
+          }}
+          readOnly={!isEditing}
+        />
+      </div>
+    );
+  }
+
+  // Handle objects (Groups or Block contents)
+  if (typeof data === "object" && data !== null) {
+    const keys = Object.keys(data).filter(
+      (k) => k !== "blockType" && k !== "id" && k !== "_order" && !k.startsWith("_"),
+    );
+    if (keys.length === 0) return <span className="opaca-text-muted">Empty Object</span>;
+
+    return (
+      <div className={cn("opaca-detail-grid", depth > 0 && "nested")}>
+        {keys.map((key) => (
+          <div key={key} className="opaca-detail-row">
+            <span className="opaca-detail-label">
+              {key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase())}
+            </span>
+            <div className="opaca-detail-value-container">
+              {typeof data[key] === "object" && data[key] !== null ? (
+                <DataDetailView
+                  data={data[key]}
+                  depth={depth + 1}
+                  isEditing={isEditing}
+                  onChange={(val) => {
+                    onChange?.({ ...data, [key]: val });
+                  }}
+                />
+              ) : isEditing ? (
+                <Input
+                  value={
+                    data[key] === true
+                      ? "true"
+                      : data[key] === false
+                        ? "false"
+                        : String(data[key] ?? "")
+                  }
+                  onChange={(e) => {
+                    let val: any = e.target.value;
+                    if (val === "true") val = true;
+                    if (val === "false") val = false;
+                    onChange?.({ ...data, [key]: val });
+                  }}
+                />
+              ) : (
+                <span className="opaca-detail-value">
+                  {data[key] === true
+                    ? "Yes"
+                    : data[key] === false
+                      ? "No"
+                      : String(data[key] ?? "-")}
+                </span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // Fallback for primitives
+  return <span className="opaca-detail-value">{String(data)}</span>;
+};

package/src/admin/ui/components/Table.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="opaca-table-wrapper">
+      <table ref={ref} className={`opaca-new-table ${className || ""}`} {...props} />
+    </div>
+  ),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={`opaca-table-header ${className || ""}`} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={`opaca-table-body ${className || ""}`} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={`opaca-table-footer ${className || ""}`} {...props} />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr ref={ref} className={`opaca-table-row ${className || ""}`} {...props} />
+  ),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th ref={ref} className={`opaca-table-head ${className || ""}`} {...props} />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={`opaca-table-cell ${className || ""}`} {...props} />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={`opaca-table-caption ${className || ""}`} {...props} />
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

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

@@ -0,0 +1,166 @@
+import { Plus, Trash2 } from "lucide-react";
+import type React from "react";
+import { Button } from "../ui/button";
+import { capitalize } from "./utils";
+
+interface ArrayFieldProps {
+  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 ArrayField: React.FC<ArrayFieldProps> = ({
+  name,
+  label,
+  fields = [],
+  value = [],
+  onChange,
+  disabled,
+  readOnly,
+  renderField,
+}) => {
+  const addItem = () => {
+    const currentValue = Array.isArray(value) ? value : [];
+    const initialData: Record<string, any> = {};
+
+    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 if (f.type === "array") {
+          initialData[f.name] = [];
+        } else {
+          initialData[f.name] = "";
+        }
+      }
+    });
+
+    onChange([...currentValue, initialData]);
+  };
+
+  const removeItem = (index: number) => {
+    const currentValue = Array.isArray(value) ? value : [];
+    const newValue = [...currentValue];
+    newValue.splice(index, 1);
+    onChange(newValue);
+  };
+
+  const updateItemData = (index: number, fieldName: string, fieldValue: any) => {
+    const currentValue = Array.isArray(value) ? value : [];
+    const newValue = [...currentValue];
+    newValue[index] = {
+      ...newValue[index],
+      [fieldName]: fieldValue,
+    };
+    onChange(newValue);
+  };
+
+  const updateRawItemData = (index: number, fieldValue: any) => {
+    const currentValue = Array.isArray(value) ? value : [];
+    const newValue = [...currentValue];
+    newValue[index] = fieldValue;
+    onChange(newValue);
+  };
+
+  return (
+    <div className="opaca-array-field">
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "0.75rem",
+        }}
+      >
+        <label htmlFor={name} className="opaca-label" style={{ marginBottom: 0 }}>
+          {label || capitalize(name)}
+        </label>
+      </div>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+        {(Array.isArray(value) ? value : []).map((item, index) => (
+          <div
+            key={item || index}
+            style={{
+              border: "1px solid var(--opaca-border)",
+              borderRadius: "var(--opaca-radius-lg)",
+              backgroundColor: "rgba(255, 255, 255, 0.02)",
+              padding: "1rem",
+              position: "relative",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "flex-end",
+                marginBottom: "0.5rem",
+              }}
+            >
+              {!disabled && !readOnly && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => removeItem(index)}
+                  style={{
+                    color: "var(--opaca-text-dim)",
+                    height: "24px",
+                    width: "24px",
+                  }}
+                >
+                  <Trash2 size={14} />
+                </Button>
+              )}
+            </div>
+
+            <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+              {fields.map((field, fieldIndex) => (
+                <div key={field.name || fieldIndex} className="array-field-item">
+                  {renderField(field, field.name ? item[field.name] : item, (val) => {
+                    if (field.name) {
+                      updateItemData(index, field.name, val);
+                    } else {
+                      updateRawItemData(index, val);
+                    }
+                  })}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+
+        {!disabled && !readOnly && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={addItem}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              fontSize: "0.75rem",
+              width: "fit-content",
+            }}
+          >
+            <Plus size={12} />
+            Add Item
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};