@magnet-cms/plugin-playground 2.0.0

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

@@ -0,0 +1,161 @@
+import { Badge, Button, SortableItemHandle } from '@magnet-cms/ui/components'
+import { cn } from '@magnet-cms/ui/lib'
+import { GripVertical, Pencil, Trash2 } from 'lucide-react'
+import {
+	FIELD_TYPE_COLORS,
+	getFieldTypeDefinition,
+} from '../constants/field-types'
+import type { SchemaField } from '../types/builder.types'
+
+interface FieldCardProps {
+	field: SchemaField
+	isSelected?: boolean
+	isDragging?: boolean
+	onClick?: () => void
+	onEdit?: () => void
+	onDelete?: () => void
+	showActions?: boolean
+	showDragHandle?: boolean
+}
+
+export function FieldCard({
+	field,
+	isSelected,
+	isDragging,
+	onClick,
+	onEdit,
+	onDelete,
+	showActions = true,
+	showDragHandle = true,
+}: FieldCardProps) {
+	const definition = getFieldTypeDefinition(field.type)
+	const Icon = definition?.icon
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault()
+			onClick?.()
+		}
+	}
+
+	return (
+		// biome-ignore lint/a11y/useSemanticElements: Using div for drag-and-drop compatibility
+		<div
+			role="button"
+			tabIndex={0}
+			className={cn(
+				'group p-4 flex items-center justify-between transition-colors cursor-pointer border-l-2',
+				isSelected
+					? 'bg-muted/80 border-l-foreground'
+					: 'hover:bg-muted/50 border-l-transparent hover:border-l-muted-foreground/50',
+				isDragging && 'opacity-50',
+			)}
+			onClick={onClick}
+			onKeyDown={handleKeyDown}
+		>
+			{/* Left side: Icon + Field Info */}
+			<div className="flex items-center gap-4">
+				{/* Drag Handle */}
+				{showDragHandle ? (
+					<SortableItemHandle className="text-muted-foreground/50 hover:text-muted-foreground touch-none">
+						<GripVertical className="h-4 w-4" />
+					</SortableItemHandle>
+				) : (
+					<div className="text-muted-foreground/50">
+						<GripVertical className="h-4 w-4" />
+					</div>
+				)}
+
+				{/* Field Type Icon */}
+				<div
+					className={cn(
+						'w-8 h-8 rounded-lg flex items-center justify-center border',
+						FIELD_TYPE_COLORS[field.type] ||
+							'bg-muted text-muted-foreground border-muted',
+					)}
+				>
+					{Icon && <Icon className="h-4 w-4" />}
+				</div>
+
+				{/* Field Name & Type */}
+				<div className="space-y-1">
+					<div className="flex items-center gap-3">
+						<span className="text-sm font-semibold">{field.displayName}</span>
+						<span className="text-[10px] font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded border">
+							{field.name}
+						</span>
+					</div>
+					<div className="flex items-center gap-2 flex-wrap">
+						<span className="text-xs text-muted-foreground capitalize">
+							{definition?.label || field.type}
+						</span>
+						{field.prop.required && (
+							<>
+								<span className="w-0.5 h-0.5 rounded-full bg-muted-foreground/50" />
+								<Badge
+									variant="outline"
+									className="text-[10px] px-1.5 py-0 h-4 bg-emerald-50 text-emerald-700 border-emerald-200"
+								>
+									Required
+								</Badge>
+							</>
+						)}
+						{field.prop.unique && (
+							<>
+								<span className="w-0.5 h-0.5 rounded-full bg-muted-foreground/50" />
+								<Badge
+									variant="outline"
+									className="text-[10px] px-1.5 py-0 h-4 bg-amber-50 text-amber-700 border-amber-200"
+								>
+									Unique
+								</Badge>
+							</>
+						)}
+						{field.relationConfig && (
+							<>
+								<span className="w-0.5 h-0.5 rounded-full bg-muted-foreground/50" />
+								<span className="text-xs text-muted-foreground">
+									{field.relationConfig.relationType} (
+									{field.relationConfig.targetSchema || '...'})
+								</span>
+							</>
+						)}
+					</div>
+				</div>
+			</div>
+
+			{/* Right side: Actions */}
+			{showActions && (
+				<div
+					className={cn(
+						'flex items-center gap-1 transition-opacity',
+						isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
+					)}
+				>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="h-8 w-8"
+						onClick={(e) => {
+							e.stopPropagation()
+							onEdit?.()
+						}}
+					>
+						<Pencil className="h-3.5 w-3.5" />
+					</Button>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+						onClick={(e) => {
+							e.stopPropagation()
+							onDelete?.()
+						}}
+					>
+						<Trash2 className="h-3.5 w-3.5" />
+					</Button>
+				</div>
+			)}
+		</div>
+	)
+}

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

