@kyro-cms/admin 0.2.4 → 0.3.0

package/src/components/UserManagement.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { apiGet, apiPatch } from "@kyro-cms/utils/lib/api";
+import { apiGet, apiPatch } from "../lib/api";
 import {
   Users,
   UserPlus,

package/src/components/WebhookManager.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { apiGet, apiPost, apiPatch, apiDelete } from "@kyro-cms/utils/lib/api";
-import { formatDate } from "@kyro-cms/utils/lib/date-utils";
+import { apiGet, apiPost, apiPatch, apiDelete } from "../lib/api";
+import { formatDate } from "../lib/date-utils";
 import {
   Webhook,
   Plus,

package/src/components/fields/RelationshipBlockField.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Search, Loader2, X } from "lucide-react";
-import { apiGet, buildSearchQuery } from "@kyro-cms/utils/lib/api";
+import { apiGet, buildSearchQuery } from "../../lib/api";
 
 interface RelationshipBlockFieldProps {
   relationTo?: string;

package/src/components/fields/RelationshipField.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { Search, X, ChevronDown, Loader2 } from "lucide-react";
-import { apiGet, buildSearchQuery } from "@kyro-cms/utils/lib/api";
+import { apiGet, buildSearchQuery } from "../../lib/api";
 
 interface RelationshipFieldProps {
   field: {

package/src/components/fields/UploadField.tsx

@@ -1,12 +1,7 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { Image, Film, FileText, Music, File, X, Loader2 } from "lucide-react";
-import {
-  apiGet,
-  withCacheBust,
-  apiPost,
-  apiUpload,
-} from "@kyro-cms/utils/lib/api";
+import { apiGet, withCacheBust, apiPost, apiUpload } from "../../lib/api";
 
 interface UploadFieldProps {
   field: any;

package/src/components/ui/CommandPalette.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
-import { apiGet } from "@kyro-cms/utils/lib/api";
+import { apiGet } from "../../lib/api";
 import {
   Search,
   FileText,

package/src/fields/examples/sample-field-2.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { FieldEditorProps } from "../types.ts";
+import { registerField } from "../registry.tsx";
+import type { KyroField } from "../types.ts";
+
+const SampleTextareaEditor: React.FC<FieldEditorProps> = ({
+  name,
+  value,
+  onChange,
+}) => {
+  return (
+    <textarea
+      name={name}
+      value={typeof value === "string" ? value : ""}
+      onChange={(e) => onChange?.(e.target.value)}
+      placeholder="Sample textarea"
+    />
+  );
+};
+
+const field: KyroField = {
+  id: "sample-textarea",
+  type: "textarea",
+  label: "Sample Textarea",
+  editor: SampleTextareaEditor,
+};
+
+registerField(field);
+export default field;
+export { field as sampleField2 };

package/src/fields/examples/sample-field.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { FieldEditorProps } from "../types.ts";
+import { registerField } from "../registry.tsx";
+import type { KyroField } from "../types.ts";
+
+const SampleTextEditor: React.FC<FieldEditorProps> = ({
+  name,
+  value,
+  onChange,
+}) => {
+  return (
+    <input
+      name={name}
+      value={typeof value === "string" ? value : ""}
+      onChange={(e) => onChange?.(e.target.value)}
+      placeholder="Sample text"
+    />
+  );
+};
+
+const field: KyroField = {
+  id: "sample-text",
+  type: "text",
+  label: "Sample Text",
+  editor: SampleTextEditor,
+};
+
+registerField(field);
+export default field;
+export { field as sampleField };

package/src/fields/index.ts

@@ -0,0 +1,33 @@
+export {
+  registerField,
+  unregisterField,
+  getField,
+  getFields,
+  getFieldByType,
+  useFieldRenderer,
+} from "./registry.tsx";
+export type { KyroField, FieldEditorProps } from "./types.ts";
+export { default as sampleField } from "./examples/sample-field";
+export { default as sampleField2 } from "./examples/sample-field-2.tsx";
+
+// Re-export core field types for type-safe field registration
+export type {
+  FieldType,
+  Field,
+  TextField,
+  NumberField,
+  CheckboxField,
+  DateField,
+  SelectField,
+  TextareaField,
+  RichTextField,
+  CodeField,
+  JSONField,
+  ImageField,
+  UploadField,
+  RelationshipField,
+  BlocksField,
+  ArrayField,
+  GroupField,
+  ALL_FIELD_TYPES,
+} from "@kyro-cms/core";

package/src/fields/registry.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode, ComponentType } from "react";
+import type { FieldType } from "@kyro-cms/core";
+import type { KyroField, FieldEditorProps } from "./types.ts";
+
+const fields: Map<string, KyroField> = new Map();
+
+export function registerField(field: KyroField): void {
+  if (!field.id || typeof field.id !== "string") {
+    throw new Error("Field must have a valid id");
+  }
+  if (!field.type || typeof field.type !== "string") {
+    throw new Error("Field must have a valid type");
+  }
+  fields.set(field.id, field);
+}
+
+export function unregisterField(id: string): void {
+  fields.delete(id);
+}
+
+export function getField(id: string): KyroField | undefined {
+  return fields.get(id);
+}
+
+export function getFields(): KyroField[] {
+  return Array.from(fields.values());
+}
+
+export function getFieldByType(type: FieldType): KyroField | undefined {
+  return Array.from(fields.values()).find((f) => f.type === type);
+}
+
+export function useFieldRenderer(
+  fieldId: string,
+  props: Omit<FieldEditorProps, "onChange"> & {
+    onChange?: (value: unknown) => void;
+  },
+): ReactNode | null {
+  const field = fields.get(fieldId);
+  if (!field) {
+    console.warn(`Field "${fieldId}" not found in registry`);
+    return null;
+  }
+  const FieldEditor: ComponentType<FieldEditorProps> = field.editor;
+  return <FieldEditor {...(props as FieldEditorProps)} />;
+}

package/src/fields/types.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import type { FieldType } from "@kyro-cms/core";
+
+export interface FieldEditorProps {
+  name: string;
+  label: string;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  onBlur?: () => void;
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+  schema?: Record<string, unknown>;
+}
+
+export interface KyroField {
+  id: string;
+  type: FieldType;
+  label?: string;
+  editor: React.ComponentType<FieldEditorProps>;
+  schema?: Record<string, unknown>;
+  defaultValue?: unknown;
+  validate?: (value: unknown) => string | null;
+}

package/src/hooks/data.ts

@@ -0,0 +1,116 @@
+import { useState, useEffect, useCallback } from "react";
+
+export interface QueryOptions {
+  page?: number;
+  limit?: number;
+  filter?: Record<string, unknown>;
+  sort?: string;
+  order?: "asc" | "desc";
+}
+
+export interface QueryResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => Promise<void>;
+}
+
+export interface MutationResult {
+  mutate: (
+    data?: Record<string, unknown>,
+  ) => Promise<Record<string, unknown> | null>;
+  loading: boolean;
+  error: string | null;
+}
+
+function getApiUrl(path: string): string {
+  const base = typeof window !== "undefined" ? window.location.origin : "";
+  return `${base}${path}`;
+}
+
+function getToken(): string | null {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem("kyro_token");
+}
+
+export function useKyroQuery<T = Record<string, unknown>>(
+  slug: string,
+  options: QueryOptions = {},
+): QueryResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams();
+      if (options.page) params.set("page", String(options.page));
+      if (options.limit) params.set("limit", String(options.limit));
+      if (options.sort) params.set("sort", options.sort);
+      if (options.order) params.set("order", options.order);
+
+      const url = `${getApiUrl(`/api/${slug}`)}?${params.toString()}`;
+      const token = getToken();
+      const res = await fetch(url, {
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+      });
+
+      if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+      const json = await res.json();
+      setData(json.data ?? json);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [slug, options.page, options.limit, options.sort, options.order]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, refetch: fetchData };
+}
+
+export function useKyroMutation(
+  slug: string,
+  method: "POST" | "PATCH" | "DELETE" = "POST",
+): MutationResult {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const mutate = useCallback(
+    async (
+      data?: Record<string, unknown>,
+    ): Promise<Record<string, unknown> | null> => {
+      setLoading(true);
+      setError(null);
+      try {
+        const url = getApiUrl(`/api/${slug}`);
+        const token = getToken();
+        const res = await fetch(url, {
+          method,
+          headers: {
+            "Content-Type": "application/json",
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+          },
+          body: data ? JSON.stringify(data) : undefined,
+        });
+
+        if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        const json = await res.json();
+        return json.data ?? json;
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [slug, method],
+  );
+
+  return { mutate, loading, error };
+}

package/src/hooks/examples/sample-hook-2.ts

@@ -0,0 +1,13 @@
+import { onAdminReady } from "../lifecycle.ts";
+import type { AdminContext, HookResult } from "../types.ts";
+
+// Second MVP hook showcasing a different approach (logs to console)
+export default function registerSampleHook2() {
+  onAdminReady((ctx: AdminContext) => {
+    // Minimal side-effect demonstration
+    void ctx;
+    // eslint-disable-next-line no-console
+    console.log("[KyroAdmin] sample-hook-2 ready");
+    return { success: true } as HookResult;
+  });
+}

package/src/hooks/examples/sample-hook.ts

@@ -0,0 +1,12 @@
+import { onAdminReady } from "../lifecycle.ts";
+import type { AdminContext, HookResult } from "../types.ts";
+
+// A tiny MVP hook that demonstrates registration via the public API
+// and emits a trivial HookResult when the admin is ready.
+export default function registerSampleHook() {
+  onAdminReady((ctx: AdminContext) => {
+    // Minimal side-effect; in real plugins, you could register editors or analytics
+    void ctx;
+    return { success: true } as HookResult;
+  });
+}

package/src/hooks/index.ts

@@ -0,0 +1,19 @@
+export {
+  onAdminReady,
+  beforeDeploy,
+  afterDeploy,
+  emitAdminReady,
+  emitBeforeDeploy,
+  emitAfterDeploy,
+} from "./lifecycle.ts";
+export { useKyroQuery, useKyroMutation } from "./data.ts";
+export { default as sampleHook } from "./examples/sample-hook.ts";
+export { default as sampleHook2 } from "./examples/sample-hook-2.ts";
+export type {
+  AdminContext,
+  HookResult,
+  LifecycleHook,
+  AuthUser,
+  TenantInfo,
+} from "./types.ts";
+export type { QueryOptions, QueryResult, MutationResult } from "./data.ts";

package/src/hooks/lifecycle.ts

@@ -0,0 +1,81 @@
+import type { AdminContext, HookResult, LifecycleHook } from "./types.ts";
+
+type HookRegistry = {
+  ready: LifecycleHook[];
+  beforeDeploy: LifecycleHook[];
+  afterDeploy: ((ctx: AdminContext, result: HookResult) => void)[];
+};
+
+const registry: HookRegistry = {
+  ready: [],
+  beforeDeploy: [],
+  afterDeploy: [],
+};
+
+export function onAdminReady(hook: LifecycleHook) {
+  registry.ready.push(hook);
+  return () => {
+    registry.ready = registry.ready.filter((h) => h !== hook);
+  };
+}
+
+export function beforeDeploy(hook: LifecycleHook) {
+  registry.beforeDeploy.push(hook);
+  return () => {
+    registry.beforeDeploy = registry.beforeDeploy.filter((h) => h !== hook);
+  };
+}
+
+export function afterDeploy(
+  hook: (ctx: AdminContext, result: HookResult) => void,
+) {
+  registry.afterDeploy.push(hook);
+  return () => {
+    registry.afterDeploy = registry.afterDeploy.filter((h) => h !== hook);
+  };
+}
+
+export async function emitAdminReady(ctx: AdminContext): Promise<HookResult[]> {
+  const results: HookResult[] = [];
+  for (const hook of registry.ready) {
+    try {
+      const result = await hook(ctx);
+      if (result && typeof result === "object" && "success" in result) {
+        results.push(result);
+      }
+    } catch (error) {
+      results.push({ success: false, error: String(error) });
+    }
+  }
+  return results;
+}
+
+export async function emitBeforeDeploy(
+  ctx: AdminContext,
+): Promise<HookResult[]> {
+  const results: HookResult[] = [];
+  for (const hook of registry.beforeDeploy) {
+    try {
+      const result = await hook(ctx);
+      if (result && typeof result === "object" && "success" in result) {
+        results.push(result);
+      }
+    } catch (error) {
+      results.push({ success: false, error: String(error) });
+    }
+  }
+  return results;
+}
+
+export async function emitAfterDeploy(
+  ctx: AdminContext,
+  result: HookResult,
+): Promise<void> {
+  for (const hook of registry.afterDeploy) {
+    try {
+      await hook(ctx, result);
+    } catch {
+      // Silently ignore afterDeploy hook errors
+    }
+  }
+}

package/src/hooks/types.ts

@@ -0,0 +1,40 @@
+export interface AuthUser {
+  id: string;
+  email: string;
+  role: string;
+  tenantId?: string;
+}
+
+export interface TenantInfo {
+  id: string;
+  slug: string;
+  name: string;
+}
+
+export interface AdminContext {
+  user: AuthUser | null;
+  tenant: TenantInfo | null;
+  config: Record<string, unknown>;
+  api: {
+    baseUrl: string;
+    token: string | null;
+  };
+}
+
+export interface HookResult {
+  success: boolean;
+  error?: string;
+}
+
+export type LifecycleHook = (
+  ctx: AdminContext,
+) => void | HookResult | Promise<void | HookResult>;
+
+export type DeployHook = (
+  ctx: AdminContext,
+) => HookResult | Promise<HookResult>;
+
+export type DeployResultHook = (
+  ctx: AdminContext,
+  result: HookResult,
+) => void | Promise<void>;

package/src/index.ts

@@ -32,3 +32,81 @@ export {
 } from "./components/ui/Dropdown";
 export { Modal, ConfirmModal } from "./components/ui/Modal";
 export { SlidePanel } from "./components/ui/SlidePanel";
+
+// Extensibility: Theme
+export {
+  ThemeProvider as ExtThemeProvider,
+  LightThemeProvider as ExtLightThemeProvider,
+  DarkThemeProvider as ExtDarkThemeProvider,
+  useTheme as useExtTheme,
+  LIGHT_THEME,
+  DARK_THEME,
+  mergeThemes,
+  type ThemeMode as ExtThemeMode,
+  type KyroTheme,
+  type ThemeColors,
+  type ThemeTypography,
+  type ThemeSpacing,
+  type ThemeRadius,
+  type ThemeShadows,
+  type BlockThemeOverrides,
+  type FieldThemeOverrides,
+} from "./theme/index";
+
+// Extensibility: Hooks
+export {
+  onAdminReady,
+  beforeDeploy,
+  afterDeploy,
+  emitAdminReady,
+  emitBeforeDeploy,
+  emitAfterDeploy,
+  useKyroQuery,
+  useKyroMutation,
+  type AdminContext,
+  type HookResult,
+  type LifecycleHook,
+  type AuthUser,
+  type TenantInfo,
+  type QueryOptions,
+  type QueryResult,
+  type MutationResult,
+} from "./hooks/index.js";
+
+// Extensibility: Plugins
+export {
+  registerPlugin,
+  unregisterPlugin,
+  getPlugin,
+  getPlugins,
+  getPluginsWithHook,
+  type KyroPlugin,
+} from "./plugins/index.js";
+
+// Extensibility: Blocks
+export {
+  registerBlock,
+  unregisterBlock,
+  getBlock,
+  getBlocks,
+  getBlocksByCategory,
+  useBlockRenderer,
+  type KyroBlock,
+  type BlockRenderProps,
+} from "./blocks/index";
+
+// Extensibility: Fields
+export {
+  registerField,
+  unregisterField,
+  getField,
+  getFields,
+  getFieldByType,
+  useFieldRenderer,
+  type KyroField,
+  type FieldEditorProps,
+} from "./fields/index";
+
+// Astro Integration
+export { kyroAdmin } from "./integration";
+export type { KyroAdminOptions } from "./integration";

package/src/integration.ts

@@ -0,0 +1,52 @@
+import type { AstroIntegration } from "astro";
+import path from "path";
+import fs from "fs";
+
+export interface KyroAdminOptions {
+  basePath?: string;
+  configPath?: string;
+  disableAuth?: boolean;
+}
+
+export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
+  const {
+    basePath = "/admin",
+    configPath = "kyro.config.ts",
+    disableAuth = false,
+  } = options;
+
+  return {
+    name: "@kyro-cms/admin",
+    hooks: {
+      "astro:config:setup": ({ config, updateConfig, logger }) => {
+        logger.info(`Kyro Admin mounted at ${basePath}`);
+
+        const resolvedConfig = path.resolve(config.root.pathname, configPath);
+        if (fs.existsSync(resolvedConfig)) {
+          logger.info(`Loaded config from ${configPath}`);
+        } else {
+          logger.warn(
+            `Config file not found at ${configPath}. Using defaults.`,
+          );
+        }
+
+        updateConfig({
+          vite: {
+            resolve: {
+              alias: {
+                "kyro:config": resolvedConfig,
+              },
+            },
+            define: {
+              __KYRO_ADMIN_BASE_PATH__: JSON.stringify(basePath),
+              __KYRO_ADMIN_AUTH_DISABLED__: JSON.stringify(disableAuth),
+            },
+          },
+        });
+      },
+      "astro:build:done": ({ logger }) => {
+        logger.info("Kyro Admin build complete");
+      },
+    },
+  };
+}

package/src/pages/api/[collection]/[id]/publish.ts

@@ -1,6 +1,6 @@
 import type { APIRoute } from "astro";
-import { dataStore } from "../../../../../lib/dataStore";
-import { collections } from "../../../../../lib/config";
+import { dataStore } from "../../../../lib/dataStore";
+import { collections } from "../../../../lib/config";
 
 dataStore.initialize(collections);
 

package/src/pages/api/[collection]/[id]/unpublish.ts

@@ -1,6 +1,6 @@
 import type { APIRoute } from "astro";
-import { dataStore } from "../../../../../lib/dataStore";
-import { collections } from "../../../../../lib/config";
+import { dataStore } from "../../../../lib/dataStore";
+import { collections } from "../../../../lib/config";
 
 dataStore.initialize(collections);
 

package/src/pages/api/[collection]/[id]/versions.ts

@@ -1,5 +1,5 @@
 import type { APIRoute } from "astro";
-import { dataStore } from "../../../../../lib/dataStore";
+import { dataStore } from "../../../../lib/dataStore";
 
 export const GET: APIRoute = async ({ params, url }) => {
   const { collection, id } = params;

package/src/pages/api/[collection]/[id].ts

@@ -1,6 +1,6 @@
 import type { APIRoute } from "astro";
-import { dataStore } from "../../../../lib/dataStore";
-import { collections } from "../../../../lib/config";
+import { dataStore } from "../../../lib/dataStore";
+import { collections } from "../../../lib/config";
 import { getAuthAdapter } from "../../../lib/db";
 
 dataStore.initialize(collections);