opacacms 0.1.11 → 0.1.13

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

@@ -1,141 +0,0 @@
-import { useStore } from "@nanostores/react";
-import { Check, ChevronDown, Settings2 } from "lucide-react";
-import type React from "react";
-import { useEffect, useRef, useState } from "react";
-import { $columnVisibility, toggleColumnVisibility } from "../../stores/column-visibility";
-
-interface ColumnVisibilityToggleProps {
-  slug: string;
-  fields: { name?: string; label?: string }[];
-}
-
-export const ColumnVisibilityToggle: React.FC<ColumnVisibilityToggleProps> = ({ slug, fields }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const visibility = useStore($columnVisibility);
-
-  const visibleColumns = visibility[slug] || [];
-  const selectableFields = fields.filter((f) => f.name);
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  return (
-    <div className="opaca-column-toggle" ref={dropdownRef} style={{ position: "relative" }}>
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className="opaca-btn opaca-btn-outline"
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "0.5rem",
-          padding: "0.5rem 0.75rem",
-          fontSize: "0.875rem",
-        }}
-      >
-        <Settings2 size={16} />
-        Columns
-        <ChevronDown
-          size={14}
-          style={{
-            opacity: 0.5,
-            transform: isOpen ? "rotate(180deg)" : "none",
-            transition: "transform 0.2s",
-          }}
-        />
-      </button>
-
-      {isOpen && (
-        <div
-          className="opaca-card shadow-lg"
-          style={{
-            position: "absolute",
-            top: "calc(100% + 0.5rem)",
-            right: 0,
-            zIndex: 100,
-            minWidth: "200px",
-            padding: "0.5rem",
-            maxHeight: "300px",
-            overflowY: "auto",
-            border: "1px solid var(--opaca-border)",
-            backgroundColor: "var(--opaca-card-bg)",
-            borderRadius: "var(--opaca-radius)",
-          }}
-        >
-          <div
-            style={{
-              padding: "0.5rem",
-              fontSize: "0.75rem",
-              fontWeight: 600,
-              color: "var(--opaca-text-dim)",
-              borderBottom: "1px solid var(--opaca-border)",
-              marginBottom: "0.25rem",
-            }}
-          >
-            Toggle Columns
-          </div>
-          {selectableFields.map((field) => {
-            const isVisible = visibleColumns.includes(field.name!);
-            return (
-              <button
-                key={field.name}
-                type="button"
-                onClick={() => toggleColumnVisibility(slug, field.name!)}
-                style={{
-                  width: "100%",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.75rem",
-                  padding: "0.5rem 0.75rem",
-                  fontSize: "0.875rem",
-                  textAlign: "left",
-                  background: "none",
-                  border: "none",
-                  color: isVisible ? "var(--opaca-text)" : "var(--opaca-text-dim)",
-                  cursor: "pointer",
-                  borderRadius: "calc(var(--opaca-radius) - 4px)",
-                  transition: "background 0.2s",
-                }}
-                className="hover-bg"
-              >
-                <div
-                  style={{
-                    width: "16px",
-                    height: "16px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    border: isVisible
-                      ? "1px solid var(--opaca-primary)"
-                      : "1px solid var(--opaca-border)",
-                    backgroundColor: isVisible ? "var(--opaca-primary)" : "transparent",
-                    borderRadius: "4px",
-                    color: "white",
-                  }}
-                >
-                  {isVisible && <Check size={12} strokeWidth={3} />}
-                </div>
-                <span style={{ flex: 1 }}>{field.label || field.name}</span>
-              </button>
-            );
-          })}
-        </div>
-      )}
-
-      <style>{`
-        .hover-bg:hover {
-          background-color: var(--opaca-panel-bg) !important;
-        }
-      `}</style>
-    </div>
-  );
-};

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

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

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

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

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