opacacms 0.1.1 → 0.1.2

package/src/admin/ui/admin-layout.tsx

@@ -1,276 +0,0 @@
-import { useStore } from "@nanostores/react";
-import * as LucideIcons from "lucide-react";
-import {
-  ChevronLeft,
-  ChevronRight,
-  Database,
-  Globe,
-  Image,
-  LayoutDashboard,
-  LogOut,
-  Settings,
-} from "lucide-react";
-import type React from "react";
-import type { SerializableConfig } from "../../types";
-import { $router } from "../router";
-import { $isSidebarCollapsed, toggleSidebar } from "../stores/ui";
-import { Link } from "./components/link";
-import { Accordion, ScrollArea, Separator } from "./components/ui";
-import "./styles/index.scss";
-
-export interface AdminLayoutProps {
-  children: React.ReactNode;
-  config: SerializableConfig;
-  user?: {
-    name: string;
-    email: string;
-    image?: string | null;
-  } | null;
-  onLogout?: () => void;
-}
-
-export function AdminLayout({ children, config, user, onLogout }: AdminLayoutProps) {
-  const isCollapsed = useStore($isSidebarCollapsed);
-  const page = useStore($router);
-  const currentPath = page?.path || "/admin";
-
-  return (
-    <div className="opaca-admin">
-      <aside className={`opaca-sidebar ${isCollapsed ? "collapsed" : ""}`}>
-        <button
-          type="button"
-          className="opaca-sidebar-toggle"
-          onClick={toggleSidebar}
-          title={isCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
-        >
-          {isCollapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
-        </button>
-
-        <div className="opaca-sidebar-inner">
-          <div className="opaca-logo" title={config.appName || "OpacaCMS"}>
-            {isCollapsed ? (
-              <div className="opaca-logo-mini">
-                {(config.appName || "OpacaCMS").charAt(0).toUpperCase()}
-              </div>
-            ) : (
-              config.appName || "OpacaCMS"
-            )}
-          </div>
-
-          <nav className="opaca-nav">
-            <Link
-              href="/admin"
-              className={`opaca-nav-item ${currentPath === "/admin" ? "active" : ""}`}
-              title="Dashboard"
-            >
-              <LayoutDashboard size={16} />
-              <span className="opaca-nav-label">Dashboard</span>
-            </Link>
-
-            {(() => {
-              const allCollections = config.collections
-                .filter((col) => !col.hidden)
-                .sort((a, b) => (a.admin === b.admin ? 0 : a.admin ? -1 : 1));
-
-              const userCollections = allCollections.filter((col) => !col.slug.startsWith("_"));
-              const systemCollections = allCollections.filter((col) => col.slug.startsWith("_"));
-
-              const renderCollection = (col: any) => {
-                const href = `/admin/collections/${col.slug}`;
-                const colLabel =
-                  col.label ||
-                  col.slug
-                    .replace(/^_+/, "")
-                    .replace(/_/g, " ")
-                    .replace(/\b\w/g, (c: string) => c.toUpperCase());
-                const isMedia = col.slug === "_opaca_assets";
-                const IconComponent =
-                  col.icon && col.icon in LucideIcons
-                    ? (LucideIcons as any)[col.icon]
-                    : isMedia
-                      ? Image
-                      : Database;
-
-                return (
-                  <Link
-                    key={col.slug}
-                    href={href}
-                    className={`opaca-nav-item ${currentPath.includes(href) ? "active" : ""}`}
-                    title={colLabel}
-                  >
-                    <IconComponent size={16} />
-                    <span className="opaca-nav-label">{colLabel}</span>
-                    {col.admin && !isCollapsed && (
-                      <div
-                        style={{
-                          width: "4px",
-                          height: "4px",
-                          borderRadius: "50%",
-                          backgroundColor: "var(--opaca-accent)",
-                          marginLeft: "auto",
-                          opacity: 0.8,
-                        }}
-                        title="Universal Collection"
-                      />
-                    )}
-                  </Link>
-                );
-              };
-
-              return (
-                <ScrollArea className="opaca-nav-scroll" style={{ flex: 1 }}>
-                  {userCollections.length > 0 && (
-                    <Accordion title="Collections" isCollapsed={isCollapsed}>
-                      {userCollections.map(renderCollection)}
-                    </Accordion>
-                  )}
-
-                  {userCollections.length > 0 && systemCollections.length > 0 && (
-                    <div style={{ margin: "0.75rem 0.75rem" }}>
-                      <Separator />
-                    </div>
-                  )}
-
-                  {systemCollections.length > 0 && (
-                    <Accordion title="System Collections" isCollapsed={isCollapsed}>
-                      {systemCollections.map(renderCollection)}
-                    </Accordion>
-                  )}
-
-                  {config.globals && config.globals.length > 0 && (
-                    <Accordion title="Globals" isCollapsed={isCollapsed}>
-                      {config.globals.map((g) => {
-                        const href = `/admin/globals/${g.slug}`;
-                        const label = g.label || g.slug.charAt(0).toUpperCase() + g.slug.slice(1);
-                        const IconComponent =
-                          g.icon && g.icon in LucideIcons ? (LucideIcons as any)[g.icon] : Globe;
-                        return (
-                          <Link
-                            key={g.slug}
-                            href={href}
-                            className={`opaca-nav-item ${currentPath === href ? "active" : ""}`}
-                            title={label}
-                          >
-                            <IconComponent size={16} />
-                            <span className="opaca-nav-label">{label}</span>
-                          </Link>
-                        );
-                      })}
-                    </Accordion>
-                  )}
-                </ScrollArea>
-              );
-            })()}
-          </nav>
-
-          <div className="opaca-nav-footer">
-            {user && (
-              <div
-                className="opaca-user-profile"
-                style={{
-                  padding: "0.75rem",
-                  borderBottom: "1px solid var(--opaca-border)",
-                  marginBottom: "0.5rem",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.75rem",
-                  justifyContent: isCollapsed ? "center" : "flex-start",
-                }}
-                title={`${user.name} (${user.email})`}
-              >
-                {user.image ? (
-                  <img
-                    src={user.image}
-                    alt={user.name}
-                    style={{
-                      width: "32px",
-                      height: "32px",
-                      borderRadius: "50%",
-                      objectFit: "cover",
-                    }}
-                  />
-                ) : (
-                  <div
-                    style={{
-                      width: "32px",
-                      height: "32px",
-                      minWidth: "32px",
-                      borderRadius: "50%",
-                      background: "var(--opaca-accent)",
-                      color: "white",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: "0.75rem",
-                      fontWeight: "600",
-                    }}
-                  >
-                    {user.name.charAt(0).toUpperCase()}
-                  </div>
-                )}
-                {!isCollapsed && (
-                  <div style={{ overflow: "hidden" }}>
-                    <div
-                      style={{
-                        fontSize: "0.8125rem",
-                        fontWeight: "500",
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                      }}
-                    >
-                      {user.name}
-                    </div>
-                    <div
-                      style={{
-                        fontSize: "0.6875rem",
-                        color: "var(--opaca-text-dim)",
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                      }}
-                    >
-                      {user.email}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            <Link
-              href="/admin/settings"
-              className={`opaca-nav-item ${currentPath === "/admin/settings" ? "active" : ""}`}
-              title="Settings"
-            >
-              <Settings size={16} />
-              <span className="opaca-nav-label">Settings</span>
-            </Link>
-            <button
-              type="button"
-              onClick={onLogout}
-              className="opaca-nav-item"
-              title="Logout"
-              style={{
-                width: "100%",
-                background: "none",
-                border: "none",
-                cursor: "pointer",
-                textAlign: "left",
-                fontFamily: "inherit",
-                fontSize: "inherit",
-                color: "var(--opaca-error)",
-              }}
-            >
-              <LogOut size={16} />
-              <span className="opaca-nav-label">Logout</span>
-            </button>
-          </div>
-        </div>
-      </aside>
-
-      <main className="opaca-content">
-        <div className="opaca-content-inner">{children}</div>
-      </main>
-    </div>
-  );
-}

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