@rokkit/core 1.0.0-next.16 → 1.0.0-next.160

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/theme.ts

@@ -0,0 +1,208 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { DEFAULT_THEME_MAPPING, defaultColors, TONE_MAP } from './constants'
+import { shades } from './colors/index'
+import { colorToRgb } from './utils'
+
+const modifiers = {
+	hsl: (value) => `hsl(${value} / <alpha-value>)`,
+	rgb: (value) => `rgb(${value} / <alpha-value>)`,
+	none: (value) => value
+}
+
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @param {string} modifier
+ * @returns
+ */
+export function shadesOf(name, modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+
+	return shades.reduce(
+		(result, shade) => ({
+			...result,
+			[shade]: fn(`var(--color-${name}-${shade})`)
+		}),
+		{
+			DEFAULT: fn(`var(--color-${name}-500)`)
+		}
+	)
+}
+
+/**
+ * Generates color rules for a specific theme variant, for both light and dark modes.
+ *
+ * @param {string} variant - The name of the variant to generate rules for.
+ * @param {Object} colors - The object containing color definitions.
+ * @param {Object} mapping - An object that maps variant names to color property names.
+ * @returns {import('./types').ShadeMappings} An array containing the color rules for both light and dark modes.
+ */
+function generateColorRules(variant, colors, mapping) {
+	return ['DEFAULT', ...shades].flatMap((shade) => [
+		{
+			key: shade === 'DEFAULT' ? `--color-${variant}` : `--color-${variant}-${shade}`,
+			value: colorToRgb(colors[mapping[variant]][`${shade}`])
+		}
+	])
+}
+
+/**
+ * Constructs and returns the light and dark theme variants based on provided color mapping and color definitions.
+ *
+ * @param {Object} [mapping=DEFAULT_THEME_MAPPING] - An object mapping variant names to color property names.
+ * @param {Object} [colors=defaultColors]        - The object containing default color definitions.
+ * @returns {Array<Array>} An array containing two arrays, one for the light theme variant and another for the dark theme.
+ */
+export function themeRules(mapping = DEFAULT_THEME_MAPPING, colors = defaultColors) {
+	mapping = { ...DEFAULT_THEME_MAPPING, ...mapping }
+	colors = { ...defaultColors, ...colors }
+	const variants = Object.keys(mapping)
+	const rules = variants
+		.flatMap((variant) => generateColorRules(variant, colors, mapping))
+		.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+
+	return rules
+}
+
+const SEMANTIC_PREFIXES = [
+	'bg',
+	'border',
+	'border-l',
+	'border-r',
+	'border-t',
+	'border-b',
+	'text',
+	'ring',
+	'outline',
+	'from',
+	'to',
+	'divide',
+	'stroke',
+	'fill'
+]
+
+/**
+ * @param {{ prefix: string, name: string, toneName: string, lightValue: number, darkValue: number }} opts
+ * @returns {Array}
+ */
+function toneShortcuts({ prefix, name, toneName, lightValue, darkValue }) {
+	const variantPattern = new RegExp(`^(.+):${prefix}-${name}-${toneName}(\\/\\d+)?$`)
+	const opacityPattern = new RegExp(`^${prefix}-${name}-${toneName}(\\/\\d+)?$`)
+	const exactPattern = `${prefix}-${name}-${toneName}`
+	return [
+		[
+			variantPattern,
+			([, variant, end]) =>
+				`${variant}:${prefix}-${name}-${lightValue}${end || ''} ${variant}:dark:${prefix}-${name}-${darkValue}${end || ''}`
+		],
+		[
+			opacityPattern,
+			([, end]) =>
+				`${prefix}-${name}-${lightValue}${end || ''} dark:${prefix}-${name}-${darkValue}${end || ''}`
+		],
+		[exactPattern, `${prefix}-${name}-${lightValue} dark:${prefix}-${name}-${darkValue}`]
+	]
+}
+
+/**
+ * Generates UnoCSS shortcut definitions for semantic tones with bg, border, text.
+ * @param {string} name - Color name (e.g., 'primary')
+ * @returns {Array} Array of shortcut definitions
+ */
+export function semanticShortcuts(name) {
+	const shortcuts = []
+	for (const [toneName, lightValue] of Object.entries(TONE_MAP)) {
+		const darkValue = 1000 - lightValue
+		for (const prefix of SEMANTIC_PREFIXES) {
+			shortcuts.push(...toneShortcuts({ prefix, name, toneName, lightValue, darkValue }))
+		}
+	}
+	return shortcuts
+}
+
+/**
+ * Generates "on-color" text shortcuts for readable text on colored backgrounds.
+ *
+ * - `text-on-{name}` → high contrast text for use on z5+ backgrounds (always light text)
+ * - `text-on-{name}-muted` → slightly muted but still readable on z5+ backgrounds
+ *
+ * @param {string} name - Color name (e.g., 'primary', 'surface')
+ * @returns {Array} Array of shortcut definitions
+ */
+export function contrastShortcuts(name) {
+	return [
+		[`text-on-${name}`, `text-${name}-50 dark:text-${name}-50`],
+		[`text-on-${name}-muted`, `text-${name}-100 dark:text-${name}-200`]
+	]
+}
+
+/**
+ * Theme class for managing color palettes, mappings, and semantic shortcuts.
+ */
+export class Theme {
+	#colors
+	#mapping
+
+	/**
+	 *
+	 * @param {import('./types.js').ColorTheme} param0
+	 */
+	constructor({ colors = defaultColors, mapping = DEFAULT_THEME_MAPPING } = {}) {
+		this.#colors = { ...defaultColors, ...colors }
+		this.#mapping = { ...DEFAULT_THEME_MAPPING, ...mapping }
+	}
+
+	get colors() {
+		return this.#colors
+	}
+	set colors(colors) {
+		this.#colors = { ...colors }
+	}
+
+	get mapping() {
+		return this.#mapping
+	}
+	set mapping(mapping) {
+		this.#mapping = { ...mapping }
+	}
+
+	mapVariant(color, variant) {
+		return Object.keys(color).reduce(
+			(acc, key) => ({
+				...acc,
+				[key]:
+					key === 'DEFAULT'
+						? `rgba(var(--color-${variant}),<alpha-value>)`
+						: `rgba(var(--color-${variant}-${key}),<alpha-value>)`
+			}),
+			{}
+		)
+	}
+
+	getColorRules(mapping = null) {
+		const variants = Object.entries({ ...this.#mapping, ...mapping })
+		return variants.reduce(
+			(acc, [variant, key]) => ({
+				...acc,
+				[variant]: this.mapVariant(this.#colors[key], variant)
+			}),
+			{}
+		)
+	}
+
+	getPalette(mapping = null) {
+		const useMapping = { ...this.#mapping, ...mapping }
+		const useColors = { ...defaultColors, ...this.#colors }
+		const variants = Object.keys(useMapping)
+		const rules = variants
+			.flatMap((variant) => generateColorRules(variant, useColors, useMapping))
+			.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+		return rules
+	}
+
+	getShortcuts(name) {
+		return [...semanticShortcuts(name), ...contrastShortcuts(name)]
+	}
+}

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