opacacms 0.1.0 → 0.1.2

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

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

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

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

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

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

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

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

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

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

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

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