@rokkit/core 1.0.0-next.95 → 1.0.0-next.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.95",
+  "version": "1.0.0-next.97",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -12,21 +12,22 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@testing-library/svelte": "^4.1.0",
-    "@types/ramda": "^0.29.12",
-    "@vitest/coverage-v8": "^1.4.0",
-    "@vitest/ui": "~1.4.0",
-    "jsdom": "^24.0.0",
-    "svelte": "^4.2.12",
-    "typescript": "^5.4.4",
-    "vite": "^5.2.8",
-    "vitest": "~1.4.0",
-    "shared-config": "1.0.0-next.95",
-    "validators": "1.0.0-next.95"
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@testing-library/svelte": "^5.1.0",
+    "@types/ramda": "^0.30.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/ui": "~1.6.0",
+    "jsdom": "^24.1.0",
+    "svelte": "^4.2.17",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vitest": "~1.6.0",
+    "shared-config": "1.0.0-next.97",
+    "validators": "1.0.0-next.97"
   },
   "files": [
     "src/**/*.js",
+    "src/**/*.json",
     "src/**/*.svelte",
     "!spec"
   ],
@@ -42,7 +43,7 @@
   },
   "dependencies": {
     "date-fns": "^3.6.0",
-    "ramda": "^0.29.1"
+    "ramda": "^0.30.1"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/calendar.js

@@ -10,6 +10,14 @@ export const weekdays = [
 	'Saturday'
 ]
 
+/**
+ * Get the days in the month.
+ *
+ * @param {Date}    value
+ * @param {Array}   holidays
+ * @param {boolean} fixed
+ * @returns {import('./types').CalendarDay[]}
+ */
 export function getCalendarDays(value, holidays = [], fixed = false) {
 	const month = getMonth(value)
 	const year = getYear(value)

package/src/colors/syntax.json

@@ -0,0 +1,42 @@
+{
+  "one-dark": {
+    "dark": {
+      "--tab-size": "2",
+      "--code-fill": "var(--neutral-100)",
+      "--code-normal": "#e06c75",
+      "--code-string": "#98c379",
+      "--code-number": "#d19a66",
+      "--code-atrule": "var(--code-string)",
+      "--code-keyword": "#c678dd",
+      "--code-comment": "#5c6370",
+      "--code-property": "#d19a66",
+      "--code-selector": "var(--code-keyword)",
+      "--code-operator": "#56b6c2",
+      "--code-function": "#61afef",
+      "--code-gutter-marker": "black",
+      "--code-gutter-subtle": "#999",
+      "--code-cursor": "#24292e",
+      "--code-cursor-block": "rgba(20, 255, 20, 0.5)",
+      "--code-linenumbers": "rgba(27, 31, 35, 0.3)"
+    },
+    "light": {
+      "--tab-size": "2",
+      "--code-fill": "var(--neutral-100)",
+      "--code-normal": "#333333",
+      "--code-string": "#9D8248",
+      "--code-number": "#71A15D",
+      "--code-atrule": "var(--code-string)",
+      "--code-keyword": "#3080B5",
+      "--code-comment": "#969896",
+      "--code-property": "#63a35c",
+      "--code-selector": "var(--code-keyword)",
+      "--code-operator": "#bf5625",
+      "--code-function": "#a71d5d",
+      "--code-gutter-marker": "black",
+      "--code-gutter-subtle": "#999",
+      "--code-cursor": "#24292e",
+      "--code-cursor-block": "rgba(20, 255, 20, 0.5)",
+      "--code-linenumbers": "rgba(27, 31, 35, 0.3)"
+    }
+  }
+}

package/src/colors/tailwind.json

@@ -0,0 +1,289 @@
+{
+  "amber": {
+    "50": "#fffbeb",
+    "100": "#fef3c7",
+    "200": "#fde68a",
+    "300": "#fcd34d",
+    "400": "#fbbf24",
+    "500": "#f59e0b",
+    "600": "#d97706",
+    "700": "#b45309",
+    "800": "#92400e",
+    "900": "#78350f",
+    "950": "#451a03"
+  },
+  "blue": {
+    "50": "#eff6ff",
+    "100": "#dbeafe",
+    "200": "#bfdbfe",
+    "300": "#93c5fd",
+    "400": "#60a5fa",
+    "500": "#3b82f6",
+    "600": "#2563eb",
+    "700": "#1d4ed8",
+    "800": "#1e40af",
+    "900": "#1e3a8a",
+    "950": "#172554"
+  },
+  "cyan": {
+    "50": "#ecfeff",
+    "100": "#cffafe",
+    "200": "#a5f3fc",
+    "300": "#67e8f9",
+    "400": "#22d3ee",
+    "500": "#06b6d4",
+    "600": "#0891b2",
+    "700": "#0e7490",
+    "800": "#155e75",
+    "900": "#164e63",
+    "950": "#083344"
+  },
+  "emerald": {
+    "50": "#ecfdf5",
+    "100": "#d1fae5",
+    "200": "#a7f3d0",
+    "300": "#6ee7b7",
+    "400": "#34d399",
+    "500": "#10b981",
+    "600": "#059669",
+    "700": "#047857",
+    "800": "#065f46",
+    "900": "#064e3b",
+    "950": "#022c22"
+  },
+  "fuscia": {
+    "50": "#fdf4ff",
+    "100": "#fae8ff",
+    "200": "#f5d0fe",
+    "300": "#f0abfc",
+    "400": "#e879f9",
+    "500": "#d946ef",
+    "600": "#c026d3",
+    "700": "#a21caf",
+    "800": "#86198f",
+    "900": "#701a75",
+    "950": "#4a044e"
+  },
+  "gray": {
+    "50": "#f9fafb",
+    "100": "#f3f4f6",
+    "200": "#e5e7eb",
+    "300": "#d1d5db",
+    "400": "#9ca3af",
+    "500": "#6b7280",
+    "600": "#4b5563",
+    "700": "#374151",
+    "800": "#1f2937",
+    "900": "#111827",
+    "950": "#00060c"
+  },
+  "green": {
+    "50": "#f0fdf4",
+    "100": "#dcfce7",
+    "200": "#bbf7d0",
+    "300": "#86efac",
+    "400": "#4ade80",
+    "500": "#22c55e",
+    "600": "#16a34a",
+    "700": "#15803d",
+    "800": "#166534",
+    "900": "#14532d",
+    "950": "#052e16"
+  },
+  "indigo": {
+    "50": "#eef2ff",
+    "100": "#e0e7ff",
+    "200": "#c7d2fe",
+    "300": "#a5b4fc",
+    "400": "#818cf8",
+    "500": "#6366f1",
+    "600": "#4f46e5",
+    "700": "#4338ca",
+    "800": "#3730a3",
+    "900": "#312e81",
+    "950": "#1e1b4b"
+  },
+  "lime": {
+    "50": "#f7fee7",
+    "100": "#ecfccb",
+    "200": "#d9f99d",
+    "300": "#bef264",
+    "400": "#a3e635",
+    "500": "#84cc16",
+    "600": "#65a30d",
+    "700": "#4d7c0f",
+    "800": "#3f6212",
+    "900": "#365314",
+    "950": "#1a2e05"
+  },
+  "orange": {
+    "50": "#fff7ed",
+    "100": "#ffedd5",
+    "200": "#fed7aa",
+    "300": "#fdba74",
+    "400": "#fb923c",
+    "500": "#f97316",
+    "600": "#ea580c",
+    "700": "#c2410c",
+    "800": "#9a3412",
+    "900": "#7c2d12",
+    "950": "#431407"
+  },
+  "pink": {
+    "50": "#fdf2f8",
+    "100": "#fce7f3",
+    "200": "#fbcfe8",
+    "300": "#f9a8d4",
+    "400": "#f472b6",
+    "500": "#ec4899",
+    "600": "#db2777",
+    "700": "#be185d",
+    "800": "#9d174d",
+    "900": "#831843",
+    "950": "#500724"
+  },
+  "purple": {
+    "50": "#faf5ff",
+    "100": "#f3e8ff",
+    "200": "#e9d5ff",
+    "300": "#d8b4fe",
+    "400": "#c084fc",
+    "500": "#a855f7",
+    "600": "#9333ea",
+    "700": "#7e22ce",
+    "800": "#6b21a8",
+    "900": "#581c87",
+    "950": "#3b0764"
+  },
+  "red": {
+    "50": "#fef2f2",
+    "100": "#fee2e2",
+    "200": "#fecaca",
+    "300": "#fca5a5",
+    "400": "#f87171",
+    "500": "#ef4444",
+    "600": "#dc2626",
+    "700": "#b91c1c",
+    "800": "#991b1b",
+    "900": "#7f1d1d",
+    "950": "#450a0a"
+  },
+  "rose": {
+    "50": "#fff1f2",
+    "100": "#ffe4e6",
+    "200": "#fecdd3",
+    "300": "#fda4af",
+    "400": "#fb7185",
+    "500": "#f43f5e",
+    "600": "#e11d48",
+    "700": "#be123c",
+    "800": "#9f1239",
+    "900": "#881337",
+    "950": "#4c0519"
+  },
+  "sky": {
+    "50": "#f0f9ff",
+    "100": "#e0f2fe",
+    "200": "#bae6fd",
+    "300": "#7dd3fc",
+    "400": "#38bdf8",
+    "500": "#0ea5e9",
+    "600": "#0284c7",
+    "700": "#0369a1",
+    "800": "#075985",
+    "900": "#0c4a6e",
+    "950": "#082f49"
+  },
+  "slate": {
+    "50": "#f8fafc",
+    "100": "#f1f5f9",
+    "200": "#e2e8f0",
+    "300": "#cbd5e0",
+    "400": "#94a3b8",
+    "500": "#64748b",
+    "600": "#475569",
+    "700": "#334155",
+    "800": "#1e293b",
+    "900": "#0f172a",
+    "950": "#020617"
+  },
+  "stone": {
+    "50": "#fafaf9",
+    "100": "#f5f5f4",
+    "200": "#e7e5e4",
+    "300": "#d6d3d1",
+    "400": "#a8a29e",
+    "500": "#78716c",
+    "600": "#57534e",
+    "700": "#44403c",
+    "800": "#292524",
+    "900": "#1c1917",
+    "950": "#0c0a09"
+  },
+  "teal": {
+    "50": "#f0fdfa",
+    "100": "#ccfbf1",
+    "200": "#99f6e4",
+    "300": "#5eead4",
+    "400": "#2dd4bf",
+    "500": "#14b8a6",
+    "600": "#0d9488",
+    "700": "#0f766e",
+    "800": "#115e59",
+    "900": "#134e4a",
+    "950": "#042f2e"
+  },
+  "violet": {
+    "50": "#f5f3ff",
+    "100": "#ede9fe",
+    "200": "#ddd6fe",
+    "300": "#c4b5fd",
+    "400": "#a78bfa",
+    "500": "#8b5cf6",
+    "600": "#7c3aed",
+    "700": "#6d28d9",
+    "800": "#5b21b6",
+    "900": "#4c1d95",
+    "950": "#2e1065"
+  },
+  "yellow": {
+    "50": "#fefce8",
+    "100": "#fef9c3",
+    "200": "#fef08a",
+    "300": "#fde047",
+    "400": "#facc15",
+    "500": "#eab308",
+    "600": "#ca8a04",
+    "700": "#a16207",
+    "800": "#854d0e",
+    "900": "#713f12",
+    "950": "#422006"
+  },
+  "zinc": {
+    "50": "#fafafa",
+    "100": "#f4f4f5",
+    "200": "#e4e4e7",
+    "300": "#d4d4d8",
+    "400": "#a1a1aa",
+    "500": "#71717a",
+    "600": "#52525b",
+    "700": "#3f3f46",
+    "800": "#27272a",
+    "900": "#18181b",
+    "950": "#000000"
+  },
+  "shark": {
+    "DEFAULT": "#677287",
+    "50": "#ffffff",
+    "100": "#efefef",
+    "200": "#E0E0E0",
+    "300": "#C1C6D0",
+    "400": "#828C9F",
+    "500": "#677287",
+    "600": "#51596A",
+    "700": "#3B414D",
+    "800": "#2E323C",
+    "900": "#20242A",
+    "950": "#1A1C22"
+  }
+}

package/src/constants.js

@@ -97,6 +97,12 @@ export const defaultThemeMapping = {
 	info: 'cyan'
 }
 
+/**
+ * Generate a state icon mapping from a list of icon names
+ *
+ * @param {string[]} icons
+ * @returns {import('./types').StateIcons}
+ */
 export function stateIconsFromNames(icons) {
 	return icons
 		.map((k) => [...k.split('-')])

package/src/index.js

@@ -1,12 +1,17 @@
+// skipcq: JS-E1004 - Needed for exposing JS Doc types
 export * from './types'
+// skipcq: JS-E1004 - Needed for exposing all constants
 export * from './constants'
-export * from './nested'
+export { flattenNestedList, findValueFromPath } from './nested'
+// skipcq: JS-E1004 - Needed for exposing all functions
 export * from './mapping'
-export * from './mapped-list'
-export * from './connector'
-export * from './ticks'
-export * from './calendar'
+export { mappedList } from './mapped-list'
+export { getLineTypes } from './connector'
+export { generateTicks } from './ticks'
+export { weekdays, getCalendarDays } from './calendar'
+// skipcq: JS-E1004 - Needed for exposing all functions
 export * from './utils'
+// skipcq: JS-E1004 - Needed for exposing all functions
 export * from './theme'
-export * from './parser'
+// skipcq: JS-E1004 - Needed for exposing all functions
 export * from './string'

package/src/mapped-list.js

@@ -28,6 +28,7 @@ function findInChildren(item, index, fields, value, attr, position) {
 			index
 		])
 	}
+	return null
 }
 /**
  * Traverses the tree to find an item by value.
@@ -186,7 +187,6 @@ function getNextSiblingOrAncestor(position, items, fields) {
 	let children = parent.item[parent.fields.children]
 	if (index < children.length - 1) {
 		index += 1
-
 		const sibling = findItemByIndexArray([...position.slice(0, -1), index], items, fields)
 		return { item: sibling.item, position: sibling.position, fields }
 	} else {
@@ -197,12 +197,10 @@ function getNextSiblingOrAncestor(position, items, fields) {
 			parent = findItemByIndexArray(position, items, fields)
 			children = parent.item[parent.fields.children]
 		}
-		if (index < children.length - 1) {
-			return {
-				item: children[index + 1],
-				position: [...position, index + 1],
-				fields
-			}
+		return {
+			item: children[index + 1],
+			position: [...position, index + 1],
+			fields
 		}
 	}
 }

package/src/mapping.js

@@ -5,7 +5,7 @@ import { toString, isObject } from './utils'
  * 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 {object|string}                     value
  * @param {import('./types.js').FieldMapping} fields
  * @param {import('./types.js').ComponentMap} using
  */
