@rokkit/forms 1.0.0-next.125 → 1.0.0-next.128

package/src/ListEditor.svelte

@@ -1,44 +0,0 @@
-<script>
-	import List from './List.svelte'
-	import FieldLayout from './FieldLayout.svelte'
-	import { defaultFields } from '@rokkit/core'
-	import { getContext } from 'svelte'
-
-	// const dispatch = createEventDispatcher()
-	const registry = getContext('registry')
-
-	let {
-		class: className,
-		value,
-		fields = defaultFields,
-		schema,
-		path = [],
-		below = false,
-		children
-	} = $props()
-
-	let index = 0
-	let item = $state(value[index])
-	let location = $state([...path, index])
-
-	function handleSelect(event) {
-		index = event.detail.indices[0]
-		item = event.detail.item
-		location = [...path, ...event.detail.indices]
-		dispatch('select', { item: value, indices: path })
-	}
-</script>
-
-<list-editor class="flex {className}">
-	<List
-		bind:items={value}
-		bind:value={item}
-		{fields}
-		using={registry.components}
-		on:select={handleSelect}
-	/>
-	<item-editor class="flex" class:below>
-		{@render children?.()}
-		<FieldLayout bind:value={item} {schema} path={location} />
-	</item-editor>
-</list-editor>

package/src/NestedEditor.svelte

