opacacms 0.1.12 → 0.1.13

package/src/admin/ui/views/dashboard-view.tsx

@@ -1,263 +0,0 @@
-import { Activity, ArrowUpRight, Database } from "lucide-react";
-import type { SerializableConfig } from "../../../types";
-import { Link } from "../components/link";
-
-export interface DashboardViewProps {
-  config: SerializableConfig;
-  user?: {
-    name: string;
-    email: string;
-    image?: string | null;
-  } | null;
-}
-
-export function DashboardView({ config, user }: DashboardViewProps) {
-  const userCollections = config.collections.filter((c) => !c.slug.startsWith("_"));
-
-  return (
-    <div>
-      <div
-        className="opaca-header"
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: "2rem",
-        }}
-      >
-        <div>
-          <h1 className="opaca-title" style={{ marginBottom: "0.25rem" }}>
-            {config.appName || "OpacaCMS"}
-          </h1>
-          <p className="opaca-subtitle">Overview of your content management system</p>
-        </div>
-
-        {user && (
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "0.75rem",
-              padding: "0.625rem 1rem",
-              background: "rgba(255, 255, 255, 0.03)",
-              borderRadius: "12px",
-              border: "1px solid rgba(255, 255, 255, 0.08)",
-              backdropFilter: "blur(10px)",
-              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-            }}
-          >
-            <div
-              style={{
-                width: "36px",
-                height: "36px",
-                borderRadius: "10px",
-                background: "linear-gradient(135deg, var(--opaca-accent) 0%, #a78bfa 100%)",
-                color: "white",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: "0.875rem",
-                fontWeight: "600",
-                boxShadow: "0 2px 8px rgba(124, 58, 237, 0.3)",
-              }}
-            >
-              {user.name.charAt(0).toUpperCase()}
-            </div>
-            <div style={{ lineHeight: "1.3" }}>
-              <div
-                style={{
-                  fontSize: "0.875rem",
-                  fontWeight: "600",
-                  color: "var(--opaca-text)",
-                }}
-              >
-                {user.name}
-              </div>
-              <div style={{ fontSize: "0.75rem", color: "var(--opaca-text-dim)" }}>
-                {user.email}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      <div className="opaca-grid" style={{ marginBottom: "2.5rem" }}>
-        <div className="opaca-card">
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "0.75rem",
-              marginBottom: "0.75rem",
-            }}
-          >
-            <div
-              style={{
-                padding: "0.5rem",
-                background: "var(--opaca-primary-glow)",
-                color: "var(--opaca-accent)",
-                borderRadius: "var(--opaca-radius)",
-              }}
-            >
-              <Database size={18} />
-            </div>
-            <div>
-              <div
-                style={{
-                  fontSize: "1.25rem",
-                  fontWeight: "600",
-                  lineHeight: "1.2",
-                }}
-              >
-                {userCollections.length}
-              </div>
-              <div
-                style={{
-                  fontSize: "0.6875rem",
-                  color: "var(--opaca-text-dim)",
-                  textTransform: "uppercase",
-                  letterSpacing: "0.05em",
-                }}
-              >
-                Collections
-              </div>
-            </div>
-          </div>
-          <p style={{ fontSize: "0.75rem", color: "var(--opaca-text-muted)" }}>
-            Schema defined by Drizzle and synced automatically.
-          </p>
-        </div>
-
-        <div className="opaca-card">
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "0.75rem",
-              marginBottom: "0.75rem",
-            }}
-          >
-            <div
-              style={{
-                padding: "0.5rem",
-                background: "rgba(52, 211, 153, 0.1)",
-                color: "var(--opaca-success)",
-                borderRadius: "var(--opaca-radius)",
-              }}
-            >
-              <Activity size={18} />
-            </div>
-            <div>
-              <div
-                style={{
-                  fontSize: "1.25rem",
-                  fontWeight: "600",
-                  lineHeight: "1.2",
-                }}
-              >
-                Online
-              </div>
-              <div
-                style={{
-                  fontSize: "0.6875rem",
-                  color: "var(--opaca-text-dim)",
-                  textTransform: "uppercase",
-                  letterSpacing: "0.05em",
-                }}
-              >
-                API Status
-              </div>
-            </div>
-          </div>
-          <p style={{ fontSize: "0.75rem", color: "var(--opaca-text-muted)" }}>
-            Hono-powered API on {config.serverURL || "localhost"}.
-          </p>
-        </div>
-      </div>
-
-      <div
-        style={{
-          fontSize: "0.6875rem",
-          fontWeight: "500",
-          color: "var(--opaca-text-dim)",
-          textTransform: "uppercase",
-          letterSpacing: "0.05em",
-          marginBottom: "0.75rem",
-        }}
-      >
-        Collections
-      </div>
-      <div className="opaca-grid">
-        {userCollections
-          .filter((c) => !c.hidden)
-          .sort((a, b) => (a.admin === b.admin ? 0 : a.admin ? -1 : 1))
-          .map((col: any) => {
-            // Format label: prioritize col.label, otherwise strip leading underscores and capitalize each word
-            const colLabel =
-              col.label ||
-              col.slug
-                .replace(/^_+/, "")
-                .replace(/_/g, " ")
-                .replace(/\b\w/g, (c: string) => c.toUpperCase());
-            return (
-              <Link
-                key={col.slug}
-                href={`/admin/collections/${col.slug}`}
-                className="opaca-card"
-                style={{
-                  textDecoration: "none",
-                  color: "inherit",
-                  cursor: "pointer",
-                }}
-              >
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    marginBottom: "0.25rem",
-                  }}
-                >
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "0.5rem",
-                    }}
-                  >
-                    <span style={{ fontWeight: "500", fontSize: "0.875rem" }}>{colLabel}</span>
-                    {col.admin && (
-                      <div
-                        style={{
-                          width: "5px",
-                          height: "5px",
-                          borderRadius: "50%",
-                          backgroundColor: "var(--opaca-accent)",
-                          opacity: 0.8,
-                          boxShadow: "0 0 5px var(--opaca-accent)",
-                        }}
-                        title={
-                          col.slug === "_opaca_assets"
-                            ? "System Assets Registry"
-                            : "Universal Collection"
-                        }
-                      />
-                    )}
-                  </div>
-                  <ArrowUpRight size={14} color="var(--opaca-text-dim)" />
-                </div>
-                <div
-                  style={{
-                    fontSize: "0.75rem",
-                    color: "var(--opaca-text-muted)",
-                  }}
-                >
-                  {col.fields.length} fields
-                </div>
-              </Link>
-            );
-          })}
-      </div>
-    </div>
-  );
-}