@@ -18,24 +18,34 @@ export function getComponent(value, fields, using) {
 /**
  * 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 {object|string}                     value
  * @param {import('./types.js').FieldMapping} fields
+ * @returns {string}
  */
 export function getIcon(value, fields = defaultFields) {
 	if (fields.icon === undefined || typeof (value ?? '') !== 'object') return null
-	// console.log(fields.icon, fields.state, value[fields.icon][value[fields.state]])
-	const name =
-		typeof value[fields.icon] === 'object'
-			? value[fields.icon][value[fields.state]]
-			: value[fields.icon]
+
+	const name = getIconFromObject(value, fields)
 	return fields.iconPrefix ? [fields.iconPrefix, name].join('-') : name
 }
 
+/**
+ * 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}                            value
+ * @param {import('./types.js').FieldMapping} fields
+ * @returns {string}
+ */
+function getIconFromObject(value, fields) {
+	if (typeof value[fields.icon] === 'object') return value[fields.icon][value[fields.state]]
+	return value[fields.icon]
+}
+
 /**
  * Get the value for the item. If the value is an object,
  * it will use the field mapping to determine which attribute to get.
  *
- * @param {*} node
+ * @param {*}                              node
  * @param {import('./types').FieldMapping} fields
  * @returns {*}
  */
@@ -54,11 +64,6 @@ export function getValue(node, fields = defaultFields) {
 export function getText(node, fields = defaultFields) {
 	const value = isObject(node) ? node[fields.text] : node
 	return value
-	// return value != null
-	// 	? isObject(value)
-	// 		? JSON.stringify(value, null, 2)
-	// 		: value.toString()
-	// 	: value
 }
 
 /**
@@ -67,8 +72,8 @@ export function getText(node, fields = defaultFields) {
  *
  * @param {*}                              node
  * @param {import('./types').FieldMapping} fields
- * @param {function}                       formatter
- * @returns {*}
+ * @param {Function}                       formatter
+ * @returns {Function}
  */
 export function getFormattedText(node, fields = defaultFields, formatter = toString) {
 	const value = isObject(node) ? node[fields.text] : node
@@ -79,7 +84,7 @@ export function getFormattedText(node, fields = defaultFields, formatter = toStr
 }
 /**
  * Gets the attribute from the node
- * @param {*} node
+ * @param {*}      node
  * @param {string} attr
  * @returns {*}
  */
@@ -89,7 +94,7 @@ export function getAttribute(node, attr) {
 /**
  * Check if the current item is a parent
  *
- * @param {*} item
+ * @param {*}                              item
  * @param {import('./types').FieldMapping} fields
  * @returns {boolean}
  */
@@ -105,7 +110,7 @@ export function hasChildren(item, fields) {
 /**
  * Check if the current item is a parent and is expanded
  *
- * @param {*} item
+ * @param {*}                              item
  * @param {import('./types').FieldMapping} fields
  * @returns {boolean}
  */
@@ -121,7 +126,7 @@ export function isExpanded(item, fields) {
 /**
  * Verify if at least one item has children
  *
- * @param {Array<*>} items
+ * @param {Array<*>}                       items
  * @param {import('./types').FieldMapping} fields
  * @returns {boolean}
  */

package/src/nested.js

@@ -1,6 +1,14 @@
 import { omit } from 'ramda'
 import { defaultFields } from './constants'
 
+/**
+ * Flattens a nested list of items
+ *
+ * @param {Array}                         items
+ * @param {import('./types).FieldMapping} fields
+ * @param {number}                        level
+ * @returns {Array}
+ */
 export function flattenNestedList(items, fields = defaultFields, level = 0) {
 	fields = { ...defaultFields, ...fields }
 	let data = []
@@ -20,9 +28,11 @@ export function flattenNestedList(items, fields = defaultFields, level = 0) {
 }
 
 /**
- * Converts a path slug to a value in the menu
+ * Matches a path slug to a value in the menu
  *
- * @param {string} slug
+ * @param {string}                         slug
+ * @param {Array}                          data
+ * @param {import('./types').FieldMapping} fields
  * @returns {any}
  */
 export function findValueFromPath(slug, data, fields) {

package/src/theme.js

@@ -11,6 +11,7 @@ const modifiers = {
  * Generate shades for a color using css varuable
  *
  * @param {string} name
+ * @param {string} modifier
  * @returns
  */
 export function shadesOf(name, modifier = 'none') {
@@ -30,11 +31,19 @@ export function shadesOf(name, modifier = 'none') {
 			raised: fn(`var(--${name}-400)`),
 			elevated: fn(`var(--${name}-600)`),
 			floating: fn(`var(--${name}-700)`),
-			contrast: fn(`var(--${name}-800)`)
+			contrast: fn(`var(--${name}-800)`),
+			overlay: fn(`var(--${name}-900)`)
 		}
 	)
 }
 
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @param {string} modifier
+ * @returns {object}
+ */
 export function stateColors(name, modifier = 'none') {
 	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
 	return {
@@ -70,13 +79,12 @@ export function themeColors(modifier = 'none') {
  * Creates an array of shade mapping objects for a given theme variant and mode.
  * Each object represents a CSS custom property (variable) with its value set based on a provided condition.
  *
- * @param {string} variant - The name of the theme variant (e.g., 'primary', 'secondary').
- * @param {'light' | 'dark'} mode - The theme mode for which the mappings are being created.
+ * @param {string}                   variant        - The name of the theme variant (e.g., 'primary', 'secondary').
+ * @param {'light' | 'dark'}         mode           - The theme mode for which the mappings are being created.
  * @param {function(number): string} valueCondition - A function that takes a shade value and returns the color value
  *                                                    based on the condition appropriate for light or dark mode.
- * @returns {Array<{key: string, value: string, mode: string}>} An array of objects, where each object contains
- *                                                              key, value, and mode properties corresponding to
- *                                                              a CSS custom property definition.
+ * @returns {{import('./types'}.ShadeMapping[]>} An array of objects, where each object contains key, value, and mode
+ *                                              properties corresponding to  a CSS custom property definition.
  */
 function createShadeMappings(variant, mode, valueCondition) {
 	return shades.map((shade) => ({
@@ -110,7 +118,7 @@ export function contrastColors(light = '#ffffff', dark = '#000000', palette = de
  * @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 {Array<Object>} An array containing the color rules for both light and dark modes.
+ * @returns {import('./types').ShadeMappings} An array containing the color rules for both light and dark modes.
  */
 function generateColorRules(variant, colors, mapping) {
 	return shades.flatMap((shade, index) => [
@@ -165,9 +173,9 @@ function createThemeVariant(name, mode, colors, extraColors) {
 /**
  * Constructs and returns the light and dark theme variants based on provided color mapping and color definitions.
  *
- * @param {string} name - The base name for the theme, defaults to 'rokkit' if not provided.
+ * @param {string} name                          - The base name for the theme, defaults to 'rokkit' if not provided.
  * @param {Object} [mapping=defaultThemeMapping] - An object mapping variant names to color property names.
- * @param {Object} [colors=defaultColors] - The object containing default color definitions.
+ * @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(name = 'rokkit', mapping = defaultThemeMapping, colors = defaultColors) {

package/src/ticks.js

@@ -1,11 +1,11 @@
 /**
  * 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} 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 {Array<{value: number, label: string, major: boolean}>} An array of tick mark objects.
+ * @param {number} [majorTickStep=1]                     - The step size for major ticks.
+ * @returns {import('./types').TickMark[]>} An array of tick mark objects.
  */
 export function generateTicks(
 	lowerBound,
@@ -13,10 +13,6 @@ export function generateTicks(
 	minorTickStep = upperBound - lowerBound,
 	majorTickStep = 1
 ) {
-	// lowerBound = +lowerBound
-	// upperBound = +upperBound
-	// minorTickStep = +minorTickStep
-	// majorTickStep = +majorTickStep
 	const length = 1 + Math.ceil((upperBound - lowerBound) / minorTickStep)
 	return Array.from({ length }, (_, i) => {
 		const value = i === length - 1 ? upperBound : lowerBound + minorTickStep * i

package/src/types.js

@@ -86,4 +86,30 @@
  * @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.
+ */
+
 export default {}

package/src/parser.js

@@ -1,110 +0,0 @@
-/**
- * Constructs a regular expression pattern for matching search filter strings.
- * The pattern captures "column", "operator", and "value" groups for filter expressions.
- * Supported operators include common comparison and wildcard operators.
- *
- * Examples of valid expressions this regex can match:
- * - "username:john_doe"
- * - "age>30"
- * - "status!=active"
- * - "title~\"Product Manager\""
- * - "completed!~*yes"
- *
- * The "column" group matches one or more word characters.
- * The "operator" group matches one among the specified comparison or wildcard operators:
- * :, >, <, >=, <=, =<, =>, =, !=, ~, ~*, !~, !~*.
- * The "value" group matches either a double-quoted string or a single unquoted word
- * that doesn't include whitespace or any of the operator characters.
- *
- * @returns {RegExp} - The regular expression pattern to identify search filter elements.
- */
-export function getRegex() {
-	const column = '[\\w]+'
-	const operator = ':|>|<|>=|<=|=<|=>|=|!=|~|~\\*|!~|!~\\*'
-	const value = '("[^"]+"|[^\\s=:<>!~*]+)'
-
-	const pattern = `(?<group>((?<column>${column})\\s?(?<operator>${operator})\\s?)(?<value>${value}))`
-
-	return new RegExp(pattern, 'gm')
-}
-
-/**
- * Parses a search string and extracts filters based on a predefined regular expression pattern.
- * Each filter captures column, operator, and value components. Any remaining text that
- * does not fit the pattern is considered a general search term.
- *
- * @param {string} string - The search string to parse for filters.
- * @returns {Object[]} - An array of filter objects each containing the column, operator, and value,
- *                       plus an additional object for general search if there is remaining text.
- */
-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 = replaceOperators(operator)
-		value = processValue(value, operator)
-
-		if (column && value) results.push({ column, operator, value })
-	}
-
-	if (search.length > 0) {
-		results.push({
-			operator: '~*',
-			value: new RegExp(removeQuotes(search), 'i')
-		})
-	}
-
-	return results
-}
-
-/**
- * Replaces various shorthand operators with their standardized equivalent for filtering.
- *
- * @param {string} operator - The operator to be replaced.
- * @returns {string} - The replaced operator string.
- */
-function replaceOperators(operator) {
-	return operator.replace(':', '~*').replace('=>', '>=').replace('=<', '<=')
-}
-
-/**
- * Processes the filter value provided, converting it into a format suitable for filtering.
- * If the operator includes a tilde (~), the value is converted to a RegExp.
- *
- * @param {string|number} value - The value to be processed. It could be a string needing quote removal or a number that needs parsing.
- * @param {string} operator - The operator that determines the type of processing to be applied to the value.
- * @returns {string|number|RegExp} - The processed value, which may be a RegExp if the operator involves pattern matching.
- */
-function processValue(value, operator) {
-	// If the value can be parsed as an integer, do so. Otherwise, strip quotes if present.
-
-	value = !isNaN(parseInt(value)) ? parseInt(value) : removeQuotes(value)
-	// If the operator includes a tilde (~), treat the value as a regular expression,
-	// case-insensitive if '*' is present, sensitive otherwise.
-	if (operator.includes('~')) {
-		value = operator.includes('*') ? new RegExp(value, 'i') : new RegExp(value)
-	}
-
-	return value
-}
-
-/**
- * Removes double quotes from the start and end of a string.
- *
- * @param {string} str - The input string from which the surrounding quotes should be removed.
- * @returns {string} - The unquoted string.
- */
-function removeQuotes(str) {
-	const quoteMatch = str.match(/^"([^"]+)"$/)
-	return quoteMatch ? quoteMatch[1] : str
-}