opacacms 0.1.1 → 0.1.2

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

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

@@ -1,187 +0,0 @@
-import { ChevronDown } from "lucide-react";
-import * as React from "react";
-import { createPortal } from "react-dom";
-import { cn } from "./utils";
-import "../../styles/select.scss";
-
-export interface SelectProps {
-  value?: string;
-  onValueChange?: (value: string) => void;
-  children: React.ReactNode;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-const SelectContext = React.createContext<{
-  value?: string;
-  onValueChange?: (value: string) => void;
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  triggerRef: React.RefObject<HTMLButtonElement | null>;
-} | null>(null);
-
-export function Select({
-  value,
-  onValueChange,
-  children,
-  open: controlledOpen,
-  onOpenChange,
-}: SelectProps & { open?: boolean; onOpenChange?: (open: boolean) => void }) {
-  const [internalOpen, setInternalOpen] = React.useState(false);
-  const open = controlledOpen ?? internalOpen;
-  const setOpen = onOpenChange ?? setInternalOpen;
-  const triggerRef = React.useRef<HTMLButtonElement>(null);
-
-  return (
-    <SelectContext.Provider value={{ value, onValueChange, open, setOpen, triggerRef }}>
-      <div className="opaca-ui-select">{children}</div>
-    </SelectContext.Provider>
-  );
-}
-
-export function SelectTrigger({
-  children,
-  className,
-}: {
-  children?: React.ReactNode;
-  className?: string;
-}) {
-  const context = React.useContext(SelectContext);
-  if (!context) throw new Error("SelectTrigger must be used within a Select");
-
-  return (
-    <button
-      ref={context.triggerRef}
-      type="button"
-      className={cn("opaca-ui-select-trigger", className)}
-      onClick={() => context.setOpen(!context.open)}
-      data-state={context.open ? "open" : "closed"}
-    >
-      <span className="trigger-content">{children}</span>
-      <ChevronDown size={14} className="trigger-icon" />
-    </button>
-  );
-}
-
-export function SelectValue({ placeholder }: { placeholder?: string }) {
-  const context = React.useContext(SelectContext);
-  if (!context) throw new Error("SelectValue must be used within a Select");
-
-  return (
-    <span className={!context.value ? "trigger-placeholder" : ""}>
-      {context.value || placeholder}
-    </span>
-  );
-}
-
-export function SelectContent({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  const context = React.useContext(SelectContext);
-  if (!context) throw new Error("SelectContent must be used within a Select");
-
-  const [position, setPosition] = React.useState({ top: 0, left: 0, width: 0 });
-
-  const updatePosition = React.useCallback(() => {
-    if (context.open && context.triggerRef.current) {
-      const rect = context.triggerRef.current.getBoundingClientRect();
-      setPosition({
-        top: rect.bottom,
-        left: rect.left,
-        width: rect.width,
-      });
-    }
-  }, [context.open, context.triggerRef]);
-
-  React.useEffect(() => {
-    if (context.open) {
-      updatePosition();
-      window.addEventListener("scroll", updatePosition, true);
-      window.addEventListener("resize", updatePosition);
-      return () => {
-        window.removeEventListener("scroll", updatePosition, true);
-        window.removeEventListener("resize", updatePosition);
-      };
-    }
-  }, [context.open, updatePosition]);
-
-  if (!context.open) return null;
-
-  return createPortal(
-    <div
-      className="opaca-ui-select-portal"
-      style={{
-        top: position.top + 4,
-        left: position.left,
-        width: position.width,
-      }}
-    >
-      <button
-        type="button"
-        className="opaca-ui-select-content-overlay"
-        style={{
-          position: "fixed",
-          inset: 0,
-          zIndex: -1,
-          background: "transparent",
-          border: "none",
-          padding: 0,
-          width: "100%",
-          height: "100%",
-          cursor: "default",
-        }}
-        onClick={() => context.setOpen(false)}
-        tabIndex={-1}
-        aria-hidden="true"
-      />
-      <div className={cn("opaca-ui-select-content", className)}>{children}</div>
-    </div>,
-    document.body,
-  );
-}
-
-export function SelectItem({
-  value,
-  children,
-  className,
-}: {
-  value: string;
-  children: React.ReactNode;
-  className?: string;
-}) {
-  const context = React.useContext(SelectContext);
-  if (!context) throw new Error("SelectItem must be used within a Select");
-
-  const isSelected = context.value === value;
-
-  return (
-    <button
-      type="button"
-      className={cn("opaca-ui-select-item", className)}
-      data-selected={isSelected}
-      onClick={() => {
-        context.onValueChange?.(value);
-        context.setOpen(false);
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-export function SelectGroup({ children }: { children: React.ReactNode }) {
-  return <div className="opaca-ui-select-group">{children}</div>;
-}
-
-export function SelectLabel({ children }: { children: React.ReactNode }) {
-  return <div className="opaca-ui-select-label">{children}</div>;
-}
-
-export function SelectSeparator() {
-  return <div className="opaca-ui-select-separator" />;
-}

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

@@ -1,21 +0,0 @@
-import type React from "react";
-
-interface SeparatorProps {
-  className?: string;
-  orientation?: "horizontal" | "vertical";
-  margin?: string;
-}
-
-export const Separator: React.FC<SeparatorProps> = ({
-  className = "",
-  orientation = "horizontal",
-  margin,
-}) => {
-  return (
-    <div
-      className={`opaca-separator ${orientation} ${className}`}
-      style={margin ? { margin } : undefined}
-      role="none"
-    />
-  );
-};

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

@@ -1,106 +0,0 @@
-import type * as React from "react";
-import { createPortal } from "react-dom";
-import { cn } from "./utils";
-import "../../styles/sheet.scss";
-
-export function Sheet({
-  open,
-  onOpenChange,
-  children,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  children: React.ReactNode;
-}) {
-  if (!open) return null;
-  return createPortal(
-    <div className="opaca-ui-sheet-portal">
-      <button
-        type="button"
-        className="opaca-ui-sheet-overlay"
-        onClick={() => onOpenChange(false)}
-        tabIndex={-1}
-        aria-hidden="true"
-      />
-      <div className="opaca-ui-sheet-wrapper">{children}</div>
-    </div>,
-    document.body,
-  );
-}
-
-export function SheetContent({
-  children,
-  className,
-  onClose,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  onClose?: () => void;
-}) {
-  return (
-    <div className={cn("opaca-ui-sheet-content", className)}>
-      {children}
-      {onClose && (
-        <button type="button" onClick={onClose} className="opaca-ui-sheet-close">
-          <svg
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="opaca-ui-sheet-close-icon"
-          >
-            <line x1="18" x2="6" y1="6" y2="18"></line>
-            <line x1="6" x2="18" y1="6" y2="18"></line>
-          </svg>
-          <span className="opaca-ui-sr-only">Close</span>
-        </button>
-      )}
-    </div>
-  );
-}
-
-export function SheetHeader({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <div className={cn("opaca-ui-sheet-header", className)}>{children}</div>;
-}
-
-export function SheetTitle({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <h2 className={cn("opaca-ui-sheet-title", className)}>{children}</h2>;
-}
-
-export function SheetDescription({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <p className={cn("opaca-ui-sheet-description", className)}>{children}</p>;
-}
-
-export function SheetFooter({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <div className={cn("opaca-ui-sheet-footer", className)}>{children}</div>;
-}

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

@@ -1,116 +0,0 @@
-import * as React from "react";
-import { cn } from "./utils";
-import "../../styles/tabs.scss";
-
-interface TabsContextValue {
-  value?: string;
-  onValueChange?: (value: string) => void;
-}
-
-const TabsContext = React.createContext<TabsContextValue>({});
-
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-}
-
-export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
-  ({ className, value, defaultValue, onValueChange, children, ...props }, ref) => {
-    const [uncontrolledValue, setUncontrolledValue] = React.useState<string | undefined>(
-      defaultValue,
-    );
-
-    const isControlled = value !== undefined;
-    const currentValue = isControlled ? value : uncontrolledValue;
-
-    const handleValueChange = React.useCallback(
-      (newValue: string) => {
-        if (!isControlled) {
-          setUncontrolledValue(newValue);
-        }
-        if (onValueChange) {
-          onValueChange(newValue);
-        }
-      },
-      [isControlled, onValueChange],
-    );
-
-    const contextValue = React.useMemo(
-      () => ({ value: currentValue, onValueChange: handleValueChange }),
-      [currentValue, handleValueChange],
-    );
-
-    return (
-      <TabsContext.Provider value={contextValue}>
-        <div ref={ref} className={cn("opaca-ui-tabs", className)} {...props}>
-          {children}
-        </div>
-      </TabsContext.Provider>
-    );
-  },
-);
-Tabs.displayName = "Tabs";
-
-export const TabsList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("opaca-ui-tabs-list", className)} role="tablist" {...props} />
-  ),
-);
-TabsList.displayName = "TabsList";
-
-export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  value: string;
-}
-
-export const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
-  ({ className, value, disabled, ...props }, ref) => {
-    const context = React.useContext(TabsContext);
-    const isSelected = context.value === value;
-
-    return (
-      <button
-        type="button"
-        role="tab"
-        aria-selected={isSelected}
-        data-state={isSelected ? "active" : "inactive"}
-        disabled={disabled}
-        onClick={() => {
-          if (!disabled && context.onValueChange) {
-            context.onValueChange(value);
-          }
-        }}
-        ref={ref}
-        className={cn("opaca-ui-tabs-trigger", className)}
-        {...props}
-      />
-    );
-  },
-);
-TabsTrigger.displayName = "TabsTrigger";
-
-export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  value: string;
-}
-
-export const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
-  ({ className, value, ...props }, ref) => {
-    const context = React.useContext(TabsContext);
-    const isSelected = context.value === value;
-
-    if (!isSelected) {
-      return null;
-    }
-
-    return (
-      <div
-        role="tabpanel"
-        data-state={isSelected ? "active" : "inactive"}
-        ref={ref}
-        className={cn("opaca-ui-tabs-content", className)}
-        {...props}
-      />
-    );
-  },
-);
-TabsContent.displayName = "TabsContent";