@rokkit/core 1.0.0-next.105 → 1.0.0-next.106

package/dist/calendar.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Get the days in the month.
+ *
+ * @param {Date}    value
+ * @param {Array}   holidays
+ * @param {boolean} fixed
+ * @returns {import('./types').CalendarDay[]}
+ */
+export function getCalendarDays(value: Date, holidays?: any[], fixed?: boolean): import("./types").CalendarDay[];
+export const weekdays: string[];

package/dist/connector.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Constructs an array of line types for tree visualization
+ * @param {boolean} hasChildren - Whether the node has children
+ * @param {import('./types').LineType[]} parentTypes - Types from parent nodes
+ * @param {import('./types').LineType} position - Current position type
+ * @returns {import('./types').LineType[]} Array of line types
+ */
+export function getLineTypes(hasChildren?: boolean, parentTypes?: import("./types").LineType[], position?: import("./types").LineType): import("./types").LineType[];

package/dist/events.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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: Object, defaults?: Array<string>): import("./types.js").EventHandlers;

package/dist/field-mapper.d.ts

@@ -1,20 +1,62 @@
 export class FieldMapper {
-    constructor(fields?: any, using?: {});
-    _fields: {};
-    _using: {};
-    set fields(fields: {});
-    get fields(): {};
-    set using(using: {});
-    get using(): {};
-    getComponent(value: any): import("svelte").SvelteComponent<Record<string, any>, any, any>;
-    getIcon(value: any): string;
-    getValue(node: any): any;
-    getText(node: any): string;
-    getAttribute(node: any, attr: any): any;
-    getFormattedText(node: any, formatter: any): Function;
-    hasChildren(item: any): boolean;
-    isExpanded(item: any): boolean;
+    constructor(fields?: any, componentMap?: {});
+    hasIcon: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasImage: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasText: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasValue: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasLabel: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasComponent: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    hasCurrency: ((obj: unknown) => obj is {
+        [x: string]: unknown;
+    }) | undefined;
+    withPrefix: ((x: any) => string) | undefined;
+    excludeFlags: (<U extends Partial<Record<any, any>>>(obj: any extends keyof U ? U : never) => any extends keyof U ? Omit<U, any> : never) | undefined;
+    set fields(fields: any);
+    get fields(): any;
+    set componentMap(components: {});
+    get componentMap(): {};
+    getComponent(value: any): any;
+    getIcon(value: any): string | null;
+    getImage(value: any): any;
+    getValue(value: any): any;
+    getText(value: any): any;
+    getLabel(value: any): any;
+    getAttribute(value: any, attr: any): any;
+    getFormattedText(value: any, formatter: any): any;
+    hasChildren(item: any): item is never;
+    isExpanded(item: any): false;
+    isHidden(item: any): unknown;
     isNested(items: any): boolean;
-    hasImage(item: any): any;
-    hasIcon(item: any): any;
+    toggleVisibility(items: any, visible: any): void;
+    toggleExpansion(item: any): void;
+    getChildren(item: any): never[];
+    /**
+     * Finds children by an index path
+     *
+     * @param {Array<Object>} items
+     * @param {Array<number>} path
+     * @returns {Array<Object>}
+     */
+    getChildrenByPath(items: Array<Object>, path?: Array<number>): Array<Object>;
+    /**
+     * Finds an item by an index path
+     *
+     * @param {Array<Object>} items
+     * @param {Array<number>} path
+     * @returns {Object|null}
+     */
+    getItemByPath(items: Array<Object>, path?: Array<number>): Object | null;
+    #private;
 }

package/dist/index.d.ts

@@ -5,3 +5,8 @@ export * from "./nested.js";
 export * from "./string.js";
 export * from "./theme.js";
 export { FieldMapper } from "./field-mapper.js";
+export { createEmitter } from "./events.js";
+export { getLineTypes } from "./connector.js";
+export { generateTicks } from "./ticks.js";
+export { getItemAtIndex, getIndexForItem } from "./mapped-items.js";
+export { weekdays, getCalendarDays } from "./calendar.js";

package/dist/mapped-items.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Get an item at a specific index
+ * @param {Array<any>} items
+ * @param {any} index
+ * @returns
+ */
+export function getItemAtIndex(items: Array<any>, index: any): any;
+/**
+ *  Get the index for an item in an array
+ * @param {Array<any} items
+ * @param {any} item
+ * @returns
+ */
+export function getIndexForItem(items: Array<any>, item: any): number;

