@rokkit/core 1.0.0-next.11 → 1.0.0-next.111

package/src/colors/tailwind.json

@@ -0,0 +1,289 @@
+{
+  "amber": {
+    "50": "#fffbeb",
+    "100": "#fef3c7",
+    "200": "#fde68a",
+    "300": "#fcd34d",
+    "400": "#fbbf24",
+    "500": "#f59e0b",
+    "600": "#d97706",
+    "700": "#b45309",
+    "800": "#92400e",
+    "900": "#78350f",
+    "950": "#451a03"
+  },
+  "blue": {
+    "50": "#eff6ff",
+    "100": "#dbeafe",
+    "200": "#bfdbfe",
+    "300": "#93c5fd",
+    "400": "#60a5fa",
+    "500": "#3b82f6",
+    "600": "#2563eb",
+    "700": "#1d4ed8",
+    "800": "#1e40af",
+    "900": "#1e3a8a",
+    "950": "#172554"
+  },
+  "cyan": {
+    "50": "#ecfeff",
+    "100": "#cffafe",
+    "200": "#a5f3fc",
+    "300": "#67e8f9",
+    "400": "#22d3ee",
+    "500": "#06b6d4",
+    "600": "#0891b2",
+    "700": "#0e7490",
+    "800": "#155e75",
+    "900": "#164e63",
+    "950": "#083344"
+  },
+  "emerald": {
+    "50": "#ecfdf5",
+    "100": "#d1fae5",
+    "200": "#a7f3d0",
+    "300": "#6ee7b7",
+    "400": "#34d399",
+    "500": "#10b981",
+    "600": "#059669",
+    "700": "#047857",
+    "800": "#065f46",
+    "900": "#064e3b",
+    "950": "#022c22"
+  },
+  "fuscia": {
+    "50": "#fdf4ff",
+    "100": "#fae8ff",
+    "200": "#f5d0fe",
+    "300": "#f0abfc",
+    "400": "#e879f9",
+    "500": "#d946ef",
+    "600": "#c026d3",
+    "700": "#a21caf",
+    "800": "#86198f",
+    "900": "#701a75",
+    "950": "#4a044e"
+  },
+  "gray": {
+    "50": "#f9fafb",
+    "100": "#f3f4f6",
+    "200": "#e5e7eb",
+    "300": "#d1d5db",
+    "400": "#9ca3af",
+    "500": "#6b7280",
+    "600": "#4b5563",
+    "700": "#374151",
+    "800": "#1f2937",
+    "900": "#111827",
+    "950": "#00060c"
+  },
+  "green": {
+    "50": "#f0fdf4",
+    "100": "#dcfce7",
+    "200": "#bbf7d0",
+    "300": "#86efac",
+    "400": "#4ade80",
+    "500": "#22c55e",
+    "600": "#16a34a",
+    "700": "#15803d",
+    "800": "#166534",
+    "900": "#14532d",
+    "950": "#052e16"
+  },
+  "indigo": {
+    "50": "#eef2ff",
+    "100": "#e0e7ff",
+    "200": "#c7d2fe",
+    "300": "#a5b4fc",
+    "400": "#818cf8",
+    "500": "#6366f1",
+    "600": "#4f46e5",
+    "700": "#4338ca",
+    "800": "#3730a3",
+    "900": "#312e81",
+    "950": "#1e1b4b"
+  },
+  "lime": {
+    "50": "#f7fee7",
+    "100": "#ecfccb",
+    "200": "#d9f99d",
+    "300": "#bef264",
+    "400": "#a3e635",
+    "500": "#84cc16",
+    "600": "#65a30d",
+    "700": "#4d7c0f",
+    "800": "#3f6212",
+    "900": "#365314",
+    "950": "#1a2e05"
+  },
+  "orange": {
+    "50": "#fff7ed",
+    "100": "#ffedd5",
+    "200": "#fed7aa",
+    "300": "#fdba74",
+    "400": "#fb923c",
+    "500": "#f97316",
+    "600": "#ea580c",
+    "700": "#c2410c",
+    "800": "#9a3412",
+    "900": "#7c2d12",
+    "950": "#431407"
+  },
+  "pink": {
+    "50": "#fdf2f8",
+    "100": "#fce7f3",
+    "200": "#fbcfe8",
+    "300": "#f9a8d4",
+    "400": "#f472b6",
+    "500": "#ec4899",
+    "600": "#db2777",
+    "700": "#be185d",
+    "800": "#9d174d",
+    "900": "#831843",
+    "950": "#500724"
+  },
+  "purple": {
+    "50": "#faf5ff",
+    "100": "#f3e8ff",
+    "200": "#e9d5ff",
+    "300": "#d8b4fe",
+    "400": "#c084fc",
+    "500": "#a855f7",
+    "600": "#9333ea",
+    "700": "#7e22ce",
+    "800": "#6b21a8",
+    "900": "#581c87",
+    "950": "#3b0764"
+  },
+  "red": {
+    "50": "#fef2f2",
+    "100": "#fee2e2",
+    "200": "#fecaca",
+    "300": "#fca5a5",
+    "400": "#f87171",
+    "500": "#ef4444",
+    "600": "#dc2626",
+    "700": "#b91c1c",
+    "800": "#991b1b",
+    "900": "#7f1d1d",
+    "950": "#450a0a"
+  },
+  "rose": {
+    "50": "#fff1f2",
+    "100": "#ffe4e6",
+    "200": "#fecdd3",
+    "300": "#fda4af",
+    "400": "#fb7185",
+    "500": "#f43f5e",
+    "600": "#e11d48",
+    "700": "#be123c",
+    "800": "#9f1239",
+    "900": "#881337",
+    "950": "#4c0519"
+  },
+  "sky": {
+    "50": "#f0f9ff",
+    "100": "#e0f2fe",
+    "200": "#bae6fd",
+    "300": "#7dd3fc",
+    "400": "#38bdf8",
+    "500": "#0ea5e9",
+    "600": "#0284c7",
+    "700": "#0369a1",
+    "800": "#075985",
+    "900": "#0c4a6e",
+    "950": "#082f49"
+  },
+  "slate": {
+    "50": "#f8fafc",
+    "100": "#f1f5f9",
+    "200": "#e2e8f0",
+    "300": "#cbd5e0",
+    "400": "#94a3b8",
+    "500": "#64748b",
+    "600": "#475569",
+    "700": "#334155",
+    "800": "#1e293b",
+    "900": "#0f172a",
+    "950": "#020617"
+  },
+  "stone": {
+    "50": "#fafaf9",
+    "100": "#f5f5f4",
+    "200": "#e7e5e4",
+    "300": "#d6d3d1",
+    "400": "#a8a29e",
+    "500": "#78716c",
+    "600": "#57534e",
+    "700": "#44403c",
+    "800": "#292524",
+    "900": "#1c1917",
+    "950": "#0c0a09"
+  },
+  "teal": {
+    "50": "#f0fdfa",
+    "100": "#ccfbf1",
+    "200": "#99f6e4",
+    "300": "#5eead4",
+    "400": "#2dd4bf",
+    "500": "#14b8a6",
+    "600": "#0d9488",
+    "700": "#0f766e",
+    "800": "#115e59",
+    "900": "#134e4a",
+    "950": "#042f2e"
+  },
+  "violet": {
+    "50": "#f5f3ff",
+    "100": "#ede9fe",
+    "200": "#ddd6fe",
+    "300": "#c4b5fd",
+    "400": "#a78bfa",
+    "500": "#8b5cf6",
+    "600": "#7c3aed",
+    "700": "#6d28d9",
+    "800": "#5b21b6",
+    "900": "#4c1d95",
+    "950": "#2e1065"
+  },
+  "yellow": {
+    "50": "#fefce8",
+    "100": "#fef9c3",
+    "200": "#fef08a",
+    "300": "#fde047",
+    "400": "#facc15",
+    "500": "#eab308",
+    "600": "#ca8a04",
+    "700": "#a16207",
+    "800": "#854d0e",
+    "900": "#713f12",
+    "950": "#422006"
+  },
+  "zinc": {
+    "50": "#fafafa",
+    "100": "#f4f4f5",
+    "200": "#e4e4e7",
+    "300": "#d4d4d8",
+    "400": "#a1a1aa",
+    "500": "#71717a",
+    "600": "#52525b",
+    "700": "#3f3f46",
+    "800": "#27272a",
+    "900": "#18181b",
+    "950": "#000000"
+  },
+  "shark": {
+    "DEFAULT": "#677287",
+    "50": "#ffffff",
+    "100": "#efefef",
+    "200": "#E0E0E0",
+    "300": "#C1C6D0",
+    "400": "#828C9F",
+    "500": "#677287",
+    "600": "#51596A",
+    "700": "#3B414D",
+    "800": "#2E323C",
+    "900": "#20242A",
+    "950": "#1A1C22"
+  }
+}

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

