@aphexcms/cms-core 0.1.1 → 0.1.3

package/src/components/admin/DocumentTypesList.svelte

@@ -1,97 +0,0 @@
-<script lang="ts">
-	import { Badge } from '@aphexcms/ui/shadcn/badge';
-	import {
-		SidebarGroup,
-		SidebarGroupLabel,
-		SidebarGroupContent,
-		SidebarMenu,
-		SidebarMenuItem,
-		SidebarMenuButton
-	} from '@aphexcms/ui/shadcn/sidebar';
-	import { page } from '$app/state';
-
-	interface DocumentType {
-		name: string;
-		title: string;
-		description?: string;
-		documentCount?: number;
-	}
-
-	interface Props {
-		documentTypes: DocumentType[];
-		objectTypes: DocumentType[];
-	}
-
-	let { documentTypes, objectTypes }: Props = $props();
-
-	const currentPath = $derived(page.url.pathname);
-</script>
-
-<!-- Document Types Section -->
-{#if documentTypes.length > 0}
-	<SidebarGroup class="max-w-[350px]">
-		<SidebarGroupLabel class="flex items-center justify-between">
-			<span class="flex items-center gap-2">
-				<span>📄</span>
-				Content
-			</span>
-			<Badge variant="secondary" class="text-xs">{documentTypes.length}</Badge>
-		</SidebarGroupLabel>
-
-		<SidebarGroupContent>
-			<SidebarMenu>
-				{#each documentTypes as docType, index (index)}
-					<SidebarMenuItem>
-						<SidebarMenuButton
-							onclick={goto(`/admin/documents/${docType.name}`)}
-							isActive={currentPath.includes(`/documents/${docType.name}`)}
-							class="group"
-						>
-							<div class="flex min-w-0 flex-1 items-center gap-2">
-								<div
-									class="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-blue-100 dark:bg-blue-900/20"
-								>
-									<span class="text-xs text-blue-600 dark:text-blue-400">📄</span>
-								</div>
-								<div class="min-w-0 flex-1">
-									<div class="truncate text-sm font-medium">{docType.title}</div>
-									{#if docType.description}
-										<div class="text-muted-foreground truncate text-xs">{docType.description}</div>
-									{/if}
-								</div>
-							</div>
-						</SidebarMenuButton>
-					</SidebarMenuItem>
-				{/each}
-			</SidebarMenu>
-		</SidebarGroupContent>
-	</SidebarGroup>
-{/if}
-
-<!-- Object Types Section -->
-{#if objectTypes.length > 0}
-	<SidebarGroup>
-		<SidebarGroupLabel class="flex items-center justify-between">
-			<span class="flex items-center gap-2">
-				<span>🧩</span>
-				Object Types
-			</span>
-			<Badge variant="secondary" class="text-xs">{objectTypes.length}</Badge>
-		</SidebarGroupLabel>
-	</SidebarGroup>
-{/if}
-
-<!-- Empty state -->
-{#if documentTypes.length === 0 && objectTypes.length === 0}
-	<SidebarGroup>
-		<SidebarGroupContent>
-			<div class="text-muted-foreground space-y-2 py-6 text-center">
-				<div class="text-2xl">📄</div>
-				<div>
-					<p class="text-sm">No content types found</p>
-					<p class="text-xs">Define schemas in schemaTypes/</p>
-				</div>
-			</div>
-		</SidebarGroupContent>
-	</SidebarGroup>
-{/if}

package/src/components/admin/ObjectModal.svelte

@@ -1,135 +0,0 @@
-<script lang="ts">
-	import { Button } from '@aphexcms/ui/shadcn/button';
-	import * as Card from '@aphexcms/ui/shadcn/card';
-	import type { SchemaType } from 'src/types/schemas.js';
-	import SchemaField from './SchemaField.svelte';
-
-	interface Props {
-		open: boolean;
-		schema: SchemaType;
-		value: Record<string, any>;
-		onClose: () => void;
-		onSave: (value: Record<string, any>) => void;
-		onUpdate?: (value: Record<string, any>) => void; // For real-time updates
-		onOpenReference?: (documentId: string, documentType: string) => void;
-		readonly?: boolean;
-	}
-
-	// TODO: add onUpdate to auto save
-	let {
-		open,
-		schema,
-		value,
-		onClose,
-		onSave,
-		onUpdate,
-		onOpenReference,
-		readonly = false
-	}: Props = $props();
-
-	// Initialize editing data with defaults and existing values
-	function initializeData() {
-		const initialData: Record<string, any> = {};
-
-		if (schema?.fields) {
-			schema.fields.forEach((field) => {
-				if (field.type === 'boolean' && 'initialValue' in field) {
-					initialData[field.name] = field.initialValue;
-				} else {
-					initialData[field.name] = '';
-				}
-			});
-		}
-
-		return { ...initialData, ...value };
-	}
-
-	// Local state for editing
-	let editingData = $state<Record<string, any>>(initializeData());
-
-	function handleSave() {
-		onSave(editingData);
-		onClose();
-	}
-
-	function handleCancel() {
-		onClose();
-	}
-
-	// Handle backdrop click
-	function handleBackdropClick(e: MouseEvent) {
-		if (e.target === e.currentTarget) {
-			onClose();
-		}
-	}
-
-	// Handle escape key
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			onClose();
-		}
-	}
-</script>
-
-{#if open}
-	<!-- Backdrop - fixed to viewport on mobile (below navbar), relative to parent on desktop -->
-	<div
-		class="bg-background/80 fixed bottom-0 left-0 right-0 top-12 z-[100] flex items-center justify-center p-6 backdrop-blur-sm sm:absolute sm:top-0 sm:p-4"
-		onclick={handleBackdropClick}
-		onkeydown={handleKeydown}
-		role="button"
-		tabindex="-1"
-	>
-		<!-- Modal Content -->
-		<Card.Root class="flex max-h-[85vh] w-full max-w-2xl flex-col overflow-hidden shadow-lg">
-			<Card.Header class="border-b">
-				<div class="flex items-center justify-between">
-					<div>
-						<Card.Title>{schema.title}</Card.Title>
-						{#if schema.description}
-							<Card.Description>{schema.description}</Card.Description>
-						{/if}
-					</div>
-					<Button variant="ghost" size="icon" onclick={onClose}>
-						<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M6 18L18 6M6 6l12 12"
-							/>
-						</svg>
-					</Button>
-				</div>
-			</Card.Header>
-
-			<Card.Content class="flex-1 overflow-auto p-6">
-				<div class="space-y-4">
-					{#if schema.fields}
-						{#each schema.fields as field, index (index)}
-							<SchemaField
-								{field}
-								value={editingData[field.name]}
-								documentData={editingData}
-								onUpdate={(newValue) => {
-									editingData = { ...editingData, [field.name]: newValue };
-								}}
-								{onOpenReference}
-								{readonly}
-							/>
-						{/each}
-					{/if}
-				</div>
-			</Card.Content>
-
-			<Card.Footer class="flex justify-end gap-2 border-t">
-				{#if readonly}
-					<Button onclick={onClose}>Close</Button>
-				{:else}
-					<Button variant="outline" onclick={handleCancel}>Cancel</Button>
-					<Button onclick={handleSave}>Save Changes</Button>
-				{/if}
-			</Card.Footer>
-		</Card.Root>
-	</div>
-{/if}

package/src/components/admin/SchemaField.svelte

@@ -1,171 +0,0 @@
-<script lang="ts">
-	import { Label } from '@aphexcms/ui/shadcn/label';
-	import { Badge } from '@aphexcms/ui/shadcn/badge';
-	import * as Alert from '@aphexcms/ui/shadcn/alert';
-	import type { Field } from 'src/types/schemas.js';
-	import {
-		isFieldRequired,
-		validateField,
-		getValidationClasses,
-		type ValidationError
-	} from '../../field-validation/utils.js';
-
-	// Import individual field components
-	import StringField from './fields/StringField.svelte';
-	import SlugField from './fields/SlugField.svelte';
-	import TextareaField from './fields/TextareaField.svelte';
-	import NumberField from './fields/NumberField.svelte';
-	import BooleanField from './fields/BooleanField.svelte';
-	import ImageField from './fields/ImageField.svelte';
-	import ArrayField from './fields/ArrayField.svelte';
-	import ReferenceField from './fields/ReferenceField.svelte';
-	import SchemaField from './SchemaField.svelte';
-
-	interface Props {
-		field: Field;
-		value: any;
-		documentData?: Record<string, any>;
-		onUpdate: (value: any) => void;
-		onOpenReference?: (documentId: string, documentType: string) => void;
-		doValidation?: () => void;
-		schemaType?: string; // Document type
-		parentPath?: string; // Parent field path for nested fields
-		readonly?: boolean; // Read-only mode for viewers
-	}
-
-	let {
-		field,
-		value,
-		documentData,
-		onUpdate,
-		onOpenReference,
-		doValidation,
-		schemaType,
-		parentPath,
-		readonly = false
-	}: Props = $props();
-
-	// Build full field path
-	const fieldPath = parentPath ? `${parentPath}.${field.name}` : field.name;
-
-	// Validation state for the wrapper (displays errors and status)
-	let validationErrors = $state<ValidationError[]>([]);
-
-	// Real-time validation for wrapper display
-	export async function performValidation(currentValue: any, context: any = {}) {
-		validationErrors = []; // Clear previous errors
-		const result = await validateField(field, currentValue, context);
-		validationErrors = result.errors;
-	}
-	// Computed values
-	const hasErrors = $derived(validationErrors.filter((e) => e.level === 'error').length > 0);
-	const validationClasses = $derived(getValidationClasses(hasErrors));
-</script>
-
-<div class="space-y-2">
-	<div class="flex items-center justify-between">
-		<Label for={field.name}>
-			{field.title}
-			{#if isFieldRequired(field)}
-				<span class="text-destructive">*</span>
-			{/if}
-		</Label>
-
-		<div class="flex items-center gap-2">
-			{#if hasErrors}
-				<span class="text-destructive text-sm">🚨</span>
-			{/if}
-
-			{#if field.type}
-				<Badge variant="outline" class="text-xs">
-					{field.type}
-				</Badge>
-			{/if}
-		</div>
-	</div>
-
-	{#if field.description}
-		<p class="text-muted-foreground text-sm">{field.description}</p>
-	{/if}
-
-	<!-- Validation errors display -->
-	{#if validationErrors.length > 0}
-		<div class="space-y-2">
-			{#each validationErrors as error, index (index)}
-				<Alert.Root
-					variant={error.level === 'error'
-						? 'destructive'
-						: error.level === 'warning'
-							? 'default'
-							: 'default'}
-				>
-					<Alert.Description class="text-xs">
-						{error.message}
-					</Alert.Description>
-				</Alert.Root>
-			{/each}
-		</div>
-	{/if}
-
-	<!-- Field type routing to individual components -->
-	{#if field.type === 'string'}
-		<StringField {field} {value} {onUpdate} {validationClasses} {readonly} />
-	{:else if field.type === 'text'}
-		<TextareaField {field} {value} {onUpdate} {validationClasses} {readonly} />
-	{:else if field.type === 'slug'}
-		<SlugField {field} {value} {documentData} {onUpdate} {validationClasses} {readonly} />
-	{:else if field.type === 'number'}
-		<NumberField {field} {value} {onUpdate} {validationClasses} {readonly} />
-	{:else if field.type === 'boolean'}
-		<BooleanField {field} {value} {onUpdate} {validationClasses} {readonly} />
-
-		<!-- Image Field -->
-	{:else if field.type === 'image'}
-		<ImageField
-			{field}
-			{value}
-			{onUpdate}
-			{validationClasses}
-			{schemaType}
-			{fieldPath}
-			{readonly}
-		/>
-
-		<!-- Object Field -->
-	{:else if field.type === 'object' && field.fields}
-		<div class="border-border space-y-4 rounded-md border p-4">
-			<h4 class="text-sm font-medium">{field.title}</h4>
-			{#each field.fields as subField, index (index)}
-				<SchemaField
-					field={subField}
-					value={value?.[subField.name]}
-					{documentData}
-					onUpdate={(subValue) => onUpdate({ ...value, [subField.name]: subValue })}
-					{doValidation}
-					{schemaType}
-					parentPath={fieldPath}
-					{readonly}
-				/>
-			{/each}
-		</div>
-
-		<!-- Array Field -->
-	{:else if field.type === 'array' && field.of}
-		<ArrayField {field} {value} {onUpdate} {onOpenReference} {readonly} />
-
-		<!-- Reference Field -->
-	{:else if field.type === 'reference' && field.to}
-		<ReferenceField {field} {value} {onUpdate} {onOpenReference} {readonly} />
-
-		<!-- Unknown field type -->
-	{:else}
-		<div class="border-muted-foreground/30 rounded-md border border-dashed p-4 text-center">
-			<p class="text-muted-foreground text-sm">
-				Field type "{field.type}" not yet supported
-			</p>
-			<p class="text-muted-foreground mt-1 text-xs">
-				Raw value: {JSON.stringify(value)}
-			</p>
-		</div>
-	{/if}
-</div>

package/src/components/admin/fields/ArrayField.svelte

@@ -1,266 +0,0 @@
-<script lang="ts">
-	import { Button } from '@aphexcms/ui/shadcn/button';
-	import * as DropdownMenu from '@aphexcms/ui/shadcn/dropdown-menu';
-	import type { ArrayField as ArrayFieldType, SchemaType } from '../../../types/schemas.js';
-	import { getArrayTypes, getSchemaByName } from '../../../schema-utils/utils.js';
-	import { getSchemaContext } from '../../../schema-context.svelte.js';
-	import ObjectModal from '../ObjectModal.svelte';
-
-	interface Props {
-		field: ArrayFieldType;
-		value: any;
-		onUpdate: (value: any) => void;
-		onOpenReference?: (documentId: string, documentType: string) => void;
-		readonly?: boolean;
-	}
-
-	let { field, value, onUpdate, onOpenReference, readonly = false }: Props = $props();
-
-	// Get schemas from context
-	const schemas = getSchemaContext();
-
-	// Get available types for this array field
-	const availableTypes = $derived(getArrayTypes(schemas, field));
-
-	// Modal state
-	let modalOpen = $state(false);
-	let editingIndex = $state<number | null>(null);
-	let editingType = $state<string | null>(null);
-	let editingSchema = $state<SchemaType | null>(null);
-	let editingValue = $state<Record<string, any>>({});
-
-	// Ensure value is always an array
-	const arrayValue = $derived(Array.isArray(value) ? value : []);
-
-	function handleTypeSelected(selectedType: string) {
-		if (readonly || !selectedType) return;
-
-		// Get the schema for the selected type
-		const schema = getSchemaByName(schemas, selectedType);
-		if (!schema) return;
-
-		// Initialize empty object with default values
-		const newItem: Record<string, any> = { _type: selectedType };
-
-		if (schema.fields) {
-			schema.fields.forEach((field) => {
-				if (field.type === 'boolean' && 'initialValue' in field) {
-					newItem[field.name] = field.initialValue;
-				} else {
-					newItem[field.name] = '';
-				}
-			});
-		}
-
-		// Set modal state directly
-		editingIndex = arrayValue.length; // New item index
-		editingType = selectedType;
-		editingSchema = schema;
-		editingValue = newItem;
-		modalOpen = true;
-	}
-
-	function handleEditItem(index: number) {
-		const item = arrayValue[index];
-		if (!item._type) return;
-
-		const schema = getSchemaByName(schemas, item._type);
-		if (!schema) return;
-
-		editingIndex = index;
-		editingType = item._type;
-		editingSchema = schema;
-		editingValue = item;
-		modalOpen = true;
-		console.log('MODAL IS OPEN: ', modalOpen);
-	}
-
-	function handleRemoveItem(index: number) {
-		if (readonly) return;
-		const newArray = arrayValue.filter((_, i) => i !== index);
-		onUpdate(newArray);
-	}
-
-	function handleModalSave(editedData: Record<string, any>) {
-		if (editingIndex === null || !editingType) return;
-
-		// Add the type information to the data
-		const itemData = { ...editedData, _type: editingType };
-
-		const newArray = [...arrayValue];
-
-		if (editingIndex >= newArray.length) {
-			// Adding new item
-			newArray.push(itemData);
-		} else {
-			// Editing existing item
-			newArray[editingIndex] = itemData;
-		}
-
-		onUpdate(newArray);
-
-		// Reset modal state
-		modalOpen = false;
-		editingIndex = null;
-		editingType = null;
-		editingSchema = null;
-		editingValue = {};
-	}
-
-	function handleModalClose() {
-		modalOpen = false;
-		editingIndex = null;
-		editingType = null;
-		editingSchema = null;
-		editingValue = {};
-	}
-
-	// Get the title to display for an item
-	function getItemTitle(item: any): string {
-		if (!item._type) return 'Unknown Item';
-
-		const schema = getSchemaByName(schemas, item._type);
-		if (!schema) return item._type;
-
-		// Try to find a meaningful field to use as title
-		const titleField = item.title || item.heading || item.name || item.label;
-		if (titleField && typeof titleField === 'string' && titleField.trim()) {
-			return titleField;
-		}
-
-		return schema.title || item._type;
-	}
-</script>
-
-<div class="border-border space-y-4 rounded-md border p-4">
-	<h4 class="text-sm font-medium">{field.title}</h4>
-
-	<!-- Array items -->
-	{#if arrayValue.length > 0}
-		<div class="space-y-2">
-			{#each arrayValue as item, index (index)}
-				<div class="border-border/50 space-y-2 rounded border p-3">
-					<div class="flex items-center justify-between">
-						<div class="flex items-center gap-2">
-							<span class="text-muted-foreground text-xs">#{index + 1}</span>
-							<h5 class="text-sm font-medium">{getItemTitle(item)}</h5>
-							{#if item._type}
-								<span class="bg-muted rounded px-2 py-1 text-xs">{item._type}</span>
-							{/if}
-						</div>
-						<div class="flex items-center gap-2">
-							<Button
-								variant="ghost"
-								size="sm"
-								onclick={() => {
-									handleEditItem(index);
-								}}
-								class="h-8 w-8 p-0"
-								title={readonly ? 'View item' : 'Edit item'}
-							>
-								{#if readonly}
-									<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-										/>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-										/>
-									</svg>
-								{:else}
-									<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-										/>
-									</svg>
-								{/if}
-							</Button>
-
-							{#if !readonly}
-								<Button
-									variant="ghost"
-									size="sm"
-									onclick={() => handleRemoveItem(index)}
-									class="text-destructive hover:text-destructive h-8 w-8 p-0"
-									title="Remove item"
-								>
-									<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-										/>
-									</svg>
-								</Button>
-							{/if}
-						</div>
-					</div>
-
-					<!-- Show a preview of the item content -->
-					<div class="text-muted-foreground pl-6 text-xs">
-						{#if item.title || item.heading}
-							{item.title || item.heading}
-						{:else if item.description}
-							{item.description.substring(0, 100)}{item.description.length > 100 ? '...' : ''}
-						{:else}
-							{readonly ? 'Click view to see details' : 'Click edit to configure this item'}
-						{/if}
-					</div>
-				</div>
-			{/each}
-		</div>
-	{/if}
-
-	<!-- Add Item section (hidden for read-only) -->
-	{#if !readonly}
-		<div class="border-border border-t pt-2">
-			<DropdownMenu.Root>
-				<DropdownMenu.Trigger>
-					{#snippet child({ props })}
-						<Button {...props} variant="outline" class="w-full cursor-pointer">
-							<svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M12 4v16m8-8H4"
-								/>
-							</svg>
-							Add Item
-						</Button>
-					{/snippet}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content class="w-56">
-					{#each availableTypes as type, index (index)}
-						<DropdownMenu.Item onclick={() => handleTypeSelected(type.name)}>
-							{type.title}
-						</DropdownMenu.Item>
-					{/each}
-				</DropdownMenu.Content>
-			</DropdownMenu.Root>
-		</div>
-	{/if}
-</div>
-
-<!-- Object editing modal -->
-{#if editingSchema}
-	<ObjectModal
-		open={modalOpen}
-		schema={editingSchema}
-		value={editingValue}
-		onClose={handleModalClose}
-		onSave={handleModalSave}
-		{onOpenReference}
-		{readonly}
-	/>
-{/if}

package/src/components/admin/fields/BooleanField.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { Label } from '@aphexcms/ui/shadcn/label';
-	import type { Field } from '../../../types/schemas.js';
-
-	interface Props {
-		field: Field;
-		value: any;
-		onUpdate: (value: any) => void;
-		validationClasses?: string;
-		onBlur?: (event: any) => void;
-		readonly?: boolean;
-	}
-
-	let { field, value, onUpdate, validationClasses, onBlur, readonly = false }: Props = $props();
-
-	function handleBooleanChange(event: Event) {
-		const target = event.target as HTMLInputElement;
-		onUpdate(target.checked);
-	}
-</script>
-
-<div class="flex items-center space-x-2">
-	<input
-		id={field.name}
-		type="checkbox"
-		checked={value || false}
-		onchange={handleBooleanChange}
-		onblur={onBlur}
-		class="border-input h-4 w-4 rounded border {validationClasses}"
-		disabled={readonly}
-	/>
-	<Label for={field.name} class="text-sm font-normal">
-		{field.title}
-	</Label>
-</div>