@rokkit/forms 1.0.0-next.122

package/src/lib/fields.spec.js

@@ -0,0 +1,250 @@
+import { describe, it, expect } from 'vitest'
+import { deriveSchemaFromValue } from './schema.js'
+import { deriveLayoutFromValue } from './layout.js'
+import { findAttributeByPath, getSchemaWithLayout } from './fields.js'
+
+import inputLayout from './fixtures/input-layout.json'
+import inputSchema from './fixtures/input-schema.json'
+import resultWithGeneratedSchema from './fixtures/result-with-generated-schema.json'
+import resultWithGeneratedLayout from './fixtures/result-with-generated-layout.json'
+import combinedSchemaLayout from './fixtures/combined-schema-layout.json'
+import resultWithOnlyData from './fixtures/result-with-only-data.json'
+
+describe('fields', () => {
+	describe('findAttributeByPath', () => {
+		it('should find attribute from path', () => {
+			const schema = {
+				type: 'object',
+				properties: {
+					name: { type: 'string' },
+					age: { type: 'integer', min: 0, max: 100 }
+				}
+			}
+			let attribute = findAttributeByPath('#/name', schema)
+			expect(attribute).toEqual({
+				key: 'name',
+				props: {
+					type: 'string'
+				}
+			})
+
+			attribute = findAttributeByPath('#/age', schema)
+			expect(attribute).toEqual({
+				key: 'age',
+				props: {
+					type: 'integer',
+					min: 0,
+					max: 100
+				}
+			})
+		})
+
+		it('should find attribute from nested path', () => {
+			const schema = {
+				type: 'object',
+				properties: {
+					address: {
+						type: 'object',
+						properties: {
+							street: { type: 'string' },
+							city: { type: 'string' },
+							state: { type: 'string' },
+							zip: { type: 'integer' }
+						}
+					}
+				}
+			}
+			let attribute = findAttributeByPath('#/address/street', schema)
+			expect(attribute).toEqual({
+				key: 'street',
+				props: {
+					type: 'string'
+				}
+			})
+
+			attribute = findAttributeByPath('#/address/city', schema)
+			expect(attribute).toEqual({
+				key: 'city',
+				props: {
+					type: 'string'
+				}
+			})
+
+			attribute = findAttributeByPath('#/address/state', schema)
+			expect(attribute).toEqual({
+				key: 'state',
+				props: {
+					type: 'string'
+				}
+			})
+
+			attribute = findAttributeByPath('#/address/zip', schema)
+			expect(attribute).toEqual({
+				key: 'zip',
+				props: {
+					type: 'integer'
+				}
+			})
+		})
+
+		it('should throw error if path is invalid', () => {
+			const schema = {
+				type: 'object',
+				properties: {
+					name: { type: 'string' },
+					age: { type: 'integer', min: 0, max: 100 }
+				}
+			}
+			expect(() => {
+				findAttributeByPath('#/invalid', schema)
+			}).toThrowError('Invalid scope: #/invalid')
+		})
+
+		it('should return props if scope is missing', () => {
+			const schema = {
+				type: 'object',
+				properties: {
+					name: { type: 'string' },
+					age: { type: 'integer', min: 0, max: 100 }
+				}
+			}
+			const attribute = findAttributeByPath(null, schema)
+			expect(attribute).toEqual({
+				props: schema
+			})
+		})
+	})
+
+	describe('getSchemaWithLayout', () => {
+		const value = {
+			name: 'John',
+			age: 30,
+			address: {
+				street: '123 Main St',
+				city: 'New York',
+				state: 'NY',
+				zip: 10001
+			}
+		}
+		const schema = inputSchema
+		const layout = inputLayout
+
+		it('should combine generated schema and layout', () => {
+			const value = {
+				name: 'John',
+				age: 30
+			}
+			const schema = getSchemaWithLayout(deriveSchemaFromValue(value), deriveLayoutFromValue(value))
+			expect(schema).toEqual({
+				type: 'vertical',
+				elements: [
+					{
+						key: 'name',
+
+						props: {
+							label: 'name',
+							type: 'string'
+						}
+					},
+					{
+						key: 'age',
+
+						props: {
+							label: 'age',
+							type: 'integer'
+						}
+					}
+				]
+			})
+		})
+
+		it('should combine generated schema & layout for nested data', () => {
+			const schema = getSchemaWithLayout(deriveSchemaFromValue(value), deriveLayoutFromValue(value))
+			expect(schema).toEqual(resultWithOnlyData)
+		})
+
+		it('should combine schema with generated layout', () => {
+			const combined = getSchemaWithLayout(schema, deriveLayoutFromValue(value))
+			expect(combined).toEqual(resultWithGeneratedLayout)
+		})
+
+		it('should combine layout with generated schema', () => {
+			const combined = getSchemaWithLayout(deriveSchemaFromValue(value), layout)
+			expect(combined).toEqual(resultWithGeneratedSchema)
+		})
+
+		it('should combine the schema and layout', () => {
+			const combined = getSchemaWithLayout(schema, layout)
+			expect(combined).toEqual(combinedSchemaLayout)
+		})
+
+		it('should combine the schema and layout for nested array', () => {
+			const schema = {
+				type: 'object',
+				properties: {
+					users: {
+						type: 'array',
+						items: {
+							type: 'object',
+							properties: {
+								name: { type: 'string' },
+								age: { type: 'integer' }
+							}
+						}
+					}
+				}
+			}
+			const layout = {
+				type: 'vertical',
+				elements: [
+					{
+						scope: '#/users',
+						schema: {
+							type: 'vertical',
+
+							elements: [
+								{
+									scope: '#/name',
+									label: 'name'
+								},
+								{
+									scope: '#/age',
+									label: 'age'
+								}
+							]
+						}
+					}
+				]
+			}
+
+			const combined = getSchemaWithLayout(schema, layout)
+			expect(combined).toEqual({
+				type: 'vertical',
+				elements: [
+					{
+						key: 'users',
+						props: {
+							type: 'array',
+							schema: {
+								type: 'vertical',
+								elements: [
+									{
+										key: 'name',
+										props: {
+											label: 'name',
+											type: 'string'
+										}
+									},
+									{
+										key: 'age',
+										props: { label: 'age', type: 'integer' }
+									}
+								]
+							}
+						}
+					}
+				]
+			})
+		})
+	})
+})

