opacacms 0.1.1 → 0.1.2

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

@@ -1,226 +0,0 @@
-import { useStore } from "@nanostores/react";
-import { AlertCircle, Loader2, Save } from "lucide-react";
-import { useEffect, useState } from "react";
-import { $globalData, $globalQuery, $saveGlobal } from "../../stores/admin-queries";
-import type { ToastType } from "../../stores/ui";
-import { notify } from "../../stores/ui";
-import { FieldRenderer } from "../components/fields";
-
-export interface GlobalEditViewProps {
-  global: {
-    slug: string;
-    label?: string;
-    fields: {
-      name?: string;
-      label?: string;
-      type: string;
-      defaultValue?: unknown;
-      required?: boolean;
-      options?: {
-        defaultMode?: "simple" | "notion";
-        [key: string]: unknown;
-      };
-    }[];
-  };
-  onBack: () => void;
-}
-
-export function GlobalEditView({ global }: GlobalEditViewProps) {
-  const [formData, setFormData] = useState<Record<string, unknown>>({});
-  const [initialData, setInitialData] = useState<Record<string, unknown>>({});
-  const [errorStatus, setErrorStatus] = useState<string | null>(null);
-
-  const { data: storeData, loading, error: storeError } = useStore($globalData);
-  const { mutate: doSave, loading: saving } = useStore($saveGlobal);
-
-  const isDirty = JSON.stringify(formData) !== JSON.stringify(initialData);
-
-  // Set the query slug when component mounts or slug changes
-  useEffect(() => {
-    $globalQuery.set(global.slug);
-  }, [global.slug]);
-
-  // Sync store data to form fields
-  useEffect(() => {
-    if (storeData) {
-      const cleanData = { ...storeData };
-      delete (cleanData as any).id;
-      delete (cleanData as any)["createdAt"];
-      delete (cleanData as any)["updatedAt"];
-
-      // Initialize defaults if they are missing
-      const defaults: Record<string, unknown> = { ...cleanData };
-      if (Object.keys(cleanData).length === 0) {
-        global.fields.forEach((f) => {
-          if (!f.name) return; // Skip layout fields without names
-          if (f.defaultValue !== undefined) {
-            defaults[f.name] = f.defaultValue;
-          } else if (f.type === "boolean") {
-            defaults[f.name] = false;
-          } else if (f.type === "number") {
-            defaults[f.name] = 0;
-          } else if (
-            f.type === "array" ||
-            f.type === "blocks" ||
-            (f.type === "relationship" && (f as any).hasMany)
-          ) {
-            defaults[f.name] = [];
-          } else {
-            defaults[f.name] = "";
-          }
-        });
-      }
-
-      setFormData(defaults);
-      setInitialData(defaults);
-      setErrorStatus(null);
-    }
-  }, [storeData, global.fields]);
-
-  // Handle errors from store or local
-  useEffect(() => {
-    if (storeError) {
-      setErrorStatus("Failed to load global document.");
-      notify("Error loading global document", "error");
-    }
-  }, [storeError]);
-
-  const handleSubmit = async (e?: React.FormEvent) => {
-    if (e) e.preventDefault();
-    setErrorStatus(null);
-
-    try {
-      await doSave({ slug: global.slug, body: formData });
-      notify("Changes saved successfully", "success");
-      setInitialData(formData); // Reset dirty state
-    } catch (err: unknown) {
-      console.error(err);
-      setErrorStatus(err instanceof Error ? err.message : "Failed to save document.");
-      notify("Failed to save changes", "error");
-    }
-  };
-
-  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 settings...</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="opaca-admin-form">
-      <div className="opaca-header">
-        <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
-          <div>
-            <h1 className="opaca-title">
-              {global.label || global.slug.charAt(0).toUpperCase() + global.slug.slice(1)}
-            </h1>
-            <p className="opaca-subtitle">Manage global settings.</p>
-          </div>
-        </div>
-        <div style={{ display: "flex", gap: "0.75rem" }}>
-          <button
-            type="button"
-            onClick={() => handleSubmit()}
-            disabled={saving}
-            className="opaca-btn opaca-btn-primary"
-            style={{ position: "relative" }}
-            title="Save Changes"
-          >
-            {saving ? <Loader2 size={18} className="opaca-spin" /> : <Save size={18} />}
-            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>
-      </div>
-
-      {errorStatus && (
-        <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} />
-          {errorStatus}
-        </div>
-      )}
-
-      <div className="opaca-card" style={{ padding: "2.5rem" }}>
-        <form id="opaca-doc-form" onSubmit={handleSubmit}>
-          <div style={{ display: "grid", gap: "2rem" }}>
-            {global.fields.map((field, index) => {
-              const name = field.name;
-
-              // Layout fields without a name
-              if (!name) {
-                return (
-                  <FieldRenderer
-                    key={field.name || index}
-                    field={field}
-                    value={undefined}
-                    onChange={(subName, val) => {
-                      if (typeof subName === "string") {
-                        setFormData({ ...formData, [subName]: val });
-                      } else {
-                        // Handle cases where onChange(val) is called (shouldn't happen with layout fields usually)
-                        Object.assign(formData, val);
-                        setFormData({ ...formData });
-                      }
-                    }}
-                    parentData={formData}
-                  />
-                );
-              }
-
-              return (
-                <FieldRenderer
-                  key={name}
-                  field={field}
-                  value={formData[name]}
-                  onChange={(val) => {
-                    setFormData({ ...formData, [name]: val });
-                  }}
-                  parentData={formData}
-                />
-              );
-            })}
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}

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

