@magnet-cms/plugin-playground 2.0.0

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

@@ -0,0 +1,322 @@
+import { PageContent, PageHeader, useSchema } from '@magnet-cms/admin'
+import { Button, Spinner } from '@magnet-cms/ui/components'
+import {
+	AlertCircle,
+	Boxes,
+	Code2,
+	FileJson,
+	Info,
+	Lock,
+	PencilRuler,
+	Rocket,
+	Settings2,
+} from 'lucide-react'
+import { createContext, useContext, useState } from 'react'
+import { useParams } from 'react-router-dom'
+
+// Context to track if schema is read-only (existing code-defined schema)
+const ReadOnlyContext = createContext(false)
+import {
+	SchemaBuilderContext,
+	useSchemaBuilder,
+	useSchemaBuilderState,
+} from '../hooks/useSchemaBuilder'
+import type { SchemaBuilderState, SchemaField } from '../types/builder.types'
+import { DEFAULT_BUILDER_STATE } from '../types/builder.types'
+import { AddFieldDialog } from './AddFieldDialog'
+import { CodePreview } from './CodePreview'
+import { FieldList } from './FieldList'
+import { FieldSettingsPanel } from './FieldSettingsPanel'
+import { SchemaList } from './SchemaList'
+import { SchemaOptionsDialog } from './SchemaOptionsDialog'
+
+/**
+ * Transform SchemaMetadata from discovery API to builder state
+ */
+function schemaMetadataToBuilderState(
+	name: string,
+	metadata: any,
+): SchemaBuilderState {
+	return {
+		schema: {
+			name: name.charAt(0).toUpperCase() + name.slice(1),
+			apiId: name,
+			versioning: metadata.options?.versioning ?? true,
+			i18n: metadata.options?.i18n ?? true,
+		},
+		fields:
+			metadata.properties?.map((prop: any, index: number) => ({
+				id: `field_${index}_${prop.name}`,
+				name: prop.name,
+				displayName: prop.ui?.label || prop.name,
+				type: inferFieldType(prop),
+				tsType: prop.type || 'string',
+				prop: {
+					required: prop.required || false,
+					unique: prop.unique || false,
+					intl: prop.intl || false,
+					hidden: prop.hidden || false,
+					readonly: prop.readonly || false,
+				},
+				ui: prop.ui || {},
+				validations: (prop.validations || []).map((v: any) => ({
+					type: v.name || v.type,
+					constraints: v.constraints,
+				})),
+			})) || [],
+		selectedFieldId: null,
+		viewMode: 'builder',
+		isDirty: false,
+		lastSaved: null,
+		isNew: false,
+	}
+}
+
+/**
+ * Infer field type from property metadata
+ */
+function inferFieldType(prop: any): SchemaField['type'] {
+	const uiType = prop.ui?.type
+	if (uiType === 'switch' || uiType === 'checkbox') return 'boolean'
+	if (uiType === 'date') return 'date'
+	if (uiType === 'number') return 'number'
+	if (uiType === 'select' || uiType === 'radio') return 'select'
+	if (uiType === 'relationship') return 'relation'
+
+	// prop.type can be a string, object, or array - only process if string
+	const tsType = typeof prop.type === 'string' ? prop.type.toLowerCase() : null
+	if (tsType === 'number') return 'number'
+	if (tsType === 'boolean') return 'boolean'
+	if (tsType === 'date') return 'date'
+
+	return 'text'
+}
+
+export function SchemaPlaygroundEditor() {
+	const { schemaName } = useParams<{ schemaName: string }>()
+	const isNewSchema = !schemaName || schemaName === 'new'
+
+	// For existing schemas, fetch metadata
+	const {
+		data: schemaMetadata,
+		isLoading,
+		error,
+	} = useSchema(schemaName && schemaName !== 'new' ? schemaName : undefined)
+
+	if (!isNewSchema && isLoading) {
+		return (
+			<div className="flex justify-center items-center h-64">
+				<Spinner />
+			</div>
+		)
+	}
+
+	if (!isNewSchema && error) {
+		return (
+			<div className="p-4 border-l-4 border-red-500 bg-red-50 text-red-700 rounded m-8">
+				<h3 className="font-medium flex items-center gap-2">
+					<AlertCircle className="h-4 w-4" />
+					Error loading schema
+				</h3>
+				<p className="text-sm mt-1">{error.message}</p>
+			</div>
+		)
+	}
+
+	// If editing existing schema, transform metadata to builder state
+	const initialState =
+		!isNewSchema && schemaMetadata && schemaName && schemaName !== 'new'
+			? schemaMetadataToBuilderState(schemaName, schemaMetadata)
+			: { ...DEFAULT_BUILDER_STATE, isNew: true }
+
+	// TODO: In the future, we need to track schema source (plugin/core vs user-defined)
+	// to determine if a schema should be read-only. For now, all schemas are editable.
+	// Plugin and core schemas should be read-only once we have a way to identify them.
+	const isReadOnly = false
+
+	return (
+		<SchemaEditorContentWithState
+			key={schemaName || 'new'}
+			initialState={initialState}
+			isReadOnly={isReadOnly}
+		/>
+	)
+}
+
+function SchemaEditorContentWithState({
+	initialState,
+	isReadOnly,
+}: {
+	initialState: SchemaBuilderState
+	isReadOnly: boolean
+}) {
+	const context = useSchemaBuilderState(initialState)
+
+	return (
+		<ReadOnlyContext.Provider value={isReadOnly}>
+			<SchemaBuilderContext.Provider value={context}>
+				<SchemaEditorInner />
+			</SchemaBuilderContext.Provider>
+		</ReadOnlyContext.Provider>
+	)
+}
+
+function SchemaEditorInner() {
+	const { state, setViewMode, updateSchema, generatedCode } = useSchemaBuilder()
+	const isReadOnly = useContext(ReadOnlyContext)
+	const [addFieldOpen, setAddFieldOpen] = useState(false)
+	const [optionsOpen, setOptionsOpen] = useState(false)
+
+	const handleDeploy = async () => {
+		// TODO: Implement actual deployment
+		alert(
+			`Deploy functionality will be implemented in the backend phase.\n\nGenerated code:\n\n${generatedCode}`,
+		)
+	}
+
+	const statusBadges: {
+		type: 'warning' | 'success' | 'error' | 'info'
+		label: string
+		dot?: boolean
+	}[] = []
+	if (isReadOnly) {
+		statusBadges.push({
+			type: 'info',
+			label: 'Read-only',
+		})
+	} else if (state.isDirty) {
+		statusBadges.push({
+			type: 'warning',
+			label: 'Unsaved changes',
+			dot: true,
+		})
+	}
+	if (!isReadOnly && state.lastSaved) {
+		statusBadges.push({ type: 'success', label: 'Saved', dot: true })
+	}
+
+	return (
+		<div className="flex flex-col h-full">
+			<PageHeader
+				status={statusBadges.length > 0 ? statusBadges : undefined}
+				icon={isReadOnly ? Lock : Boxes}
+				title={
+					isReadOnly
+						? state.schema.name || 'Schema'
+						: {
+								value: state.schema.name,
+								onChange: (name) => updateSchema({ name }),
+								placeholder: 'SchemaName',
+								editable: true as const,
+							}
+				}
+				description={`api::${state.schema.name?.toLowerCase() || 'schema'}.${state.schema.name?.toLowerCase() || 'schema'}`}
+				tabs={{
+					items: [
+						{ id: 'builder', label: 'Builder', icon: PencilRuler },
+						{ id: 'json', label: 'JSON', icon: FileJson },
+						{ id: 'code', label: 'Code', icon: Code2 },
+					],
+					value: state.viewMode,
+					onChange: setViewMode,
+				}}
+				actions={
+					isReadOnly ? undefined : (
+						<>
+							<Button
+								variant="outline"
+								size="icon"
+								className="h-8 w-8"
+								onClick={() => setOptionsOpen(true)}
+								title="Schema Options"
+							>
+								<Settings2 className="h-4 w-4" />
+							</Button>
+							<Button variant="outline" size="sm" disabled>
+								Preview API
+							</Button>
+							<Button
+								size="sm"
+								onClick={handleDeploy}
+								disabled={!state.schema.name}
+							>
+								<Rocket className="h-4 w-4 mr-2" />
+								Deploy Changes
+							</Button>
+						</>
+					)
+				}
+			/>
+
+			{/* Read-only banner for existing schemas */}
+			{isReadOnly && (
+				<div className="px-6 py-2 border-b border-border bg-amber-50 dark:bg-amber-950/30 flex items-center gap-2">
+					<Lock className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />
+					<span className="text-xs text-amber-700 dark:text-amber-400">
+						This schema is defined in code and cannot be modified here. View the
+						generated code in the Code tab to copy and customize.
+					</span>
+				</div>
+			)}
+
+			{/* Main Content - 2x7x3 grid layout */}
+			<div className="flex-1 overflow-hidden grid grid-cols-12 h-full">
+				{/* Schema List - 2 columns */}
+				<div className="col-span-2 border-r bg-muted/30 overflow-y-auto">
+					<SchemaList />
+				</div>
+
+				{/* Editor Content - 7 columns */}
+				<div className="col-span-7 overflow-hidden flex flex-col">
+					{state.viewMode === 'builder' ? (
+						<PageContent className="p-6 overflow-y-auto flex-1">
+							<div className="space-y-4">
+								{/* Info Alert - only show for new schemas */}
+								{!isReadOnly && (
+									<div className="p-3 bg-blue-50 border border-blue-100 rounded-lg flex items-start gap-3">
+										<Info className="h-4 w-4 text-blue-500 mt-0.5 shrink-0" />
+										<div className="text-xs text-blue-900">
+											<span className="font-medium">Schema Guidelines:</span>{' '}
+											Keep field names in camelCase for better compatibility.
+										</div>
+									</div>
+								)}
+
+								{/* Field List */}
+								<FieldList
+									onAddField={
+										isReadOnly ? undefined : () => setAddFieldOpen(true)
+									}
+									readOnly={isReadOnly}
+								/>
+							</div>
+						</PageContent>
+					) : (
+						/* Code/JSON View */
+						<PageContent className="p-6 overflow-y-auto flex-1">
+							<CodePreview mode={state.viewMode} />
+						</PageContent>
+					)}
+				</div>
+
+				{/* Settings Panel - 3 columns */}
+				<div className="col-span-3 border-l bg-background overflow-y-auto">
+					<FieldSettingsPanel />
+				</div>
+			</div>
+
+			{/* Dialogs - only for editable schemas */}
+			{!isReadOnly && (
+				<>
+					<AddFieldDialog open={addFieldOpen} onOpenChange={setAddFieldOpen} />
+					<SchemaOptionsDialog
+						open={optionsOpen}
+						onOpenChange={setOptionsOpen}
+					/>
+				</>
+			)}
+		</div>
+	)
+}
+
+export default SchemaPlaygroundEditor

