@rokkit/core 1.0.0-next.98 → 1.0.1

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,17 +1,19 @@
 // skipcq: JS-E1004 - Needed for exposing JS Doc types
-export * from './types'
+export * from './types.js'
 // skipcq: JS-E1004 - Needed for exposing all constants
-export * from './constants'
-export { flattenNestedList, findValueFromPath } from './nested'
+export * from './constants.js'
 // skipcq: JS-E1004 - Needed for exposing all functions
-export * from './mapping'
-export { mappedList } from './mapped-list'
-export { getLineTypes } from './connector'
-export { generateTicks } from './ticks'
-export { weekdays, getCalendarDays } from './calendar'
+export * from './utils.js'
 // skipcq: JS-E1004 - Needed for exposing all functions
-export * from './utils'
+export * from './nested.js'
 // skipcq: JS-E1004 - Needed for exposing all functions
-export * from './theme'
+export * from './string.js'
 // skipcq: JS-E1004 - Needed for exposing all functions
-export * from './string'
+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

@@ -1,87 +1,5 @@
-import { defaultFields } from './constants'
-import { toString, isObject } from './utils'
+import { DEFAULT_FIELDS } from './constants.js'
 
-/**
- * Get the component to be used to render the item.
- * If the component is null or undefined, it will return the default component.
- *
- * @param {object|string}                     value
- * @param {import('./types.js').FieldMapping} fields
- * @param {import('./types.js').ComponentMap} using
- */
-export function getComponent(value, fields, using) {
-	return fields.component && isObject(value)
-		? using[value[fields.component]] ?? using.default
-		: using.default
-}
-
-/**
- * Get the icon for the item. If the icon is an object, it will use the state to determine which icon to use.
- *
- * @param {object|string}                     value
- * @param {import('./types.js').FieldMapping} fields
- * @returns {string}
- */
-export function getIcon(value, fields = defaultFields) {
-	if (fields.icon === undefined || typeof (value ?? '') !== 'object') return null
-
-	const name = getIconFromObject(value, fields)
-	return fields.iconPrefix ? [fields.iconPrefix, name].join('-') : name
-}
-
-/**
- * Get the icon for the item. If the icon is an object, it will use the state to determine which icon to use.
- *
- * @param {object}                            value
- * @param {import('./types.js').FieldMapping} fields
- * @returns {string}
- */
-function getIconFromObject(value, fields) {
-	if (typeof value[fields.icon] === 'object') return value[fields.icon][value[fields.state]]
-	return value[fields.icon]
-}
-
-/**
- * Get the value for the item. If the value is an object,
- * it will use the field mapping to determine which attribute to get.
- *
- * @param {*}                              node
- * @param {import('./types').FieldMapping} fields
- * @returns {*}
- */
-export function getValue(node, fields = defaultFields) {
-	return typeof node === 'object' && node !== null ? node[fields.value] ?? node[fields.text] : node
-}
-
-/**
- * Get the text for the item. If the text is an object,
- * it will use the field mapping to determine which attribute to get.
- *
- * @param {*}                              node
- * @param {import('./types').FieldMapping} fields
- * @returns {string}
- */
-export function getText(node, fields = defaultFields) {
-	const value = isObject(node) ? node[fields.text] : node
-	return value
-}
-
-/**
- * Get the formatted text for the item. If the text is an object, use the field mapping to determine
- * which attribute to get currency. Use the formatter or identity function to format the text.
- *
- * @param {*}                              node
- * @param {import('./types').FieldMapping} fields
- * @param {Function}                       formatter
- * @returns {Function}
- */
-export function getFormattedText(node, fields = defaultFields, formatter = toString) {
-	const value = isObject(node) ? node[fields.text] : node
-	const currency = getAttribute(node, fields.currency)
-	const formatValue = typeof formatter === 'function' ? formatter : toString
-
-	return currency ? formatValue(value, currency) : formatValue(value)
-}
 /**
  * Gets the attribute from the node
  * @param {*}      node
@@ -91,48 +9,13 @@ export function getFormattedText(node, fields = defaultFields, formatter = toStr
 export function getAttribute(node, attr) {
 	return typeof node === 'object' && node !== null && attr !== null ? node[attr] : null
 }
-/**
- * Check if the current item is a parent
- *
- * @param {*}                              item
- * @param {import('./types').FieldMapping} fields
- * @returns {boolean}
- */
-export function hasChildren(item, fields) {
-	return (
-		item !== null &&
-		typeof item === 'object' &&
-		fields.children in item &&
-		Array.isArray(item[fields.children])
-	)
-}
-
-/**
- * Check if the current item is a parent and is expanded
- *
- * @param {*}                              item
- * @param {import('./types').FieldMapping} fields
- * @returns {boolean}
- */
-export function isExpanded(item, fields) {
-	if (item === null) return false
-	if (!hasChildren(item, fields)) return false
-	if (fields.isOpen in item) {
-		return item[fields.isOpen]
-	}
-	return false
-}
 
 /**
- * Verify if at least one item has children
+ * Fetches the fieldmapping for a child node
  *
- * @param {Array<*>}                       items
  * @param {import('./types').FieldMapping} fields
- * @returns {boolean}
+ * @returns {import('./types').FieldMapping}
  */
