@kyro-cms/admin 0.1.7 → 0.1.8

package/src/components/fields/extensions/blockComponents.tsx

@@ -12,6 +12,7 @@ import { FileBlock } from "../../blocks/FileBlock";
 import { VStackBlock } from "../../blocks/VStackBlock";
 import { ButtonBlock } from "../../blocks/ButtonBlock";
 import { AccordionBlock } from "../../blocks/AccordionBlock";
+import { RichTextBlock } from "../../blocks/RichTextBlock";
 
 import { HeroBlock } from "../../blocks/HeroBlock";
 import { ArrayBlock } from "../../blocks/ArrayBlock";
@@ -51,6 +52,7 @@ export const BLOCK_COMPONENTS: Record<string, React.ComponentType<any>> = {
   vstack: VStackBlock,
   button: ButtonBlock,
   accordion: AccordionBlock,
+  richtext: RichTextBlock,
 
   hero: HeroBlock,
   array: ArrayBlock,
@@ -72,6 +74,7 @@ export const blockIcons: Record<string, React.ReactNode> = {
   vstack: <ArrowDown className="w-4 h-4" />,
   button: <MousePointerClick className="w-4 h-4" />,
   accordion: <ChevronDown className="w-4 h-4" />,
+  richtext: <AlignLeft className="w-4 h-4" />,
 
   hero: <Star className="w-4 h-4" />,
   array: <ListOrdered className="w-4 h-4" />,
@@ -107,6 +110,7 @@ export function getBlockLabel(type: string): string {
     vstack: "VStack",
     columns: "Columns",
     relationship: "Relationship",
+    richtext: "Rich Text",
   };
   return labelMap[type] || type;
 }
@@ -143,7 +147,7 @@ export const blockCategories = [
         type: "heading",
         label: "Heading",
         icon: "heading",
-        description: "H1-H3 heading",
+        description: "Heading text",
       },
       {
         type: "paragraph",
@@ -151,6 +155,12 @@ export const blockCategories = [
         icon: "paragraph",
         description: "Plain text content",
       },
+      {
+        type: "richtext",
+        label: "Rich Text",
+        icon: "richtext",
+        description: "Formatted text with links & styles",
+      },
       {
         type: "list",
         label: "List",

package/src/components/fields/extensions/blocksStore.ts

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import type { BlockData } from "@kyro-cms/core";
+import type { BlockData } from "@kyro-cms/core/client";
 
 export interface BlocksStore {
   blocks: BlockData[];

package/src/components/fields/index.ts

@@ -1,6 +1,5 @@
 export { default as PortableTextField } from "./PortableTextField";
 export { PortableTextRenderer } from "./PortableTextRenderer";
-export { HybridContentField } from "./HybridContentField";
 export { CodeField } from "./CodeField";
 export { JSONField } from "./JSONField";
 export { MarkdownField } from "./MarkdownField";
@@ -11,3 +10,15 @@ export { default as DateField } from "./DateField";
 export { default as SelectField } from "./SelectField";
 export { default as RelationshipField } from "./RelationshipField";
 export { BlocksField } from "./BlocksField";
+export { AccordionField } from "./AccordionField";
+export { ButtonField } from "./ButtonField";
+export { UploadField } from "./UploadField";
+export { LinkField } from "./LinkField";
+export { HeadingField } from "./HeadingField";
+export { VideoField } from "./VideoField";
+export { ListField } from "./ListField";
+export { HeroField } from "./HeroField";
+export { ArrayField } from "./ArrayField";
+export { ChildrenField } from "./ChildrenField";
+export { ColumnsField } from "./ColumnsField";
+export { RelationshipBlockField } from "./RelationshipBlockField";

package/src/components/layout/Layout.tsx

@@ -1,4 +1,4 @@
-import { type CollectionConfig } from '@kyro-cms/core';
+import { type CollectionConfig } from '@kyro-cms/core/client';
 
 interface LayoutProps {
   children: any;

package/src/lib/api.ts

@@ -0,0 +1,163 @@
+export interface ApiResponse<T = any> {
+  docs?: T[];
+  doc?: T;
+  totalDocs?: number;
+  error?: string;
+}
+
+export async function apiGet<T = any>(
+  url: string,
+  options?: RequestInit,
+): Promise<T> {
+  const response = await fetch(url, {
+    ...options,
+    credentials: "include",
+  });
+  if (!response.ok) {
+    throw new Error(`API Error: ${response.status}`);
+  }
+  return response.json();
+}
+
+export async function apiPost<T = any>(
+  url: string,
+  body?: any,
+  options?: RequestInit,
+): Promise<T> {
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...options?.headers,
+    },
+    body: body ? JSON.stringify(body) : undefined,
+    credentials: "include",
+    ...options,
+  });
+  if (!response.ok) {
+    throw new Error(`API Error: ${response.status}`);
+  }
+  return response.json();
+}
+
+export async function apiPatch<T = any>(
+  url: string,
+  body?: any,
+  options?: RequestInit,
+): Promise<T> {
+  const response = await fetch(url, {
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/json",
+      ...options?.headers,
+    },
+    body: body ? JSON.stringify(body) : undefined,
+    credentials: "include",
+    ...options,
+  });
+  if (!response.ok) {
+    throw new Error(`API Error: ${response.status}`);
+  }
+  return response.json();
+}
+
+export async function apiPatchNoThrow<T = any>(
+  url: string,
+  body?: any,
+): Promise<{ ok: boolean; data?: T; error?: string }> {
+  const response = await fetch(url, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: body ? JSON.stringify(body) : undefined,
+    credentials: "include",
+  });
+  if (!response.ok) {
+    return { ok: false, error: `Error: ${response.status}` };
+  }
+  const data = await response.json();
+  return { ok: true, data };
+}
+
+export async function apiDelete<T = any>(
+  url: string,
+  options?: RequestInit,
+): Promise<T> {
+  const response = await fetch(url, {
+    method: "DELETE",
+    credentials: "include",
+    ...options,
+  });
+  if (!response.ok) {
+    throw new Error(`API Error: ${response.status}`);
+  }
+  return response.json();
+}
+
+export function buildQueryString(params: Record<string, any>): string {
+  const urlParams = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== undefined && value !== null && value !== "") {
+      urlParams.set(key, String(value));
+    }
+  }
+  return urlParams.toString();
+}
+
+export function withCacheBust(url: string): string {
+  const separator = url.includes("?") ? "&" : "?";
+  return `${url}${separator}t=${Date.now()}`;
+}
+
+export function buildSearchQuery(
+  search: string,
+  fields: string[],
+  limit: number = 50,
+): string {
+  if (!search || fields.length === 0) {
+    return `limit=${limit}`;
+  }
+  const searchQuery = fields
+    .map((f) => `where[${f}][contains]=${encodeURIComponent(search)}`)
+    .join("&");
+  return `${searchQuery}&limit=${limit}`;
+}
+
+export function buildCollectionUrl(
+  collection: string,
+  params?: Record<string, any>,
+): string {
+  let url = `/api/${collection}`;
+  if (params) {
+    const query = buildQueryString(params);
+    if (query) url += `?${query}`;
+  }
+  return withCacheBust(url);
+}
+
+export function buildDocumentUrl(
+  collection: string,
+  id: string,
+  params?: Record<string, any>,
+): string {
+  let url = `/api/${collection}/${id}`;
+  if (params) {
+    const query = buildQueryString(params);
+    if (query) url += `?${query}`;
+  }
+  return url;
+}
+
+export async function apiUpload<T = any>(
+  url: string,
+  body: FormData,
+): Promise<T> {
+  const response = await fetch(url, {
+    method: "POST",
+    body,
+    credentials: "include",
+  });
+  if (!response.ok) {
+    throw new Error(`Upload Error: ${response.status}`);
+  }
+  return response.json();
+}