@@ -0,0 +1,121 @@
+import type { UniqueIdentifier } from '@dnd-kit/core'
+import {
+	Sortable,
+	SortableContent,
+	SortableItem,
+	SortableOverlay,
+} from '@magnet-cms/ui/components'
+import { AlertCircle, Plus } from 'lucide-react'
+import { useSchemaBuilder } from '../hooks/useSchemaBuilder'
+import type { SchemaField } from '../types/builder.types'
+import { FieldCard } from './FieldCard'
+
+interface FieldListProps {
+	onAddField?: () => void
+	readOnly?: boolean
+}
+
+export function FieldList({ onAddField, readOnly = false }: FieldListProps) {
+	const { state, selectField, deleteField, reorderFields } = useSchemaBuilder()
+
+	const handleReorder = (reorderedFields: SchemaField[]) => {
+		reorderFields(reorderedFields)
+	}
+
+	return (
+		<div className="border rounded-xl overflow-hidden bg-background shadow-sm">
+			{/* Header */}
+			<div className="bg-muted/50 border-b px-4 py-2 flex items-center justify-between">
+				<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+					Fields ({state.fields.length})
+				</h3>
+			</div>
+
+			{/* Field List */}
+			{state.fields.length === 0 ? (
+				<div className="p-8 text-center text-muted-foreground">
+					<AlertCircle className="mx-auto h-10 w-10 mb-3 opacity-50" />
+					<p className="text-sm font-medium mb-1">No fields yet</p>
+					<p className="text-xs">
+						{readOnly
+							? 'This schema has no fields defined'
+							: 'Add your first field to start building your schema'}
+					</p>
+				</div>
+			) : readOnly ? (
+				// Read-only mode: simple list without drag/drop
+				<div className="divide-y">
+					{state.fields.map((field) => (
+						<FieldCard
+							key={field.id}
+							field={field}
+							isSelected={false}
+							showActions={false}
+							showDragHandle={false}
+						/>
+					))}
+				</div>
+			) : (
+				<Sortable
+					value={state.fields}
+					onValueChange={handleReorder}
+					getItemValue={(field) => field.id}
+				>
+					<SortableContent className="divide-y">
+						{state.fields.map((field) => (
+							<SortableItem key={field.id} value={field.id}>
+								<FieldCard
+									field={field}
+									isSelected={field.id === state.selectedFieldId}
+									onClick={() => selectField(field.id)}
+									onEdit={() => selectField(field.id)}
+									onDelete={() => {
+										if (
+											window.confirm(
+												`Are you sure you want to delete "${field.displayName}"?`,
+											)
+										) {
+											deleteField(field.id)
+										}
+									}}
+								/>
+							</SortableItem>
+						))}
+					</SortableContent>
+
+					<SortableOverlay>
+						{({ value }: { value: UniqueIdentifier }) => {
+							const field = state.fields.find((f) => f.id === value)
+							return field ? (
+								<div className="bg-background border rounded-lg shadow-lg">
+									<FieldCard
+										field={field}
+										isSelected
+										showActions={false}
+										showDragHandle={false}
+									/>
+								</div>
+							) : null
+						}}
+					</SortableOverlay>
+				</Sortable>
+			)}
+
+			{/* Add Field Button - only show in edit mode */}
+			{!readOnly && onAddField && (
+				<div className="p-2 bg-muted/30 border-t">
+					<button
+						type="button"
+						onClick={onAddField}
+						className="w-full py-2.5 rounded-lg border-2 border-dashed border-muted-foreground/25 hover:border-muted-foreground/50 hover:bg-muted/50 transition-all text-xs font-semibold text-muted-foreground hover:text-foreground flex items-center justify-center gap-2 group"
+					>
+						<div className="bg-muted rounded p-0.5 group-hover:bg-muted-foreground/20 transition-colors">
+							<Plus className="h-3 w-3" />
+						</div>
+						Add new field
+					</button>
+				</div>
+			)}
+		</div>
+	)
+}