-export function isNested(items, fields) {
-	for (let i = 0; i < items.length; i++) {
-		if (hasChildren(items[i], fields)) return true
-	}
-	return false
+export function getNestedFields(fields) {
+	return { ...DEFAULT_FIELDS, ...(fields.fields ?? fields) }
 }

package/src/nested.js

@@ -1,5 +1,5 @@
 import { omit } from 'ramda'
-import { defaultFields } from './constants'
+import { DEFAULT_FIELDS } from './constants.js'
 
 /**
  * Flattens a nested list of items
@@ -9,8 +9,8 @@ import { defaultFields } from './constants'
  * @param {number}                        level
  * @returns {Array}
  */
-export function flattenNestedList(items, fields = defaultFields, level = 0) {
-	fields = { ...defaultFields, ...fields }
+export function flattenNestedList(items, fields = DEFAULT_FIELDS, level = 0) {
+	fields = { ...DEFAULT_FIELDS, ...fields }
 	let data = []
 	items.forEach((item) => {
 		const children = item[fields.children] ?? []
@@ -26,31 +26,3 @@ export function flattenNestedList(items, fields = defaultFields, level = 0) {
 	})
 	return data
 }
-
-/**
- * Matches a path slug to a value in the menu
- *
- * @param {string}                         slug
- * @param {Array}                          data
- * @param {import('./types').FieldMapping} fields
- * @returns {any}
- */
-export function findValueFromPath(slug, data, fields) {
-	fields = { ...defaultFields, ...fields }
-	const keys = slug.split('/')
-	let items = data
-	let value = null
-
-	keys.forEach((key, index) => {
-		const match = items.find((item) => item[fields.key] === key)
-		if (match) {
-			if (index < keys.length - 1) {
-				match[fields.isOpen] = true
-				items = match[fields.children]
-			} else {
-				value = match
-			}
-		}
-	})
-	return value
-}

package/src/string.js

@@ -35,6 +35,17 @@ export function toHyphenCase(text) {
 		.replace(/^-/, '')
 }
 
+/**
+ * Simple comparison for two strings
+ *
+ * @param {String} a
+ * @param {String} b
+ * @returns
+ */
+export function compareStrings(a, b) {
+	return a > b ? 1 : a < b ? -1 : 0
+}
+
 /**
  * Sort by splitting hyphen separated strings while keeping strings with same number of parts together
  *
@@ -53,17 +64,6 @@ export function sortByParts(a, b, separator = '-') {
 	return result
 }
 
-/**
- * Simple comparison for two strings
- *
- * @param {String} a
- * @param {String} b
- * @returns
- */
-export function compareStrings(a, b) {
-	return a > b ? 1 : a < b ? -1 : 0
-}
-
 /**
  * Generates a unique id from current timestamp
  *

package/src/theme.ts

@@ -0,0 +1,243 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { DEFAULT_THEME_MAPPING, defaultColors, TONE_MAP } from './constants'
+import { shades } from './colors/index'
+import { colorToRgb } from './utils'
+
+const modifiers = {
+	hsl: (value) => `hsl(${value} / <alpha-value>)`,
+	rgb: (value) => `rgb(${value} / <alpha-value>)`,
+	none: (value) => value
+}
+
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @param {string} modifier
+ * @returns
+ */
+export function shadesOf(name, modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+
+	return shades.reduce(
+		(result, shade) => ({
+			...result,
+			[shade]: fn(`var(--color-${name}-${shade})`)
+		}),
+		{
+			DEFAULT: fn(`var(--color-${name}-500)`)
+		}
+	)
+}
+
+/**
+ * Generates color rules for a specific theme variant, for both light and dark modes.
+ *
+ * @param {string} variant - The name of the variant to generate rules for.
+ * @param {Object} colors - The object containing color definitions.
+ * @param {Object} mapping - An object that maps variant names to color property names.
+ * @returns {import('./types').ShadeMappings} An array containing the color rules for both light and dark modes.
+ */
+function generateColorRules(variant, colors, mapping) {
+	return ['DEFAULT', ...shades].flatMap((shade) => [
+		{
+			key: shade === 'DEFAULT' ? `--color-${variant}` : `--color-${variant}-${shade}`,
+			value: colorToRgb(colors[mapping[variant]][`${shade}`])
+		}
+	])
+}
+
+/**
+ * Constructs and returns the light and dark theme variants based on provided color mapping and color definitions.
+ *
+ * @param {Object} [mapping=DEFAULT_THEME_MAPPING] - An object mapping variant names to color property names.
+ * @param {Object} [colors=defaultColors]        - The object containing default color definitions.
+ * @returns {Array<Array>} An array containing two arrays, one for the light theme variant and another for the dark theme.
+ */
+export function themeRules(mapping = DEFAULT_THEME_MAPPING, colors = defaultColors) {
+	mapping = { ...DEFAULT_THEME_MAPPING, ...mapping }
+	colors = { ...defaultColors, ...colors }
+	const variants = Object.keys(mapping)
+	const rules = variants
+		.flatMap((variant) => generateColorRules(variant, colors, mapping))
+		.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+
+	return rules
+}
+
+const SEMANTIC_PREFIXES = [
+	'bg',
+	'border',
+	'border-l',
+	'border-r',
+	'border-t',
+	'border-b',
+	'text',
+	'ring',
+	'outline',
+	'from',
+	'to',
+	'divide',
+	'stroke',
+	'fill'
+]
+
+/**
+ * @param {{ prefix: string, name: string, toneName: string, lightValue: number, darkValue: number }} opts
+ * @returns {Array}
+ */
+function toneShortcuts({ prefix, name, toneName, lightValue, darkValue }) {
+	const variantPattern = new RegExp(`^(.+):${prefix}-${name}-${toneName}(\\/\\d+)?$`)
+	const opacityPattern = new RegExp(`^${prefix}-${name}-${toneName}(\\/\\d+)?$`)
+	const exactPattern = `${prefix}-${name}-${toneName}`
+	return [
+		[
+			variantPattern,
+			([, variant, end]) =>
+				`${variant}:${prefix}-${name}-${lightValue}${end || ''} ${variant}:dark:${prefix}-${name}-${darkValue}${end || ''}`
+		],
+		[
+			opacityPattern,
+			([, end]) =>
+				`${prefix}-${name}-${lightValue}${end || ''} dark:${prefix}-${name}-${darkValue}${end || ''}`
+		],
+		[exactPattern, `${prefix}-${name}-${lightValue} dark:${prefix}-${name}-${darkValue}`]
+	]
+}
+
+/**
+ * Generates UnoCSS shortcut definitions for semantic tones with bg, border, text.
+ * @param {string} name - Color name (e.g., 'primary')
+ * @returns {Array} Array of shortcut definitions
+ */
+export function semanticShortcuts(name) {
+	const shortcuts = []
+	for (const [toneName, lightValue] of Object.entries(TONE_MAP)) {
+		const darkValue = 1000 - lightValue
+		for (const prefix of SEMANTIC_PREFIXES) {
+			shortcuts.push(...toneShortcuts({ prefix, name, toneName, lightValue, darkValue }))
+		}
+	}
+	return shortcuts
+}
+
+/**
+ * Generates "on-color" text shortcuts for readable text on colored backgrounds.
+ *
+ * - `text-on-{name}` → high contrast text for use on z5+ backgrounds (always light text)
+ * - `text-on-{name}-muted` → slightly muted but still readable on z5+ backgrounds
+ *
+ * @param {string} name - Color name (e.g., 'primary', 'surface')
+ * @returns {Array} Array of shortcut definitions
+ */
+export function contrastShortcuts(name) {
+	return [
+		[
+			new RegExp(`^text-on-${name}(\\/\\d+)?$`),
+			([, end]) => `text-${name}-50${end || ''} dark:text-${name}-50${end || ''}`
+		],
+		[
+			new RegExp(`^text-on-${name}-muted(\\/\\d+)?$`),
+			([, end]) => `text-${name}-100${end || ''} dark:text-${name}-200${end || ''}`
+		]
+	]
+}
+
+/**
+ * Theme class for managing color palettes, mappings, and semantic shortcuts.
+ */
+export class Theme {
+	#colors
+	#mapping
+
+	/**
+	 *
+	 * @param {import('./types.js').ColorTheme} param0
+	 */
+	constructor({ colors = defaultColors, mapping = DEFAULT_THEME_MAPPING } = {}) {
+		this.#colors = { ...defaultColors, ...colors }
+		this.#mapping = { ...DEFAULT_THEME_MAPPING, ...mapping }
+	}
+
+	get colors() {
+		return this.#colors
+	}
+	set colors(colors) {
+		this.#colors = { ...colors }
+	}
+
+	get mapping() {
+		return this.#mapping
+	}
+	set mapping(mapping) {
+		this.#mapping = { ...mapping }
+	}
+
+	mapVariant(color, variant) {
+		return Object.keys(color).reduce(
+			(acc, key) => ({
+				...acc,
+				[key]:
+					key === 'DEFAULT'
+						? `rgba(var(--color-${variant}),<alpha-value>)`
+						: `rgba(var(--color-${variant}-${key}),<alpha-value>)`
+			}),
+			{}
+		)
+	}
+
+	getColorRules(mapping = null) {
+		const variants = Object.entries({ ...this.#mapping, ...mapping })
+		return variants.reduce(
+			(acc, [variant, key]) => ({
+				...acc,
+				[variant]: this.mapVariant(this.#colors[key], variant)
+			}),
+			{}
+		)
+	}
+
+	getPalette(mapping = null) {
+		const useMapping = { ...this.#mapping, ...mapping }
+		const useColors = { ...defaultColors, ...this.#colors }
+		const variants = Object.keys(useMapping)
+		const rules = variants
+			.flatMap((variant) => generateColorRules(variant, useColors, useMapping))
+			.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+		return rules
+	}
+
+	getShortcuts(name) {
+		return [...semanticShortcuts(name), ...contrastShortcuts(name)]
+	}
+
+	/**
+	 * Generates CSS custom property declarations for the semantic z0–z10 tone scale.
+	 *
+	 * Returns a CSS string with two blocks:
+	 * - `:root` — light-mode aliases (z0=50 … z10=950)
+	 * - `[data-mode="dark"]` — dark-mode aliases (z0=950 … z10=50)
+	 *
+	 * These let consumers write `var(--color-primary-z5)` instead of hardcoding
+	 * numeric shades, and the value automatically adapts to the active mode.
+	 */
+	getZScaleCSS() {
+		const names = Object.keys(this.#mapping)
+
+		const lightLines = names.flatMap((name) =>
+			Object.entries(TONE_MAP).map(
+				([zone, light]) => `  --color-${name}-${zone}: var(--color-${name}-${light});`
+			)
+		)
+
+		const darkLines = names.flatMap((name) =>
+			Object.entries(TONE_MAP).map(([zone, light]) => {
+				const dark = 1000 - light
+				return `  --color-${name}-${zone}: var(--color-${name}-${dark});`
+			})
+		)
+
+		return `:root {\n${lightLines.join('\n')}\n}\n[data-mode="dark"] {\n${darkLines.join('\n')}\n}`
+	}
+}