package/src/admin/ui/views/document-edit-view.tsx

@@ -1,384 +0,0 @@
-import { useStore } from "@nanostores/react";
-import { useForm } from "@tanstack/react-form";
-import { AlertCircle, ArrowLeft, Globe, Loader2, Save, Trash2 } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import type { SerializableCollection } from "../../../types";
-import { api } from "../../api-client";
-import { $config } from "../../stores/config";
-import { createFetcherStore, createMutatorStore } from "../../stores/query";
-import { notify } from "../../stores/ui";
-import { FieldRenderer } from "../components/fields";
-import { AlertDialog } from "../components/ui/alert-dialog";
-
-export interface DocumentEditViewProps {
-  collection: SerializableCollection;
-  id: string;
-  onBack: () => void;
-}
-
-// Data Fetcher
-const fetchDocument = async (path: string, id: string, locale?: string) => {
-  if (id === "create") return {};
-  const headers: Record<string, string> = {};
-  if (locale) headers["x-opaca-locale"] = locale;
-
-  const data = await api.get(`api/${path}/${id}`, { headers }).json<any>();
-  return data;
-};
-
-// Data Mutator
-const saveDocument = async (path: string, id: string, payload: any, locale?: string) => {
-  const payloadToSave = { ...payload };
-  for (const key in payloadToSave) {
-    if (payloadToSave[key] === "") payloadToSave[key] = null;
-  }
-
-  const headers: Record<string, string> = {};
-  if (locale) headers["x-opaca-locale"] = locale;
-
-  if (id && id !== "create") {
-    return api.patch(`api/${path}/${id}`, { json: payloadToSave, headers }).json();
-  }
-  return api.post(`api/${path}`, { json: payloadToSave, headers }).json();
-};
-
-export function DocumentEditView({ collection, id, onBack }: DocumentEditViewProps) {
-  const path = collection.apiPath || collection.slug;
-  const docPath = path;
-
-  const config = useStore($config);
-  const [currentLocale, setCurrentLocale] = useState(config?.i18n?.defaultLocale || "en");
-
-  const documentFetcher = useMemo(
-    () =>
-      createFetcherStore<any>([path, id, currentLocale], {
-        fetcher: () => fetchDocument(path, id, currentLocale),
-      }),
-    [path, id, currentLocale],
-  );
-
-  const documentMutator = useMemo(
-    () =>
-      createMutatorStore<any, any>(async ({ data }) => {
-        const payload = data;
-        return saveDocument(path, id, payload, currentLocale);
-      }),
-    [path, id, currentLocale],
-  );
-
-  const docState = useStore(documentFetcher);
-  const mutateState = useStore(documentMutator);
-  const loading = docState.loading;
-  const saving = mutateState.loading;
-  const error = docState.error || mutateState.error;
-
-  const hasDrafts = !!collection.versions?.drafts;
-
-  const form = useForm({
-    defaultValues: docState.data || {},
-    onSubmit: async ({ value }) => {
-      try {
-        await documentMutator.mutate(value);
-        notify(`Document ${id === "create" ? "created" : "updated"} successfully`, "success");
-        onBack();
-      } catch (err: any) {
-        let errorMsg = "Failed to save document";
-        if (err.response) {
-          try {
-            const errorData = await err.response.json();
-            errorMsg = errorData.message || errorMsg;
-
-            if (errorData.errors) {
-              Object.keys(errorData.errors).forEach((field) => {
-                if (field === "_errors") return;
-                form.setErrorMap({
-                  onChange: errorData.errors[field]._errors.join(", "),
-                } as any);
-              });
-            }
-          } catch (e) {}
-        }
-        notify(errorMsg, "error");
-      }
-    },
-  });
-
-  useEffect(() => {
-    if (docState.data && !docState.loading) {
-      form.reset(docState.data);
-    }
-  }, [docState.data, docState.loading, form, currentLocale]);
-
-  const handleSubmit = async (e?: React.FormEvent, status: "published" | "draft" = "published") => {
-    if (e) e.preventDefault();
-    e?.stopPropagation();
-
-    // Set status in form values before submitting
-    if (hasDrafts) {
-      form.setFieldValue("_status" as never, status as never);
-    }
-
-    await form.handleSubmit();
-  };
-
-  const handleBack = () => {
-    if (!form.state.isDirty) {
-      onBack();
-    }
-  };
-
-  if (loading) {
-    return (
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "0.75rem",
-          marginTop: "2rem",
-          padding: "0 2.5rem",
-        }}
-      >
-        <Loader2 size={18} className="opaca-spin" />
-        <span className="opaca-subtitle">Loading document...</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="opaca-admin-form">
-      <div className="opaca-header">
-        <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
-          {form.state.isDirty ? (
-            <AlertDialog
-              title="Unsaved Changes"
-              description="You have unsaved changes. Are you sure you want to discard them and leave?"
-              onConfirm={onBack}
-              variant="destructive"
-            >
-              <button
-                type="button"
-                className="opaca-btn opaca-btn-outline"
-                style={{ padding: "0.5rem" }}
-                title="Go Back"
-              >
-                <ArrowLeft size={18} />
-              </button>
-            </AlertDialog>
-          ) : (
-            <button
-              type="button"
-              onClick={handleBack}
-              className="opaca-btn opaca-btn-outline"
-              style={{ padding: "0.5rem" }}
-              title="Go Back"
-            >
-              <ArrowLeft size={18} />
-            </button>
-          )}
-          <div>
-            <h1 className="opaca-title">
-              {id === "create"
-                ? `Create ${collection.label || collection.slug}`
-                : `Edit ${collection.label || collection.slug}`}
-            </h1>
-            <p className="opaca-subtitle">
-              {id === "create" ? "Add a new entry to the collection." : `ID: ${id}`}
-            </p>
-          </div>
-        </div>
-
-        <div style={{ display: "flex", gap: "0.75rem" }}>
-          {/* Locale Switcher */}
-          {config?.i18n && config.i18n.locales.length > 1 && (
-            <div className="opaca-locale-switcher">
-              {config.i18n.locales.map((loc) => (
-                <button
-                  key={loc}
-                  type="button"
-                  className={`opaca-locale-btn ${currentLocale === loc ? "active" : ""}`}
-                  onClick={() => {
-                    if (form.state.isDirty) {
-                      if (confirm("Unsaved changes will be lost. Continue?")) {
-                        setCurrentLocale(loc);
-                      }
-                    } else {
-                      setCurrentLocale(loc);
-                    }
-                  }}
-                >
-                  {loc.toUpperCase()}
-                </button>
-              ))}
-            </div>
-          )}
-
-          {id !== "create" && (
-            <AlertDialog
-              title="Delete Document"
-              description="Are you sure you want to delete this document? This action cannot be undone."
-              onConfirm={async () => {
-                try {
-                  await api.delete(`api/${docPath}/${id}`);
-                  notify("Document deleted successfully", "success");
-                  onBack();
-                } catch (err: unknown) {
-                  console.error(err);
-                  notify("Failed to delete document", "error");
-                }
-              }}
-              variant="destructive"
-              confirmText="Delete"
-            >
-              <button
-                type="button"
-                className="opaca-btn opaca-btn-outline"
-                style={{
-                  color: "var(--opaca-error)",
-                  borderColor: "var(--opaca-error)",
-                }}
-                title="Delete Document"
-              >
-                <Trash2 size={18} />
-                Delete
-              </button>
-            </AlertDialog>
-          )}
-          <form.Subscribe selector={(state) => [state.isDirty]}>
-            {([isDirty]) => (
-              <div style={{ display: "flex", gap: "0.75rem" }}>
-                {hasDrafts && (
-                  <button
-                    type="button"
-                    onClick={(e) => handleSubmit(e, "draft")}
-                    disabled={saving}
-                    className="opaca-btn opaca-btn-outline"
-                    title="Save as Draft"
-                  >
-                    {saving ? <Loader2 size={18} className="opaca-spin" /> : <Save size={18} />}
-                    Save Draft
-                  </button>
-                )}
-                <button
-                  type="button"
-                  onClick={(e) => handleSubmit(e, "published")}
-                  disabled={saving}
-                  className="opaca-btn opaca-btn-primary"
-                  style={{ position: "relative" }}
-                  title={hasDrafts ? "Publish" : "Save Changes"}
-                >
-                  {saving ? <Loader2 size={18} className="opaca-spin" /> : <Save size={18} />}
-                  {id === "create"
-                    ? hasDrafts
-                      ? "Publish"
-                      : "Create"
-                    : hasDrafts
-                      ? "Publish"
-                      : "Save"}
-                  {isDirty && !saving && (
-                    <span
-                      style={{
-                        position: "absolute",
-                        top: "-4px",
-                        right: "-4px",
-                        width: "10px",
-                        height: "10px",
-                        borderRadius: "50%",
-                        background: "var(--opaca-warning)",
-                        border: "2px solid var(--opaca-card-bg)",
-                        boxShadow: "0 1px 2px rgba(0,0,0,0.2)",
-                      }}
-                      title="Unsaved changes"
-                    />
-                  )}
-                </button>
-              </div>
-            )}
-          </form.Subscribe>
-        </div>
-      </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)",
-            marginBottom: "2rem",
-            display: "flex",
-            alignItems: "center",
-            gap: "0.75rem",
-            fontSize: "0.875rem",
-          }}
-        >
-          <AlertCircle size={18} />
-          {error}
-        </div>
-      )}
-
-      <div className="opaca-card" style={{ padding: "2.5rem" }}>
-        <form id="opaca-doc-form" onSubmit={(e) => handleSubmit(e)}>
-          <div style={{ display: "grid", gap: "2rem" }}>
-            {collection.fields.map((field, index) => {
-              const fieldName = field.name;
-              const access = fieldName
-                ? docState.data?._access?.[fieldName]
-                : {
-                    hidden: false,
-                    readOnly: false,
-                    disabled: false,
-                  };
-
-              if (access?.hidden) return null;
-
-              const isReadOnly = access?.readOnly;
-              const isDisabled = access?.disabled || isReadOnly;
-
-              // Layout fields without a name
-              if (!fieldName) {
-                return (
-                  <form.Subscribe
-                    // biome-ignore lint/suspicious/noArrayIndexKey: ignore, layout field sometimes don't have names
-                    key={index}
-                    selector={(state) => state.values}
-                  >
-                    {(values) => (
-                      <FieldRenderer
-                        field={field}
-                        value={undefined}
-                        disabled={isDisabled}
-                        readOnly={isReadOnly}
-                        onChange={(_name, val) => {
-                          if (typeof _name === "string") {
-                            form.setFieldValue(_name as never, val as never);
-                          }
-                        }}
-                        parentData={values}
-                      />
-                    )}
-                  </form.Subscribe>
-                );
-              }
-
-              return (
-                <form.Field key={fieldName} name={fieldName}>
-                  {(fieldApi) => (
-                    <FieldRenderer
-                      field={field}
-                      value={fieldApi.state.value}
-                      disabled={isDisabled}
-                      readOnly={isReadOnly}
-                      onChange={(val) => fieldApi.handleChange(val)}
-                      parentData={form.state.values}
-                    />
-                  )}
-                </form.Field>
-              );
-            })}
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}