@rokkit/core 1.0.0-next.13 → 1.0.0-next.130

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,36 @@
+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/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
+		}
+	})
+}

package/src/types.js

@@ -0,0 +1,160 @@
+/**
+ * @typedef {'child' | 'last' | 'sibling' | 'empty' | 'icon'} LineType
+ */
+
+/**
+ * @typedef {Object.<string, Function>} EventHandlers
+ * An object where keys are event names and values are event handler functions.
+ */
+
+/**
+ * Component map to be used to render the item.
+ * @typedef {Object<string, import('svelte').SvelteComponent>} ComponentMap
+ */
+
+/**
+ * Options for the sort order of the column.
+ *
+ * @typedef {'ascending'|'descending'|'none'} SortOptions
+ */
+
+/**
+ * @typedef {'checked'|'unchecked'|'indeterminate'} SelectionState
+ */
+
+/**
+ * Options for the horizontal alignment of the column content.
+ *
+ * @typedef {'left'|'middle'|'right'} HorizontalAlignOptions
+ */
+
+/**
+ * Options for the action type of the column.
+ *
+ * @typedef {'select'|'edit'|'delete'} ActionTypes
+ */
+
+/**
+ * Structure to map custom fields for rendering. This is used to identofy the attributes for various purposes.
+ *
+ * @typedef FieldMapping
+ * @property {string} [id='id']              Unique id for the item
+ * @property {string} [text='text']          the text to render
+ * @property {string} [value='value']        the value associated with the item
+ * @property {string} [url='url']            a URL
+ * @property {string} [icon='icon']          icon to render
+ * @property {string} [image='image']        the image to render
+ * @property {string} [children='children']  children of the item
+ * @property {string} [summary='summary']    summary of the item
+ * @property {string} [notes='notes']        notes for the item
+ * @property {string} [props='props']        additional properties
+ * @property {string} [isOpen='_open']       item is open or closed
+ * @property {string} [level='level']        level of item
+ * @property {string} [parent='parent']      item is a parent
+ * @property {string} [currency='currency]   column specifying currency to be used for the current value
+ * @property {string} [isDeleted='_deleted'] item is deleted
+ * @property {FieldMapping} [fields]         Field mapping to be used on children in the next level
+ */
+
+/**
+ * Column metadata for the table.
+ *
+ * @typedef {Object} ColumnMetadata
+ *
+ * @property {string} name                    - The name of the column.
+ * @property {string} dataType                - The data type of the column (e.g., "string", "number", "date").
+ * @property {FieldMapping} [fields]          - Additional attributes for the column.
+ * @property {number} [digits=0]              - The number of digits for numeric values (defaults to 0).
+ * @property {Function} formatter             - A function to format the column value.
+ * @property {boolean} [virtual]              - Indicates if the column is virtual (true/false).
+ * @property {boolean} [sortable]             - Indicates if the column is sortable (true/false).
+ * @property {SortOptions} [sortOrder]        - The sort order of the column.
+ * @property {HorizontalAlignOptions} [align] - The alignment of the column content.
+ * @property {ActionTypes} [action]           - Action attribute for action columns.
+ */
+
+/**
+ * Track the state of a row in the table.
+ *
+ * @typedef {Object} RowState
+ * @property {number} index              - The index of the node in the flat list.
+ * @property {number} depth              - The depth of the node in the hierarchy.
+ * @property {string} [value]            - The value of the hierarchy node.
+ * @property {boolean} [isHidden]        - Indicates whether the node is visible (true/false).
+ * @property {boolean} [isParent]        - Indicates if this node is a parent (true/false).
+ * @property {boolean} [isExpanded]      - Indicates whether the node is expanded (true/false).
+ * @property {number} [parentIndex]      - The index of the parent node in the flat list.
+ * @property {SelectionState} [selected] - Indicates whether the node is selected (true/false/indeterminate).
+ * @property {Array<number>} childred    - The indices of the children in the flat list.
+ */
+
+/**
+ * Track the state of all rows in the table.
+ *
+ * @typedef {Object} RowStateMap
+ * @property {RowState[]} rows - Flat list of hierarchy nodes.
+ */
+
+/**
+ * Shade mapping for color variables
+ *
+ * @typedef {Object} ShadeMapping
+ * @property {string} key   - the variable name to be used
+ * @property {string} value - the value to be used
+ * @property {string} mode  - light or dark mode
+ */
+
+/**
+ * @typedef {Object} TickMark
+ * @property {number} value - The value of the tick mark.
+ * @property {string} label - The label for the tick mark.
+ * @property {boolean} major - Indicates if the tick mark is a major tick.
+ */
+
+/**
+ * @typedef {Object} CalendarDay
+ * @property {number}  day     - The day of the month.
+ * @property {number}  offset  - indicates the offset for positioning
+ * @property {date}    date    - Datevalue for the day.
+ * @property {string}  text    - formatted text for the day.
+ * @property {boolean} holiday - Indicates if the day is a holiday.
+ * @property {boolean} weekend - Indicates if the day is on the weekend.
+ */
+
+/**
+ * @typedef {Object} ColorPalette
+ * @property {string} 50 - The color for the 50 shade.
+ * @property {string} 100 - The color for the 100 shade.
+ * @property {string} 200 - The color for the 200 shade.
+ * @property {string} 300 - The color for the 300 shade.
+ * @property {string} 400 - The color for the 400 shade.
+ * @property {string} 500 - The color for the 500 shade.
+ * @property {string} 600 - The color for the 600 shade.
+ * @property {string} 700 - The color for the 700 shade.
+ * @property {string} 800 - The color for the 800 shade.
+ * @property {string} 900 - The color for the 900 shade.
+ * @property {string} 950 - The color for the 950 shade.
+ */
+
+/**
+ * @typedef {Object<string,ColorPalette>} ColorCollection
+ */
+
+/**
+ * @typedef {Object} ColorMapping
+ * @property {string} [primary]   - The primary color.
+ * @property {string} [secondary] - The secondary color.
+ * @property {string} [tertiary]  - The tertiary color.
+ * @property {string} [surface]   - The surface color.
+ * @property {string} [info]      - The info color.
+ * @property {string} [success]   - The success color.
+ * @property {string} [warning]   - The warning color.
+ * @property {string} [error]     - The error color.
+ */
+
+/**
+ * @typedef {Object} ColorTheme
+ * @property {ColorMapping} [mapping] - The color mapping.
+ * @property {ColorCollection} [colors] - The color collection.
+ */
+export default {}