@kyro-cms/admin 0.3.1 → 0.3.4

package/src/lib/object-utils.ts

@@ -0,0 +1,77 @@
+/**
+ * Helper to extract default values from config recursively
+ */
+export function getDefaults(fields: any[], prefix = ""): Record<string, any> {
+  const defaults: Record<string, any> = {};
+  for (const field of fields || []) {
+    if (field.defaultValue !== undefined) {
+      const key = prefix + field.name;
+      defaults[key] = field.defaultValue;
+      // Also set nested defaults for groups
+      if (field.type === "group" && field.fields) {
+        for (const subField of field.fields) {
+          if (subField.defaultValue !== undefined) {
+            defaults[prefix + field.name + "." + subField.name] =
+              subField.defaultValue;
+          }
+        }
+      }
+    }
+    if (field.fields && Array.isArray(field.fields)) {
+      Object.assign(defaults, getDefaults(field.fields, field.name + "."));
+    }
+    if (field.tabs) {
+      for (const tab of field.tabs) {
+        if (tab.fields) {
+          Object.assign(defaults, getDefaults(tab.fields, prefix));
+        }
+      }
+    }
+  }
+  return defaults;
+}
+
+/**
+ * Helper to flatten nested object with dot notation keys
+ */
+export function flattenObject(
+  obj: Record<string, any>,
+  prefix = "",
+): Record<string, any> {
+  const result: Record<string, any> = {};
+  for (const key in obj) {
+    const newKey = prefix ? `${prefix}.${key}` : key;
+    const val = obj[key];
+    if (
+      val !== null &&
+      typeof val === "object" &&
+      !Array.isArray(val) &&
+      // Only recurse into plain objects, not Dates, Maps, or other class instances
+      (val.constructor === Object || !val.constructor)
+    ) {
+      Object.assign(result, flattenObject(val, newKey));
+    } else {
+      result[newKey] = val;
+    }
+  }
+  return result;
+}
+
+/**
+ * Helper to unflatten dot notation keys back to nested object
+ */
+export function unflattenObject(flat: Record<string, any>): Record<string, any> {
+  const result: Record<string, any> = {};
+  for (const key in flat) {
+    const parts = key.split(".");
+    let current = result;
+    for (let i = 0; i < parts.length - 1; i++) {
+      if (!current[parts[i]]) {
+        current[parts[i]] = {};
+      }
+      current = current[parts[i]];
+    }
+    current[parts[parts.length - 1]] = flat[key];
+  }
+  return result;
+}

package/src/lib/paths.ts

@@ -0,0 +1,61 @@
+declare const __KYRO_ADMIN_PATH__: string;
+declare const __KYRO_API_PATH__: string;
+
+export const adminPath =
+  typeof __KYRO_ADMIN_PATH__ !== "undefined" ? __KYRO_ADMIN_PATH__ : "/admin";
+export const apiPath =
+  typeof __KYRO_API_PATH__ !== "undefined" ? __KYRO_API_PATH__ : "/api";
+
+export function resolveApi(url: string): string {
+  // If URL is already absolute or prefixed with the correct apiPath, return as is
+  if (url.startsWith("http") || url.startsWith(apiPath)) return url;
+  
+  // If it starts with the standard "/api/", map it to the configured apiPath
+  if (url.startsWith("/api/")) {
+    return apiPath + url.slice(4);
+  }
+  
+  // Otherwise, prepend the apiPath
+  const separator = url.startsWith("/") ? "" : "/";
+  return `${apiPath}${separator}${url}`;
+}
+
+
+export function resolveAdmin(url: string): string {
+  // If URL is already absolute or prefixed with the correct adminPath, return as is
+  if (url.startsWith("http") || url.startsWith(adminPath)) return url;
+  
+  // If it's a standard "/admin/" path, map it to the configured adminPath
+  if (url.startsWith("/admin/")) {
+    return adminPath + url.slice(6);
+  }
+  
+  // Otherwise, prepend the adminPath if it looks like a relative path
+  if (url.startsWith("/")) {
+    return adminPath + url;
+  }
+  
+  return url;
+}
+
+
+export function resolveMedia(url: string): string {
+  if (!url) return "";
+  // Absolute URLs, blob URLs, and data URLs are returned as-is
+  if (url.startsWith("http") || url.startsWith("blob:") || url.startsWith("data:")) {
+    return url;
+  }
+  
+  // For relative paths, ensure they start with a single slash
+  // These are relative to the site root (where /uploads/ usually lives)
+  return url.startsWith("/") ? url : `/${url}`;
+}
+
+
+export const paths = {
+  admin: adminPath,
+  api: apiPath,
+  resolveApi,
+  resolveAdmin,
+  resolveMedia,
+} as const;

