@rokkit/forms 1.0.0-next.122

package/src/lib/builder.svelte.js

@@ -0,0 +1,359 @@
+import { deriveSchemaFromValue } from './schema.js'
+import { deriveLayoutFromValue } from './layout.js'
+import { getSchemaWithLayout } from './fields.js'
+import { omit } from 'ramda'
+
+/**
+ * @typedef {Object} FormElement
+ * @property {string} scope - JSON Pointer path (e.g., '#/email', '#/user/name')
+ * @property {string} type - Input type (text, number, range, checkbox, select, etc.)
+ * @property {any} value - Current value from data
+ * @property {boolean} override - Whether to use custom child snippet (from layout)
+ * @property {Object} props - Merged properties from schema + layout + validation
+ * @property {string} [props.label] - Display label (from layout)
+ * @property {string} [props.description] - Help text (from layout)
+ * @property {string} [props.placeholder] - Placeholder text (from layout)
+ * @property {boolean} [props.required] - Required flag (from schema)
+ * @property {number} [props.min] - Minimum value (from schema)
+ * @property {number} [props.max] - Maximum value (from schema)
+ * @property {Object} [props.message] - Validation message object
+ * @property {string} [props.message.state] - Message state: 'error', 'warning', 'info', 'success'
+ * @property {string} [props.message.text] - Message text content
+ */
+
+/**
+ * FormBuilder class for dynamically generating forms from data structures
+ */
+export class FormBuilder {
+	/** @type {Object} */
+	#data = $state({})
+
+	/** @type {Object} */
+	#schema = $state({})
+
+	/** @type {Object} */
+	#layout = $state({})
+
+	/** @type {Object} */
+	#validation = $state({})
+
+	/** @type {FormElement[]} */
+	elements = $derived(this.#buildElements())
+	combined = $derived(getSchemaWithLayout(this.schema, this.layout))
+	/**
+	 * Get the current data
+	 * @returns {Object} Current data object
+	 */
+	get data() {
+		return this.#data
+	}
+
+	/**
+	 * Set the data
+	 * @param {Object} value - New data object
+	 */
+	set data(value) {
+		this.#data = value
+	}
+
+	/**
+	 * Get the current schema
+	 * @returns {Object} Current schema object
+	 */
+	get schema() {
+		return this.#schema
+	}
+
+	/**
+	 * Set the schema
+	 * @param {Object} value - New schema object
+	 */
+	set schema(value) {
+		this.#schema = value ?? deriveSchemaFromValue(this.#data)
+	}
+
+	/**
+	 * Get the current layout
+	 * @returns {Object} Current layout object
+	 */
+	get layout() {
+		return this.#layout
+	}
+
+	/**
+	 * Set the layout
+	 * @param {Object} value - New layout object
+	 */
+	set layout(value) {
+		this.#layout = value ?? deriveLayoutFromValue(this.#data)
+	}
+
+	/**
+	 * Get the current validation state
+	 * @returns {Object} Current validation object
+	 */
+	get validation() {
+		return this.#validation
+	}
+
+	/**
+	 * Set validation messages for fields
+	 * @param {Object} value - Validation object with field paths as keys
+	 */
+	set validation(value) {
+		this.#validation = value
+	}
+
+	/**
+	 * Create a new FormBuilder instance
+	 * @param {Object} [data={}] - Initial data object
+	 * @param {Object|null} [schema=null] - Optional schema override
+	 * @param {Object|null} [layout=null] - Optional layout override
+	 */
+	constructor(data = {}, schema = null, layout = null) {
+		this.#data = data
+		this.schema = schema
+		this.layout = layout
+	}
+
+	/**
+	 * Update a specific field value
+	 * @param {string} path - Field path (e.g., 'count', 'settings/distance')
+	 * @param {any} value - New value
+	 */
+	updateField(path, value) {
+		// Simple path handling for now - can be enhanced for nested objects
+		const keys = path.split('/')
+		if (keys.length === 1) {
+			this.#data = { ...this.#data, [keys[0]]: value }
+		} else {
+			// Handle nested paths if needed
+			const updatedData = { ...this.#data }
+			let current = updatedData
+			for (let i = 0; i < keys.length - 1; i++) {
+				current[keys[i]] = { ...current[keys[i]] }
+				current = current[keys[i]]
+			}
+			current[keys[keys.length - 1]] = value
+			this.#data = updatedData
+		}
+	}
+
+	/**
+	 * Get a field value by path
+	 * @param {string} path - Field path
+	 * @returns {any} Field value
+	 */
+	getValue(path) {
+		if (!path) return undefined
+
+		const keys = path.split('/')
+		let current = this.#data
+		for (const key of keys) {
+			if (current && typeof current === 'object') {
+				current = current[key]
+			} else {
+				return undefined
+			}
+		}
+		return current
+	}
+
+	/**
+	 * Build form elements from schema and layout using getSchemaWithLayout
+	 * @private
+	 * @returns {FormElement[]} Array of form elements
+	 */
+	#buildElements() {
+		// if (!this.#schema || !this.#layout || !this.#layout.elements) {
+		// 	return []
+		// }
+
+		try {
+			// Use getSchemaWithLayout to combine schema and layout
+			// const combined = getSchemaWithLayout(this.#schema, this.#layout)
+			// Convert combined elements to FormElement format
+			return this.combined.elements
+				.map((element) => this.#convertToFormElement(element))
+				.filter((element) => element !== null)
+		} catch (error) {
+			// If getSchemaWithLayout fails, fall back to basic element creation
+			console.warn('Failed to build elements:', error)
+			return this.#buildBasicElements()
+		}
+	}
+
+	/**
+	 * Build basic form elements when getSchemaWithLayout fails
+	 * @private
+	 * @returns {FormElement[]} Array of form elements
+	 */
+	#buildBasicElements() {
+		const elements = []
+
+		if (this.#layout.elements) {
+			for (const layoutElement of this.#layout.elements) {
+				const formElement = this.#buildBasicElement(layoutElement)
+				if (formElement) {
+					elements.push(formElement)
+				}
+			}
+		}
+
+		return elements
+	}
+
+	/**
+	 * Build a basic form element from layout only
+	 * @private
+	 * @param {Object} layoutElement - Layout element definition
+	 * @returns {FormElement|null} Form element or null
+	 */
+	#buildBasicElement(layoutElement) {
+		const { scope, label, override = false, ...layoutProps } = layoutElement
+
+		if (!scope) return null
+
+		// Extract field name from scope (remove leading '#/')
+		const fieldPath = scope.replace(/^#\//, '')
+		const value = this.getValue(fieldPath)
+
+		// Default type is text when no schema is available
+		const type = 'text'
+
+		// Basic props
+		const props = {
+			label: label || fieldPath,
+			...layoutProps,
+			message: this.#validation[fieldPath] || null,
+			type
+		}
+
+		return {
+			scope,
+			// type,
+			value,
+			override,
+			props
+		}
+	}
+
+	/**
+	 * Convert a combined schema/layout element to FormElement format
+	 * @private
+	 * @param {Object} element - Combined element from getSchemaWithLayout
+	 * @param {string} parentPath - Parent path for nested elements
+	 * @returns {FormElement} Form element
+	 */
+	#convertToFormElement(element, parentPath = '') {
+		const { key, props } = element
+
+		// Skip elements without a key
+		if (!key) {
+			return null
+		}
+
+		// Create scope in JSON Pointer format
+		const fieldPath = parentPath ? `${parentPath}/${key}` : key
+		const scope = `#/${fieldPath}`
+		const value = this.getValue(fieldPath)
+
+		// Handle nested elements (arrays and objects)
+		if (element.elements) {
+			// This is a nested structure, process children
+			const nestedElements = element.elements.map((child) =>
+				this.#convertToFormElement(child, fieldPath)
+			)
+
+			return {
+				scope,
+				type: 'group',
+				value,
+				override: element.override || false,
+				props: {
+					...props,
+					elements: nestedElements,
+					message: this.#validation[fieldPath] || null
+				}
+			}
+		}
+
+		// Determine input type based on schema type
+		let type = 'text'
+		if (props.type) {
+			switch (props.type) {
+				case 'number':
+				case 'integer':
+					type = props.min !== undefined && props.max !== undefined ? 'range' : 'number'
+					break
+				case 'boolean':
+					type = 'checkbox'
+					break
+				case 'string':
+					if (props.enum) {
+						type = 'select'
+						// Map enum values to options format expected by select inputs
+						if (Array.isArray(props.enum)) {
+							props.options = props.enum //.map((val) => ({ value: val, label: val }))
+						}
+					} else {
+						type = 'text'
+					}
+					break
+				case 'array':
+					type = 'array'
+					break
+			}
+		}
+
+		// Add validation message if exists
+		const validationMessage = this.#validation[fieldPath] || null
+
+		// Compose final props
+		const finalProps = {
+			...props,
+			type,
+			message: validationMessage
+		}
+
+		return {
+			scope,
+			// type,
+			value,
+			override: element.override || false,
+			props: finalProps
+		}
+	}
+
+	/**
+	 * Set validation message for a specific field
+	 * @param {string} fieldPath - Field path (without '#/' prefix)
+	 * @param {Object|null} message - Validation message object or null to clear
+	 * @param {string} message.state - Message state: 'error', 'warning', 'info', 'success'
+	 * @param {string} message.text - Message text content
+	 */
+	setFieldValidation(fieldPath, message) {
+		if (message) {
+			this.#validation = { ...this.#validation, [fieldPath]: message }
+		} else {
+			this.#validation = omit([fieldPath], this.#validation)
+		}
+	}
+
+	/**
+	 * Clear all validation messages
+	 */
+	clearValidation() {
+		this.#validation = {}
+	}
+
+	/**
+	 * Reset form to initial state
+	 */
+	reset() {
+		this.#data = {}
+		// this.#schema = {}
+		// this.#layout = {}
+		this.#validation = {}
+	}
+}

