@rokkit/core 1.0.0-next.36 → 1.0.0-next.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.36",
+  "version": "1.0.0-next.37",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,19 +13,19 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@sveltejs/vite-plugin-svelte": "^2.4.3",
     "@testing-library/svelte": "^4.0.3",
     "@vitest/coverage-c8": "^0.33.0",
     "@vitest/coverage-istanbul": "^0.33.0",
     "@vitest/coverage-v8": "^0.33.0",
     "@vitest/ui": "~0.33.0",
     "jsdom": "^22.1.0",
-    "svelte": "^4.0.5",
+    "svelte": "^4.1.1",
     "typescript": "^5.1.6",
     "validators": "latest",
-    "vite": "^4.4.4",
+    "vite": "^4.4.7",
     "vitest": "~0.33.0",
-    "shared-config": "1.0.0-next.36"
+    "shared-config": "1.0.0-next.37"
   },
   "files": [
     "src/**/*.js",

package/src/constants.js

@@ -4,6 +4,7 @@
 export const defaultFields = {
 	id: 'id',
 	url: 'url',
+	value: 'value',
 	text: 'text',
 	children: 'children',
 	icon: 'icon',

package/src/hacks.js

@@ -0,0 +1,17 @@
+/**
+ * Function to change the viewport height on mobile browsers to account for the address bar
+ *
+ * @param {boolean} [browser=false] indicates whether the device is a browser
+ * @param {boolean} [small=false] indicates whether the device is a small mobile device
+ */
+export function adjustViewport(browser = false, small = false) {
+	if (browser) {
+		const viewportHeight =
+			window.innerHeight != window.outerHeight && small
+				? window.innerHeight + 'px'
+				: '100vh'
+		document.body.style.visibility = 'hidden'
+		document.body.style.setProperty('--viewport-height', viewportHeight)
+		document.body.style.visibility = 'visible'
+	}
+}

package/src/index.js

@@ -6,3 +6,6 @@ export * from './connector'
 export * from './ticks'
 export * from './calendar'
 export * from './utils'
+export * from './parser'
+export * from './string'
+export * from './hacks'

package/src/mapping.js

@@ -29,8 +29,12 @@ export function getIcon(value, fields = defaultFields) {
 		: value[fields.icon]
 }
 
-export function getId(node, fields = defaultFields) {
+export function getValue(node, fields = defaultFields) {
 	return typeof node === 'object' && node !== null
-		? node[fields.id] ?? node[fields.text]
+		? node[fields.value] ?? node[fields.text]
 		: node
 }
+
+export function getText(node, fields = defaultFields) {
+	return typeof node === 'object' && node !== null ? node[fields.text] : node
+}

package/src/parser.js

@@ -0,0 +1,53 @@
+export function getRegex() {
+	let column = '[\\w]+'
+	let operator = ':|>|<|>=|<=|=<|=>|=|!=|~|~\\*|!~|!~\\*'
+	let value = '("[^"]+"|[^\\s=:<>!~*]+)'
+
+	let pattern = `(?<group>((?<column>${column})\\s?(?<operator>${operator})\\s?)(?<value>${value}))`
+
+	return new RegExp(pattern, 'gm')
+}
+
+export function parseFilters(string) {
+	const results = []
+	const regex = getRegex()
+
+	// Split the string into an array of tokens
+	const tokens = string.matchAll(regex)
+	let search = string
+	// Iterate over the tokens
+	for (const token of tokens) {
+		// Extract the named groups from the token
+		let { group, column, operator, value } = token.groups
+		search = search.replace(group, '').trim()
+
+		operator = operator
+			.replace(':', '~*')
+			.replace('=>', '>=')
+			.replace('=<', '<=')
+
+		if (value) {
+			value = !isNaN(parseInt(value)) ? parseInt(value) : removeQuotes(value)
+
+			if (operator.includes('~')) {
+				value = operator.includes('*')
+					? new RegExp(value, 'i')
+					: new RegExp(value)
+			}
+		}
+		if (column && value) results.push({ column, operator, value })
+	}
+	if (search.length > 0) {
+		results.push({
+			operator: '~*',
+			value: new RegExp(removeQuotes(search), 'i')
+		})
+	}
+
+	return results
+}
+
+function removeQuotes(str) {
+	const quoteMatch = str.match(/^"([^"]+)"$/)
+	return quoteMatch ? quoteMatch[1] : str
+}

package/src/string.js

@@ -0,0 +1,96 @@
+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 {Strin} text
+ * @returns
+ */
+export function toHyphenCase(text) {
+	return text
+		.replace(/\s+/, '-')
+		.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+		.replace(/^-/, '')
+}
+
+/**
+ * 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
+ * @returns
+ */
+export function sortByParts(a, b) {
+	const partsOfA = a.split('-')
+	const partsOfB = b.split('-')
+
+	let result = compareStrings(partsOfA[0], partsOfB[0])
+	if (result == 0) result = partsOfA.length - partsOfB.length
+	if (result == 0) result = compareStrings(a, b)
+	return result
+}
+
+/**
+ * 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
+}
+
+/**
+ * Generates a unique id from current timestamp
+ *
+ * @returns {String} timestamp based unique id
+ */
+export function uniqueId(prefix = '', separator = '-') {
+	let 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/ticks.js

@@ -2,15 +2,19 @@ export function generateTicks(
 	lowerBound,
 	upperBound,
 	minorTickStep,
-	majorTickStep = 1
+	majorTickStep = 1,
+	formatter = new Intl.NumberFormat('en-US', { CompactDisplay: 'short' })
 ) {
 	minorTickStep = minorTickStep ? minorTickStep : upperBound - lowerBound
 	const length = 1 + Math.ceil((upperBound - lowerBound) / minorTickStep)
 	const ticks = Array.from({ length }, (_, i) => ({
 		value: i == length - 1 ? upperBound : lowerBound + minorTickStep * i,
 		major: i == 0 || i == length - 1 || i % majorTickStep == 0
+	})).map(({ value, major }) => ({
+		value,
+		label: major ? formatter.format(value) : '',
+		major
 	}))
-	//.map(({ value, show }) => ({ value, label: show ? value : '', major }))
 
 	return ticks
 }

package/src/utils.js

@@ -1,3 +1,86 @@
+const modifiers = {
+	hsl: (value) => `hsl(${value})`,
+	rgb: (value) => `rgb(${value})`,
+	none: (value) => value
+}
+
 export function id() {
 	return Math.random().toString(36).substr(2, 9)
 }
+
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @returns
+ */
+export function shadesOf(name, modifier = 'none') {
+	const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+
+	return shades.reduce(
+		(result, shade) => ({
+			...result,
+			[shade]: fn(`var(--${name}-${shade})`)
+		}),
+		{
+			DEFAULT: fn(`var(--${name}-500)`),
+			inset: fn(`var(--${name}-50)`),
+			sunken: fn(`var(--${name}-50)`),
+			recessed: fn(`var(--${name}-50)`),
+			base: fn(`var(--${name}-100)`),
+			subtle: fn(`var(--${name}-200)`),
+			muted: fn(`var(--${name}-300)`),
+			raised: fn(`var(--${name}-400)`),
+			elevated: fn(`var(--${name}-500)`),
+			floating: fn(`var(--${name}-600)`),
+			contrast: fn(`var(--${name}-700)`)
+		}
+	)
+}
+
+export function stateColors(name, modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+	return {
+		DEFAULT: fn(`var(--${name}-500)`),
+		light: fn(`var(--${name}-100)`),
+		dark: fn(`var(--${name}-800)`)
+	}
+}
+
+export function themeColors(modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+
+	let states = ['info', 'error', 'warn', 'pass']
+	let variants = ['skin', 'primary', 'secondary', 'accent']
+	let colors = states.reduce(
+		(acc, state) => ({ ...acc, [state]: stateColors(state, modifier) }),
+		{}
+	)
+	colors = variants.reduce(
+		(acc, variant) => ({ ...acc, [variant]: shadesOf(variant, modifier) }),
+		colors
+	)
+	colors.skin = {
+		...colors.skin,
+		contrast: fn(`var(--skin-800)`),
+		zebra: fn(`var(--skin-zebra)`)
+	}
+
+	return colors
+}
+
+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
+}