package/src/lib/index.js

@@ -0,0 +1,7 @@
+export { FormBuilder } from './builder.svelte.js'
+export { validateField, validateAll, createMessage, patterns } from './validation.js'
+export { default as FormRenderer } from './FormRenderer.svelte'
+export { default as Input } from './Input.svelte'
+export * from './schema.js'
+export * from './layout.js'
+export * from './fields.js'

package/src/lib/layout.js

@@ -0,0 +1,63 @@
+import { isObject } from '@rokkit/core'
+
+/**
+ * Derives a layout from a given object value.
+ * @param {Object} val
+ * @param {string} scope
+ * @param {string} label
+ * @returns {import('../types').DataLayout}
+ */
+function deriveElementLayout(val, scope, label) {
+	const path = `${scope}/${label}`
+	if (isObject(val)) {
+		return {
+			title: label,
+			scope: path,
+			// eslint-disable-next-line no-use-before-define
+			...deriveLayoutFromValue(val, path)
+		}
+	}
+	return { label, scope: path }
+}
+
+/**
+ * Derives a layout from a given object value.
+ * @param {Object} value
+ * @param {string} scope
+ * @returns {import('../types').DataLayout}
+ */
+function deriveObjectLayout(value, scope) {
+	const elements = Object.entries(value).map(([label, val]) =>
+		deriveElementLayout(val, scope, label)
+	)
+	return { type: 'vertical', elements }
+}
+
+/**
+ * Derives a layout from a given array value.
+ * @param {Array<any>} value
+ * @param {string} scope
+ * @returns {import('../types').DataLayout}
+ */
+function deriveArrayLayout(value, scope) {
+	// eslint-disable-next-line no-use-before-define
+	const schema = deriveLayoutFromValue(value[0], '#')
+	return {
+		scope,
+		schema
+	}
+}
+/**
+ * Derives a layout from a given value.
+ * @param {any} value
+ * @param {string} scope
+ * @returns {import('../types').DataLayout}
+ */
+export function deriveLayoutFromValue(value, scope = '#') {
+	if (Array.isArray(value)) {
+		return deriveArrayLayout(value, scope)
+	} else if (typeof value === 'object' && value !== null) {
+		return deriveObjectLayout(value, scope)
+	}
+	return { type: 'vertical', elements: [{ scope }] }
+}

package/src/lib/schema.js

