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

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

package/src/utils.js

@@ -0,0 +1,272 @@
+import { has, isNil } from 'ramda'
+import { DATA_IMAGE_REGEX, ITEM_SNIPPET } from './constants'
+
+let idCounter = 0
+
+/**
+ * RTL language codes (ISO 639-1)
+ * @type {string[]}
+ */
+const RTL_LANGUAGES = [
+	'ar', // Arabic
+	'he', // Hebrew
+	'fa', // Persian/Farsi
+	'ur', // Urdu
+	'yi', // Yiddish
+	'ps', // Pashto
+	'sd', // Sindhi
+	'ug', // Uyghur
+	'ku', // Kurdish (Sorani)
+	'dv' // Divehi/Maldivian
+]
+
+/**
+ * Checks dir/lang attributes of the html element for RTL
+ * @returns {'ltr' | 'rtl'}
+ */
+function dirFromHtmlElement() {
+	const htmlDir = document.documentElement.getAttribute('dir')
+	if (htmlDir === 'rtl' || htmlDir === 'ltr') return htmlDir
+
+	const lang = document.documentElement.getAttribute('lang')
+	const primaryLang = lang ? lang.split('-')[0].toLowerCase() : ''
+	return RTL_LANGUAGES.includes(primaryLang) ? 'rtl' : 'ltr'
+}
+
+/**
+ * Detects text direction based on HTML lang attribute
+ * @returns {'ltr' | 'rtl'}
+ */
+export function detectDirection() {
+	if (typeof document === 'undefined') return 'ltr'
+	return dirFromHtmlElement()
+}
+
+/**
+ * Checks if current document direction is RTL
+ * @returns {boolean}
+ */
+export function isRTL() {
+	return detectDirection() === 'rtl'
+}
+/**
+ * Finds the closest ancestor of the given element that has the given attribute.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @returns {HTMLElement|null}
+ */
+export function getClosestAncestorWithAttribute(element, attribute) {
+	if (!element) return null
+	if (element.getAttribute(attribute)) return element
+	return getClosestAncestorWithAttribute(element.parentElement, attribute)
+}
+
+/**
+ * A function that performs no operations.
+ */
+export function noop() {
+	// intentionally empty to support default actions
+}
+
+/**
+ * Generates a random id
+ *
+ * @returns {string} A random id
+ */
+export function id(prefix = '') {
+	return [prefix, Math.random().toString(36).substring(2, 9), ++idCounter]
+		.filter((x) => !isNil(x) && x !== '')
+		.join('-')
+}
+
+/**
+ * Check if a value is a json object
+ *
+ * @param {*} val
+ * @returns {boolean}
+ */
+export function isObject(val) {
+	return typeof val === 'object' && !isNil(val) && !(val instanceof Date)
+}
+
+/**
+ * Converts the value to a string. If the value is an object, it will convert it to a JSON string.
+ *
+ * @param {*} value
+ * @returns {string}
+ */
+export function toString(value) {
+	if (value === null || value === undefined) return value
+	if (isObject(value)) return JSON.stringify(value, null, 2)
+	return value.toString()
+}
+
+/**
+ * Generates icon shortcuts for a collection of icons
+ *
+ * @param {string[]} icons
+ * @param {string} collection
+ * @param {string} variants
+ * @returns {Object}
+ */
+export function iconShortcuts(icons, collection, variants) {
+	const suffix = variants ? `-${variants}` : ''
+	const shortcuts = !collection
+		? {}
+		: icons.reduce(
+				(acc, name) => ({
+					...acc,
+					[name]: [collection, name].join(':') + suffix
+				}),
+				{}
+			)
+
+	return shortcuts
+}
+
+/**
+ * Scales the path by the size
+ *
+ * @param {number} size
+ * @param {string|number} x
+ * @returns {string|number}
+ */
+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 Array.isArray(path) ? path.join('-') : [path].join('-')
+}
+
+/**
+ * Gets a path array from key string
+ * @param {string} key
+ * @returns {string[]}
+ */
+export function getPathFromKey(key) {
+	return key.split('-').map(Number)
+}
+
+/**
+ * Get snippet function from an object
+ * @param {Object} obj
+ * @param {string} key
+ * @param {null|Function} defaultSnippet
+ * @returns {Function|undefined}
+ */
+export function getSnippet(obj, key, defaultSnippet = null) {
+	if (has(key, obj) && typeof obj[key] === 'function') {
+		return obj[key]
+	}
+	return defaultSnippet
+}
+
+/**
+ * Resolve which snippet to render for a proxy item.
+ *
+ * Checks proxy.snippet for a per-item named override first (e.g. item.snippet = 'highlighted').
+ * Falls back to the component-level fallback snippet name (e.g. 'itemContent' / 'groupContent').
+ * Returns null if neither is found.
+ *
+ * @param {Record<string, unknown>} snippets  - snippets passed to the component
+ * @param {{ snippet?: string | null }} proxy  - any object with an optional .snippet property
+ * @param {string} [fallback]                  - fallback snippet name; defaults to ITEM_SNIPPET ('itemContent')
+ * @returns {Function | null}
+ */
+/**
+ * @param {unknown} value
+ * @returns {Function|null}
+ */
+function asSnippet(value) {
+	return typeof value === 'function' ? value : null
+}
+
+export function resolveSnippet(snippets, proxy, fallback = ITEM_SNIPPET) {
+	const name = proxy && proxy.snippet
+	return asSnippet(name && snippets[name]) || asSnippet(snippets[fallback])
+}
+
+/**
+ * convert hex string to `{r} {g} {b}`
+ * @param {string} hex
+ * @return {string}
+ */
+export function hex2rgb(hex) {
+	const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16))
+	return `${r},${g},${b}`
+}
+
+/**
+ * Convert a CSS color value to r,g,b for use in CSS variables.
+ * Hex values (#rrggbb) are converted to "r,g,b" for rgba() support.
+ * All other CSS color formats (oklch, hsl, named) are returned as-is.
+ * Non-string values are returned unchanged.
+ * Note: non-hex values will NOT work with UnoCSS opacity utilities like bg-primary/50.
+ *
+ * @param {unknown} value
+ * @returns {unknown}
+ */
+export function colorToRgb(value) {
+	if (typeof value === 'string' && /^#[0-9a-fA-F]{6}$/.test(value)) {
+		return hex2rgb(value)
+	}
+	return value
+}
+
+/**
+ * Checks if a string is a valid image URL
+ *
+ * @param {string} str - The string to check
+ * @returns {boolean} - Returns true if the string is an image URL
+ */
+function isImageUrl(str) {
+	// Fallback regex-based validation
+	const fallbackValidation = () => {
+		const urlRegex = /^https?:\/\/.+\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff)(\?.*)?$/i
+		return urlRegex.test(str)
+	}
+
+	// Check if the string looks like a URL
+	try {
+		// Use browser-native URL constructor if available
+		if (typeof URL !== 'undefined') {
+			const url = new URL(str)
+			// Only accept HTTP/HTTPS protocols
+			if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+				return false
+			}
+			// Check common image extensions
+			const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.tiff']
+			const path = url.pathname.toLowerCase()
+			return imageExtensions.some((ext) => path.endsWith(ext))
+		}
+
+		// Fallback if URL constructor is not available
+		return fallbackValidation()
+	} catch {
+		// Fallback if URL constructor fails
+		return fallbackValidation()
+	}
+}
+/**
+ * A utility function that detects if a string is an image URL or image data (base64)
+ *
+ * @param {string} str - The string to check
+ * @returns {string|null} - Returns the original string if it's an image URL or image data, otherwise null
+ */
+export function getImage(str) {
+	if (DATA_IMAGE_REGEX.test(str)) return str
+	// Check if it's a URL
+
+	if (isImageUrl(str)) return str
+
+	return null
+}

