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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.35",
+  "version": "1.0.0-next.37",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,18 +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.32.3",
-    "@vitest/coverage-istanbul": "^0.32.3",
-    "@vitest/ui": "~0.32.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.1",
+    "svelte": "^4.1.1",
     "typescript": "^5.1.6",
     "validators": "latest",
-    "vite": "^4.3.9",
-    "vitest": "~0.32.3",
-    "shared-config": "1.0.0-next.35"
+    "vite": "^4.4.7",
+    "vitest": "~0.33.0",
+    "shared-config": "1.0.0-next.37"
   },
   "files": [
     "src/**/*.js",

package/src/constants.js

@@ -1,3 +1,26 @@
+/**
+ * @type {import('./types).FieldMapping} Fields
+ */
+export const defaultFields = {
+	id: 'id',
+	url: 'url',
+	value: 'value',
+	text: 'text',
+	children: 'children',
+	icon: 'icon',
+	image: 'image',
+	component: 'component',
+	summary: 'summary',
+	notes: 'notes',
+	props: 'props',
+	target: 'target',
+	state: 'state',
+	isOpen: '_open',
+	isDeleted: '_deleted',
+	level: 'level',
+	parent: 'parent'
+}
+
 export const defaultIcons = [
 	'accordion-opened',
 	'accordion-closed',
@@ -23,7 +46,16 @@ export const defaultIcons = [
 	'navigate-left',
 	'navigate-right',
 	'navigate-up',
-	'navigate-down'
+	'navigate-down',
+	'state-error',
+	'state-warning',
+	'state-success',
+	'state-info',
+	'state-unknown',
+	'validity-failed',
+	'validity-warning',
+	'validity-passed',
+	'validity-unknown'
 ]
 
 export const defaultOptions = {
@@ -33,44 +65,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} [level='level']        - Attribute to identify level of current item
- * @property {string} [parent='parent']      - Attribute to identify if the current item is a parent
- * @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: 'children',
-	icon: 'icon',
-	image: 'image',
-	component: 'component',
-	summary: 'summary',
-	notes: 'notes',
-	props: 'props',
-	target: 'target',
-	state: 'state',
-	isOpen: '_open',
-	isDeleted: '_deleted',
-	level: 'level',
-	parent: 'parent'
-}
-
 export const defaultKeyMap = {
 	ArrowRight: 'open',
 	ArrowLeft: 'close',

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

@@ -1,3 +1,4 @@
+import './types'
 export * from './constants'
 export * from './nested'
 export * from './mapping'
@@ -5,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

@@ -1,11 +1,25 @@
 import { defaultFields } from './constants'
 
+/**
+ * Get the component to be used to render the item.
+ * If the component is null or undefined, it will return the default component.
+ *
+ * @param {object|string} value
+ * @param {import('./types.js').FieldMapping} fields
+ * @param {import('./types.js').ComponentMap} using
+ */
 export function getComponent(value, fields, using) {
 	return fields.component && typeof value == 'object'
 		? using[value[fields.component]] ?? using.default
 		: using.default
 }
 
+/**
+ * Get the icon for the item. If the icon is an object, it will use the state to determine which icon to use.
+ *
+ * @param {object|string} value
+ * @param {import('./types.js').FieldMapping} fields
+ */
 export function getIcon(value, fields = defaultFields) {
 	if (fields.icon === undefined || typeof (value ?? '') !== 'object')
 		return null
@@ -14,3 +28,13 @@ export function getIcon(value, fields = defaultFields) {
 		? value[fields.icon][value[fields.state]]
 		: value[fields.icon]
 }
+
+export function getValue(node, fields = defaultFields) {
+	return typeof node === 'object' && node !== null
+		? 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/types.js

@@ -0,0 +1,24 @@
+/**
+ * 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} [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']
+ * @property {string} [notes='notes']
+ * @property {string} [props='props']
+ * @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} [isDeleted='_deleted'] item is deleted
+ * @property {FieldMapping} [fields]         Field mapping to be used on children in the next level
+ */
+
+/**
+ * Component map to be used to render the item.
+ * @typedef {Object<string, import('svelte').SvelteComponent>} ComponentMap
+ */

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