@magnet-cms/plugin-playground 2.0.0

package/src/frontend/pages/Playground/hooks/useSchemaBuilder.ts

@@ -0,0 +1,280 @@
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useMemo,
+	useReducer,
+} from 'react'
+import { getFieldTypeDefinition } from '../constants/field-types'
+import {
+	DEFAULT_BUILDER_STATE,
+	FIELD_TYPE_TO_TS_TYPE,
+	type SchemaBuilderAction,
+	type SchemaBuilderContextType,
+	type SchemaBuilderState,
+	type SchemaConfig,
+	type SchemaField,
+	type ViewMode,
+} from '../types/builder.types'
+import { generateSchemaCode, generateSchemaJSON } from '../utils/code-generator'
+
+/**
+ * Generate a unique ID for fields
+ */
+function generateId(): string {
+	return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`
+}
+
+/**
+ * Convert display name to API ID (camelCase)
+ */
+function toApiId(displayName: string): string {
+	return displayName
+		.toLowerCase()
+		.replace(/[^a-z0-9\s]/g, '')
+		.split(/\s+/)
+		.filter(Boolean)
+		.map((word, index) =>
+			index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1),
+		)
+		.join('')
+}
+
+/**
+ * Schema builder reducer
+ */
+function schemaBuilderReducer(
+	state: SchemaBuilderState,
+	action: SchemaBuilderAction,
+): SchemaBuilderState {
+	switch (action.type) {
+		case 'SET_SCHEMA':
+			return {
+				...state,
+				schema: { ...state.schema, ...action.payload },
+				isDirty: true,
+			}
+
+		case 'ADD_FIELD':
+			return {
+				...state,
+				fields: [...state.fields, action.payload],
+				selectedFieldId: action.payload.id,
+				isDirty: true,
+			}
+
+		case 'UPDATE_FIELD':
+			return {
+				...state,
+				fields: state.fields.map((field) =>
+					field.id === action.payload.id
+						? { ...field, ...action.payload.changes }
+						: field,
+				),
+				isDirty: true,
+			}
+
+		case 'DELETE_FIELD':
+			return {
+				...state,
+				fields: state.fields.filter((field) => field.id !== action.payload),
+				selectedFieldId:
+					state.selectedFieldId === action.payload
+						? null
+						: state.selectedFieldId,
+				isDirty: true,
+			}
+
+		case 'REORDER_FIELDS':
+			return {
+				...state,
+				fields: action.payload,
+				isDirty: true,
+			}
+
+		case 'SELECT_FIELD':
+			return {
+				...state,
+				selectedFieldId: action.payload,
+			}
+
+		case 'SET_VIEW_MODE':
+			return {
+				...state,
+				viewMode: action.payload,
+			}
+
+		case 'MARK_DIRTY':
+			return {
+				...state,
+				isDirty: true,
+			}
+
+		case 'MARK_SAVED':
+			return {
+				...state,
+				isDirty: false,
+				lastSaved: new Date(),
+			}
+
+		case 'RESET':
+			return action.payload
+
+		case 'LOAD_SCHEMA':
+			return {
+				...state,
+				schema: action.payload.schema,
+				fields: action.payload.fields,
+				isDirty: false,
+				isNew: false,
+			}
+
+		default:
+			return state
+	}
+}
+
+/**
+ * Schema builder context
+ */
+export const SchemaBuilderContext =
+	createContext<SchemaBuilderContextType | null>(null)
+
+/**
+ * Hook to access the schema builder context
+ */
+export function useSchemaBuilder(): SchemaBuilderContextType {
+	const context = useContext(SchemaBuilderContext)
+	if (!context) {
+		throw new Error(
+			'useSchemaBuilder must be used within a SchemaBuilderProvider',
+		)
+	}
+	return context
+}
+
+/**
+ * Hook to create the schema builder state and actions
+ */
+export function useSchemaBuilderState(
+	initialState: SchemaBuilderState = DEFAULT_BUILDER_STATE,
+): SchemaBuilderContextType {
+	const [state, dispatch] = useReducer(schemaBuilderReducer, initialState)
+
+	// Convenience actions
+	const addField = useCallback((partial: Partial<SchemaField>) => {
+		const fieldType = partial.type || 'text'
+		const definition = getFieldTypeDefinition(fieldType)
+		const displayName = partial.displayName || 'New Field'
+		const name = partial.name || toApiId(displayName)
+
+		const field: SchemaField = {
+			id: generateId(),
+			name,
+			displayName,
+			type: fieldType,
+			tsType:
+				definition?.tsType || FIELD_TYPE_TO_TS_TYPE[fieldType] || 'string',
+			prop: {
+				required: false,
+				unique: false,
+				...partial.prop,
+			},
+			ui: {
+				tab: 'General',
+				...definition?.defaultUI,
+				...partial.ui,
+			},
+			validations: partial.validations || definition?.defaultValidations || [],
+			relationConfig: partial.relationConfig,
+		}
+
+		dispatch({ type: 'ADD_FIELD', payload: field })
+	}, [])
+
+	const updateField = useCallback(
+		(id: string, changes: Partial<SchemaField>) => {
+			dispatch({ type: 'UPDATE_FIELD', payload: { id, changes } })
+		},
+		[],
+	)
+
+	const deleteField = useCallback((id: string) => {
+		dispatch({ type: 'DELETE_FIELD', payload: id })
+	}, [])
+
+	const selectField = useCallback((id: string | null) => {
+		dispatch({ type: 'SELECT_FIELD', payload: id })
+	}, [])
+
+	const reorderFields = useCallback((fields: SchemaField[]) => {
+		dispatch({ type: 'REORDER_FIELDS', payload: fields })
+	}, [])
+
+	const setViewMode = useCallback((mode: ViewMode) => {
+		dispatch({ type: 'SET_VIEW_MODE', payload: mode })
+	}, [])
+
+	const updateSchema = useCallback((changes: Partial<SchemaConfig>) => {
+		dispatch({ type: 'SET_SCHEMA', payload: changes })
+	}, [])
+
+	const resetState = useCallback((newState?: SchemaBuilderState) => {
+		dispatch({ type: 'RESET', payload: newState || DEFAULT_BUILDER_STATE })
+	}, [])
+
+	// Computed values
+	const selectedField = useMemo(
+		() => state.fields.find((f) => f.id === state.selectedFieldId) ?? null,
+		[state.fields, state.selectedFieldId],
+	)
+
+	const generatedCode = useMemo(() => generateSchemaCode(state), [state])
+
+	const generatedJSON = useMemo(() => generateSchemaJSON(state), [state])
+
+	return {
+		state,
+		dispatch,
+		addField,
+		updateField,
+		deleteField,
+		selectField,
+		reorderFields,
+		setViewMode,
+		updateSchema,
+		resetState,
+		selectedField,
+		generatedCode,
+		generatedJSON,
+	}
+}
+
+/**
+ * Create a field from a field type definition
+ */
+export function createFieldFromType(
+	type: SchemaField['type'],
+	displayName: string,
+): Partial<SchemaField> {
+	const definition = getFieldTypeDefinition(type)
+	if (!definition) {
+		return { type, displayName }
+	}
+
+	return {
+		type,
+		displayName,
+		name: toApiId(displayName),
+		tsType: definition.tsType,
+		validations: [...definition.defaultValidations],
+		ui: { ...definition.defaultUI },
+		prop: { required: false, unique: false },
+		...(definition.hasRelationConfig && {
+			relationConfig: {
+				targetSchema: '',
+				relationType: 'manyToOne',
+			},
+		}),
+	}
+}

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

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+/**
+ * Playground index - redirects to the editor with 3-column layout
+ * The schema list is now integrated into the editor sidebar
+ */
+const Playground = () => {
+	const navigate = useNavigate()
+
+	useEffect(() => {
+		// Redirect to new schema editor - the schema list is shown in the sidebar
+		navigate('/playground/new', { replace: true })
+	}, [navigate])
+
+	return null
+}
+
+export default Playground

package/src/frontend/pages/Playground/types/builder.types.ts

@@ -0,0 +1,191 @@
+/**
+ * Schema Playground Builder Types
+ *
+ * These types define the state structure for the visual schema builder.
+ */
+
+/**
+ * Supported field types in the schema builder
+ */
+export type FieldType =
+	| 'text'
+	| 'number'
+	| 'date'
+	| 'boolean'
+	| 'select'
+	| 'relation'
+
+/**
+ * Select/dropdown option structure
+ */
+export interface SelectOption {
+	key: string
+	value: string
+}
+
+/**
+ * Relation field configuration
+ */
+export interface RelationConfig {
+	targetSchema: string
+	relationType: 'oneToOne' | 'oneToMany' | 'manyToOne' | 'manyToMany'
+	inverseSide?: string
+}
+
+/**
+ * Validation rule structure (maps to class-validator decorators)
+ */
+export interface ValidationRule {
+	type: string // e.g., 'IsString', 'IsNotEmpty', 'Length', 'Min', 'Max'
+	constraints?: (string | number)[] // e.g., [10, 255] for Length
+	message?: string // Custom error message
+}
+
+/**
+ * UI configuration (maps to @UI() decorator options)
+ */
+export interface FieldUIConfig {
+	type?: string // UI type override (e.g., 'switch' for boolean)
+	label?: string // Display label
+	description?: string // Help text
+	placeholder?: string // Input placeholder
+	tab?: string // Tab name for grouping
+	side?: boolean // Show in side panel
+	row?: boolean // Half-width layout
+	options?: SelectOption[] // For select/radio fields
+}
+
+/**
+ * Property configuration (maps to @Prop() decorator options)
+ */
+export interface FieldPropConfig {
+	required?: boolean
+	unique?: boolean
+	default?: unknown
+	intl?: boolean // Enable i18n for this field
+	hidden?: boolean // Hide from UI
+	readonly?: boolean
+}
+
+/**
+ * Complete field definition in the builder
+ */
+export interface SchemaField {
+	id: string // Unique ID for React keys and drag-drop
+	name: string // API ID / property name (e.g., 'firstName')
+	displayName: string // Human-readable label (e.g., 'First Name')
+	type: FieldType // Field type
+	tsType: string // TypeScript type (string, number, Date, boolean, etc.)
+	prop: FieldPropConfig // @Prop() options
+	ui: FieldUIConfig // @UI() options
+	validations: ValidationRule[] // @Validators() rules
+	relationConfig?: RelationConfig // For relation fields
+}
+
+/**
+ * Schema-level configuration (maps to @Schema() decorator options)
+ */
+export interface SchemaConfig {
+	name: string // Class name (e.g., 'Cat')
+	apiId?: string // API identifier (e.g., 'cat')
+	versioning: boolean // Enable version history
+	i18n: boolean // Enable internationalization
+	description?: string // Schema description
+}
+
+/**
+ * View modes for the editor
+ */
+export type ViewMode = 'builder' | 'json' | 'code'
+
+/**
+ * Complete builder state
+ */
+export interface SchemaBuilderState {
+	schema: SchemaConfig
+	fields: SchemaField[]
+	selectedFieldId: string | null
+	viewMode: ViewMode
+	isDirty: boolean
+	lastSaved: Date | null
+	isNew: boolean // Whether this is a new schema or editing existing
+}
+
+/**
+ * Reducer action types
+ */
+export type SchemaBuilderAction =
+	| { type: 'SET_SCHEMA'; payload: Partial<SchemaConfig> }
+	| { type: 'ADD_FIELD'; payload: SchemaField }
+	| {
+			type: 'UPDATE_FIELD'
+			payload: { id: string; changes: Partial<SchemaField> }
+	  }
+	| { type: 'DELETE_FIELD'; payload: string }
+	| { type: 'REORDER_FIELDS'; payload: SchemaField[] }
+	| { type: 'SELECT_FIELD'; payload: string | null }
+	| { type: 'SET_VIEW_MODE'; payload: ViewMode }
+	| { type: 'MARK_DIRTY' }
+	| { type: 'MARK_SAVED' }
+	| { type: 'RESET'; payload: SchemaBuilderState }
+	| {
+			type: 'LOAD_SCHEMA'
+			payload: { schema: SchemaConfig; fields: SchemaField[] }
+	  }
+
+/**
+ * Default values for a new schema
+ */
+export const DEFAULT_SCHEMA_CONFIG: SchemaConfig = {
+	name: '',
+	versioning: true,
+	i18n: true,
+}
+
+/**
+ * Default builder state
+ */
+export const DEFAULT_BUILDER_STATE: SchemaBuilderState = {
+	schema: DEFAULT_SCHEMA_CONFIG,
+	fields: [],
+	selectedFieldId: null,
+	viewMode: 'builder',
+	isDirty: false,
+	lastSaved: null,
+	isNew: true,
+}
+
+/**
+ * Mapping from field type to TypeScript type
+ */
+export const FIELD_TYPE_TO_TS_TYPE: Record<FieldType, string> = {
+	text: 'string',
+	number: 'number',
+	date: 'Date',
+	boolean: 'boolean',
+	select: 'string',
+	relation: 'string', // ObjectId reference
+}
+
+/**
+ * Context type for the schema builder
+ */
+export interface SchemaBuilderContextType {
+	state: SchemaBuilderState
+	dispatch: React.Dispatch<SchemaBuilderAction>
+
+	// Convenience actions
+	addField: (field: Partial<SchemaField>) => void
+	updateField: (id: string, changes: Partial<SchemaField>) => void
+	deleteField: (id: string) => void
+	selectField: (id: string | null) => void
+	reorderFields: (fields: SchemaField[]) => void
+	setViewMode: (mode: ViewMode) => void
+	updateSchema: (changes: Partial<SchemaConfig>) => void
+	resetState: (state?: SchemaBuilderState) => void
+
+	// Computed values
+	selectedField: SchemaField | null
+	generatedCode: string
+	generatedJSON: object
+}