@@ -1,85 +0,0 @@
-<script>
-	import { pick } from 'ramda'
-	import { createEventDispatcher } from 'svelte'
-	import { Tree, DataEditor, Tree as TreeTable, Tabs } from '@rokkit/ui'
-	import { generateTreeTable, deriveNestedSchema } from './lib'
-
-	const dispatch = createEventDispatcher()
-
-	export let value
-	export let schema = deriveNestedSchema(value)
-	export let using = {}
-	export let fields = {
-		text: 'key',
-		icon: 'type',
-		iconPrefix: 'type'
-	}
-	let node = {
-		schema: null,
-		layout: null
-	}
-	let nodeValue = value
-	let nodeType = null
-	let nodeItem = null
-	let columns = [
-		{ key: 'scope', path: true, label: 'path', fields: { text: 'key' } },
-		{ key: 'value', label: 'value', fields: { text: 'value', icon: 'type', iconPrefix: 'type' } }
-	]
-
-	function handleChange() {
-		dispatch('change', value)
-	}
-	function handleMove(event) {
-		dispatch('change', value)
-		const scope = event.detail.scope.split('/').slice(1)
-
-		node.schema = pick(['type', 'properties', 'items'], event.detail)
-		node.layout = event.detail.layout
-
-		nodeValue = value
-		nodeType = event.detail.type
-
-		for (let i = 0; i < scope.length; i++) {
-			nodeValue = nodeValue[scope[i]]
-		}
-	}
-
-	$: tableData = node?.layout ? [] : generateTreeTable(nodeValue ?? value, 'scope', true)
-</script>
-
-<container class="flex h-full w-full flex-row">
-	<aside class="border-r-surface-z2 flex h-full w-80 border-r">
-		<Tree items={schema} {fields} class="h-full w-full" on:move={handleMove} />
-	</aside>
-	<content class="flex h-full w-full flex-col gap-4 overflow-hidden p-8">
-		<slot />
-		<section class="flex w-full flex-grow flex-col overflow-auto">
-			{#if !nodeValue}
-				<p>Select a node to edit</p>
-				<TreeTable data={tableData} {columns} class="" />
-			{:else if node.layout}
-				{#if nodeType === 'array'}
-					<p>Arrays are not supported yet.</p>
-					<Tabs options={nodeValue} bind:value={nodeItem} />
-					{#if nodeItem}
-						<DataEditor
-							bind:value={nodeItem}
-							layout={node.layout}
-							schema={node.schema.items}
-							{using}
-						/>
-						<pre>{JSON.stringify(nodeItem, null, 2)}</pre>
-					{/if}
-				{:else}
-					<DataEditor bind:value={nodeValue} {...node} {using} on:change={handleChange} />
-				{/if}
-			{:else}
-				<p>
-					No atomic attributes at this level. Select a child node to edit. Current value is below.
-				</p>
-				<TreeTable data={tableData} {columns} />
-			{/if}
-		</section>
-		<slot name="footer" />
-	</content>
-</container>

package/src/forms-old/CheckBox.svelte

@@ -1,56 +0,0 @@
-<script>
-	import { defaultStateIcons } from '@rokkit/core'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} [id]
-	 * @property {any} name
-	 * @property {boolean} [value]
-	 * @property {boolean} [readOnly]
-	 * @property {any} [stateIcons]
-	 * @property {number} [tabindex]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: classes = '',
-		id = null,
-		name,
-		value = $bindable(false),
-		readOnly = false,
-		stateIcons = defaultStateIcons.checkbox,
-		tabindex = 0
-	} = $props()
-
-	let state = $derived(value === null ? 'unknown' : value ? 'checked' : 'unchecked')
-
-	function toggle(event) {
-		event.preventDefault()
-		event.stopPropagation()
-		value = !value
-	}
-	function handleClick(event) {
-		if (!readOnly) toggle(event)
-	}
-	function handleKeydown(event) {
-		if (readOnly) return
-		if (event.key === 'Enter' || event.key === ' ') toggle(event)
-	}
-</script>
-
-<rk-checkbox
-	{id}
-	class={classes}
-	class:disabled={readOnly}
-	role="checkbox"
-	aria-checked={state}
-	aria-disabled={readOnly}
-	onclick={handleClick}
-	onkeydown={handleKeydown}
-	{tabindex}
->
-	<input hidden type="checkbox" {name} {readOnly} bind:checked={value} />
-
-	<icon class={stateIcons[state]}></icon>
-</rk-checkbox>

package/src/forms-old/DataEditor.svelte

@@ -1,30 +0,0 @@
-<script>
-	import { setContext } from 'svelte'
-	import { types } from './input/types'
-	import Wrapper from './Wrapper.svelte'
-	import Item from './Item.svelte'
-	import Tabs from './Tabs.svelte'
-	import FieldLayout from './FieldLayout.svelte'
-	import { noop } from '@rokkit/core'
-
-	const registry = $state({})
-	setContext('registry', registry)
-
-	import { deriveSchemaFromValue, deriveLayoutFromValue, getSchemaWithLayout } from './lib'
-
-	let { value, schema = null, layout = null, using = {}, onchange = noop } = $props()
-
-	registry.editors = { ...types, ...using?.editors }
-	registry.components = { default: Item, ...using?.components }
-	registry.wrappers = { default: Wrapper, ...using?.wrappers }
-	registry.navigators = { default: Tabs, ...using?.navigators }
-
-	let schemaWithLayout = $derived.by(() => {
-		return getSchemaWithLayout(
-			schema ?? deriveSchemaFromValue(value),
-			layout ?? deriveLayoutFromValue(value)
-		)
-	})
-</script>
-
-<FieldLayout schema={schemaWithLayout} bind:value {onchange} />

package/src/forms-old/FieldLayout.svelte

@@ -1,48 +0,0 @@
-<script>
-	import { getContext } from 'svelte'
-	import { omit } from 'ramda'
-	import InputField from './input/InputField.svelte'
-	import FieldLayout from './FieldLayout.svelte'
-
-	// const dispatch = createEventDispatcher()
-	const registry = getContext('registry')
-
-	export let value = {}
-	export let schema = {}
-	export let path = []
-
-	function handle() {
-		dispatch('change', value)
-	}
-
-	let Wrapper = registry.wrappers[schema.wrapper] ?? registry.wrappers.default
-	let wrapperProps = omit(['wrapper', 'elements', 'key'], schema)
-</script>
-
-{#if !Array.isArray(schema.elements)}
-	<error> Invalid schema. Expected schema to include an 'elements' array. </error>
-{:else}
-	<Wrapper {...wrapperProps}>
-		{#each schema.elements as item, index (index)}
-			{@const elementPath = item.key ? [...path, item.key] : path}
-			{@const props = { ...item.props, path: elementPath }}
-			{@const nested = Array.isArray(item.elements) && item.elements.length > 0}
-			{@const Component = item.component
-				? (registry.components[item.component] ?? registry.components.default)
-				: null}
-
-			{#if nested}
-				{#if item.key}
-					<FieldLayout {...props} schema={item} bind:value={value[item.key]} on:change={handle} />
-				{:else}
-					<FieldLayout {...props} schema={item} bind:value on:change={handle} />
-				{/if}
-			{:else if Component}
-				<Component {...item.props} value={item.key ? value[item.key] : null} />
-			{:else}
-				{@const name = elementPath.join('.')}
-				<InputField {name} bind:value={value[item.key]} {...item.props} on:change={handle} />
-			{/if}
-		{/each}
-	</Wrapper>
-{/if}

package/src/forms-old/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/forms-old/Icon.svelte

@@ -1,76 +0,0 @@
-<script>
-	import { createEmitter } from '@rokkit/core'
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} name
-	 * @property {any} [state]
-	 * @property {string} [size]
-	 * @property {'img'|'button'|'checkbox'|'option'} [role]
-	 * @property {any} [label]
-	 * @property {boolean} [disabled]
-	 * @property {number} [tabindex]
-	 * @property {any} [checked]
-	 * @event {MouseEvent} [onclick]
-	 * @event {CustomEvent} [onchange]
-	 * @event {MouseEvent} [onmouseenter]
-	 * @event {MouseEvent} [onmouseleave]
-	 */
-
-	/** @type {Props} */
-	let {
-		ref = $bindable(),
-		class: classes = '',
-		name,
-		state = null,
-		size = 'base',
-		role = 'img',
-		label = null,
-		disabled = false,
-		tabindex = $bindable(0),
-		checked = $bindable(null),
-		...events
-	} = $props()
-
-	let emitter = $derived(createEmitter(events, ['click', 'change', 'mouseenter', 'mouseleave']))
-	function handleClick(e) {
-		if (role === 'img') return
-		e.preventDefault()
-
-		if (!disabled) {
-			if (isCheckbox) {
-				checked = !checked
-				emitter?.change(checked)
-			}
-			emitter?.click()
-		}
-	}
-
-	let isCheckbox = $derived(role === 'checkbox' || role === 'option')
-	let validatedTabindex = $derived(role === 'img' || disabled ? -1 : tabindex)
-	let ariaChecked = $derived(
-		['checkbox', 'option'].includes(role) ? (checked !== null ? checked : false) : null
-	)
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<rk-icon
-	bind:this={ref}
-	data-tag-icon
-	data-state={state}
-	data-tag-button={role === 'button' ? true : undefined}
-	data-tag-checkbox={isCheckbox ? true : undefined}
-	data-size={size}
-	data-disabled={disabled}
-	class={classes}
-	{role}
-	aria-label={label ?? name}
-	aria-checked={ariaChecked}
-	onclick={handleClick}
-	onkeydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
-	tabindex={validatedTabindex}
-	onmouseenter={emitter.mouseenter}
-	onnmouseleave={emitter.nmouseleave}
->
-	<i class={name} aria-hidden="true"></i>
-</rk-icon>

package/src/forms-old/Item.svelte

@@ -1,25 +0,0 @@
-<script>
-	import Icon from './Icon.svelte'
-	import { Proxy } from '@rokkit/states'
-	/**
-	 * @typedef {Object} Props
-	 * @property {import('@rokkit/states').NodeProxy} [value]
-	 */
-
-	/** @type {Props} */
-	let { value, fields } = $props()
-	let proxy = $derived(new Proxy(value, fields))
-	let content = $derived(proxy.get('text'))
-	let ariaLabel = $derived(proxy.get('label') ?? content)
-	let icon = $derived(proxy.get('icon'))
-	let image = $derived(proxy.get('image'))
-</script>
-
-{#if icon}
-	<Icon name={icon} label={ariaLabel} />
-{:else if image}
-	<img src={image} alt={ariaLabel} />
-{/if}
-{#if content}
-	<p>{content}</p>
-{/if}

package/src/forms-old/ListEditor.svelte

@@ -1,44 +0,0 @@
-<script>
-	// import List from './List.svelte'
-	import FieldLayout from './FieldLayout.svelte'
-	import { defaultFields } from '@rokkit/core'
-	import { getContext } from 'svelte'
-
-	// const dispatch = createEventDispatcher()
-	const registry = getContext('registry')
-
-	let {
-		class: className,
-		value,
-		fields = defaultFields,
-		schema,
-		path = [],
-		below = false,
-		children
-	} = $props()
-
-	let index = 0
-	let item = $state(value[index])
-	let location = $state([...path, index])
-
-	function handleSelect(event) {
-		index = event.detail.indices[0]
-		item = event.detail.item
-		location = [...path, ...event.detail.indices]
-		dispatch('select', { item: value, indices: path })
-	}
-</script>
-
-<list-editor class="flex {className}">
-	<!-- <List
-		bind:items={value}
-		bind:value={item}
-		{fields}
-		using={registry.components}
-		on:select={handleSelect}
-	/> -->
-	<item-editor class="flex" class:below>
-		{@render children?.()}
-		<FieldLayout bind:value={item} {schema} path={location} />
-	</item-editor>
-</list-editor>

package/src/forms-old/Tabs.svelte

@@ -1,57 +0,0 @@
-<script>
-	import { Tabs } from 'bits-ui'
-
-	/**
-	 * @typedef {Object} TabGroupProps
-	 * @property {string}                   [class]      - Additional CSS class names
-	 * @property {any[]}                    [options]      Array of options to display
-	 * @property {FieldMapping}             [fields]     - Field mappings for extracting data
-	 * @property {any}                      [value]      - Selected value (bindable)
-	 * @property {number}                   [tabindex]   - Tabindex for keyboard navigation
-	 * @property {import('svelte').Snippet} [child]      - Snippet for rendering individual items
-	 * @property {import('svelte').Snippet} [children]     Snippet for rendering content
-	 * @property {Function}                 [onselect]   - Callback when item is selected
-	 */
-	/** @type TabGroupProps */
-	let { options = [], value = $bindable(), fields, child, children, onchange } = $props()
-
-	// let selectedGroup = options.find
-	let tabOptions = $derived(options.map((option) => new Proxy(option, fields)))
-	let initialValue = $state()
-	let activeOption = $state()
-	let childSnippet = $derived(child ?? defaultChild)
-
-	$effect.pre(() => {
-		activeOption = tabOptions.find((proxy) => equals(proxy.value, value))
-		if (activeOption) initialValue = activeOption.id
-	})
-
-	function handleChange() {
-		activeOption = tabOptions.find((proxy) => equals(proxy.id, initialValue))
-		value = activeOption?.value
-		onchange?.(value)
-		// value = data
-		// onSelect?.(data)
-	}
-</script>
-
-{#snippet defaultChild(item)}
-	{item.get('text')}
-{/snippet}
-
-<Tabs.Root onValueChange={handleChange} bind:value={initialValue}>
-	<Tabs.List>
-		{#each tabOptions as tab (tab.id)}
-			<Tabs.Trigger value={tab.id}>
-				{@render childSnippet(tab)}
-			</Tabs.Trigger>
-		{/each}
-	</Tabs.List>
-
-	<!-- {#each tabOptions as tab (tab.id)} -->
-	<Tabs.Content>
-		{@render children()}
-		<!-- <ComparisonCharts {logs} groupBy={tab.value} {m} /> -->
-	</Tabs.Content>
-	<!-- {/each} -->
-</Tabs.Root>

package/src/forms-old/Wrapper.svelte

@@ -1,12 +0,0 @@
-<script>
-	let { class: className = '', type = 'vertical', title = '', children } = $props()
-</script>
-
-<field-layout
-	class={className}
-	class:vertical={type === 'vertical'}
-	class:horizontal={type === 'horizontal'}
-	aria-label={title}
->
-	{@render children?.()}
-</field-layout>

package/src/forms-old/input/Input.svelte

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

package/src/forms-old/input/InputField.svelte

@@ -1,70 +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,
-		onchange,
-		...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} {onchange} />
-		{#if type === 'checkbox'}
-			<label for={name} class:required>{label}</label>
-		{/if}
-	</field>
-	{#if message}
-		<message class={status}>{message}</message>
-	{/if}
-</input-field>

package/src/forms-old/input/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/forms-old/input/InputSwitch.svelte

@@ -1,19 +0,0 @@
-<script>
-	import { getValue, defaultFields } from '@rokkit/core'
-	import Switch from '../Switch.svelte'
-
-	let { name, value, options, fields, onchange, ...restProps } = $props()
-	// let selected = $state(null)
-	let configFields = $derived({ ...defaultFields, ...fields })
-	function handle(data) {
-		value = getValue(data.value, configFields)
-		onchange?.(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/forms-old/input/types.js

@@ -1,29 +0,0 @@
-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 '../CheckBox.svelte'
-
-// 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 })
-}