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

package/src/lib/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
-}

package/src/lib/schema.js

@@ -1,32 +0,0 @@
-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/select.js

@@ -1,38 +0,0 @@
-/**
- * Generate the CSS position properties and values based on the anchor and viewport dimensions.
- *
- * @param {DOMRect} bounds - The bounding rectangle of the anchor element.
- * @param {HTMLElement} viewport - The viewport element that determines the position.
- * @returns {string} - A string with CSS position properties and values.
- */
-function generatePositionCSS(bounds, viewport) {
-	const { width: viewportWidth, height: viewportHeight } = viewport.getBoundingClientRect()
-	let pos = ''
-	if (bounds.left + viewportWidth > window.innerWidth) {
-		pos += `right: ${window.innerWidth - bounds.left - bounds.width}px;`
-	} else pos += `left: ${bounds.left}px;`
-
-	if (bounds.top + viewportHeight > window.innerHeight) {
-		pos += `bottom: ${window.innerHeight - bounds.top}px;`
-	} else pos += `top: ${bounds.top + bounds.height}px;`
-
-	return pos
-}
-
-/**
- * Get the optimal position for the list based on anchor and viewport dimensions.
- *
- * @param {HTMLElement} anchor - The anchor element to position the list relative to.
- * @param {HTMLElement} viewport - The viewport element that determines the position.
- * @returns {string} - A string with CSS position properties and values.
- */
-export function getListPosition(anchor, viewport) {
-	if (typeof window === 'undefined' || !anchor || !viewport) return ''
-
-	const bounds = anchor.getBoundingClientRect()
-
-	bounds.top += window.scrollX
-	bounds.left += window.scrollY
-
-	return generatePositionCSS(bounds, viewport)
-}

package/src/lib/tree.js

@@ -1,22 +0,0 @@
-import { defaultMapping } from '../constants'
-
-/**
- * Adds a root node to the items array converting it into a nested tree with one root node
- *
- * @param {Array<Object>} items
- * @param {string} root
- * @param {import('@rokkit/core').FieldMapping} fields
- * @returns
- */
-export function addRootNode(items, root = '/', mapping = defaultMapping) {
-	if (items.length > 1 && root) {
-		return [
-			{
-				[mapping.fields.text]: root,
-				[mapping.fields.expanded]: true,
-				[mapping.fields.children]: items
-			}
-		]
-	}
-	return items
-}

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

@@ -1,84 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { cleanup, render, fireEvent } from '@testing-library/svelte'
-import List from './List.svelte'
-
-const fields = {
-	children: 'children',
-	expanded: 'expanded',
-	text: 'text'
-}
-
-function makeTreeData() {
-	return [
-		{
-			text: 'Root 1',
-			expanded: true,
-			children: [
-				{ text: 'Child 1.1', expanded: false, children: [] },
-				{ text: 'Child 1.2', expanded: false, children: [] }
-			]
-		},
-		{
-			text: 'Root 2',
-			expanded: false,
-			children: [{ text: 'Child 2.1', expanded: false, children: [] }]
-		}
-	]
-}
-
-describe('List.svelte', () => {
-	beforeEach(() => cleanup())
-
-	it('renders all root nodes', () => {
-		const items = makeTreeData()
-		const { container, getByText } = render(List, { props: { items, fields } })
-		expect(getByText('Root 1')).toBeTruthy()
-		expect(getByText('Root 2')).toBeTruthy()
-		expect(container).toMatchSnapshot()
-	})
-
-	it('renders children when expanded', () => {
-		const items = makeTreeData()
-		const { container, getByText } = render(List, { props: { items, fields } })
-		expect(getByText('Child 1.1')).toBeTruthy()
-		expect(getByText('Child 1.2')).toBeTruthy()
-		// Child 2.1 should not be rendered because Root 2 is not expanded
-		expect(() => getByText('Child 2.1')).toThrow()
-		expect(container).toMatchSnapshot()
-	})
-
-	it('renders leaf and branch data attributes', () => {
-		const items = makeTreeData()
-		const { container } = render(List, { props: { items, fields } })
-		const nodes = container.querySelectorAll('[data-tree-node]')
-		expect(nodes.length).toBeGreaterThan(0)
-		// At least one branch and one leaf
-		const branch = container.querySelector('[data-tree-branch]')
-		const leaf = container.querySelector('[data-tree-leaf]')
-		expect(branch).toBeTruthy()
-		expect(leaf).toBeTruthy()
-		expect(container).toMatchSnapshot()
-	})
-
-	it('passes focused and selected props', () => {
-		const items = makeTreeData()
-		const selectedKeys = new Set(['0'])
-		const { container } = render(List, {
-			props: { items, fields, focusedKey: '0', selectedKeys }
-		})
-		const focusedNode = container.querySelector('[data-tree-node][aria-current="true"]')
-		const selectedNode = container.querySelector('[data-tree-node][aria-selected="true"]')
-		expect(focusedNode).toBeTruthy()
-		expect(selectedNode).toBeTruthy()
-		expect(container).toMatchSnapshot()
-	})
-
-	it('renders nested lists recursively', () => {
-		const items = makeTreeData()
-		const { container } = render(List, { props: { items, fields } })
-		// Should have nested data-tree-list elements
-		const lists = container.querySelectorAll('[data-tree-list]')
-		expect(lists.length).toBeGreaterThan(1)
-		expect(container).toMatchSnapshot()
-	})
-})