package/src/vite/icon-collections.js

@@ -0,0 +1,73 @@
+import { createRequire } from 'module'
+import { resolve, isAbsolute } from 'path'
+import { readFileSync } from 'fs'
+
+// Two require contexts: CWD (for site-specific packages like @iconify-json/*)
+// and the module's own location (for workspace packages like @rokkit/icons).
+const requireFromCwd = createRequire(resolve(process.cwd(), 'package.json'))
+const requireFromModule = createRequire(import.meta.url)
+
+function requirePackage(jsonPath) {
+	try {
+		return requireFromCwd(jsonPath)
+	} catch {
+		return requireFromModule(jsonPath)
+	}
+}
+
+/**
+ * Creates icon collection loaders for UnoCSS presetIcons from a simple config.
+ *
+ * This function transforms a map of collection names to JSON package paths
+ * into the format expected by UnoCSS's presetIcons.
+ *
+ * Supports three types of paths:
+ * - Package paths (e.g., '@rokkit/icons/ui.json') - resolved via require
+ * - Absolute paths (e.g., '/path/to/icons.json') - used directly
+ * - Relative paths (e.g., './static/icons.json') - resolved from process.cwd()
+ *
+ * @example
+ * // uno.config.js
+ * import { iconCollections } from '@rokkit/core/vite'
+ *
+ * export default defineConfig({
+ *   presets: [
+ *     presetIcons({
+ *       collections: iconCollections({
+ *         rokkit: '@rokkit/icons/ui.json',
+ *         logo: '@rokkit/icons/auth.json',
+ *         solar: '@iconify-json/solar/icons.json',
+ *         custom: './static/icons/custom.json'
+ *       })
+ *     })
+ *   ]
+ * })
+ *
+ * @param {Record<string, string>} config - Map of collection alias to JSON path
+ * @returns {Record<string, () => any>} Collections object for presetIcons
+ */
+export function iconCollections(config) {
+	if (!config || typeof config !== 'object') {
+		return {}
+	}
+
+	return Object.entries(config).reduce((acc, [alias, jsonPath]) => {
+		acc[alias] = () => {
+			// Check if it's a relative path (starts with ./ or ../)
+			if (jsonPath.startsWith('./') || jsonPath.startsWith('../')) {
+				// Resolve relative to current working directory (where the config is)
+				const absolutePath = resolve(process.cwd(), jsonPath)
+				return JSON.parse(readFileSync(absolutePath, 'utf-8'))
+			}
+
+			// Check if it's an absolute path
+			if (isAbsolute(jsonPath)) {
+				return JSON.parse(readFileSync(jsonPath, 'utf-8'))
+			}
+
+			// Otherwise treat as a package path; try CWD first (site packages), then module location
+			return requirePackage(jsonPath)
+		}
+		return acc
+	}, {})
+}

