@rokkit/core 1.0.0-next.15 → 1.0.0-next.151

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
+}

package/src/string.js

@@ -0,0 +1,97 @@
+import { filter } from 'ramda'
+/**
+ * Capitalizes the first letter of input string
+ *
+ * @param {String} str
+ * @returns {String}
+ */
+export function toInitCapCase(text) {
+	return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()
+}
+
+/**
+ * Convert a hyphen separated string to PascalCase
+ *
+ * @param {String} text
+ * @returns
+ */
+export function toPascalCase(text) {
+	return text
+		.split('-')
+		.map((part) => toInitCapCase(part))
+		.join('')
+}
+
+/**
+ * Convert a PascalCase string to snake case with separator as hyphen
+ *
+ * @param {string} text
+ * @returns {string}
+ */
+export function toHyphenCase(text) {
+	return text
+		.replace(/\s+/, '-')
+		.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+		.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
+ *
+ * @param {String} a hyphen separates string
+ * @param {String} b hyphen separates string
+ * @param {string} separator - separator to split the string
+ * @returns {Number} -1, 0, 1 based on comparison
+ */
+export function sortByParts(a, b, separator = '-') {
+	const partsOfA = a.split(separator)
+	const partsOfB = b.split(separator)
+
+	let result = compareStrings(partsOfA[0], partsOfB[0])
+	if (result === 0) result = partsOfA.length - partsOfB.length
+	if (result === 0) result = compareStrings(a, b)
+	return result
+}
+
+/**
+ * Generates a unique id from current timestamp
+ *
+ * @returns {String} timestamp based unique id
+ */
+export function uniqueId(prefix = '', separator = '-') {
+	const pair = prefix && prefix.length > 0 ? [prefix] : []
+	pair.push(Date.now().toString(36))
+	return pair.join(separator)
+}
+
+/**
+ * Removes undefined and null values from the input object.
+ *
+ * @param {Object} obj
+ * @returns {Object}
+ */
+export function compact(obj) {
+	return filter((x) => x !== undefined && x !== null, obj)
+}
+
+/**
+ * Converts an input number into it's hexadecimal representation, with optional left padded zeroes based on the `size`
+ *
+ * @param {number} value
+ * @param {number} size
+ * @returns
+ */
+export function toHexString(value, size = 2) {
+	return value.toString(16).padStart(size, '0')
+}

package/src/theme.ts

@@ -0,0 +1,208 @@
+// 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 [
+		[`text-on-${name}`, `text-${name}-50 dark:text-${name}-50`],
+		[`text-on-${name}-muted`, `text-${name}-100 dark:text-${name}-200`]
+	]
+}
+
+/**
+ * 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)]
+	}
+}

package/src/ticks.js

@@ -0,0 +1,26 @@
+/**
+ * Generates an array of tick marks for a range of values.
+ *
+ * @param {number} lowerBound                            - The lower bound of the range.
+ * @param {number} upperBound                            - The upper bound of the range.
+ * @param {number} [minorTickStep=upperBound-lowerBound] - The step size for minor ticks.
+ * @param {number} [majorTickStep=1]                     - The step size for major ticks.
+ * @returns {import('./types').TickMark[]>} An array of tick mark objects.
+ */
+export function generateTicks(
+	lowerBound,
+	upperBound,
+	minorTickStep = upperBound - lowerBound,
+	majorTickStep = 1
+) {
+	const length = 1 + Math.ceil((upperBound - lowerBound) / minorTickStep)
+	return Array.from({ length }, (_, i) => {
+		const value = i === length - 1 ? upperBound : lowerBound + minorTickStep * i
+		const major = i === 0 || i === length - 1 || i % majorTickStep === 0
+		return {
+			value,
+			label: major ? value : '',
+			major
+		}
+	})
+}