@rokkit/ui 1.0.0-next.121 → 1.0.0-next.123

package/src/tree/Root.spec.svelte.js

@@ -0,0 +1,63 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { cleanup, render, fireEvent } from '@testing-library/svelte'
+import Root from './Root.svelte'
+
+describe('Tree Root Component', () => {
+	const items = [
+		{ id: 1, label: 'Node 1', children: [{ id: 2, label: 'Node 1.1' }] },
+		{ id: 3, label: 'Node 2' }
+	]
+
+	beforeEach(() => cleanup())
+
+	it('renders tree root with items', () => {
+		const { container } = render(Root, {
+			props: { items, fields: { text: 'label', children: 'children' } }
+		})
+		const rootEl = container.querySelector('[data-tree-root]')
+		expect(rootEl).not.toBeNull()
+		// const contentEls = container.querySelectorAll('[data-tree-content]')
+		// expect(Array.from(contentEls).some((el) => el.textContent.includes('Node 1'))).toBe(true)
+		// expect(Array.from(contentEls).some((el) => el.textContent.includes('Node 2'))).toBe(true)
+		expect(rootEl).toMatchSnapshot()
+	})
+
+	// it('renders header and footer if provided', () => {
+	// 	const header = () => 'Header'
+	// 	const footer = () => 'Footer'
+	// 	const { container } = render(Root, {
+	// 		props: { items, fields: { label: 'label', children: 'children' }, header, footer }
+	// 	})
+	// 	expect(container.textContent).toContain('Header')
+	// 	expect(container.textContent).toContain('Footer')
+	// 	expect(container).toMatchSnapshot()
+	// })
+
+	it('renders empty state when items are empty', () => {
+		const { container } = render(Root, {
+			props: { items: [], fields: { label: 'label', children: 'children' } }
+		})
+		expect(container.textContent).toContain('No data available')
+		expect(container).toMatchSnapshot()
+	})
+
+	// it('calls event handlers on select', async () => {
+	// 	let selectedValue = null
+	// 	const handleSelect = (e) => {
+	// 		selectedValue = e.detail.value
+	// 	}
+	// 	const { container } = render(Root, {
+	// 		props: {
+	// 			items,
+	// 			fields: { label: 'label', children: 'children' },
+	// 			onselect: handleSelect
+	// 		}
+	// 	})
+	// 	const contentEls = container.querySelectorAll('[data-tree-content]')
+	// 	const node = Array.from(contentEls).find((el) => el.textContent.includes('Node 1'))
+	// 	expect(node).not.toBeNull()
+	// 	await fireEvent.click(node)
+	// 	expect(selectedValue).toBe(items[0])
+	// 	expect(container).toMatchSnapshot()
+	// })
+})

package/src/tree/Root.svelte

@@ -0,0 +1,81 @@
+<script>
+  import { createEmitter, defaultFields } from '@rokkit/core'
+  import { navigator } from '@rokkit/actions'
+  import List from './List.svelte'
+  import { NestedController } from '@rokkit/states'
+  import { omit, has } from 'ramda'
+
+  /**
+   * @typedef {Object} Props
+   * @property {string} [class]
+   * @property {Array<any>} [items]
+   * @property {any} [value]
+   * @property {import('@rokkit/core').FieldMapping} [fields]
+   * @property {Object} [icons]
+   * @property {boolean} [autoCloseSiblings=false]
+   * @property {boolean} [multiselect=false]
+   * @property {Function} [header]
+   * @property {Function} [footer]
+   * @property {Function} [empty]
+   * @property {Function} [stub]
+   */
+
+  /** @type {Props & { [key: string]: any }} */
+  let {
+    class: classes = 'h-full overflow-scroll flex flex-col',
+    items = $bindable([]),
+    value = $bindable(null),
+    fields,
+    icons = {},
+    autoCloseSiblings = false,
+    multiselect = false,
+    header,
+    footer,
+    empty,
+    stub,
+    ...events
+  } = $props()
+
+  let emitter = createEmitter(events, ['select', 'move', 'toggle'])
+  let wrapper = new NestedController(items, value, fields, { autoCloseSiblings, multiselect })
+  let snippets = omit(['onselect', 'onmove', 'ontoggle'], events)
+  let derivedFields = $derived({ ...defaultFields, ...fields })
+
+  function handleAction(event) {
+    const { name, data } = event.detail
+    if (name === 'select') value = data.value
+    if (has([name], emitter)) emitter[name](data)
+  }
+</script>
+
+<div
+  data-tree-root
+  tabindex="0"
+  class={classes}
+  use:navigator={{ wrapper, nested: true }}
+  onaction={handleAction}
+>
+  {#if header}
+    <div data-tree-header>{@render header()}</div>
+  {/if}
+  {#if items.length === 0}
+    {#if empty}
+      {@render empty()}
+    {:else}
+      <div class="m-auto p-4 text-center text-gray-500" data-tree-empty>No data available</div>
+    {/if}
+  {/if}
+  <List
+    items={items}
+    fields={derivedFields}
+    value={value}
+    icons={icons}
+    focusedKey={wrapper.currentKey}
+    selectedKeys={wrapper.selectedKeys}
+    stub={stub}
+    snippets={snippets}
+  />
+  {#if footer}
+    <div data-tree-footer>{@render footer()}</div>
+  {/if}
+</div>

package/dist/input/types.d.ts

@@ -1,9 +0,0 @@
-export namespace types {
-    export let string: any;
-    export let integer: any;
-    export { CheckBox as boolean };
-    export { InputSelect as enum };
-    export let phone: any;
-}
-import CheckBox from '../CheckBox.svelte';
-import InputSelect from './InputSelect.svelte';

package/src/DataEditor.svelte

@@ -1,31 +0,0 @@
-<script>
-	import { setContext } from 'svelte'
-	import { writable } from 'svelte/store'
-	import { types } from './input/types'
-	import Wrapper from './wrappers/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/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/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/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,88 +0,0 @@
-<script>
-	import { pick } from 'ramda'
-	import { createEventDispatcher } from 'svelte'
-	import Tree from './Tree.svelte'
-	import DataEditor from './DataEditor.svelte'
-	import TreeTable from './TreeTable.svelte'
-	import Tabs from './Tabs.svelte'
-	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-neutral-subtle 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/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 = {}, ...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/input/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/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/input/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)
-	}
-
-	$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/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/input'
-// 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 })
-}