@@ -1,3 +1,34 @@
+export { defaultColors, syntaxColors, shades, defaultPalette } from './colors/index.js'
+
+/**
+ * @type {import('./types).FieldMapping} Fields
+ */
+export const defaultFields = {
+	id: 'id',
+	url: 'url',
+	text: 'text',
+	value: 'value',
+	children: 'children',
+	icon: 'icon',
+	iconPrefix: null,
+	image: 'image',
+	summary: 'summary',
+	notes: 'notes',
+	props: 'props',
+	target: 'target',
+	state: 'state',
+	level: 'level',
+	parent: 'parent',
+	currency: 'currency',
+	label: 'label',
+	component: 'component',
+	snippet: '_snippet',
+	/* flag fields  */
+	deleted: '_deleted',
+	expanded: '_expanded',
+	selected: '_selected'
+}
+
 export const defaultIcons = [
 	'accordion-opened',
 	'accordion-closed',
@@ -6,7 +37,6 @@ export const defaultIcons = [
 	'action-clear',
 	'action-search',
 	'action-close',
-	'action-close-filled',
 	'node-opened',
 	'node-closed',
 	'selector-opened',
@@ -16,6 +46,7 @@ export const defaultIcons = [
 	'checkbox-unknown',
 	'rating-filled',
 	'rating-empty',
+	'rating-half',
 	'radio-off',
 	'radio-on',
 	'mode-dark',
@@ -23,39 +54,25 @@ export const defaultIcons = [
 	'navigate-left',
 	'navigate-right',
 	'navigate-up',
-	'navigate-down'
+	'navigate-down',
+	'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'
 ]
 
-// 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 = {
 	id: 'id',
 	label: 'label',
@@ -63,39 +80,6 @@ export const defaultOptions = {
 	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 = {
 	ArrowRight: 'open',
 	ArrowLeft: 'close',
@@ -105,6 +89,24 @@ export const defaultKeyMap = {
 	Escape: 'deselect'
 }
 
+export const defaultThemeMapping = {
+	neutral: 'slate',
+	primary: 'orange',
+	secondary: 'pink',
+	accent: 'sky',
+	success: 'green',
+	warning: 'yellow',
+	danger: 'red',
+	error: 'red',
+	info: 'cyan'
+}
+
+/**
+ * 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('-')])
@@ -118,32 +120,3 @@ export function stateIconsFromNames(icons) {
 }
 
 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'
-// 	}
-// }

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,148 @@
+import { isNil, has, omit } from 'ramda'
+import { defaultFields } from './constants.js'
+import { isObject } from './utils.js'
+
+export class FieldMapper {
+	#fields = { ...defaultFields }
+	#childMapper = null
+
+	constructor(fields = defaultFields) {
+		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.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
+		])
+	}
+
+	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 === 'text' ? 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('text', 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
+	}
+}