package/src/lib/stores/index.ts

@@ -0,0 +1,370 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { apiPath, adminPath } from "../paths";
+
+// ============================================================
+// AUTH STORE
+// ============================================================
+
+export interface AuthUser {
+  id: string;
+  email: string;
+  role: string;
+  tenantId?: string;
+  [key: string]: unknown;
+}
+
+export interface Permissions {
+  collections?: Record<string, { read: boolean; create: boolean; update: boolean; delete: boolean }>;
+  globals?: Record<string, { read: boolean; update: boolean }>;
+  media?: { read: boolean; create: boolean; update: boolean; delete: boolean };
+  users?: { read: boolean; create: boolean; update: boolean; delete: boolean };
+  [key: string]: unknown;
+}
+
+interface AuthState {
+  user: AuthUser | null;
+  permissions: Permissions | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+  setUser: (user: AuthUser | null, permissions?: Permissions | null) => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  logout: () => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  permissions: null,
+  isAuthenticated: false,
+  isLoading: true,
+  error: null,
+
+  setUser: (user, permissions = null) =>
+    set({
+      user,
+      permissions,
+      isAuthenticated: !!user,
+      isLoading: false,
+      error: null,
+    }),
+
+  setLoading: (isLoading) => set({ isLoading }),
+
+  setError: (error) =>
+    set({
+      error,
+      isLoading: false,
+      isAuthenticated: false,
+      user: null,
+      permissions: null,
+    }),
+
+  logout: () =>
+    set({
+      user: null,
+      permissions: null,
+      isAuthenticated: false,
+      isLoading: false,
+      error: null,
+    }),
+}));
+
+const API_BASE = apiPath;
+const ADMIN_BASE = adminPath;
+
+export async function verifyAuth(): Promise<{
+  user: AuthUser | null;
+  permissions: Permissions | null;
+}> {
+  try {
+    const [meRes, accessRes] = await Promise.all([
+      fetch(`${API_BASE}/auth/me`, { credentials: "include" }),
+      fetch(`${API_BASE}/auth/access`, { credentials: "include" }),
+    ]);
+
+    if (!meRes.ok) {
+      return { user: null, permissions: null };
+    }
+
+    const [meData, accessData] = await Promise.all([
+      meRes.json(),
+      accessRes.ok ? accessRes.json() : Promise.resolve(null),
+    ]);
+
+    return {
+      user: meData.user || null,
+      permissions: accessData || null,
+    };
+  } catch {
+    return { user: null, permissions: null };
+  }
+}
+
+export async function doLogout(): Promise<void> {
+  try {
+    await fetch(`${API_BASE}/auth/logout`, {
+      method: "POST",
+      credentials: "include",
+    });
+  } finally {
+    useAuthStore.getState().logout();
+  }
+}
+
+export function redirectToLogin(): void {
+  window.location.href = `${ADMIN_BASE}/login`;
+}
+
+
+// ============================================================
+// TOAST STORE
+// ============================================================
+
+export interface Toast {
+  id: string;
+  type: "success" | "error" | "warning" | "info";
+  message: string;
+}
+
+interface ToastState {
+  toasts: Toast[];
+  addToast: (type: Toast["type"], message: string) => void;
+  removeToast: (id: string) => void;
+  clearToasts: () => void;
+}
+
+export const useToastStore = create<ToastState>((set) => ({
+  toasts: [],
+
+  addToast: (type, message) => {
+    const id = Math.random().toString(36).substring(7);
+    set((state) => ({
+      toasts: [...state.toasts, { id, type, message }],
+    }));
+  },
+
+  removeToast: (id) =>
+    set((state) => ({
+      toasts: state.toasts.filter((t) => t.id !== id),
+    })),
+
+  clearToasts: () => set({ toasts: [] }),
+}));
+
+export const toast = {
+  success: (message: string) =>
+    useToastStore.getState().addToast("success", message),
+  error: (message: string) =>
+    useToastStore.getState().addToast("error", message),
+  warning: (message: string) =>
+    useToastStore.getState().addToast("warning", message),
+  info: (message: string) =>
+    useToastStore.getState().addToast("info", message),
+};
+
+// ============================================================
+// THEME STORE
+// ============================================================
+
+export type ThemeMode = "light" | "dark";
+
+interface ThemeState {
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  toggleMode: () => void;
+}
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set) => ({
+      mode: "light",
+
+      setMode: (mode) => set({ mode }),
+
+      toggleMode: () =>
+        set((state) => ({ mode: state.mode === "light" ? "dark" : "light" })),
+    }),
+    {
+      name: "kyro-theme",
+    },
+  ),
+);
+
+// ============================================================
+// UI STORE
+// ============================================================
+
+export interface ModalConfig {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm?: () => void | Promise<void>;
+  onCancel?: () => void;
+  variant?: "default" | "danger" | "success" | "warning";
+  size?: "sm" | "md" | "lg" | "xl";
+}
+
+interface UIState {
+  sidebarOpen: boolean;
+  toggleSidebar: () => void;
+  setSidebarOpen: (open: boolean) => void;
+
+  modal: {
+    open: boolean;
+    config: ModalConfig | null;
+  };
+  confirm: (config: ModalConfig) => void;
+  alert: (config: Omit<ModalConfig, "onConfirm" | "cancelLabel">) => void;
+  closeModal: () => void;
+
+  activeModal: string | null; // Legacy for specific hardcoded modals
+  openModal: (modal: string) => void;
+}
+
+export const useUIStore = create<UIState>((set) => ({
+  sidebarOpen: true,
+  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+  setSidebarOpen: (open) => set({ sidebarOpen: open }),
+
+  modal: {
+    open: false,
+    config: null,
+  },
+  confirm: (config) => set({
+    modal: {
+      open: true,
+      config: { ...config, variant: config.variant || "default" },
+    }
+  }),
+  alert: (config) => set({
+    modal: {
+      open: true,
+      config: { 
+        ...config, 
+        variant: config.variant || "default",
+        confirmLabel: config.confirmLabel || "OK",
+        onConfirm: () => set((s) => ({ modal: { ...s.modal, open: false } }))
+      },
+    }
+  }),
+  closeModal: () => set((state) => ({
+    modal: { ...state.modal, open: false },
+    activeModal: null
+  })),
+
+  activeModal: null,
+  openModal: (modal) => set({ activeModal: modal }),
+}));
+
+// ============================================================
+// EDITOR STORE
+// ============================================================
+
+interface EditorState {
+  editor: unknown;
+  setEditor: (editor: unknown) => void;
+
+  blockDrawerOpen: boolean;
+  openBlockDrawer: (options?: { targetColumn?: number }) => void;
+  closeBlockDrawer: () => void;
+  toggleBlockDrawer: () => void;
+
+  selectedBlock: string | null;
+  setSelectedBlock: (block: string | null) => void;
+
+  pendingInsert: {
+    pos: number | null;
+    column: number | null;
+  };
+  setPendingInsert: (pos: number | null, column?: number) => void;
+  clearPendingInsert: () => void;
+}
+
+export const useEditorStore = create<EditorState>((set) => ({
+  editor: null,
+  setEditor: (editor) => set({ editor }),
+
+  blockDrawerOpen: false,
+  openBlockDrawer: (options) =>
+    set({
+      blockDrawerOpen: true,
+      pendingInsert: { pos: null, column: options?.targetColumn ?? null },
+    }),
+  closeBlockDrawer: () =>
+    set({
+      blockDrawerOpen: false,
+      pendingInsert: { pos: null, column: null },
+    }),
+  toggleBlockDrawer: () =>
+    set((state) => ({ blockDrawerOpen: !state.blockDrawerOpen })),
+
+  selectedBlock: null,
+  setSelectedBlock: (block) => set({ selectedBlock: block }),
+
+  pendingInsert: { pos: null, column: null },
+  setPendingInsert: (pos, column) =>
+    set({ pendingInsert: { pos, column: column ?? null } }),
+  clearPendingInsert: () => set({ pendingInsert: { pos: null, column: null } }),
+}));
+
+// ============================================================
+// DATA STORE
+// ============================================================
+
+interface DataCache<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+  lastFetch: number | null;
+}
+
+interface DataStore {
+  cache: Record<string, DataCache<unknown>>;
+  setCache: (key: string, data: unknown) => void;
+  setLoading: (key: string, loading: boolean) => void;
+  setError: (key: string, error: string) => void;
+  getCache: (key: string) => DataCache<unknown> | null;
+  invalidateCache: (key?: string) => void;
+}
+
+export const useDataStore = create<DataStore>((set, get) => ({
+  cache: {},
+
+  setCache: (key, data) =>
+    set((state) => ({
+      cache: {
+        ...state.cache,
+        [key]: { data, loading: false, error: null, lastFetch: Date.now() },
+      },
+    })),
+
+  setLoading: (key, loading) =>
+    set((state) => ({
+      cache: {
+        ...state.cache,
+        [key]: { ...state.cache[key], loading, error: null },
+      },
+    })),
+
+  setError: (key, error) =>
+    set((state) => ({
+      cache: {
+        ...state.cache,
+        [key]: { data: null, loading: false, error, lastFetch: null },
+      },
+    })),
+
+  getCache: (key) => get().cache[key] || null,
+
+  invalidateCache: (key) =>
+    set((state) => {
+      if (key) {
+        const { [key]: _, ...rest } = state.cache;
+        return { cache: rest };
+      }
+      return { cache: {} };
+    }),
+}));