@@ -1,182 +0,0 @@
-import { AlertCircle, Loader2, Lock, ShieldCheck, User } from "lucide-react";
-import { type FormEvent, useState } from "react";
-import { authClient } from "../../auth-client";
-
-export interface InitViewProps {
-  onSuccess: () => void;
-}
-
-export function InitView({ onSuccess }: InitViewProps) {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-
-    if (password !== confirmPassword) {
-      setError("Passwords do not match");
-      setLoading(false);
-      return;
-    }
-
-    try {
-      const res = await authClient.signUp.email({
-        email,
-        password,
-        name: "Admin",
-      });
-
-      if (res.error) {
-        throw new Error(res.error.message || "Failed to create admin user");
-      }
-
-      onSuccess();
-    } catch (err: unknown) {
-      console.error(err);
-      setError(err instanceof Error ? err.message : "Initialization failed");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="opaca-login-container">
-      <div className="opaca-login-card">
-        <div className="opaca-login-header">
-          <div className="opaca-login-logo">
-            <ShieldCheck size={24} color="white" />
-          </div>
-          <h1 className="opaca-title">Welcome to OpacaCMS</h1>
-          <p className="opaca-subtitle">Create the first administrator account to get started.</p>
-        </div>
-
-        {error && (
-          <div className="opaca-login-error">
-            <AlertCircle size={14} />
-            {error}
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit}>
-          <div className="opaca-form-group">
-            <label htmlFor="init-email" className="opaca-label">
-              Admin Email
-            </label>
-            <div style={{ position: "relative" }}>
-              <User
-                size={14}
-                style={{
-                  position: "absolute",
-                  left: "0.75rem",
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  color: "var(--opaca-text-dim)",
-                }}
-              />
-              <input
-                id="init-email"
-                type="email"
-                className="opaca-input"
-                style={{ paddingLeft: "2.25rem" }}
-                placeholder="admin@example.com"
-                value={email}
-                onChange={(e) => setEmail((e.target as HTMLInputElement).value)}
-                required
-              />
-            </div>
-          </div>
-
-          <div className="opaca-form-group">
-            <label htmlFor="init-password" className="opaca-label">
-              Password
-            </label>
-            <div style={{ position: "relative" }}>
-              <Lock
-                size={14}
-                style={{
-                  position: "absolute",
-                  left: "0.75rem",
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  color: "var(--opaca-text-dim)",
-                }}
-              />
-              <input
-                id="init-password"
-                type="password"
-                className="opaca-input"
-                style={{ paddingLeft: "2.25rem" }}
-                placeholder="••••••••"
-                value={password}
-                onChange={(e) => setPassword((e.target as HTMLInputElement).value)}
-                required
-                minLength={8}
-              />
-            </div>
-          </div>
-
-          <div className="opaca-form-group">
-            <label htmlFor="init-confirm" className="opaca-label">
-              Confirm Password
-            </label>
-            <div style={{ position: "relative" }}>
-              <Lock
-                size={14}
-                style={{
-                  position: "absolute",
-                  left: "0.75rem",
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  color: "var(--opaca-text-dim)",
-                }}
-              />
-              <input
-                id="init-confirm"
-                type="password"
-                className="opaca-input"
-                style={{ paddingLeft: "2.25rem" }}
-                placeholder="••••••••"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword((e.target as HTMLInputElement).value)}
-                required
-                minLength={8}
-              />
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            className="opaca-btn opaca-btn-primary"
-            style={{ width: "100%", marginTop: "0.5rem" }}
-            disabled={loading}
-          >
-            {loading ? (
-              <>
-                <Loader2 className="opaca-spin" size={14} />
-                Initializing...
-              </>
-            ) : (
-              "Create Admin Account"
-            )}
-          </button>
-        </form>
-
-        <p
-          className="opaca-subtitle"
-          style={{
-            fontSize: "0.6875rem",
-            textAlign: "center",
-            marginTop: "1.25rem",
-          }}
-        >
-          This account will have full access to manage OpacaCMS.
-        </p>
-      </div>
-    </div>
-  );
-}

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

