opacacms 0.1.0

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

@@ -0,0 +1,124 @@
+import * as React from "react";
+import { cn } from "./utils";
+import "../../styles/collapsible.scss";
+
+interface CollapsibleContextValue {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+}
+
+const CollapsibleContext = React.createContext<CollapsibleContextValue>({});
+
+export interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+}
+
+export const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
+  ({ className, open, defaultOpen, onOpenChange, disabled, children, ...props }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState<boolean>(defaultOpen ?? false);
+
+    const isControlled = open !== undefined;
+    const currentOpen = isControlled ? open : uncontrolledOpen;
+
+    const handleOpenChange = React.useCallback(
+      (newOpen: boolean) => {
+        if (!isControlled) {
+          setUncontrolledOpen(newOpen);
+        }
+        if (onOpenChange) {
+          onOpenChange(newOpen);
+        }
+      },
+      [isControlled, onOpenChange],
+    );
+
+    const contextValue = React.useMemo(
+      () => ({ open: currentOpen, onOpenChange: handleOpenChange, disabled }),
+      [currentOpen, handleOpenChange, disabled],
+    );
+
+    return (
+      <CollapsibleContext.Provider value={contextValue}>
+        <div ref={ref} className={cn("opaca-ui-collapsible", className)} {...props}>
+          {children}
+        </div>
+      </CollapsibleContext.Provider>
+    );
+  },
+);
+Collapsible.displayName = "Collapsible";
+
+export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
+}
+
+export const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
+  ({ className, disabled, children, ...props }, ref) => {
+    const context = React.useContext(CollapsibleContext);
+    const isDisabled = disabled || context.disabled;
+    const isOpen = context.open;
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (!isDisabled && context.onOpenChange) {
+          context.onOpenChange(!isOpen);
+        }
+        if (props.onClick) {
+          props.onClick(event);
+        }
+      },
+      [isDisabled, isOpen, context.onOpenChange, props.onClick],
+    );
+
+    return (
+      <button
+        type="button"
+        aria-expanded={isOpen}
+        disabled={isDisabled}
+        onClick={handleClick}
+        ref={ref}
+        className={cn("opaca-ui-collapsible-trigger", className)}
+        {...props}
+      >
+        {children}
+        <svg
+          className="opaca-ui-collapsible-icon"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </button>
+    );
+  },
+);
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+
+export interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const CollapsibleContent = React.forwardRef<HTMLDivElement, CollapsibleContentProps>(
+  ({ className, children, ...props }, ref) => {
+    const context = React.useContext(CollapsibleContext);
+    const isOpen = context.open;
+
+    if (!isOpen) {
+      return null;
+    }
+
+    return (
+      <div
+        data-state={isOpen ? "open" : "closed"}
+        ref={ref}
+        className={cn("opaca-ui-collapsible-content", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+CollapsibleContent.displayName = "CollapsibleContent";

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

@@ -0,0 +1,79 @@
+import type * as React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "./utils";
+import "../../styles/dialog.scss";
+
+export function Dialog({
+  open,
+  onOpenChange,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+}) {
+  if (!open) return null;
+  return createPortal(
+    <div className="opaca-ui-dialog-portal">
+      <button
+        type="button"
+        className="opaca-ui-dialog-overlay"
+        onClick={() => onOpenChange(false)}
+        tabIndex={-1}
+        aria-hidden="true"
+      />
+      <div className="opaca-ui-dialog-wrapper">{children}</div>
+    </div>,
+    document.body,
+  );
+}
+
+export function DialogContent({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("opaca-ui-dialog-content", className)}>{children}</div>;
+}
+
+export function DialogHeader({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("opaca-ui-dialog-header", className)}>{children}</div>;
+}
+
+export function DialogTitle({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <h2 className={cn("opaca-ui-dialog-title", className)}>{children}</h2>;
+}
+
+export function DialogDescription({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <p className={cn("opaca-ui-dialog-description", className)}>{children}</p>;
+}
+
+export function DialogFooter({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("opaca-ui-dialog-footer", className)}>{children}</div>;
+}

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn } from "./utils";
+import "../../styles/group.scss";
+
+export interface GroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+}
+
+export const Group = React.forwardRef<HTMLDivElement, GroupProps>(
+  ({ className, label, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("opaca-ui-group", className)} {...props}>
+        {label && <h3 className="opaca-ui-group-header">{label}</h3>}
+        {children}
+      </div>
+    );
+  },
+);
+
+Group.displayName = "Group";

package/src/admin/ui/components/ui/index.ts

@@ -0,0 +1,17 @@
+export * from "./accordion";
+export * from "./blocks";
+export * from "./button";
+export * from "./collapsible";
+export * from "./dialog";
+export * from "./group";
+export * from "./input";
+export * from "./join";
+export * from "./label";
+export * from "./radio-group";
+export * from "./relationship";
+export * from "./scroll-area";
+export * from "./select";
+export * from "./separator";
+export * from "./sheet";
+export * from "./tabs";
+export * from "./utils";

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { cn } from "./utils";
+import "../../styles/input.scss";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return <input type={type} className={cn("opaca-ui-input", className)} ref={ref} {...props} />;
+  },
+);
+Input.displayName = "Input";

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+export interface JoinProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+  collection: string;
+  on?: string;
+}
+
+export const Join = React.forwardRef<HTMLDivElement, JoinProps>(
+  ({ className, label, collection, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("opaca-ui-join", className)} {...props}>
+        {label && (
+          <div
+            style={{
+              display: "block",
+              marginBottom: "0.5rem",
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              color: "var(--opaca-text-muted)",
+              textTransform: "uppercase",
+              letterSpacing: "0.03em",
+            }}
+          >
+            {label}
+          </div>
+        )}
+        {/* Placeholder for complex virtual data fetch UI */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "0.75rem",
+            border: "1px solid var(--opaca-border)",
+            borderRadius: "var(--opaca-radius)",
+            backgroundColor: "rgba(255, 255, 255, 0.02)",
+            color: "var(--opaca-text-dim)",
+            fontSize: "0.8125rem",
+          }}
+        >
+          <span>
+            Virtually joined from: <strong>{collection}</strong>
+          </span>
+          <span style={{ fontSize: "0.7rem", opacity: 0.5 }}>On: {props.on || "dynamic"}</span>
+        </div>
+      </div>
+    );
+  },
+);
+
+Join.displayName = "Join";

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { cn } from "./utils";
+import "../../styles/label.scss";
+
+export const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.LabelHTMLAttributes<HTMLLabelElement>
+>(({ className, ...props }, ref) => (
+  <label ref={ref} className={cn("opaca-ui-label", className)} {...props} />
+));
+Label.displayName = "Label";

