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

package/src/utils.js

@@ -0,0 +1,250 @@
+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
+]
+
+/**
+ * Detects text direction based on HTML lang attribute
+ * @returns {'ltr' | 'rtl'}
+ */
+export function detectDirection() {
+	if (typeof document === 'undefined') return 'ltr'
+
+	// Check dir attribute first (explicit override)
+	const htmlDir = document.documentElement.getAttribute('dir')
+	if (htmlDir === 'rtl' || htmlDir === 'ltr') return htmlDir
+
+	// Detect from lang attribute
+	const lang = document.documentElement.getAttribute('lang')
+	if (lang) {
+		// Extract primary language code (e.g., 'ar-SA' -> 'ar')
+		const primaryLang = lang.split('-')[0].toLowerCase()
+		if (RTL_LANGUAGES.includes(primaryLang)) return 'rtl'
+	}
+
+	return 'ltr'
+}
+
+/**
+ * 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}
+ */
+export function resolveSnippet(snippets, proxy, fallback = ITEM_SNIPPET) {
+	const name = proxy?.snippet
+	if (name && typeof snippets[name] === 'function') return snippets[name]
+	const fb = snippets[fallback]
+	return typeof fb === 'function' ? fb : null
+}
+
+/**
+ * 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}`
+}
+
+/**
+ * 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/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Jerry Thomas
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1 +0,0 @@
-# Core Components

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}

package/src/DropDown.svelte

@@ -1,82 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { dismissable } from './actions'
-	import { defaultFields, defaultStateIcons } from './constants.js'
-
-	import Icon from './Icon.svelte'
-	import Text from './items/Text.svelte'
-	import List from './List.svelte'
-	import Slider from './Slider.svelte'
-
-	const dispatch = createEventDispatcher()
-
-	let className = ''
-	export { className as class }
-	export let items = []
-	export let fields = defaultFields
-	export let using = { default: Text }
-	export let value = null
-	export let title
-	export let icon
-	export let small = false
-
-	$: using = { default: Text, ...using }
-	$: fields = { ...defaultFields, ...fields }
-
-	let offsetTop = 0
-	let open = false
-	let icons = defaultStateIcons.selector
-
-	function handleSelect(event) {
-		open = false
-		dispatch('change', event.detail)
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<drop-down
-	class="flex w-full relative cursor-pointer select-none dropdown {className}"
-	class:open
-	tabindex="0"
-	aria-haspopup="true"
-	aria-controls="menu"
-	use:dismissable
-	on:blur={() => (open = false)}
-	on:dismiss={() => (open = false)}
->
-	<button
-		on:click|stopPropagation={() => (open = !open)}
-		class="flex"
-		bind:clientHeight={offsetTop}
-		tabindex="-1"
-	>
-		{#if icon}
-			<Icon name={icon} />
-		{/if}
-		{#if !small && title}
-			<p>{title}</p>
-		{/if}
-		{#if open}
-			<icon class={icons.opened} />
-		{:else}
-			<icon class={icons.closed} />
-		{/if}
-	</button>
-	{#if open}
-		<!-- <div
-			class="flex flex-col absolute z-10 h-fit w-full menu"
-			style:top="{offsetTop}px"
-		> -->
-		<Slider top={offsetTop}>
-			<List
-				{items}
-				{fields}
-				{using}
-				bind:value
-				on:select={handleSelect}
-				tabindex="-1"
-			/>
-		</Slider>
-		<!-- </div> -->
-	{/if}
-</drop-down>

package/src/DropSearch.svelte

@@ -1,67 +0,0 @@
-<script>
-	import { defaultFields } from './constants.js'
-	import List from './List.svelte'
-	import Slider from './Slider.svelte'
-	import { Text } from './items'
-
-	export let data
-	export let value = null
-	export let fields = defaultFields
-	export let using = { default: Text }
-
-	$: using = { default: Text, ...using }
-	$: fields = { ...defaultFields, ...fields }
-
-	let opened = false
-	let search
-	let searchBox
-
-	// on search change filter list
-	function handleSelect(event) {
-		console.log('selected', event)
-		value = event.detail
-		search = event.detail[fields.text]
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div
-	class="flex flex-col outline-none w-full h-12 relative dropdown"
-	tabindex={0}
->
-	<div class="flex flex-shrink-0 h-12 items-center pl-4 selected-item">
-		<span class="flex flex-grow">
-			<input
-				type="text"
-				class="p-0 border-none bg-transparent w-full"
-				bind:value={search}
-				bind:this={searchBox}
-				on:focus={() => {
-					opened = true
-					searchBox.select()
-				}}
-				on:blur={() => {
-					opened = false
-				}}
-			/>
-		</span>
-		{#if opened}
-			<icon class="selector-opened" />
-		{:else}
-			<icon class="selector-closed" />
-		{/if}
-	</div>
-
-	{#if opened}
-		<Slider>
-			<List
-				bind:items={data}
-				bind:value
-				{fields}
-				{using}
-				on:select={handleSelect}
-				on:change
-			/>
-		</Slider>
-	{/if}
-</div>

package/src/EditableTabs.svelte

@@ -1,31 +0,0 @@
-<script>
-	import TabItems from './TabItems.svelte'
-	import TabItem from './TabItem.svelte'
-
-	let className = ''
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let title = null
-	export let allowAdd = false
-	export let allowClose = false
-	export let value = items[0]
-
-	function addTab() {
-		items = [...items, {}]
-		value = items[items.length - 1]
-	}
-</script>
-
-<tab-view class="flex flex-col w-full flex-grow {className}">
-	<tabs class="flex flex-row flex-shrink-0 w-full select-none cursor-pointer">
-		{#if title}
-			<p>{title}</p>
-		{/if}
-		<TabItems {items} {fields} {allowClose} bind:value on:close />
-		{#if allowAdd}
-			<TabItem label="+" on:click={addTab} />
-		{/if}
-	</tabs>
-	<content class="flex flex-col flex-grow"><slot /></content>
-</tab-view>

package/src/Icon.svelte

@@ -1,15 +0,0 @@
-<script>
-	let className = ''
-	export { className as class }
-
-	export let name = ''
-	let h
-</script>
-
-<square-icon
-	class="flex flex-col flex-shrink-0 h-full items-center justify-center {className}"
-	bind:clientHeight={h}
-	style:width="{h}px"
->
-	<icon class={name} aria-hidden="true" />
-</square-icon>