package/src/frontend/pages/Playground/constants/field-types.ts

@@ -0,0 +1,384 @@
+import {
+	Calendar,
+	Hash,
+	Link2,
+	List,
+	type LucideIcon,
+	ToggleLeft,
+	Type,
+} from 'lucide-react'
+import type {
+	FieldType,
+	FieldUIConfig,
+	ValidationRule,
+} from '../types/builder.types'
+
+/**
+ * Field type definition for the builder UI
+ */
+export interface FieldTypeDefinition {
+	id: FieldType
+	label: string
+	description: string
+	icon: LucideIcon
+	tsType: string
+	defaultValidations: ValidationRule[]
+	defaultUI: FieldUIConfig
+	hasOptions?: boolean // For select fields
+	hasRelationConfig?: boolean // For relation fields
+	requiresTransformer?: boolean // For Date fields
+}
+
+/**
+ * All available field types in the schema builder
+ */
+export const FIELD_TYPES: FieldTypeDefinition[] = [
+	{
+		id: 'text',
+		label: 'Text',
+		description: 'Short or long text content',
+		icon: Type,
+		tsType: 'string',
+		defaultValidations: [{ type: 'IsString' }, { type: 'IsNotEmpty' }],
+		defaultUI: { type: 'text' },
+	},
+	{
+		id: 'number',
+		label: 'Number',
+		description: 'Integer or decimal numbers',
+		icon: Hash,
+		tsType: 'number',
+		defaultValidations: [{ type: 'IsNumber' }],
+		defaultUI: { type: 'number' },
+	},
+	{
+		id: 'date',
+		label: 'Date',
+		description: 'Date and time values',
+		icon: Calendar,
+		tsType: 'Date',
+		defaultValidations: [{ type: 'IsDate' }],
+		defaultUI: { type: 'date' },
+		requiresTransformer: true,
+	},
+	{
+		id: 'boolean',
+		label: 'Boolean',
+		description: 'True or false toggle',
+		icon: ToggleLeft,
+		tsType: 'boolean',
+		defaultValidations: [{ type: 'IsBoolean' }],
+		defaultUI: { type: 'switch' },
+	},
+	{
+		id: 'select',
+		label: 'Select',
+		description: 'Dropdown with predefined options',
+		icon: List,
+		tsType: 'string',
+		defaultValidations: [{ type: 'IsString' }],
+		defaultUI: { type: 'select', options: [] },
+		hasOptions: true,
+	},
+	{
+		id: 'relation',
+		label: 'Relation',
+		description: 'Reference to another schema',
+		icon: Link2,
+		tsType: 'string',
+		defaultValidations: [{ type: 'IsString' }],
+		defaultUI: { type: 'relationship' },
+		hasRelationConfig: true,
+	},
+]
+
+/**
+ * Get field type definition by ID
+ */
+export function getFieldTypeDefinition(
+	type: FieldType,
+): FieldTypeDefinition | undefined {
+	return FIELD_TYPES.find((ft) => ft.id === type)
+}
+
+/**
+ * UI subtype definition for field type variations
+ */
+export interface UISubtypeDefinition {
+	id: string
+	label: string
+	description: string
+}
+
+/**
+ * Available UI subtypes for each base field type.
+ * These map to the UITypes in @magnet-cms/common and are rendered by FormBuilder.
+ */
+export const UI_SUBTYPES: Record<FieldType, UISubtypeDefinition[]> = {
+	text: [
+		{ id: 'text', label: 'Text Input', description: 'Single line text' },
+		{ id: 'textarea', label: 'Text Area', description: 'Multi-line text' },
+		{ id: 'email', label: 'Email', description: 'Email with validation' },
+		{ id: 'phone', label: 'Phone', description: 'Phone number input' },
+		{ id: 'richText', label: 'Rich Text', description: 'Rich text editor' },
+	],
+	number: [
+		{
+			id: 'number',
+			label: 'Number Input',
+			description: 'Standard number field',
+		},
+		{
+			id: 'quantity',
+			label: 'Quantity',
+			description: 'Number with +/- buttons',
+		},
+	],
+	date: [
+		{
+			id: 'date',
+			label: 'Date Picker',
+			description: 'Calendar date selection',
+		},
+	],
+	boolean: [
+		{ id: 'switch', label: 'Switch', description: 'Toggle switch' },
+		{ id: 'checkbox', label: 'Checkbox', description: 'Checkbox input' },
+	],
+	select: [
+		{ id: 'select', label: 'Dropdown', description: 'Single select dropdown' },
+		{
+			id: 'multiSelect',
+			label: 'Multi Select',
+			description: 'Select multiple options',
+		},
+		{ id: 'combobox', label: 'Combobox', description: 'Searchable dropdown' },
+		{ id: 'radio', label: 'Radio Group', description: 'Radio button options' },
+	],
+	relation: [
+		{
+			id: 'relationship',
+			label: 'Relationship',
+			description: 'Link to another schema',
+		},
+	],
+}
+
+/**
+ * Get UI subtypes for a field type
+ */
+export function getUISubtypes(type: FieldType): UISubtypeDefinition[] {
+	return UI_SUBTYPES[type] || []
+}
+
+/**
+ * Get the icon component for a field type
+ */
+export function getFieldTypeIcon(type: FieldType): LucideIcon {
+	const definition = getFieldTypeDefinition(type)
+	return definition?.icon ?? Type
+}
+
+/**
+ * Available validation rules for each field type
+ */
+export const VALIDATION_RULES_BY_TYPE: Record<FieldType, string[]> = {
+	text: [
+		'IsString',
+		'IsNotEmpty',
+		'Length',
+		'MinLength',
+		'MaxLength',
+		'IsEmail',
+		'IsUrl',
+		'IsUUID',
+		'Matches',
+	],
+	number: ['IsNumber', 'IsInt', 'IsPositive', 'IsNegative', 'Min', 'Max'],
+	date: ['IsDate', 'IsNotEmpty', 'MinDate', 'MaxDate'],
+	boolean: ['IsBoolean'],
+	select: ['IsString', 'IsNotEmpty', 'IsIn'],
+	relation: ['IsString', 'IsNotEmpty', 'IsMongoId'],
+}
+
+/**
+ * Validation rule definitions with constraint info
+ */
+export interface ValidationRuleDefinition {
+	type: string
+	label: string
+	description: string
+	constraintCount: number // 0 = no args, 1 = single arg, 2 = two args (min, max)
+	constraintLabels?: string[]
+}
+
+export const VALIDATION_RULE_DEFINITIONS: ValidationRuleDefinition[] = [
+	{
+		type: 'IsString',
+		label: 'Is String',
+		description: 'Must be a string',
+		constraintCount: 0,
+	},
+	{
+		type: 'IsNumber',
+		label: 'Is Number',
+		description: 'Must be a number',
+		constraintCount: 0,
+	},
+	{
+		type: 'IsInt',
+		label: 'Is Integer',
+		description: 'Must be an integer',
+		constraintCount: 0,
+	},
+	{
+		type: 'IsBoolean',
+		label: 'Is Boolean',
+		description: 'Must be true or false',
+		constraintCount: 0,
+	},
+	{
+		type: 'IsDate',
+		label: 'Is Date',
+		description: 'Must be a valid date',
+		constraintCount: 0,
+	},
+	{
+		type: 'IsNotEmpty',
+		label: 'Not Empty',
+		description: 'Cannot be empty',
+		constraintCount: 0,
+	},
+	{
+		type: 'IsEmail',
+		label: 'Is Email',
+		description: 'Must be a valid email',
+		constraintCount: 0,
+	},
+	{
+		type: 'IsUrl',
+		label: 'Is URL',
+		description: 'Must be a valid URL',
+		constraintCount: 0,
+	},
+	{
+		type: 'IsUUID',
+		label: 'Is UUID',
+		description: 'Must be a valid UUID',
+		constraintCount: 0,
+	},
+	{
+		type: 'IsMongoId',
+		label: 'Is MongoDB ID',
+		description: 'Must be a valid MongoDB ObjectId',
+		constraintCount: 0,
+	},
+	{
+		type: 'IsPositive',
+		label: 'Is Positive',
+		description: 'Must be a positive number',
+		constraintCount: 0,
+	},
+	{
+		type: 'IsNegative',
+		label: 'Is Negative',
+		description: 'Must be a negative number',
+		constraintCount: 0,
+	},
+	{
+		type: 'Length',
+		label: 'Length',
+		description: 'String length between min and max',
+		constraintCount: 2,
+		constraintLabels: ['Min', 'Max'],
+	},
+	{
+		type: 'MinLength',
+		label: 'Min Length',
+		description: 'Minimum string length',
+		constraintCount: 1,
+		constraintLabels: ['Min'],
+	},
+	{
+		type: 'MaxLength',
+		label: 'Max Length',
+		description: 'Maximum string length',
+		constraintCount: 1,
+		constraintLabels: ['Max'],
+	},
+	{
+		type: 'Min',
+		label: 'Minimum',
+		description: 'Minimum number value',
+		constraintCount: 1,
+		constraintLabels: ['Min'],
+	},
+	{
+		type: 'Max',
+		label: 'Maximum',
+		description: 'Maximum number value',
+		constraintCount: 1,
+		constraintLabels: ['Max'],
+	},
+	{
+		type: 'Matches',
+		label: 'Matches Pattern',
+		description: 'Must match regex pattern',
+		constraintCount: 1,
+		constraintLabels: ['Pattern'],
+	},
+	{
+		type: 'IsIn',
+		label: 'Is In List',
+		description: 'Must be one of the allowed values',
+		constraintCount: 1,
+		constraintLabels: ['Values (comma-separated)'],
+	},
+]
+
+/**
+ * Get validation rule definition by type
+ */
+export function getValidationRuleDefinition(
+	type: string,
+): ValidationRuleDefinition | undefined {
+	return VALIDATION_RULE_DEFINITIONS.find((r) => r.type === type)
+}
+
+/**
+ * Relation type options
+ */
+export const RELATION_TYPES = [
+	{
+		value: 'oneToOne',
+		label: 'One to One',
+		description: 'Each record relates to exactly one other',
+	},
+	{
+		value: 'oneToMany',
+		label: 'One to Many',
+		description: 'One record relates to many others',
+	},
+	{
+		value: 'manyToOne',
+		label: 'Many to One',
+		description: 'Many records relate to one',
+	},
+	{
+		value: 'manyToMany',
+		label: 'Many to Many',
+		description: 'Many records relate to many others',
+	},
+] as const
+
+/**
+ * Color mapping for field type badges
+ */
+export const FIELD_TYPE_COLORS: Record<FieldType, string> = {
+	text: 'bg-blue-50 text-blue-700 border-blue-200',
+	number: 'bg-amber-50 text-amber-700 border-amber-200',
+	date: 'bg-green-50 text-green-700 border-green-200',
+	boolean: 'bg-purple-50 text-purple-700 border-purple-200',
+	select: 'bg-cyan-50 text-cyan-700 border-cyan-200',
+	relation: 'bg-indigo-50 text-indigo-700 border-indigo-200',
+}