package/dist/string.d.ts

@@ -26,7 +26,7 @@ export function toHyphenCase(text: string): string;
  * @param {String} b
  * @returns
  */
-export function compareStrings(a: string, b: string): 0 | 1 | -1;
+export function compareStrings(a: string, b: string): 1 | 0 | -1;
 /**
  * Sort by splitting hyphen separated strings while keeping strings with same number of parts together
  *

package/dist/theme.d.ts

@@ -25,6 +25,11 @@ export function shadesOf(name: string, modifier?: string): {
  * @returns {object}
  */
 export function stateColors(name: string, modifier?: string): object;
+/**
+ *
+ * @param {string} modifier
+ * @returns
+ */
 export function themeColors(modifier?: string): {};
 /**
  * Generates contrast colors for light and dark modes based on a given palette. Each color variant in the

package/dist/ticks.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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: number, upperBound: number, minorTickStep?: number, majorTickStep?: number): import("./types").TickMark[];

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {};
 export default _default;
+export type LineType = "child" | "last" | "sibling" | "empty" | "icon";
 /**
  * An object where keys are event names and values are event handler functions.
  */

package/dist/utils.d.ts

@@ -47,3 +47,15 @@ export function iconShortcuts(icons: string[], collection: string, variants: str
  * @returns {string|number}
  */
 export function scaledPath(size: number, x: string | number): string | number;
+/**
+ * Gets a key string from path
+ * @param {string[]} path
+ * @returns {string}
+ */
+export function getKeyFromPath(path: string[]): string;
+/**
+ * Gets a path array from key string
+ * @param {string} key
+ * @returns {string[]}
+ */
+export function getPathFromKey(key: string): string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.105",
+  "version": "1.0.0-next.106",
   "description": "Contains core utility functions and classes that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -28,6 +28,7 @@
     }
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
     "ramda": "^0.30.1"
   }
 }

package/src/calendar.js

@@ -0,0 +1,44 @@
+import { getDay, getMonth, getYear, getDaysInMonth, format, isWeekend } from 'date-fns'
+
+export const weekdays = [
+	'Sunday',
+	'Monday',
+	'Tuesday',
+	'Wednesday',
+	'Thursday',
+	'Friday',
+	'Saturday'
+]
+
+/**
+ * Get the days in the month.
+ *
+ * @param {Date}    value
+ * @param {Array}   holidays
+ * @param {boolean} fixed
+ * @returns {import('./types').CalendarDay[]}
+ */
+export function getCalendarDays(value, holidays = [], fixed = false) {
+	const month = getMonth(value)
+	const year = getYear(value)
+	const offset = getDay(new Date(year, month, 1)) + 1
+
+	holidays = holidays.map((x) => format(new Date(x), 'yyyy-MMM-dd'))
+	let days = Array.from({ length: getDaysInMonth(value) }, (_, i) => ({
+		day: i + 1,
+		offset: i === 0 ? offset : 0,
+		date: new Date(year, month, i + 1)
+	})).map((x) => ({
+		...x,
+		text: format(x.date, 'yyyy-MMM-dd'),
+		weekend: isWeekend(x.date),
+		holiday: holidays.includes(format(x.date, 'yyyy-MMM-dd'))
+	}))
+
+	if (fixed && days[0].offset > 4) {
+		const n = 5 * 7 - days[0].offset
+		days = [...days.slice(n + 1), ...days.slice(0, n + 1)]
+	}
+
+	return days
+}

package/src/connector.js

@@ -0,0 +1,34 @@
+const LINE_TYPES = {
+	CHILD: 'child',
+	LAST: 'last',
+	SIBLING: 'sibling',
+	EMPTY: 'empty',
+	ICON: 'icon'
+}
+
+const nextType = {
+	[LINE_TYPES.CHILD]: LINE_TYPES.SIBLING,
+	[LINE_TYPES.LAST]: LINE_TYPES.EMPTY,
+	[LINE_TYPES.SIBLING]: LINE_TYPES.SIBLING,
+	[LINE_TYPES.EMPTY]: LINE_TYPES.EMPTY
+}
+
+/**
+ * Constructs an array of line types for tree visualization
+ * @param {boolean} hasChildren - Whether the node has children
+ * @param {import('./types').LineType[]} parentTypes - Types from parent nodes
+ * @param {import('./types').LineType} position - Current position type
+ * @returns {import('./types').LineType[]} Array of line types
+ */
+export function getLineTypes(hasChildren = false, parentTypes = [], position = LINE_TYPES.CHILD) {
+	return parentTypes
+		.reduce((acc, type, index) => {
+			// For all but the last parent type, convert to next type
+			if (index < parentTypes.length - 1) {
+				return [...acc, nextType[type]]
+			}
+			// For the last parent type, use the position
+			return [...acc, position]
+		}, [])
+		.concat(hasChildren ? LINE_TYPES.ICON : LINE_TYPES.EMPTY)
+}

