@rokkit/forms 1.0.0-next.124 → 1.0.0-next.127

package/src/forms-old/lib/form.js

@@ -1,72 +0,0 @@
-export const messages = {
-	required: '{name} is required',
-	email: '{name} should be a valid email address',
-	url: '{name} should be a valid URL',
-	color: '{name} should be a valid color',
-	number: '{name} should be a valid number',
-	min: '{name} should be greater than or equal to {min}',
-	max: '{name} should be less than or equal to {max}',
-	pattern: '{name} should match the pattern {pattern}',
-	exclusiveMin: '{name} should be greater than {min}',
-	exclusiveMax: '{name} should be less than {max}',
-	minLength: '{name} should be at least {minLength} characters',
-	maxLength: '{name} should be at most {maxLength} characters',
-	minItems: '{name} should have at least {minItems} items',
-	maxItems: '{name} should have at most {maxItems} items',
-	uniqueItems: '{name} should have unique items',
-	contains: '{name} should contain {contains}',
-	exclude: '{name} should not contain {exclude}',
-	integer: '{name} should be an integer'
-}
-
-export const dataTypes = {
-	integer: {
-		editor: 'inputText',
-		props: { type: 'number', step: 1 },
-		availableProps: ['min', 'max']
-	},
-	number: {
-		editor: 'inputText',
-		props: { type: 'number', step: 0.01 },
-		availableProps: ['min', 'max']
-	},
-	range: {
-		editor: 'inputRange',
-		props: { type: 'range' }
-	},
-
-	string: {
-		default: 'inputText',
-		text: 'inputText',
-		password: 'inputPassword',
-		email: 'inputEmail',
-		url: 'inputUrl',
-		tel: 'inputTel',
-		date: 'inputDate',
-		'datetime-local': 'inputDateTimeLocal',
-		time: 'inputTime',
-		week: 'inputWeek',
-		month: 'inputMonth',
-		file: 'inputFile',
-		hidden: 'inputHidden',
-		color: 'inputColor',
-		colorpicker: 'inputColorPicker'
-	},
-	enum: {
-		default: 'inputSelect',
-		select: 'inputSelect',
-		radio: 'inputRadio'
-	},
-	boolean: {
-		default: 'inputCheckbox',
-		checkbox: 'inputCheckbox',
-		switch: 'inputSwitch',
-		radio: 'inputRadio'
-	},
-	array: {
-		default: 'inputArray'
-	},
-	object: {
-		default: 'inputObject'
-	}
-}

package/src/forms-old/lib/index.js

@@ -1,12 +0,0 @@
-export { messages, dataTypes } from './form'
-export { deriveSchemaFromValue } from './schema'
-export { deriveLayoutFromValue } from './layout'
-export { getSchemaWithLayout, findAttributeByPath } from './fields'
-export {
-	deriveNestedSchema,
-	flattenAttributes,
-	flattenObject,
-	flattenElement,
-	generateIndex,
-	generateTreeTable
-} from './nested'

package/src/forms-old/mocks/CustomField.svelte

@@ -1,7 +0,0 @@
-<script>
-	let { value, name, label, type, ...extraProps } = $props()
-</script>
-
-<h1>{type}:{label}</h1>
-<p>{name}:{JSON.stringify(value)}</p>
-<p>{JSON.stringify(Object.keys(extraProps))}</p>

package/src/forms-old/mocks/CustomWrapper.svelte

@@ -1,8 +0,0 @@
-<script>
-	let { title, type, children } = $props()
-</script>
-
-<field-layout class={type}>
-	<h1>{title}</h1>
-	{@render children?.()}
-</field-layout>

package/src/forms-old/mocks/Register.svelte

@@ -1,25 +0,0 @@
-<script>
-	import { setContext } from 'svelte'
-	// import { writable } from 'svelte/store'
-	import Wrapper from '..//Wrapper.svelte'
-	import Item from '../Item.svelte'
-	import Tabs from '../Tabs.svelte'
-	const registry = $state({})
-	setContext('registry', registry)
-
-	let { Template, using, properties } = $props()
-
-	using = {
-		editors: {},
-		components: {},
-		wrappers: {},
-		navigators: {},
-		...using
-	}
-	registry.editors = { ...using.editors }
-	registry.components = { default: Item, ...using.components }
-	registry.wrappers = { default: Wrapper, ...using.wrappers }
-	registry.navigators = { default: Tabs, ...using.navigators }
-</script>
-
-<Template {...properties} />

package/src/inp/Input.svelte