package/src/vite/index.js

@@ -0,0 +1 @@
+export { iconCollections } from './icon-collections.js'

package/src/Accordion.svelte

@@ -1,80 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from './constants'
-	import { Text, Summary } from './items'
-	import List from './List.svelte'
-	import { navigator } from './actions/navigator'
-
-	const dispatch = createEventDispatcher()
-	let className = ''
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = {}
-	export let autoClose = false
-	export let value = null
-	let cursor = []
-
-	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Text, ...using }
-
-	function handle(event) {
-		// console.log(event.type, event.detail)
-		value = event.detail.node
-		cursor = event.detail.path
-		if (['collapse', 'expand'].includes(event.type)) {
-			if (autoClose) {
-				items.map((x) => {
-					if (x !== value && x[fields.isOpen]) {
-						x[fields.isOpen] = false
-					}
-				})
-			}
-			items = items
-		}
-		dispatch(event.type, event.detail)
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<accordion
-	class="flex flex-col w-full select-none {className}"
-	tabindex="0"
-	use:navigator={{
-		items,
-		fields,
-		enabled: true,
-		indices: cursor
-	}}
-	on:select={handle}
-	on:move={handle}
-	on:expand={handle}
-	on:collapse={handle}
->
-	{#each items as item, index}
-		{@const hasItems =
-			item[fields.children] && item[fields.children].length > 0}
-		{@const itemFields = { ...fields, ...(fields.fields ?? fields) }}
-
-		<div
-			id={'id-' + index}
-			class="flex flex-col"
-			class:is-expanded={item[fields.isOpen]}
-			class:is-selected={item === value}
-			data-path={index}
-		>
-			<Summary {fields} {using} bind:content={item} />
-			{#if hasItems && item[fields.isOpen]}
-				<List
-					bind:items={item[fields.children]}
-					bind:value
-					fields={itemFields}
-					{using}
-					on:select
-					hierarchy={[index]}
-					tabindex="-1"
-				/>
-			{/if}
-		</div>
-	{/each}
-</accordion>

package/src/Alerts.svelte

@@ -1,39 +0,0 @@
-<script>
-	import { fade } from 'svelte/transition'
-	import { flip } from 'svelte/animate'
-	import { alerts } from './stores'
-	import { dismissable } from './actions'
-
-	function dismissAll() {
-		unreadAlerts.map((alert) => (alert.dismissed = true))
-		alerts.set([...$alerts])
-	}
-
-	function dismiss(alert) {
-		alert.dismissed = true
-		alerts.set([...$alerts])
-	}
-
-	$: unreadAlerts = $alerts.filter((x) => x.dismissed)
-</script>
-
-{#if unreadAlerts.length > 0}
-	<alert-list
-		class="flex flex-col gap-2 absolute z-10"
-		use:dismissable
-		on:dismiss={dismissAll}
-	>
-		{#each unreadAlerts as alert (alert.id)}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<alert
-				class={alert.type}
-				on:click|stopPropagation={dismiss(alert)}
-				animate:flip
-				in:fade
-				out:fade
-			>
-				{alert.message}
-			</alert>
-		{/each}
-	</alert-list>
-{/if}