package/src/lib/types.ts

@@ -0,0 +1,43 @@
+import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core/client";
+
+export interface KyroAdminConfig {
+  collections?: CollectionConfig[] | Record<string, CollectionConfig>;
+  globals?: GlobalConfig[] | Record<string, GlobalConfig>;
+  adapter?: unknown;
+  name?: string;
+}
+
+export interface User {
+  id: string;
+  email: string;
+  name?: string;
+  role: string;
+  status?: "active" | "locked";
+  locked?: boolean;
+  lastLogin?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  tenantId?: string;
+  emailVerified?: boolean;
+  failedLoginAttempts?: number;
+}
+
+export interface MediaItem {
+  id: string;
+  url: string;
+  filename: string;
+  mimeType: string;
+  fileSize: number;
+  width?: number;
+  height?: number;
+  alt?: string;
+  title?: string;
+  description?: string;
+  folder?: string;
+  type?: string;
+  caption?: string;
+  originalName?: string;
+  thumbnailUrl?: string;
+  createdAt?: string;
+  updatedAt?: string;
+}

package/src/lib/useResourceManager.ts

@@ -0,0 +1,105 @@
+import { useState, useEffect, useCallback } from "react";
+import { apiGet, apiPost, apiDelete, apiPatch } from "./api";
+import { useUIStore } from "./stores";
+
+interface UseResourceManagerOptions<T> {
+  endpoint: string;
+  onSuccess?: (action: "load" | "create" | "delete" | "update", data?: unknown) => void;
+  onError?: (action: "load" | "create" | "delete" | "update", error: unknown) => void;
+  transformLoad?: (data: unknown[]) => T[];
+}
+
+export function useResourceManager<T extends { id: string }>(
+  options: UseResourceManagerOptions<T>
+) {
+  const [items, setItems] = useState<T[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const { confirm, alert } = useUIStore();
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await apiGet<any>(options.endpoint);
+      const data = Array.isArray(response) ? response : response.docs || [];
+      const transformed = options.transformLoad ? options.transformLoad(data) : data;
+      setItems(transformed);
+      options.onSuccess?.("load", transformed);
+} catch (e: unknown) {
+       const message = e instanceof Error ? e.message : "Failed to load resources";
+       setError(message);
+       options.onError?.("load", e as Error);
+    } finally {
+      setLoading(false);
+    }
+  }, [options.endpoint, options.transformLoad]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const remove = useCallback((id: string, resourceName = "item") => {
+    confirm({
+      title: `Delete ${resourceName}`,
+      message: `Are you sure you want to delete this ${resourceName.toLowerCase()}? This action cannot be undone.`,
+      variant: "danger",
+      onConfirm: async () => {
+        try {
+          await apiDelete(`${options.endpoint}/${id}`);
+          setItems((prev) => prev.filter((item) => item.id !== id));
+          options.onSuccess?.("delete", id);
+} catch (e: unknown) {
+           const message = e instanceof Error ? e.message : `Failed to delete ${resourceName}`;
+           alert({ title: "Error", message });
+           options.onError?.("delete", e as Error);
+        }
+      },
+    });
+  }, [options.endpoint, confirm, alert]);
+
+  const create = useCallback(async (data: unknown) => {
+    setError(null);
+    try {
+      const created = await apiPost<T>(options.endpoint, data);
+      setItems((prev) => [created, ...prev]);
+      setIsCreateModalOpen(false);
+      options.onSuccess?.("create", created);
+      return created;
+} catch (e: unknown) {
+       const message = e instanceof Error ? e.message : "Failed to create resource";
+       setError(message);
+       options.onError?.("create", e as Error);
+      throw e;
+    }
+  }, [options.endpoint]);
+
+  const update = useCallback(async (id: string, data: unknown) => {
+    setError(null);
+    try {
+      const updated = await apiPatch<T>(`${options.endpoint}/${id}`, data);
+      setItems((prev) => prev.map((item) => (item.id === id ? updated : item)));
+      options.onSuccess?.("update", updated);
+      return updated;
+} catch (e: unknown) {
+       const message = e instanceof Error ? e.message : "Failed to update resource";
+       setError(message);
+       options.onError?.("update", e as Error);
+      throw e;
+    }
+  }, [options.endpoint]);
+
+  return {
+    items,
+    setItems,
+    loading,
+    error,
+    load,
+    remove,
+    create,
+    update,
+    isCreateModalOpen,
+    setIsCreateModalOpen,
+  };
+}