package/src/tree/List.svelte

@@ -1,78 +0,0 @@
-<script>
-	import Node from './Node.svelte'
-	import List from './List.svelte'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {Array<any>} items
-	 * @property {any} value
-	 * @property {Object} fields
-	 * @property {Array<number>} [path]
-	 * @property {Object} icons
-	 * @property {Array<string>} [types]
-	 * @property {string} [focusedKey]
-	 * @property {Set<string>} [selectedKeys]
-	 * @property {Function} [stub]
-	 * @property {Object<string, Function>} [snippets]
-	 */
-
-	/** @type {Props} */
-	let {
-		items = $bindable([]),
-		value = $bindable(null),
-		fields,
-		path = [],
-		icons = {},
-		types = [],
-		focusedKey,
-		selectedKeys = new Set(),
-		stub,
-		snippets
-	} = $props()
-
-	// Helper to check if a node has children
-	function hasChildren(node, fields) {
-		return Array.isArray(node?.[fields.children]) && node[fields.children].length > 0
-	}
-
-	// Helper to get key from path
-	function getKeyFromPath(path) {
-		return path.join('-')
-	}
-</script>
-
-<div data-tree-list role="group">
-	{#each items as item, index (index)}
-		{@const nodePath = [...path, index]}
-		{@const key = getKeyFromPath(nodePath)}
-		{@const expanded = item[fields.expanded]}
-		{@const isBranch = hasChildren(item, fields)}
-		<Node
-			value={item}
-			{fields}
-			{icons}
-			{types}
-			focused={focusedKey === key}
-			selected={selectedKeys.has(key)}
-			{expanded}
-			path={nodePath}
-			{stub}
-			{snippets}
-		>
-			{#if isBranch && expanded}
-				<List
-					items={item[fields.children]}
-					{value}
-					{fields}
-					path={nodePath}
-					{icons}
-					{types}
-					{focusedKey}
-					{selectedKeys}
-					{stub}
-					{snippets}
-				/>
-			{/if}
-		</Node>
-	{/each}
-</div>

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

@@ -1,104 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest'
-import { cleanup, render, fireEvent } from '@testing-library/svelte'
-import Node from './Node.svelte'
-
-describe('Node.svelte', () => {
-	const fields = {
-		text: 'label',
-		children: 'children',
-		expanded: 'expanded',
-		snippet: 'snippet'
-	}
-
-	const baseNode = {
-		label: 'Root Node',
-		expanded: false,
-		children: []
-	}
-
-	beforeEach(() => cleanup())
-
-	it('renders node with label', () => {
-		const { container, getByText } = render(Node, {
-			props: {
-				value: baseNode,
-				fields,
-				path: [0],
-				focused: false,
-				selected: false,
-				expanded: false
-			}
-		})
-		const contentEl = container.querySelector('[data-tree-content]')
-		expect(contentEl).not.toBeNull()
-		expect(contentEl.textContent).toContain('Root Node')
-		expect(container).toMatchSnapshot()
-	})
-
-	it('sets data-tree-leaf for leaf node', () => {
-		const { container } = render(Node, {
-			props: {
-				value: baseNode,
-				fields,
-				path: [0]
-			}
-		})
-		const nodeDiv = container.querySelector('[data-tree-node]')
-		expect(nodeDiv.getAttribute('data-tree-leaf')).toBe('true')
-		expect(nodeDiv.getAttribute('data-tree-branch')).toBeNull()
-		expect(container).toMatchSnapshot()
-	})
-
-	it('sets data-tree-branch for branch node', () => {
-		const branchNode = {
-			label: 'Branch Node',
-			expanded: true,
-			children: [{ label: 'Child', expanded: false, children: [] }]
-		}
-		const { container } = render(Node, {
-			props: {
-				value: branchNode,
-				fields,
-				path: [0]
-			}
-		})
-		const nodeDiv = container.querySelector('[data-tree-node]')
-		expect(nodeDiv.getAttribute('data-tree-branch')).toBe('true')
-		expect(nodeDiv.getAttribute('data-tree-leaf')).toBeNull()
-		expect(container).toMatchSnapshot()
-	})
-
-	it('sets aria attributes correctly', () => {
-		const { container } = render(Node, {
-			props: {
-				value: baseNode,
-				fields,
-				path: [0],
-				focused: true,
-				selected: true,
-				expanded: true
-			}
-		})
-		const nodeDiv = container.querySelector('[data-tree-node]')
-		expect(nodeDiv.getAttribute('aria-current')).toBe('true')
-		expect(nodeDiv.getAttribute('aria-selected')).toBe('true')
-		expect(nodeDiv.getAttribute('aria-expanded')).toBe('true')
-		expect(container).toMatchSnapshot()
-	})
-
-	// it('renders custom snippet if provided', () => {
-	// 	const snippet = (node) => `<span>Custom: ${node.label}</span>`
-	// 	const { container, getByText } = render(Node, {
-	// 		props: {
-	// 			value: baseNode,
-	// 			fields,
-	// 			path: [0],
-	// 			snippets: { [baseNode.snippet]: snippet }
-	// 		}
-	// 	})
-	// 	const contentEl = container.querySelector('[data-tree-content]')
-	// 	expect(contentEl).not.toBeNull()
-	// 	expect(contentEl.textContent).toContain('Custom: Root Node')
-	// 	expect(container).toMatchSnapshot()
-	// })
-})

package/src/tree/Node.svelte

@@ -1,80 +0,0 @@
-<script>
-  import { defaultStateIcons, getKeyFromPath, getSnippet } from '@rokkit/core'
-  import Icon from '../Icon.svelte'
-  import Connector from '../Connector.svelte'
-  import Item from '../Item.svelte'
-
-  /**
-   * @typedef {Object} Props
-   * @property {any} value
-   * @property {import('../types').FieldMapping} fields
-   * @property {any[]} types
-   * @property {import('../types').NodeStateIcons} stateIcons
-   * @property {number[]} path
-   * @property {boolean} focused
-   * @property {boolean} selected
-   * @property {boolean} expanded
-   * @property {Function} children
-   * @property {Function} stub
-   * @property {Object<string, Function>} snippets
-   */
-
-  /** @type {Props} */
-  let {
-    value = $bindable(null),
-    fields,
-    types = [],
-    stateIcons = defaultStateIcons.node,
-    path = [],
-    focused = false,
-    selected = false,
-    expanded = false,
-    children,
-    stub = null,
-    snippets = {}
-  } = $props()
-
-  let stateName = $derived(expanded ? 'opened' : 'closed')
-  let icons = $derived({ ...defaultStateIcons.node, ...stateIcons })
-  let state = $derived(
-    expanded ? { icon: icons.opened, label: 'collapse' } : { icon: icons.closed, label: 'expand' }
-  )
-
-  const template = getSnippet(value[fields.snippet], snippets, stub)
-  const isLeaf = !value?.[fields.children] || value[fields.children]?.length === 0
-</script>
-
-<div
-  data-tree-node
-  data-tree-leaf={isLeaf ? true : undefined}
-  data-tree-branch={!isLeaf ? true : undefined}
-  aria-current={focused}
-  aria-selected={selected}
-  aria-expanded={expanded}
-  role="treeitem"
-  data-path={getKeyFromPath(path)}
-  data-depth={path.length}
-  tabindex="-1"
-  class="flex flex-row items-center"
->
-  {#each types as type, index (index)}
-    {#if type === 'icon'}
-      <Icon name={state.icon} label={state.label} state={stateName} class="w-4" size="small" />
-    {:else}
-      <Connector {type} />
-    {/if}
-  {/each}
-  <div data-tree-content>
-    <svelte:boundary>
-      {#if template}
-        {@render template(value)}
-        {#snippet failed()}
-          <Item {value} {fields} />
-        {/snippet}
-      {:else}
-        <Item {value} {fields} />
-      {/if}
-    </svelte:boundary>
-  </div>
-  {@render children?.()}
-</div>

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

@@ -1,63 +0,0 @@
-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()
-	// })
-})