package/src/constants.js

@@ -18,11 +18,16 @@ export const defaultFields = {
 	props: 'props',
 	target: 'target',
 	state: 'state',
-	isOpen: '_open',
-	isDeleted: '_deleted',
 	level: 'level',
 	parent: 'parent',
-	currency: 'currency'
+	currency: 'currency',
+	label: 'label',
+	/* flag fields  */
+	isSelected: '_selected',
+	isHidden: '_hidden',
+	isOpen: '_open',
+	isDeleted: '_deleted',
+	isFiltered: '_filtered'
 }
 
 export const defaultIcons = [

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

@@ -1,81 +1,190 @@
-import { defaultFields } from './constants'
-import {
-	getComponent,
-	getIcon,
-	getValue,
-	getText,
-	getAttribute,
-	getFormattedText,
-	hasChildren,
-	isExpanded
-} from './mapping'
-import { has } from 'ramda'
+import { defaultFields } from './constants.js'
+import { isNil, has, omit } from 'ramda'
+import { isObject } from './utils.js'
 
 export class FieldMapper {
-	_fields = {}
-	_using = {}
-
-	constructor(fields = defaultFields, using = {}) {
-		this.fields = fields
-		this.using = using
+	#fields = { ...defaultFields }
+	#componentMap = {}
+
+	constructor(fields = defaultFields, componentMap = {}) {
+		this.#updateFields(fields)
+		this.#updateComponentMap(componentMap)
+	}
+
+	#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.hasText = has(this.#fields.text)
+		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
+		])
+	}
+
+	#updateComponentMap(components) {
+		if (typeof components === 'object' && components) {
+			Object.keys(components).forEach((key) => {
+				this.#componentMap[key] = components[key]
+			})
+		}
 	}
 
 	get fields() {
-		return this._fields
+		return this.#fields
 	}
 
 	set fields(fields) {
-		this._fields = { ...defaultFields, ...fields }
+		this.#updateFields(fields)
 	}
 