@@ -1,123 +0,0 @@
-import { AlertCircle, Loader2, Lock, User } from "lucide-react";
-import React, { type FormEvent, useState } from "react";
-
-export interface LoginViewProps {
-  onLogin: (data: Record<string, string>) => Promise<void>;
-}
-
-export function LoginView({ onLogin }: LoginViewProps) {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-
-    try {
-      await onLogin({ email, password });
-    } catch (err: unknown) {
-      console.error(err);
-      setError(err instanceof Error ? err.message : "Invalid email or password");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="opaca-login-container">
-      <div className="opaca-login-card">
-        <div style={{ textAlign: "center", marginBottom: "1.5rem" }}>
-          <div className="opaca-logo-circle" style={{ margin: "0 auto 1rem" }}>
-            <Lock size={22} />
-          </div>
-          <h1 className="opaca-title">Admin Login</h1>
-          <p className="opaca-subtitle">Authenticate to access the dashboard</p>
-        </div>
-
-        {error && (
-          <div className="opaca-login-error">
-            <AlertCircle size={14} />
-            {error}
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit}>
-          <div className="opaca-form-group">
-            <label htmlFor="login-email" className="opaca-label">
-              Email
-            </label>
-            <div style={{ position: "relative" }}>
-              <User
-                size={14}
-                style={{
-                  position: "absolute",
-                  left: "0.75rem",
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  color: "var(--opaca-text-dim)",
-                }}
-              />
-              <input
-                id="login-email"
-                type="email"
-                className="opaca-input"
-                style={{ paddingLeft: "2.25rem" }}
-                placeholder="admin@example.com"
-                value={email}
-                onChange={(e) => setEmail((e.target as HTMLInputElement).value)}
-                required
-              />
-            </div>
-          </div>
-
-          <div className="opaca-form-group">
-            <label htmlFor="login-password" className="opaca-label">
-              Password
-            </label>
-            <div style={{ position: "relative" }}>
-              <Lock
-                size={14}
-                style={{
-                  position: "absolute",
-                  left: "0.75rem",
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  color: "var(--opaca-text-dim)",
-                }}
-              />
-              <input
-                id="login-password"
-                type="password"
-                className="opaca-input"
-                style={{ paddingLeft: "2.25rem" }}
-                placeholder="••••••••"
-                value={password}
-                onChange={(e) => setPassword((e.target as HTMLInputElement).value)}
-                required
-              />
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            className="opaca-btn opaca-btn-primary"
-            style={{ width: "100%", marginTop: "0.5rem" }}
-            disabled={loading}
-          >
-            {loading ? (
-              <>
-                <Loader2 size={14} className="opaca-spin" />
-                Logging in...
-              </>
-            ) : (
-              "Sign In"
-            )}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}