@rokkit/core 1.0.0-next.16 → 1.0.0-next.160

package/src/constants.js

@@ -1,102 +1,149 @@
-export const defaultIcons = [
+export { defaultColors, syntaxColors, shades, defaultPalette } from './colors/index'
+export const DATA_IMAGE_REGEX = /^data:image\/(jpeg|png|gif|bmp|webp|svg\+xml)/i
+
+// ─── Snippet names ────────────────────────────────────────────────────────────
+
+export const ITEM_SNIPPET = 'itemContent'
+export const GROUP_SNIPPET = 'groupContent'
+/**
+ * @deprecated Use BASE_FIELDS from @rokkit/core instead.
+ * Retained for legacy ListController/FieldMapper/Proxy consumers (Toolbar, Table).
+ * Will be removed when those components migrate to Wrapper+Navigator.
+ * @type {import('./types).FieldMapping} Fields
+ */
+export const DEFAULT_FIELDS = {
+	id: 'id',
+	href: 'href',
+	icon: 'icon',
+	text: 'text',
+	value: 'value',
+	keywords: 'keywords',
+	children: 'children',
+	iconPrefix: null,
+	image: 'image',
+	summary: 'summary',
+	notes: 'notes',
+	props: 'props',
+	target: 'target',
+	state: 'state',
+	level: 'level',
+	parent: 'parent',
+	currency: 'currency',
+	label: 'label',
+	component: 'component', // to be deprecated in favour of snippet
+	snippet: 'snippet',
+	disabled: 'disabled',
+	/* flag fields  */
+	deleted: '_deleted',
+	expanded: '_expanded',
+	selected: '_selected'
+}
+
+// ─── BASE_FIELDS ─────────────────────────────────────────────────────────────
+// Canonical field mapping for ProxyItem and all Wrapper+Navigator components.
+// Semantic keys map to common raw data keys for backward compatibility.
+
+export const BASE_FIELDS = {
+	// Identity
+	id: 'id',
+	value: 'value',
+	// Display
+	label: 'label',
+	icon: 'icon',
+	avatar: 'image',
+	subtext: 'description',
+	tooltip: 'title',
+	badge: 'badge',
+	shortcut: 'shortcut',
+	// Structure
+	children: 'children',
+	type: 'type',
+	snippet: 'snippet',
+	href: 'href',
+	hrefTarget: 'target',
+	// State
+	disabled: 'disabled',
+	expanded: 'expanded',
+	selected: 'selected'
+}
+
+export const DEFAULT_ICONS = [
 	'accordion-opened',
 	'accordion-closed',
 	'action-remove',
+	'action-cancel',
+	'action-retry',
 	'action-add',
 	'action-clear',
 	'action-search',
 	'action-close',
-	'action-close-filled',
+	'action-copy',
+	'action-copysuccess',
+	'action-check',
+	'action-pin',
+	'action-save',
+	'action-unpin',
 	'node-opened',
 	'node-closed',
+	'folder-opened',
+	'folder-closed',
 	'selector-opened',
 	'selector-closed',
+	'menu-opened',
+	'menu-closed',
 	'checkbox-checked',
 	'checkbox-unchecked',
 	'checkbox-unknown',
 	'rating-filled',
 	'rating-empty',
+	'rating-half',
 	'radio-off',
 	'radio-on',
 	'mode-dark',
 	'mode-light',
+	'mode-system',
 	'navigate-left',
 	'navigate-right',
 	'navigate-up',
-	'navigate-down'
+	'navigate-down',
+	'palette-hex',
+	'palette-presets',
+	'state-error',
+	'state-warning',
+	'state-success',
+	'state-info',
+	'state-unknown',
+	'badge-fail',
+	'badge-warn',
+	'badge-pass',
+	'badge-unknown',
+	'sort-none',
+	'sort-ascending',
+	'sort-descending',
+	'validity-failed',
+	'validity-passed',
+	'validity-unknown',
+	'validity-warning',
+	'alert-clear',
+	'alert-unread',
+	'align-horizontal-left',
+	'align-horizontal-right',
+	'align-horizontal-center',
+	'align-vertical-top',
+	'align-vertical-bottom',
+	'align-vertical-middle',
+	'view-code',
+	'view-chart'
 ]
 
-// export const defaultIcons = [
-// 	'accordion-opened',
-// 	'accordion-closed',
-// 	'action-remove',
-// 	'action-add',
-// 	'action-clear',
-// 	'action-search',
-// 	'action-close',
-// 	'node-opened',
-// 	'node-closed',
-// 	'checkbox-checked',
-// 	'checkbox-unchecked',
-// 	'checkbox-unknown',
-// 	'rating-filled',
-// 	'rating-empty',
-// 	'rating-half',
-// 	'radio-off',
-// 	'radio-on',
-// 	'folder-closed',
-// 	'folder-opened',
-// 	'navigate-up',
-// 	'navigate-down',
-// 	'navigate-left',
-// 	'navigate-right',
-// 	'selector-closed',
-// 	'selector-opened',
-// 	'mode-dark',
-// 	'mode-light'
-// ]
-
-export const defaultOptions = {
+export const DEFAULT_OPTIONS = {
 	id: 'id',
 	label: 'label',
 	value: 'value',
 	checked: 'checked'
 }
 
-/**
- * Structure to map custom fields for rendering
- *
- * @typedef FieldMapping
- * @property {string} [id='id']              - Unique id for the item
- * @property {string} [text='text']          - Attribute to identify the text to render
- * @property {string} [url='url']            - Attribute to identify a URL
- * @property {string} [icon='icon']          - Attribute to identify an icon class to render
- * @property {string} [image='image']        - Attribute to identify an image to render
- * @property {string} [children='children']  - Attribute to identify children of the current item
- * @property {string} [summary='summary']
- * @property {string} [notes='notes']
- * @property {string} [props='props']
- * @property {string} [isOpen='_open']       - Attribute to identify if the current item is open
- * @property {string} [isDeleted='_deleted'] - Attribute to identify if the current item is deleted
- * @property {FieldMapping} [fields]         - Field mapping to be used on children in the next level
- */
-export const defaultFields = {
-	id: 'id',
-	url: 'url',
-	text: 'text',
-	children: 'data',
-	icon: 'icon',
-	image: 'image',
-	component: 'component',
-	summary: 'summary',
-	notes: 'notes',
-	props: 'props',
-	target: 'target',
-	isOpen: '_open',
-	isDeleted: '_deleted'
-}
-
-export const defaultKeyMap = {
+export const DEFAULT_KEYMAP = {
 	ArrowRight: 'open',
 	ArrowLeft: 'close',
 	ArrowDown: 'down',
@@ -105,45 +152,56 @@ export const defaultKeyMap = {
 	Escape: 'deselect'
 }
 
+export const DEFAULT_THEME_MAPPING = {
+	surface: 'slate',
+	primary: 'orange',
+	secondary: 'pink',
+	accent: 'sky',
+	success: 'green',
+	warning: 'yellow',
+	danger: 'red',
+	error: 'red',
+	info: 'cyan'
+}
+
+export const TONE_MAP = {
+	z0: 50,
+	z1: 100,
+	z2: 200,
+	z3: 300,
+	z4: 400,
+	z5: 500,
+	z6: 600,
+	z7: 700,
+	z8: 800,
+	z9: 900,
+	z10: 950
+}
+/**
+ * Splits an icon name into its group and key components.
+ * @param {string} name - The icon name to split.
+ * @returns {{ group: string, key: string, value: string }} An object containing the group, key, and value of the icon name.
+ */
+function splitIconName(name) {
+	const parts = name.split('-')
+	const group = parts.slice(0, parts.length - 1).join('-')
+	return { group, key: parts[parts.length - 1], value: name }
+}
+
+/**
+ * Generate a state icon mapping from a list of icon names
+ *
+ * @param {string[]} icons
+ * @returns {import('./types').StateIcons}
+ */
 export function stateIconsFromNames(icons) {
-	return icons
-		.map((k) => [...k.split('-')])
-		.reduce(
-			(acc, parts) => ({
-				...acc,
-				[parts[0]]: { ...acc[parts[0]], [parts[1]]: parts.join('-') }
-			}),
-			{}
-		)
+	return icons.map(splitIconName).reduce(
+		(acc, { group, key, value }) => ({
+			...acc,
+			[group]: { ...acc[group], [key]: value }
+		}),
+		{}
+	)
 }
 
-export const defaultStateIcons = stateIconsFromNames(defaultIcons)
-// export const defaultStateIcons = {
-// 	accordion: {
-// 		opened: 'accordion-opened',
-// 		closed: 'accordion-closed'
-// 	},
-// 	item: {
-// 		remove: 'item-remove',
-// 		add: 'item-add',
-// 		clear: 'item-clear',
-// 		search: 'item-search'
-// 	},
-// 	node: {
-// 		opened: 'node-opened',
-// 		closed: 'node-closed'
-// 	},
-// 	list: {
-// 		selector: 'list-selector'
-// 	},
-// 	checkbox: {
-// 		checked: 'checkbox-checked',
-// 		unchecked: 'checkbox-unchecked',
-// 		unknown: 'checkbox-unknown'
-// 	},
-// 	rating: { filled: 'rating-filled', empty: 'rating-empty' },
-// 	radio: {
-// 		off: 'radio-off',
-// 		on: 'radio-on'
-// 	}
-// }
+export const DEFAULT_STATE_ICONS = stateIconsFromNames(DEFAULT_ICONS)

package/src/events.js

@@ -0,0 +1,32 @@
+import { noop } from './utils.js'
+
+/**
+ * Creates an emitter object from the given properties.
+ *
+ * - Filters attributes that start with 'on' and are functions,
+ * - Returns an object with keys that are the event names (without the 'on' prefix)
+ * - If a default event is not present in the props, it will be set to a no-op function.
+ *
+ * @param {Object}        props    - The properties object to filter.
+ * @param {Array<string>} defaults - An array of default events.
+ * @returns {import('./types.js').EventHandlers} The emitter object.
+ */
+export function createEmitter(props, defaults = []) {
+	const emit = {}
+
+	// Filter and add functions that start with 'on'
+	Object.entries(props)
+		.filter(([key, value]) => key.startsWith('on') && typeof value === 'function')
+		.forEach(([key, value]) => {
+			emit[key.slice(2)] = value
+		})
+
+	// Add default events with no-op function if not present
+	defaults.forEach((event) => {
+		if (!emit[event]) {
+			emit[event] = noop
+		}
+	})
+
+	return emit
+}

package/src/field-mapper.js

@@ -0,0 +1,147 @@
+import { isNil, has, omit } from 'ramda'
+import { DEFAULT_FIELDS } from './constants.js'
+import { isObject } from './utils.js'
+
+export class FieldMapper {
+	#fields = { ...DEFAULT_FIELDS }
+	#childMapper = null
+
+	constructor(fields = DEFAULT_FIELDS) {
+		this.#updateFields(fields)
+	}
+
+	#updateFields(fields) {
+		Object.keys(fields).forEach((key) => {
+			this.#fields[key] = fields[key]
+		})
+		this.hasIcon = has(this.#fields.icon)
+		this.hasImage = has(this.#fields.image)
+		this.hasValue = has(this.#fields.value)
+		this.hasLabel = has(this.#fields.label)
+		this.hasComponent = has(this.#fields.component)
+		this.hasCurrency = has(this.#fields.currency)
+		this.withPrefix = (x) => [this.#fields.iconPrefix, x].join('-').replace(/^-+/g, '')
+		this.excludeFlags = omit([
+			this.#fields.isDeleted,
+			this.#fields.isHidden,
+			this.#fields.isSelected,
+			this.#fields.isFiltered,
+			this.#fields.isOpen
+		])
+	}
+
+	getChildMapper() {
+		if (!this.#childMapper) {
+			this.#childMapper = new FieldMapper(this.fields.fields ?? this.fields)
+		}
+		return this.#childMapper
+	}
+	/**
+	 * @private
+	 */
+	prop(fieldName, value) {
+		if (isNil(value)) return null
+
+		if (typeof value === 'object') {
+			return value[this.fields[fieldName]]
+		}
+
+		return fieldName === 'label' ? value : null
+	}
+
+	/**
+	 * Gets a mapped attribute from the original item
+	 *
+	 * @param {string} fieldName - Name of the field to get
+	 * @returns {any|null} - The attribute value or null if not found
+	 */
+	get(fieldName, value, defaultValue = null) {
+		return this.prop(fieldName, value) ?? defaultValue
+	}
+
+	get fields() {
+		return this.#fields
+	}
+
+	set fields(fields) {
+		this.#updateFields(fields)
+	}
+
+	getIcon(value) {
+		if (!this.hasIcon(value)) return null
+		const icon = value[this.fields.icon]
+		if (isObject(icon)) return this.withPrefix(icon[value[this.fields.state]])
+		return this.withPrefix(icon)
+	}
+
+	getValue(value) {
+		if (this.hasValue(value)) {
+			return value[this.fields.value]
+		}
+		return value
+	}
+
+	getFormattedText(value, formatter) {
+		const text = this.get('label', value)
+
+		if (isNil(text)) return ''
+
+		if (typeof formatter !== 'function') return text.toString()
+
+		if (this.hasCurrency(value)) {
+			return formatter(text, this.get('currency', value))
+		}
+		return formatter(text)
+	}
+
+	hasChildren(item) {
+		return (
+			!isNil(item) &&
+			has(this.fields.children, item) &&
+			Array.isArray(item[this.fields.children]) &&
+			item[this.fields.children].length > 0
+		)
+	}
+
+	isNested(items) {
+		return Array.isArray(items) && items.some((item) => this.hasChildren(item))
+	}
+
+	getChildren(item) {
+		return this.hasChildren(item) ? item[this.fields.children] : []
+	}
+
+	/**
+	 * Finds children by an index path
+	 *
+	 * @param {Array<Object>} items
+	 * @param {Array<number>} path
+	 * @returns {Array<Object>}
+	 */
+	getChildrenByPath(items, path = []) {
+		const result = path.reduce(
+			(children, index) => children?.[index]?.[this.fields.children],
+			items
+		)
+
+		if (result === undefined) throw new Error('Invalid path')
+		return result
+	}
+
+	/**
+	 * Finds an item by an index path
+	 *
+	 * @param {Array<Object>} items
+	 * @param {Array<number>} path
+	 * @returns {Object|null}
+	 */
+	getItemByPath(items, path = []) {
+		const result = path.reduce(
+			(item, index, i) => (i === 0 ? items?.[index] : item?.[this.fields.children]?.[index]),
+			/*  skipcq: JS-W1042 default undefined is needed */ undefined
+		)
+
+		if (result === undefined) throw new Error('Invalid path')
+		return result
+	}
+}

package/src/index.js

@@ -1,27 +1,19 @@
-export * from './constants'
-export * from './items'
-
-export { default as Icon } from './Icon.svelte'
-// export { default as List } from './List-Discard.svelte'
-export { default as Tree } from './Tree.svelte'
-export { default as Accordion } from './Accordion.svelte'
-export { default as List } from './List.svelte'
-export { default as Searchable } from './Searchable.svelte'
-export { default as Scrollable } from './Scrollable.svelte'
-export { default as NestedList } from './NestedList.svelte'
-export { default as Tabs } from './Tabs.svelte'
-
-export { default as Alerts } from './Alerts.svelte'
-export { default as Slider } from './Slider.svelte'
-export { default as DropDown } from './DropDown.svelte'
-export { default as DropSearch } from './DropSearch.svelte'
-export { default as SpinList } from './SpinList.svelte'
-
-export { default as Sidebar } from './Sidebar.svelte'
-export { default as SplitPane } from './SplitPane.svelte'
-export { default as Splitter } from './Splitter.svelte'
-export { default as SplitView } from './SplitView.svelte'
-export { default as Overlay } from './Overlay.svelte'
-
-export { default as PageNavigator } from './PageNavigator.svelte'
-export { default as ResponsiveGrid } from './ResponsiveGrid.svelte'
+// skipcq: JS-E1004 - Needed for exposing JS Doc types
+export * from './types.js'
+// skipcq: JS-E1004 - Needed for exposing all constants
+export * from './constants.js'
+// skipcq: JS-E1004 - Needed for exposing all functions
+export * from './utils.js'
+// skipcq: JS-E1004 - Needed for exposing all functions
+export * from './nested.js'
+// skipcq: JS-E1004 - Needed for exposing all functions
+export * from './string.js'
+// skipcq: JS-E1004 - Needed for exposing all functions
+export * from './theme.js'
+export { FieldMapper } from './field-mapper.js'
+export { getItemAtIndex, getIndexForItem } from './mapped-items.js'
+export { createEmitter } from './events.js'
+export { getLineTypes } from './connector.js'
+export { weekdays, getCalendarDays } from './calendar.js'
+export { generateTicks } from './ticks.js'
+export { getNestedFields } from './mapping.js'

package/src/key-event-map.js

@@ -0,0 +1,35 @@
+import { find, toPairs } from 'ramda'
+
+/**
+ * Class to manage key event mappings.
+ */
+export class KeyEventMap {
+	constructor() {
+		this.mapping = {}
+	}
+
+	/**
+	 * Add a new key mapping.
+	 * @param {string}               eventName - The event name.
+	 * @param {Array<string>|RegExp} keys      - The keys to match.
+	 */
+	add(eventName, keys) {
+		if (!Array.isArray(keys) && !(keys instanceof RegExp)) {
+			throw new Error('Keys must be an array or a regular expression')
+		}
+		this.mapping[eventName] = keys
+	}
+
+	/**
+	 * Get the event name for a given key.
+	 * @param {string} key - The key to match.
+	 * @returns {string|null} - The event name or null if no match is found.
+	 */
+	getEventForKey(key) {
+		const matchEvent = ([_, keys]) =>
+			(Array.isArray(keys) && keys.includes(key)) || (keys instanceof RegExp && keys.test(key))
+
+		const event = find(matchEvent, toPairs(this.mapping))
+		return event ? event[0] : null
+	}
+}

package/src/mapped-items.js

@@ -0,0 +1,22 @@
+import { equals, isNil } from 'ramda'
+
+/**
+ * Get an item at a specific index
+ * @param {Array<any>} items
+ * @param {any} index
+ * @returns
+ */
+export function getItemAtIndex(items, index) {
+	if (isNil(index)) return null
+	return index >= 0 && index < items.length ? items[index] : null
+}
+
+/**
+ *  Get the index for an item in an array
+ * @param {Array<any} items
+ * @param {any} item
+ * @returns
+ */
+export function getIndexForItem(items, item) {
+	return items.findIndex((i) => equals(i, item))
+}

package/src/mapping.js

@@ -0,0 +1,21 @@
+import { DEFAULT_FIELDS } from './constants.js'
+
+/**
+ * Gets the attribute from the node
+ * @param {*}      node
+ * @param {string} attr
+ * @returns {*}
+ */
+export function getAttribute(node, attr) {
+	return typeof node === 'object' && node !== null && attr !== null ? node[attr] : null
+}
+
+/**
+ * Fetches the fieldmapping for a child node
+ *
+ * @param {import('./types').FieldMapping} fields
+ * @returns {import('./types').FieldMapping}
+ */
+export function getNestedFields(fields) {
+	return { ...DEFAULT_FIELDS, ...(fields.fields ?? fields) }
+}

package/src/nested.js

@@ -0,0 +1,28 @@
+import { omit } from 'ramda'
+import { DEFAULT_FIELDS } from './constants.js'
+
+/**
+ * Flattens a nested list of items
+ *
+ * @param {Array}                         items
+ * @param {import('./types).FieldMapping} fields
+ * @param {number}                        level
+ * @returns {Array}
+ */
+export function flattenNestedList(items, fields = DEFAULT_FIELDS, level = 0) {
+	fields = { ...DEFAULT_FIELDS, ...fields }
+	let data = []
+	items.forEach((item) => {
+		const children = item[fields.children] ?? []
+		data = [
+			...data,
+			{
+				...omit([fields.children], item),
+				[fields.level]: level,
+				[fields.parent]: children.length > 0
+			},
+			...flattenNestedList(children, fields, level + 1)
+		]
+	})
+	return data
+}