package/src/admin/ui/components/ui/radio-group.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { cn } from "./utils";
+import "../../styles/radio-group.scss";
+
+export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  name?: string;
+}
+
+export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ className, value, onValueChange, disabled, name, children, ...props }, ref) => {
+    const contextValue = React.useMemo(
+      () => ({ value, onValueChange, disabled, name }),
+      [value, onValueChange, disabled, name],
+    );
+
+    return (
+      <RadioGroupContext.Provider value={contextValue}>
+        <div ref={ref} className={cn("opaca-ui-radio-group", className)} {...props}>
+          {children}
+        </div>
+      </RadioGroupContext.Provider>
+    );
+  },
+);
+RadioGroup.displayName = "RadioGroup";
+
+interface RadioGroupContextValue {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  name?: string;
+}
+
+const RadioGroupContext = React.createContext<RadioGroupContextValue>({});
+
+export interface RadioGroupItemProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  value: string;
+}
+
+export const RadioGroupItem = React.forwardRef<HTMLInputElement, RadioGroupItemProps>(
+  ({ className, value, disabled, id, ...props }, ref) => {
+    const context = React.useContext(RadioGroupContext);
+
+    const isDisabled = disabled || context.disabled;
+    const isChecked = context.value === value;
+    const name = context.name;
+
+    const handleChange = () => {
+      if (!isDisabled && context.onValueChange) {
+        context.onValueChange(value);
+      }
+    };
+
+    return (
+      <div className="opaca-ui-radio-item">
+        <input
+          type="radio"
+          ref={ref}
+          id={id}
+          name={name}
+          value={value}
+          checked={isChecked}
+          disabled={isDisabled}
+          onChange={handleChange}
+          className={cn(className)}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+RadioGroupItem.displayName = "RadioGroupItem";

package/src/admin/ui/components/ui/relationship-detail-sheet.tsx

@@ -0,0 +1,122 @@
+import { useStore } from "@nanostores/react";
+import { AlertCircle, Loader2 } from "lucide-react";
+import type React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { api } from "../../../api-client";
+import { $config } from "../../../stores/config";
+import { FieldRenderer } from "../fields/index";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./sheet";
+
+interface RelationshipDetailSheetProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  relationTo: string;
+  id: string | number;
+}
+
+export const RelationshipDetailSheet: React.FC<RelationshipDetailSheetProps> = ({
+  isOpen,
+  onOpenChange,
+  relationTo,
+  id,
+}) => {
+  const [data, setData] = useState<Record<string, any> | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const config = useStore($config);
+
+  const collection = useMemo(() => {
+    return config?.collections.find((c) => c.slug === relationTo || c.apiPath === relationTo);
+  }, [config, relationTo]);
+
+  useEffect(() => {
+    if (isOpen && id && relationTo) {
+      setLoading(true);
+      setError(null);
+      api
+        .get(`api/${relationTo}/${id}`)
+        .json<Record<string, any>>()
+        .then((res) => {
+          setData(res);
+          setLoading(false);
+        })
+        .catch((err: Error) => {
+          console.error("Failed to fetch relation details:", err);
+          setError("Failed to load document details.");
+          setLoading(false);
+        });
+    } else {
+      setData(null);
+    }
+  }, [isOpen, id, relationTo]);
+
+  return (
+    <Sheet open={isOpen} onOpenChange={onOpenChange}>
+      <SheetContent className="p-0 sm:max-w-[500px]" onClose={() => onOpenChange(false)}>
+        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+          <div style={{ padding: "1.5rem 1.5rem 1rem" }}>
+            <SheetHeader>
+              <SheetTitle>{collection?.label || relationTo} Details</SheetTitle>
+            </SheetHeader>
+            <div
+              style={{ fontSize: "0.875rem", color: "var(--opaca-text-dim)", marginTop: "0.25rem" }}
+            >
+              ID: {id}
+            </div>
+          </div>
+
+          <div style={{ flex: 1, overflowY: "auto", padding: "1.5rem" }}>
+            {loading ? (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "3rem",
+                  gap: "0.75rem",
+                }}
+              >
+                <Loader2 size={20} className="opaca-spin" />
+                <span style={{ color: "var(--opaca-text-dim)" }}>Loading details...</span>
+              </div>
+            ) : error ? (
+              <div
+                style={{
+                  padding: "1rem",
+                  backgroundColor: "rgba(239, 68, 68, 0.1)",
+                  border: "1px solid var(--opaca-error)",
+                  color: "var(--opaca-error)",
+                  borderRadius: "var(--opaca-radius)",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.75rem",
+                }}
+              >
+                <AlertCircle size={18} />
+                {error}
+              </div>
+            ) : data && collection ? (
+              <div style={{ display: "grid", gap: "1.5rem" }}>
+                {collection.fields.map((field, index) => (
+                  <FieldRenderer
+                    key={field.name || index}
+                    field={field}
+                    value={field.name ? data[field.name] : undefined}
+                    onChange={() => {}} // Read-only
+                    readOnly={true}
+                    disabled={true}
+                    parentData={data}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div style={{ textAlign: "center", padding: "2rem", opacity: 0.5 }}>
+                No details found for this document.
+              </div>
+            )}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+export interface RelationshipProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+  relationTo: string;
+  children?: React.ReactNode;
+  onClick?: () => void;
+}
+
+export const Relationship = React.forwardRef<HTMLDivElement, RelationshipProps>(
+  ({ className, label, relationTo, children, onClick, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("opaca-ui-relationship", className)}
+        {...props}
+        onClick={onClick}
+        style={{ cursor: onClick ? "pointer" : "default", ...props.style }}
+      >
+        {label && (
+          <div
+            style={{
+              display: "block",
+              marginBottom: "0.5rem",
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              color: "var(--opaca-text-muted)",
+              textTransform: "uppercase",
+              letterSpacing: "0.03em",
+            }}
+          >
+            {label}
+          </div>
+        )}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "0.75rem",
+            border: "1px solid var(--opaca-border)",
+            borderRadius: "var(--opaca-radius)",
+            backgroundColor: "rgba(255, 255, 255, 0.02)",
+            transition: "all 0.2s ease",
+            fontSize: "0.8125rem",
+          }}
+          className="opaca-ui-relationship-trigger"
+        >
+          <span>{children || `Select ${relationTo}...`}</span>
+          <span style={{ fontSize: "0.7rem", opacity: 0.5 }}>Link: {relationTo}</span>
+        </div>
+      </div>
+    );
+  },
+);
+
+Relationship.displayName = "Relationship";

package/src/admin/ui/components/ui/scroll-area.tsx

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import { cn } from "./utils";
+
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  maxHeight?: string | number;
+}
+
+export function ScrollArea({ children, className, maxHeight, ...props }: ScrollAreaProps) {
+  return (
+    <div
+      className={cn("opaca-scroll-area", className)}
+      style={{ maxHeight, overflowY: "auto", ...props.style }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}