package/src/lib/config.ts

@@ -1,4 +1,4 @@
-import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core";
+import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core/client";
 import { blogCollections } from "../../../src/templates/blog";
 import { ecommerceCollections } from "../../../src/templates/ecommerce";
 import { minimalCollections } from "../../../src/templates/minimal";

package/src/lib/dataStore.ts

@@ -1,12 +1,18 @@
-import type { CollectionConfig } from "@kyro-cms/core";
+import type { CollectionConfig } from "@kyro-cms/core/client";
 import { randomUUID } from "crypto";
 import {
   initializeDatabase,
   getDatabaseAdapter,
   isDatabaseInitialized,
 } from "./db";
+import type { Version, VersionDiff, DraftPublishConfig } from "@kyro-cms/core";
+import { VersionManager, createVersionManager } from "@kyro-cms/core";
+import { DataStoreVersionAdapter } from "./db/version-adapter.js";
 
 class DataStoreWrapper {
+  private db: ReturnType<typeof getDatabaseAdapter> | null = null;
+  private versionManager: VersionManager | null = null;
+
   private async getStore() {
     if (!isDatabaseInitialized()) {
       await initializeDatabase();
@@ -14,10 +20,19 @@ class DataStoreWrapper {
     return getDatabaseAdapter();
   }
 
-  private readonly VERSIONS_COLLECTION = "_versions";
+  private async getVersionManager(): Promise<VersionManager> {
+    if (this.versionManager) return this.versionManager;
+    const db = await this.getStore();
+    const adapter = new DataStoreVersionAdapter(db);
+    this.versionManager = createVersionManager(adapter, {
+      versioningEnabled: true,
+      maxVersionsPerDocument: 50,
+    } as DraftPublishConfig);
+    return this.versionManager;
+  }
 
   initialize(collections: Record<string, CollectionConfig>) {
-    initializeDatabase(collections); // Sync wrapper - adapter handles initialization
+    initializeDatabase(collections);
   }
 
   private async getTimestamp(): Promise<string> {
@@ -49,13 +64,13 @@ class DataStoreWrapper {
   async create<T = any>(slug: string, data: Partial<T>): Promise<T> {
     const store = await this.getStore();
     const now = await this.getTimestamp();
-    const id = data?.id || this.generateId();
+    const id = (data as any)?.id || this.generateId();
     const newDoc = {
       ...data,
       id,
       createdAt: now,
       updatedAt: now,
-    };
+    } as T;
     return store.create(slug, newDoc);
   }
 
@@ -63,6 +78,10 @@ class DataStoreWrapper {
     slug: string,
     id: string,
     data: Partial<T>,
+    options?: {
+      versionStatus?: "draft" | "published";
+      changeDescription?: string;
+    },
   ): Promise<T | null> {
     const store = await this.getStore();
     const existing = await store.findById(slug, id);
@@ -77,48 +96,86 @@ class DataStoreWrapper {
     };
 
     // Save version history before updating
-    await this.createVersion(slug, id, existing);
+    const versionStatus = options?.versionStatus || "draft";
+    const changeDescription = options?.changeDescription;
+
+    await this.createVersion(slug, id, existing, {
+      status: versionStatus,
+      changeDescription,
+    });
 
     return store.update(slug, id, updated);
   }
 
   async findVersions(parentCollection: string, parentId: string) {
-    const store = await this.getStore();
-    // We use find with a limit and custom filtering logic if supported, 
-    // but for now we'll fetch and filter in memory if the adapter is basic
-    const result = await store.find(this.VERSIONS_COLLECTION, { limit: 100 });
-    return result.docs
-      .filter((v: any) => v.parentCollection === parentCollection && v.parentId === parentId)
-      .sort((a: any, b: any) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-  }
-
-  async createVersion(parentCollection: string, parentId: string, data: any) {
-    const store = await this.getStore();
-    const now = await this.getTimestamp();
-    const versionDoc = {
-      id: this.generateId(),
-      parentId,
+    const vm = await this.getVersionManager();
+    const versions = await vm.getVersionHistory(
       parentCollection,
-      data,
-      createdAt: now,
-      version: Date.now() // Simple version numbering
-    };
+      parentId,
+      100,
+    );
+    return (versions as Version[])
+      .map((v) => ({
+        id: v.id,
+        version: v.version,
+        createdAt: v.createdAt,
+        status: v.status,
+        createdBy: v.createdBy,
+        data: v.data,
+        changeDescription: v.changeDescription,
+      }))
+      .sort((a, b) => b.version - a.version);
+  }
+
+  async createVersion(
+    parentCollection: string,
+    parentId: string,
+    data: any,
+    options?: {
+      status?: string;
+      createdBy?: string;
+      changeDescription?: string;
+    },
+  ) {
+    const vm = await this.getVersionManager();
     try {
-      return await store.create(this.VERSIONS_COLLECTION, versionDoc);
+      return await vm.createVersion({
+        collection: parentCollection,
+        documentId: parentId,
+        data,
+        status: (options?.status || "draft") as "draft" | "published",
+        createdBy: options?.createdBy || "system",
+        changeDescription: options?.changeDescription,
+      });
     } catch (e) {
       console.error("Failed to create version snapshot:", e);
       return null;
     }
   }
 
-  async restoreVersion(parentCollection: string, parentId: string, versionId: string) {
+  async restoreVersion(
+    parentCollection: string,
+    parentId: string,
+    versionId: string,
+  ) {
+    const vm = await this.getVersionManager();
     const store = await this.getStore();
-    const version = await store.findById(this.VERSIONS_COLLECTION, versionId);
+    const version = await store.findById("_versions", versionId);
     if (!version || version.parentId !== parentId) return null;
 
     return this.update(parentCollection, parentId, version.data);
   }
 
+  async compareVersions(
+    collection: string,
+    documentId: string,
+    versionA: string | number,
+    versionB: string | number,
+  ): Promise<VersionDiff[]> {
+    const vm = await this.getVersionManager();
+    return vm.compareTwoVersions(collection, documentId, versionA, versionB);
+  }
+
   async delete(slug: string, id: string): Promise<boolean> {
     const store = await this.getStore();
     return store.delete(slug, id);
@@ -129,8 +186,8 @@ class DataStoreWrapper {
     filter: Record<string, any>,
   ): Promise<any | null> {
     const store = await this.getStore();
-    const results = await store.find(slug, { limit: 1, where: filter });
-    return results.length > 0 ? results[0] : null;
+    const results = await store.find(slug, { limit: 1 });
+    return results.docs.length > 0 ? results.docs[0] : null;
   }
 
   async findGlobal<T = any>(slug: string): Promise<T> {

package/src/lib/date-utils.ts

@@ -0,0 +1,69 @@
+export type DateStyle = "full" | "date" | "time" | "short";
+
+export function formatDate(
+  date: string | Date | null | undefined,
+  style: DateStyle = "date",
+): string {
+  if (!date) return "—";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "—";
+
+  switch (style) {
+    case "full":
+      return d.toLocaleString("en-US", {
+        dateStyle: "medium",
+        timeStyle: "short",
+      });
+    case "time":
+      return d.toLocaleTimeString("en-US", {
+        hour: "numeric",
+        minute: "2-digit",
+      });
+    case "short":
+      return d.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+      });
+    case "date":
+    default:
+      return d.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
+  }
+}
+
+export function formatRelativeTime(
+  date: string | Date | null | undefined,
+): string {
+  if (!date) return "—";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "—";
+
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+
+  if (diffSec < 60) return "Just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHour < 24) return `${diffHour}h ago`;
+  if (diffDay < 7) return `${diffDay}d ago`;
+  return formatDate(d, "date");
+}
+
+export function getTimestamp(): string {
+  return `?t=${Date.now()}`;
+}
+
+export function generateId(length: number = 16): string {
+  const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += chars[Math.floor(Math.random() * chars.length)];
+  }
+  return result;
+}