package/src/lib/deprecated/Form.svelte

@@ -0,0 +1,17 @@
+<script>
+	import DataEditor from './DataEditor.svelte'
+
+	export let value
+	export let schema = null
+	export let layout = null
+	export let using = {}
+</script>
+
+<form on:submit>
+	<DataEditor bind:value {schema} {layout} {using} />
+	<span>
+		<slot>
+			<button type="submit">Submit</button>
+		</slot>
+	</span>
+</form>

package/src/lib/deprecated/FormRenderer.svelte

@@ -0,0 +1,121 @@
+<script>
+	// Props using Svelte 5 runes
+	let { elements = [], onUpdate = null } = $props()
+
+	/**
+	 * Handle field value changes
+	 * @param {string} scope - Field scope/path
+	 * @param {any} value - New value
+	 */
+	function handleChange(scope, value) {
+		onUpdate?.(scope, value)
+	}
+
+	/**
+	 * Handle range input changes (convert to number)
+	 * @param {string} scope - Field scope/path
+	 * @param {Event} event - Input event
+	 */
+	function handleRangeChange(scope, event) {
+		const value = Number(event.target.value)
+		handleChange(scope, value)
+	}
+
+	/**
+	 * Handle number input changes (convert to number)
+	 * @param {string} scope - Field scope/path
+	 * @param {Event} event - Input event
+	 */
+	function handleNumberChange(scope, event) {
+		const value = Number(event.target.value)
+		handleChange(scope, value)
+	}
+
+	/**
+	 * Handle checkbox changes
+	 * @param {string} scope - Field scope/path
+	 * @param {Event} event - Input event
+	 */
+	function handleCheckboxChange(scope, event) {
+		const value = event.target.checked
+		handleChange(scope, value)
+	}
+
+	/**
+	 * Handle text input changes
+	 * @param {string} scope - Field scope/path
+	 * @param {Event} event - Input event
+	 */
+	function handleTextChange(scope, event) {
+		const value = event.target.value
+		handleChange(scope, value)
+	}
+</script>
+
+<div class="space-y-4">
+	{#each elements as element (element.scope)}
+		<div class="form-element">
+			{#if element.type === 'range'}
+				<label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+					{element.label}: {element.value}
+					<input
+						type="range"
+						value={element.value}
+						min={element.constraints?.min}
+						max={element.constraints?.max}
+						step={element.constraints?.step}
+						oninput={(e) => handleRangeChange(element.scope, e)}
+						class="mt-1 h-2 w-full cursor-pointer appearance-none rounded-lg bg-neutral-200 dark:bg-neutral-700"
+					/>
+				</label>
+			{:else if element.type === 'number'}
+				<label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+					{element.label}
+					<input
+						type="number"
+						value={element.value}
+						min={element.constraints?.min}
+						max={element.constraints?.max}
+						step={element.constraints?.step}
+						oninput={(e) => handleNumberChange(element.scope, e)}
+						class="focus:border-primary-500 focus:ring-primary-500 mt-1 block w-full rounded-md border border-neutral-300 px-3 py-2 shadow-sm focus:outline-none dark:border-neutral-600 dark:bg-neutral-700 dark:text-white"
+					/>
+				</label>
+			{:else if element.type === 'checkbox'}
+				<label class="flex items-center text-sm font-medium text-neutral-700 dark:text-neutral-300">
+					<input
+						type="checkbox"
+						checked={element.value}
+						onchange={(e) => handleCheckboxChange(element.scope, e)}
+						class="text-primary-600 focus:ring-primary-500 mr-2 h-4 w-4 rounded border-neutral-300 dark:border-neutral-600"
+					/>
+					{element.label}
+				</label>
+			{:else if element.type === 'select'}
+				<label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+					{element.label}
+					<select
+						value={element.value}
+						onchange={(e) => handleTextChange(element.scope, e)}
+						class="focus:border-primary-500 focus:ring-primary-500 mt-1 block w-full rounded-md border border-neutral-300 px-3 py-2 shadow-sm focus:outline-none dark:border-neutral-600 dark:bg-neutral-700 dark:text-white"
+					>
+						{#each element.constraints?.options || [] as option, index (index)}
+							<option value={option}>{option}</option>
+						{/each}
+					</select>
+				</label>
+			{:else}
+				<!-- Default text input -->
+				<label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+					{element.label}
+					<input
+						type="text"
+						value={element.value || ''}
+						oninput={(e) => handleTextChange(element.scope, e)}
+						class="focus:border-primary-500 focus:ring-primary-500 mt-1 block w-full rounded-md border border-neutral-300 px-3 py-2 shadow-sm focus:outline-none dark:border-neutral-600 dark:bg-neutral-700 dark:text-white"
+					/>
+				</label>
+			{/if}
+		</div>
+	{/each}
+</div>

package/src/lib/deprecated/nested.js

@@ -0,0 +1,192 @@
+import { omit, pick } from 'ramda'
+import { isObject } from '@rokkit/core'
+import { typeOf } from '@rokkit/data'
+import { deriveSchemaFromValue } from '../schema'
+import { deriveLayoutFromValue } from '../layout'
+
+/**
+ * Flattens an object into a flat object
+ *
+ * @param {Object} input - The object to flatten
+ * @param {String} scope - The scope of the object
+ */
+export function flattenObject(input, scope = '#') {
+	// eslint-disable-next-line no-use-before-define
+	return flattenAttributes(input, scope).reduce(
+		// eslint-disable-next-line no-use-before-define
+		(acc, item) => ({ ...acc, ...flattenElement(item) }),
+		{
+			[scope]: {
+				type: 'object',
+				value: input,
+				scope,
+				key: scope.split('/').slice(-1)[0]
+			}
+		}
+	)
+}
+/**
+ * Flattens an object into an array of key-value pairs
+ *
+ * @param {Object} input - The object to flatten
+ * @param {String} scope - The scope of the object
+ */
+export function flattenAttributes(input, scope = '#') {
+	return Object.entries(input).map(([key, value]) => ({
+		key,
+		value,
+		type: typeOf(value),
+		scope: [scope, key].join('/')
+	}))
+}
+
+/**
+ * Derives a nested schema from an object
+ *
+ * @param {Object} input - The object to derive the schema from
+ * @param {String} scope - The scope of the object
+ * @returns {Object} The derived schema
+ */
+export function deriveNestedSchema(input, scope = '#') {
+	const elements = flattenAttributes(input)
+	const atoms = elements.filter(({ type }) => !['object', 'array'].includes(type))
+
+	const schema = {
+		type: 'object'
+	}
+
+	if (atoms.length > 0) {
+		schema.properties = atoms.reduce(
+			(acc, { key, type, value }) => ({
+				...acc,
+				[key]: {
+					type,
+					default: value
+				}
+			}),
+			{}
+		)
+		schema.layout = {
+			type: 'vertical',
+			elements: atoms.map((el) => ({ label: el.key, scope: el.scope }))
+		}
+	}
+
+	if (atoms.length < elements.length) {
+		// eslint-disable-next-line no-use-before-define
+		schema.children = deriveSchemaForChildren(elements, scope)
+	}
+
+	if (scope !== '#') return schema
+	return schema.properties ? [schema] : schema.children
+}
+
+/**
+ * Derives the children of an object
+ *
+ * @param {Array} elements - The elements to derive children from
+ * @param {String} scope - The scope of the object
+ * @returns {Array} The derived children
+ */
+function deriveSchemaForChildren(elements, scope) {
+	return [
+		...elements
+			.filter(({ type }) => type === 'object')
+			.map((item) => ({
+				...omit(['value', 'scope'], item),
+				scope: [scope, item.key].join('/'),
+				...deriveNestedSchema(item.value, [scope, item.key].join('/'))
+			})),
+		...elements
+			.filter(({ type }) => type === 'array')
+			.map((item) => ({
+				...omit(['value'], item),
+				default: [],
+				scope: [scope, item.key].join('/'),
+				items: deriveSchemaFromValue(item.value.length ? item.value[0] : null),
+				layout: deriveLayoutFromValue(item.value.length ? item.value[0] : null)
+			}))
+	]
+}
+
+/**
+ * Flattens an element into a flat object
+ *
+ * @param {Object} element - The element to flatten
+ */
+export function flattenElement(element) {
+	if (element.type === 'object') {
+		return flattenObject(element.value, element.scope)
+	} else if (element.type === 'array') {
+		return element.value
+			.map((item, index) => ({
+				value: item,
+				scope: [element.scope, `[${index}]`].join('/'),
+				key: `[${index}]`,
+				type: typeOf(item)
+			}))
+			.reduce((acc, item) => ({ ...acc, ...flattenElement(item) }), {
+				[element.scope]: pick(['key', 'type', 'scope', 'value'], element)
+			})
+	}
+	return { [element.scope]: element }
+}
+
+/**
+ * Generates an index array referencing the input data
+ *
+ * @param {Object} data - The flat object to index
+ * @param {String} key - The key to use as index
+ */
+export function generateIndex(data, key = 'scope') {
+	const index = data
+		.map((item) => ({
+			...item,
+			_path: item[key],
+			_isParent: false,
+			_isExpanded: true,
+			_levels: []
+		}))
+		.sort((a, b) => a[key].localeCompare(b[key]))
+		.filter((item) => item[key] !== '#')
+
+	let levels = [0]
+	let current = 0
+
+	index.forEach((item, row) => {
+		const path = item._path.split('/').slice(1)
+		item._depth = path.length - 1
+		if (row === 0) {
+			item._levels = [0]
+		} else if (path.length > levels.length) {
+			index[row - 1]._isParent = true
+			item._levels = [...levels, 0]
+		} else {
+			current = levels[path.length - 1] + 1
+			item._levels = [...levels.slice(0, path.length - 1), current]
+		}
+		levels = item._levels
+	})
+	return index
+}
+
+/**
+ * Generates a tree table from the input data
+ *
+ * @param {Object} data - The data to generate the tree table from
+ * @param {String} key - The key to use as index
+ * @param {Boolean} ellipsis - Whether to truncate the value
+ */
+export function generateTreeTable(data, key = 'scope', ellipsis = false) {
+	let result = []
+	if (Array.isArray(data)) result = generateIndex(data, key)
+	if (isObject(data)) result = generateIndex(Object.values(flattenObject(data)), key)
+
+	if (ellipsis) {
+		result = result.map((item) => ({
+			...omit(['value'], item),
+			value: ['array', 'object'].includes(item.type) ? '...' : item.value
+		}))
+	}
+	return result
+}