@@ -1,17 +0,0 @@
-<script>
-	import { getContext } from 'svelte'
-	import { types } from './types'
-
-	const registry = getContext('registry')
-
-	let { value, type = 'text', using = {}, ...restProps } = $props()
-
-	using = { ...types, ...using, ...registry?.editors }
-	let Template = using[type]
-</script>
-
-{#if type in using}
-	<Template bind:value {...restProps} on:change on:focus on:blur />
-{:else}
-	<error>Type "{type}" is not supported by Input</error>
-{/if}

package/src/inp/InputField.svelte

@@ -1,69 +0,0 @@
-<script>
-	import { getContext } from 'svelte'
-	import { pick, omit } from 'ramda'
-	import Icon from '../Icon.svelte'
-	import Input from './Input.svelte'
-	import { types } from './types'
-
-	const registry = getContext('registry')
-
-	let {
-		class: className,
-		name,
-		value,
-		type,
-		required,
-		status,
-		disabled,
-		message,
-		using,
-		nolabel,
-		icon,
-		label,
-		description,
-		...restProps
-	} = $props()
-
-	using = { ...types, ...registry, ...using }
-	let pass = status === 'pass'
-	let fail = status === 'fail'
-	let warn = status === 'warn'
-	let rootProps = pick(['id'], restProps)
-	let properties = {
-		required,
-		readOnly: disabled,
-		...omit(['id'], restProps),
-		name
-	}
-</script>
-
-<input-field
-	{...rootProps}
-	class="flex flex-col input-{type} {className} "
-	class:disabled
-	class:pass
-	class:fail
-	class:warn
-	class:empty={!value}
->
-	{#if label && !nolabel && !['switch', 'checkbox'].includes(type)}
-		<label for={name} class:required>
-			{label}
-		</label>
-	{/if}
-	<field class="flex w-full flex-row items-center" aria-label={description ?? label ?? name}>
-		{#if icon}
-			<Icon name={icon} />
-		{/if}
-		{#if type === 'switch'}
-			<label for={name} class:required>{label}</label>
-		{/if}
-		<Input id={name} bind:value {type} {...properties} {using} on:change />
-		{#if type === 'checkbox'}
-			<label for={name} class:required>{label}</label>
-		{/if}
-	</field>
-	{#if message}
-		<message class={status}>{message}</message>
-	{/if}
-</input-field>

package/src/inp/InputSelect.svelte

@@ -1,23 +0,0 @@
-<script>
-	import { getValue, defaultFields } from '@rokkit/core'
-	import Select from '../Select.svelte'
-
-	let { name, value, options = [], fields, onchange, ...restProps } = $props()
-
-	let selected = $state()
-	let configFields = $derived({ ...defaultFields, ...fields })
-
-	function handle(data) {
-		value = getValue(data.value, configFields)
-		onchange?.(data)
-	}
-
-	$effect(() => {
-		if (value !== getValue(selected, configFields)) {
-			selected = options.find((option) => getValue(option, configFields) === value)
-		}
-	})
-</script>
-
-<input {name} type="hidden" bind:value />
-<Select name="" value={selected} {options} {fields} {...restProps} onchange={handle} />

package/src/inp/InputSwitch.svelte

@@ -1,19 +0,0 @@
-<script>
-	import { getValue, defaultFields } from '@rokkit/core'
-	import Switch from '../Switch.svelte'
-
-	let { name, value, options, fields, ...restProps } = $props()
-	// let selected = $state(null)
-	let configFields = $derived({ ...defaultFields, ...fields })
-	function handle(data) {
-		value = getValue(data.value, configFields)
-		dispatch('change', data.value)
-	}
-	let selected = $derived(options.find((option) => getValue(option, configFields) === value))
-	// $effect(() => {
-	// 	selected = options.find((option) => getValue(option, configFields) === value)
-	// })
-</script>
-
-<input {name} type="hidden" bind:value />
-<Switch bind:value={selected} {options} {fields} {...restProps} onchange={handle} />

package/src/lib/deprecated/Form.svelte

@@ -1,17 +0,0 @@
-<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

@@ -1,121 +0,0 @@
-<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="text-surface-700 dark:text-surface-300 block text-sm font-medium">
-					{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="bg-surface-200 dark:bg-surface-700 mt-1 h-2 w-full cursor-pointer appearance-none rounded-lg"
-					/>
-				</label>
-			{:else if element.type === 'number'}
-				<label class="text-surface-700 dark:text-surface-300 block text-sm font-medium">
-					{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 border-surface-300 dark:border-surface-600 dark:bg-surface-700 mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none dark:text-white"
-					/>
-				</label>
-			{:else if element.type === 'checkbox'}
-				<label class="text-surface-700 dark:text-surface-300 flex items-center text-sm font-medium">
-					<input
-						type="checkbox"
-						checked={element.value}
-						onchange={(e) => handleCheckboxChange(element.scope, e)}
-						class="text-primary-600 focus:ring-primary-500 border-surface-300 dark:border-surface-600 mr-2 h-4 w-4 rounded"
-					/>
-					{element.label}
-				</label>
-			{:else if element.type === 'select'}
-				<label class="text-surface-700 dark:text-surface-300 block text-sm font-medium">
-					{element.label}
-					<select
-						value={element.value}
-						onchange={(e) => handleTextChange(element.scope, e)}
-						class="focus:border-primary-500 focus:ring-primary-500 border-surface-300 dark:border-surface-600 dark:bg-surface-700 mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none 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="text-surface-700 dark:text-surface-300 block text-sm font-medium">
-					{element.label}
-					<input
-						type="text"
-						value={element.value || ''}
-						oninput={(e) => handleTextChange(element.scope, e)}
-						class="focus:border-primary-500 focus:ring-primary-500 border-surface-300 dark:border-surface-600 dark:bg-surface-700 mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none dark:text-white"
-					/>
-				</label>
-			{/if}
-		</div>
-	{/each}
-</div>

package/src/lib/deprecated/nested.js

@@ -1,192 +0,0 @@
-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
-}