@@ -0,0 +1,32 @@
+import { typeOf } from '@rokkit/data'
+
+/**
+ * Derives a schema for properties of an object.
+ *
+ * @param {Object} data
+ * @returns
+ */
+function deriveObjectProperties(data) {
+	const properties = {}
+	for (const [key, value] of Object.entries(data)) {
+		// eslint-disable-next-line no-use-before-define
+		properties[key] = deriveSchemaFromValue(value)
+	}
+	return properties
+}
+
+/**
+ * Derives a schema from a given value.
+ *
+ * @param {any} data
+ * @returns {import('../types').DataSchema}
+ */
+export function deriveSchemaFromValue(data) {
+	const schema = { type: typeOf(data) }
+	if (schema.type === 'array') {
+		schema.items = deriveSchemaFromValue(data.length > 0 ? data[0] : {})
+	} else if (schema.type === 'object') {
+		schema.properties = deriveObjectProperties(data)
+	}
+	return schema
+}

package/src/lib/validation.js

@@ -0,0 +1,273 @@
+/**
+ * Validation utility for FormBuilder
+ * Provides field validation functions that return message objects
+ */
+
+/**
+ * @typedef {Object} ValidationMessage
+ * @property {string} state - Message state: 'error', 'warning', 'info', 'success'
+ * @property {string} text - Message text content
+ */
+
+/**
+ * Helper function to check if a value is empty
+ * @private
+ * @param {any} value - Value to check
+ * @returns {boolean} True if empty
+ */
+function isEmpty(value) {
+	return value === undefined || value === null || value === ''
+}
+
+/**
+ * Validate string field
+ * @private
+ * @param {string} value - String value
+ * @param {Object} schema - Field schema
+ * @param {string} label - Field label
+ * @returns {ValidationMessage|null}
+ */
+function validateString(value, schema, label) {
+	// Convert to string if not already
+	const stringValue = String(value)
+
+	// Pattern validation
+	if (schema.pattern) {
+		const regex = new RegExp(schema.pattern)
+		if (!regex.test(stringValue)) {
+			return {
+				state: 'error',
+				text: `${label} format is invalid`
+			}
+		}
+	}
+
+	// Length validations
+	if (schema.minLength !== undefined && stringValue.length < schema.minLength) {
+		return {
+			state: 'error',
+			text: `${label} must be at least ${schema.minLength} characters`
+		}
+	}
+
+	if (schema.maxLength !== undefined && stringValue.length > schema.maxLength) {
+		return {
+			state: 'error',
+			text: `${label} must be no more than ${schema.maxLength} characters`
+		}
+	}
+
+	// Enum validation
+	if (schema.enum && !schema.enum.includes(stringValue)) {
+		return {
+			state: 'error',
+			text: `${label} must be one of: ${schema.enum.join(', ')}`
+		}
+	}
+
+	return null
+}
+
+/**
+ * Validate number field
+ * @private
+ * @param {number} value - Number value
+ * @param {Object} schema - Field schema
+ * @param {string} label - Field label
+ * @returns {ValidationMessage|null}
+ */
+function validateNumber(value, schema, label) {
+	const numValue = Number(value)
+
+	// Check if it's a valid number
+	if (isNaN(numValue)) {
+		return {
+			state: 'error',
+			text: `${label} must be a valid number`
+		}
+	}
+
+	// Integer validation
+	if (schema.type === 'integer' && !Number.isInteger(numValue)) {
+		return {
+			state: 'error',
+			text: `${label} must be a whole number`
+		}
+	}
+
+	// Minimum validation (support both min and minimum)
+	const minimum = schema.min !== undefined ? schema.min : schema.minimum
+	if (minimum !== undefined && numValue < minimum) {
+		return {
+			state: 'error',
+			text: `${label} must be at least ${minimum}`
+		}
+	}
+
+	// Maximum validation (support both max and maximum)
+	const maximum = schema.max !== undefined ? schema.max : schema.maximum
+	if (maximum !== undefined && numValue > maximum) {
+		return {
+			state: 'error',
+			text: `${label} must be no more than ${maximum}`
+		}
+	}
+
+	return null
+}
+
+/**
+ * Validate boolean field
+ * @private
+ * @param {boolean} value - Boolean value
+ * @param {Object} schema - Field schema
+ * @param {string} label - Field label
+ * @returns {ValidationMessage|null}
+ */
+function validateBoolean(value, schema, label) {
+	// Convert to boolean if not already
+	const boolValue = Boolean(value)
+
+	// For required boolean fields, we might want to ensure it's explicitly true
+	if (schema.required && schema.mustBeTrue && !boolValue) {
+		return {
+			state: 'error',
+			text: `${label} must be accepted`
+		}
+	}
+
+	return null
+}
+
+/**
+ * Create validation messages for informational purposes
+ * @param {string} fieldPath - Field path
+ * @param {string} state - Message state ('info', 'warning', 'success')
+ * @param {string} text - Message text
+ * @returns {Object} Field path to message mapping
+ */
+export function createMessage(fieldPath, state, text) {
+	return {
+		[fieldPath]: { state, text }
+	}
+}
+
+/**
+ * Common validation patterns
+ */
+export const patterns = {
+	email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+	phone: /^\+?[\d\s\-\(\)]{10,}$/,
+	url: /^https?:\/\/[^\s/$.?#].[^\s]*$/,
+	zipCode: /^\d{5}(-\d{4})?$/,
+	creditCard: /^\d{4}\s?\d{4}\s?\d{4}\s?\d{4}$/
+}
+
+/**
+ * Get field schema by path
+ * @private
+ * @param {string} fieldPath - Field path
+ * @param {Object} schema - Schema object
+ * @returns {Object|null} Field schema
+ */
+function getFieldSchema(fieldPath, schema) {
+	if (!schema.properties) return null
+
+	const keys = fieldPath.split('/')
+	let current = schema.properties
+
+	for (const key of keys) {
+		if (current && current[key]) {
+			current = current[key]
+		} else {
+			return null
+		}
+	}
+
+	return current
+}
+
+/**
+ * Get value by path from data object
+ * @private
+ * @param {Object} data - Data object
+ * @param {string} path - Field path
+ * @returns {any} Field value
+ */
+function getValueByPath(data, path) {
+	const keys = path.split('/')
+	let current = data
+
+	for (const key of keys) {
+		if (current && typeof current === 'object') {
+			current = current[key]
+		} else {
+			return undefined
+		}
+	}
+
+	return current
+}
+
+/**
+ * Validate a single field value against its schema
+ * @param {any} value - Field value to validate
+ * @param {Object} fieldSchema - Field schema definition
+ * @param {string} [fieldLabel] - Field label for error messages
+ * @returns {ValidationMessage|null} Validation message or null if valid
+ */
+export function validateField(value, fieldSchema, fieldLabel = 'Field') {
+	if (!fieldSchema) return null
+
+	// Required field validation
+	if (fieldSchema.required && isEmpty(value)) {
+		return {
+			state: 'error',
+			text: `${fieldLabel} is required`
+		}
+	}
+
+	// Skip other validations if field is empty and not required
+	if (isEmpty(value)) return null
+
+	// Type-specific validations
+	switch (fieldSchema.type) {
+		case 'string':
+			return validateString(value, fieldSchema, fieldLabel)
+		case 'number':
+		case 'integer':
+			return validateNumber(value, fieldSchema, fieldLabel)
+		case 'boolean':
+			return validateBoolean(value, fieldSchema, fieldLabel)
+		default:
+			return null
+	}
+}
+/**
+ * Validate all fields in a data object
+ * @param {Object} data - Data object to validate
+ * @param {Object} schema - Schema object with properties
+ * @param {Object} layout - Layout object with element definitions
+ * @returns {Object} Validation results keyed by field path
+ */
+export function validateAll(data, schema, layout) {
+	const validationResults = {}
+
+	if (!layout.elements || !schema.properties) return validationResults
+
+	for (const element of layout.elements) {
+		if (!element.scope) continue
+
+		const fieldPath = element.scope.replace(/^#\//, '')
+		const fieldSchema = getFieldSchema(fieldPath, schema)
+		const fieldLabel = element.label || element.title || fieldPath
+		const value = getValueByPath(data, fieldPath)
+
+		const result = validateField(value, fieldSchema, fieldLabel)
+		if (result) {
+			validationResults[fieldPath] = result
+		}
+	}
+
+	return validationResults
+}

package/src/types.js

@@ -0,0 +1,29 @@
+import { toHyphenCase } from '@rokkit/core'
+// skipcq: JS-C1003 - Importing all components from atoms
+import * as NativeInput from '@rokkit/forms'
+// skipcq: JS-C1003 - Importing all components from molecules
+// import CheckBox from '@rokkit/ui'
+
+// import InputSelect from './InputSelect.svelte'
+// import InputSwitch from './InputSwitch.svelte'
+
+function extractComponentMap(components, prefix = /^Input/) {
+	return Object.entries(components).reduce(
+		(acc, [name, component]) => ({
+			...acc,
+			[toHyphenCase(name.replace(prefix, ''))]: component
+		}),
+		{}
+	)
+}
+const native = extractComponentMap(NativeInput)
+
+export const types = {
+	string: NativeInput.InputText,
+	integer: NativeInput.InputNumber,
+	// boolean: CheckBox,
+	// enum: InputSelect,
+	phone: NativeInput.InputTel,
+	...native
+	// ...extractComponentMap({ InputSelect, InputSwitch })
+}