@magnet-cms/plugin-playground 2.0.0

package/src/frontend/pages/Playground/Editor/RelationConfigModal.tsx

@@ -0,0 +1,292 @@
+import { useAdmin } from '@magnet-cms/admin'
+import {
+	Button,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	Input,
+	Label,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@magnet-cms/ui/components'
+import { cn } from '@magnet-cms/ui/lib'
+import { useState } from 'react'
+import type { RelationConfig } from '../types/builder.types'
+
+interface RelationConfigModalProps {
+	open: boolean
+	onOpenChange: (open: boolean) => void
+	currentSchema: string
+	relationConfig: RelationConfig | undefined
+	onSave: (config: RelationConfig) => void
+}
+
+type RelationType = 'oneToOne' | 'oneToMany' | 'manyToOne' | 'manyToMany'
+
+interface RelationTypeOption {
+	value: RelationType
+	label: string
+	description: string
+	diagram: {
+		leftMultiple: boolean
+		rightMultiple: boolean
+	}
+}
+
+const RELATION_TYPE_OPTIONS: RelationTypeOption[] = [
+	{
+		value: 'oneToOne',
+		label: 'One to One',
+		description: 'Each record relates to exactly one other record',
+		diagram: { leftMultiple: false, rightMultiple: false },
+	},
+	{
+		value: 'oneToMany',
+		label: 'One to Many',
+		description: 'One record can relate to many other records',
+		diagram: { leftMultiple: false, rightMultiple: true },
+	},
+	{
+		value: 'manyToOne',
+		label: 'Many to One',
+		description: 'Many records can relate to one other record',
+		diagram: { leftMultiple: true, rightMultiple: false },
+	},
+	{
+		value: 'manyToMany',
+		label: 'Many to Many',
+		description: 'Many records can relate to many other records',
+		diagram: { leftMultiple: true, rightMultiple: true },
+	},
+]
+
+function RelationDiagram({
+	leftLabel,
+	rightLabel,
+	leftMultiple,
+	rightMultiple,
+	small = false,
+}: {
+	leftLabel: string
+	rightLabel: string
+	leftMultiple: boolean
+	rightMultiple: boolean
+	small?: boolean
+}) {
+	return (
+		<div className="flex items-center justify-center gap-2">
+			{/* Left side */}
+			<div className="flex items-center gap-1">
+				{leftMultiple && (
+					<div
+						className={cn(
+							'bg-background border rounded font-medium shadow-sm opacity-50 -mr-1',
+							small ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-1 text-xs',
+						)}
+					>
+						{leftLabel}
+					</div>
+				)}
+				<div
+					className={cn(
+						'bg-background border rounded font-medium shadow-sm relative z-10',
+						small ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-1 text-xs',
+					)}
+				>
+					{leftLabel}
+				</div>
+			</div>
+
+			{/* Connection line */}
+			<div className="flex items-center">
+				<div
+					className={cn(
+						'bg-muted-foreground/60 rounded-full',
+						small ? 'w-1.5 h-1.5' : 'w-2 h-2',
+					)}
+				/>
+				<div
+					className={cn('h-px bg-muted-foreground/60', small ? 'w-6' : 'w-10')}
+				/>
+				<div
+					className={cn(
+						'border-r-2 border-t-2 border-b-2 border-muted-foreground/60 rotate-45',
+						small ? 'w-1.5 h-1.5 -ml-1' : 'w-2 h-2 -ml-1.5',
+					)}
+				/>
+			</div>
+
+			{/* Right side */}
+			<div className="flex items-center gap-1">
+				<div
+					className={cn(
+						'bg-background border rounded font-medium shadow-sm relative z-10',
+						small ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-1 text-xs',
+					)}
+				>
+					{rightLabel}
+				</div>
+				{rightMultiple && (
+					<div
+						className={cn(
+							'bg-background border rounded font-medium shadow-sm opacity-50 -ml-1',
+							small ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-1 text-xs',
+						)}
+					>
+						{rightLabel}
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export function RelationConfigModal({
+	open,
+	onOpenChange,
+	currentSchema,
+	relationConfig,
+	onSave,
+}: RelationConfigModalProps) {
+	const { schemas } = useAdmin()
+	const [config, setConfig] = useState<RelationConfig>({
+		targetSchema: relationConfig?.targetSchema || '',
+		relationType: relationConfig?.relationType || 'manyToOne',
+		inverseSide: relationConfig?.inverseSide,
+	})
+
+	const handleSave = () => {
+		onSave(config)
+		onOpenChange(false)
+	}
+
+	const selectedTypeOption = RELATION_TYPE_OPTIONS.find(
+		(t) => t.value === config.relationType,
+	)
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Configure Relation</DialogTitle>
+					<DialogDescription>
+						Define how this field relates to another schema
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="space-y-6 py-4">
+					{/* Relation Type Picker */}
+					<div className="space-y-3">
+						<Label className="text-sm font-medium">Relation Type</Label>
+						<div className="grid grid-cols-2 gap-3">
+							{RELATION_TYPE_OPTIONS.map((option) => (
+								<button
+									key={option.value}
+									type="button"
+									onClick={() =>
+										setConfig((c) => ({ ...c, relationType: option.value }))
+									}
+									className={cn(
+										'p-3 rounded-lg border text-left transition-all',
+										config.relationType === option.value
+											? 'border-primary bg-primary/5 ring-1 ring-primary'
+											: 'border-border hover:border-muted-foreground/50 hover:bg-muted/50',
+									)}
+								>
+									<div className="mb-2">
+										<RelationDiagram
+											leftLabel={currentSchema || 'A'}
+											rightLabel={config.targetSchema || 'B'}
+											leftMultiple={option.diagram.leftMultiple}
+											rightMultiple={option.diagram.rightMultiple}
+											small
+										/>
+									</div>
+									<p className="text-sm font-medium">{option.label}</p>
+									<p className="text-xs text-muted-foreground mt-0.5">
+										{option.description}
+									</p>
+								</button>
+							))}
+						</div>
+					</div>
+
+					{/* Preview */}
+					{selectedTypeOption && (
+						<div className="p-4 bg-muted/30 rounded-lg border">
+							<p className="text-xs text-muted-foreground mb-3 text-center">
+								Preview
+							</p>
+							<RelationDiagram
+								leftLabel={currentSchema || 'Current'}
+								rightLabel={config.targetSchema || 'Target'}
+								leftMultiple={selectedTypeOption.diagram.leftMultiple}
+								rightMultiple={selectedTypeOption.diagram.rightMultiple}
+							/>
+						</div>
+					)}
+
+					{/* Target Schema */}
+					<div className="space-y-2">
+						<Label className="text-sm font-medium">Related Collection</Label>
+						<Select
+							value={config.targetSchema}
+							onValueChange={(value) =>
+								setConfig((c) => ({ ...c, targetSchema: value }))
+							}
+						>
+							<SelectTrigger>
+								<SelectValue placeholder="Select a schema..." />
+							</SelectTrigger>
+							<SelectContent>
+								{schemas?.map((schema) => (
+									<SelectItem key={schema} value={schema}>
+										{schema}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+						<p className="text-xs text-muted-foreground">
+							The schema this field will reference
+						</p>
+					</div>
+
+					{/* Inverse Field Name */}
+					<div className="space-y-2">
+						<Label className="text-sm font-medium">
+							Inverse Field Name{' '}
+							<span className="text-muted-foreground font-normal">
+								(optional)
+							</span>
+						</Label>
+						<Input
+							value={config.inverseSide || ''}
+							onChange={(e) =>
+								setConfig((c) => ({ ...c, inverseSide: e.target.value }))
+							}
+							placeholder={`e.g., ${currentSchema?.toLowerCase() || 'items'}`}
+						/>
+						<p className="text-xs text-muted-foreground">
+							Field name on the related schema for bidirectional access
+						</p>
+					</div>
+				</div>
+
+				<DialogFooter>
+					<Button variant="outline" onClick={() => onOpenChange(false)}>
+						Cancel
+					</Button>
+					<Button onClick={handleSave} disabled={!config.targetSchema}>
+						Save Configuration
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	)
+}

package/src/frontend/pages/Playground/Editor/SchemaList.tsx

@@ -0,0 +1,76 @@
+import { useAdmin } from '@magnet-cms/admin'
+import { Button, Spinner } from '@magnet-cms/ui/components'
+import { names } from '@magnet-cms/utils'
+import { Database, Plus } from 'lucide-react'
+import { useNavigate, useParams } from 'react-router-dom'
+
+export function SchemaList() {
+	const navigate = useNavigate()
+	const { schemaName } = useParams<{ schemaName: string }>()
+	const { schemas, isLoading, error } = useAdmin()
+
+	if (isLoading) {
+		return (
+			<div className="flex justify-center items-center h-32">
+				<Spinner className="h-5 w-5" />
+			</div>
+		)
+	}
+
+	if (error) {
+		return <div className="p-3 text-xs text-red-600">Error loading schemas</div>
+	}
+
+	const isNewSchema = schemaName === 'new'
+
+	return (
+		<div className="flex flex-col h-full">
+			{/* Header */}
+			<div className="p-3 border-b">
+				<Button
+					size="sm"
+					className="w-full"
+					variant={isNewSchema ? 'default' : 'outline'}
+					onClick={() => navigate('/playground/new')}
+				>
+					<Plus className="h-3.5 w-3.5 mr-1.5" />
+					New Schema
+				</Button>
+			</div>
+
+			{/* Schema List */}
+			<div className="flex-1 overflow-y-auto">
+				{!schemas || schemas.length === 0 ? (
+					<div className="p-4 text-center text-muted-foreground">
+						<Database className="mx-auto h-8 w-8 mb-2 opacity-50" />
+						<p className="text-xs">No schemas yet</p>
+					</div>
+				) : (
+					<div className="py-1">
+						{schemas.map((schema) => {
+							const name = names(schema)
+							const isSelected = schemaName === name.key
+							return (
+								<button
+									key={schema}
+									type="button"
+									onClick={() => navigate(`/playground/${name.key}`)}
+									className={`w-full text-left px-3 py-2 text-sm transition-colors ${
+										isSelected
+											? 'bg-accent text-accent-foreground'
+											: 'hover:bg-muted/50 text-muted-foreground hover:text-foreground'
+									}`}
+								>
+									<div className="font-medium truncate">{name.title}</div>
+									<div className="text-xs opacity-70 font-mono truncate">
+										{name.key}
+									</div>
+								</button>
+							)
+						})}
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}

package/src/frontend/pages/Playground/Editor/SchemaOptionsDialog.tsx

@@ -0,0 +1,109 @@
+import { useDialog } from '@magnet-cms/admin'
+import { Button, Switch } from '@magnet-cms/ui/components'
+import { useEffect } from 'react'
+import { useSchemaBuilder } from '../hooks/useSchemaBuilder'
+
+/**
+ * Schema Options Content - rendered inside the dialog
+ */
+function SchemaOptionsContent({ onClose }: { onClose: () => void }) {
+	const { state, updateSchema } = useSchemaBuilder()
+
+	return (
+		<div className="space-y-4">
+			<div className="flex items-center justify-between">
+				<div className="space-y-0.5">
+					<label
+						htmlFor="versioning"
+						className="text-sm font-medium cursor-pointer"
+					>
+						Enable Versioning
+					</label>
+					<p className="text-xs text-muted-foreground">
+						Track content changes with version history
+					</p>
+				</div>
+				<Switch
+					id="versioning"
+					checked={state.schema.versioning}
+					onCheckedChange={(checked) => updateSchema({ versioning: checked })}
+				/>
+			</div>
+
+			<div className="flex items-center justify-between">
+				<div className="space-y-0.5">
+					<label htmlFor="i18n" className="text-sm font-medium cursor-pointer">
+						Enable i18n
+					</label>
+					<p className="text-xs text-muted-foreground">
+						Support multiple languages for content
+					</p>
+				</div>
+				<Switch
+					id="i18n"
+					checked={state.schema.i18n}
+					onCheckedChange={(checked) => updateSchema({ i18n: checked })}
+				/>
+			</div>
+
+			<div className="flex justify-end pt-2">
+				<Button variant="outline" onClick={onClose}>
+					Close
+				</Button>
+			</div>
+		</div>
+	)
+}
+
+/**
+ * Hook to show schema options dialog
+ */
+export function useSchemaOptionsDialog() {
+	const { showDialog, closeDialog } = useDialog()
+
+	return {
+		open: () => {
+			showDialog({
+				title: 'Schema Options',
+				description:
+					'Configure schema-level settings for versioning and internationalization.',
+				size: 'md',
+				content: <SchemaOptionsContent onClose={closeDialog} />,
+			})
+		},
+		close: closeDialog,
+	}
+}
+
+/**
+ * Legacy component wrapper for backwards compatibility
+ */
+interface SchemaOptionsDialogProps {
+	open: boolean
+	onOpenChange: (open: boolean) => void
+}
+
+export function SchemaOptionsDialog({
+	open,
+	onOpenChange,
+}: SchemaOptionsDialogProps) {
+	const schemaOptions = useSchemaOptionsDialog()
+
+	useEffect(() => {
+		if (open) {
+			schemaOptions.open()
+		}
+	}, [open, schemaOptions])
+
+	// When dialog closes via the service, notify parent
+	useEffect(() => {
+		// This is a simplified approach - the dialog service handles closing
+		return () => {
+			if (open) {
+				onOpenChange(false)
+			}
+		}
+	}, [open, onOpenChange])
+
+	return null // Dialog is rendered by DialogProvider in admin
+}