-	get using() {
-		return this._using
+	get componentMap() {
+		return this.#componentMap
 	}
-	set using(using) {
-		this._using = using ?? {}
+
+	set componentMap(components) {
+		this.#updateComponentMap(components)
 	}
 
 	getComponent(value) {
-		return getComponent(value, this.fields, this.using)
+		if (this.hasComponent(value))
+			return this.componentMap[value[this.fields.component]] ?? this.componentMap.default
+		return this.componentMap.default
 	}
 
 	getIcon(value) {
-		return getIcon(value, this.fields)
+		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)
+	}
+	getImage(value) {
+		return this.getAttribute(value, 'image')
 	}
 
-	getValue(node) {
-		return getValue(node, this.fields)
+	getValue(value) {
+		if (this.hasValue(value)) {
+			return value[this.fields.value]
+		}
+		return value
 	}
 
-	getText(node) {
-		return getText(node, this.fields)
+	getText(value) {
+		if (this.hasText(value)) {
+			return value[this.fields.text]
+		}
+		return typeof value === 'object' ? null : value
 	}
 
-	getAttribute(node, attr) {
-		return getAttribute(node, attr)
+	getLabel(value) {
+		return this.getAttribute(value, 'label') ?? this.getText(value)
 	}
 
-	getFormattedText(node, formatter) {
-		return getFormattedText(node, this.fields, formatter)
+	getAttribute(value, attr) {
+		if (has(attr, this.fields)) {
+			return has(this.fields[attr], value) ? value[this.fields[attr]] : null
+		}
+		return null
+	}
+
+	getFormattedText(value, formatter) {
+		const text = this.getText(value)
+		if (isNil(text)) return ''
+
+		if (typeof formatter !== 'function') return text.toString()
+
+		if (this.hasCurrency(value)) {
+			return formatter(text, this.getAttribute(value, 'currency'))
+		}
+		return formatter(text)
 	}
 
 	hasChildren(item) {
-		return hasChildren(item, this.fields)
+		return (
+			!isNil(item) &&
+			has(this.fields.children, item) &&
+			Array.isArray(item[this.fields.children]) &&
+			item[this.fields.children].length > 0
+		)
 	}
 
 	isExpanded(item) {
-		return isExpanded(item, this.fields)
+		if (this.hasChildren(item)) {
+			return has(this.fields.isOpen, item) && item[this.fields.isOpen]
+		}
+		return false
 	}
 
-	isNested(items) {
-		return Array.isArray(items) && items.some((item) => this.hasChildren(item))
+	isHidden(item) {
+		return has(this.fields.isHidden, item) && item[this.fields.isHidden]
 	}
 
-	hasImage(item) {
-		return has(item, this.fields.image)
+	isNested(items) {
+		return Array.isArray(items) && items.some((item) => this.hasChildren(item))
 	}
 
-	hasIcon(item) {
-		return has(item, this.fields.icon)
+	toggleVisibility(items, visible) {
+		items.forEach((item) => {
+			item[this.fields.isHidden] = !visible
+			if (this.hasChildren(item)) {
+				this.toggleVisibility(item[this.fields.children], visible && item[this.fields.isOpen])
+			}
+		})
+	}
+
+	toggleExpansion(item) {
+		if (this.hasChildren(item)) {
+			item[this.fields.isOpen] = !item[this.fields.isOpen]
+			this.toggleVisibility(item[this.fields.children], item[this.fields.isOpen])
+		}
+	}
+
+	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 = []) {
+		// skipcq: JS-W1042 default undefined is needed
+		const result = path.reduce(
+			(item, index, i) => (i === 0 ? items?.[index] : item?.[this.fields.children]?.[index]),
+			undefined
+		)
+
+		if (result === undefined) throw new Error('Invalid path')
+		return result
 	}
 }

package/src/index.js

@@ -8,6 +8,11 @@ export * from './utils.js'
 export * from './nested.js'
 // skipcq: JS-E1004 - Needed for exposing all functions
 export * from './string.js'
-export { FieldMapper } from './field-mapper.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'

package/src/key-event-map.js

@@ -1,4 +1,4 @@
-import * as R from 'ramda'
+import { find, toPairs } from 'ramda'
 
 /**
  * Class to manage key event mappings.
@@ -26,10 +26,11 @@ export class KeyEventMap {
 	 * @returns {string|null} - The event name or null if no match is found.
 	 */
 	getEventForKey(key) {
-		const matchEvent = ([eventName, keys]) =>
+		// eslint-disable-next-line no-unused-vars
+		const matchEvent = ([_, keys]) =>
 			(Array.isArray(keys) && keys.includes(key)) || (keys instanceof RegExp && keys.test(key))
 
-		const event = R.find(matchEvent, R.toPairs(this.mapping))
+		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/theme.js

@@ -53,6 +53,11 @@ export function stateColors(name, modifier = 'none') {
 	}
 }
 
+/**
+ *
+ * @param {string} modifier
+ * @returns
+ */
 export function themeColors(modifier = 'none') {
 	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
 
@@ -183,7 +188,10 @@ export function themeRules(name = 'rokkit', mapping = defaultThemeMapping, color
 	const variants = Object.keys(mapping)
 
 	const rules = variants.reduce(
-		(acc, variant) => [...acc, ...generateColorRules(variant, colors, mapping)],
+		(acc, variant) => [
+			...acc,
+			...generateColorRules(variant, { ...defaultColors, ...colors }, mapping)
+		],
 		[]
 	)
 

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

@@ -1,3 +1,7 @@
+/**
+ * @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.

package/src/utils.js

@@ -83,3 +83,21 @@ export function scaledPath(size, x) {
 	if (Array.isArray(x)) return x.map((v) => scaledPath(size, v)).join(' ')
 	return typeof x === 'number' ? x * size : x
 }
+
+/**
+ * Gets a key string from path
+ * @param {string[]} path
+ * @returns {string}
+ */
+export function getKeyFromPath(path) {
+	return path.join('-')
+}
+
+/**
+ * Gets a path array from key string
+ * @param {string} key
+ * @returns {string[]}
+ */
+export function getPathFromKey(key) {
+	return key.split('-').map(Number)
+}