@rokkit/core 1.0.0-next.90 → 1.0.0-next.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.90",
+  "version": "1.0.0-next.91",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -22,8 +22,8 @@
     "typescript": "^5.3.3",
     "vite": "^5.1.4",
     "vitest": "~1.3.1",
-    "shared-config": "1.0.0-next.90",
-    "validators": "1.0.0-next.90"
+    "shared-config": "1.0.0-next.91",
+    "validators": "1.0.0-next.91"
   },
   "files": [
     "src/**/*.js",

package/src/constants.js

@@ -6,8 +6,8 @@ export { defaultColors, syntaxColors, shades, defaultPalette } from './colors'
 export const defaultFields = {
 	id: 'id',
 	url: 'url',
-	value: 'value',
 	text: 'text',
+	value: 'value',
 	children: 'children',
 	icon: 'icon',
 	iconPrefix: null,
@@ -21,7 +21,8 @@ export const defaultFields = {
 	isOpen: '_open',
 	isDeleted: '_deleted',
 	level: 'level',
-	parent: 'parent'
+	parent: 'parent',
+	currency: 'currency'
 }
 
 export const defaultIcons = [
@@ -41,6 +42,7 @@ export const defaultIcons = [
 	'checkbox-unknown',
 	'rating-filled',
 	'rating-empty',
+	'rating-half',
 	'radio-off',
 	'radio-on',
 	'mode-dark',
@@ -57,7 +59,14 @@ export const defaultIcons = [
 	'badge-fail',
 	'badge-warn',
 	'badge-pass',
-	'badge-unknown'
+	'badge-unknown',
+	'sort-none',
+	'sort-ascending',
+	'sort-descending',
+	'validity-failed',
+	'validity-passed',
+	'validity-unknown',
+	'validity-warning'
 ]
 
 export const defaultOptions = {

package/src/formatter.js

@@ -0,0 +1,47 @@
+import { identity } from 'ramda'
+
+/**
+ * Creates a formatter function that formats a value according to the specified type and optional locale settings.
+ * Supported types include 'default' (no formatting), 'integer', 'number', 'date', 'time', and 'currency'.
+ *
+ * The function is curried, which means it can be partially applied with some arguments and reused
+ * to format different values with the same settings.
+ *
+ * @param {string} type - The type of the formatter to use (e.g., 'integer', 'number', 'date', 'time', 'currency').
+ * @param {string} [language='en-US'] - Optional IETF language tag used for locale-specific formatting.
+ * @param {string} [currency='USD'] - Optional currency code which is relevant when the type is 'currency'.
+ * @param {number} [decimalPlaces=2] - Optional number of decimal places to show with number and currency formatting.
+ * @param {number|Date} value - The value to format, it should be of a type corresponding to the formatter type.
+ * @returns {*} - The formatted value as a string or the original value if formatting is not applicable.
+ */
+export function createFormatter(type, language = 'en-US', decimalPlaces = 2, currency) {
+	const formatWithLocaleOptions = (options, val) => val.toLocaleString(language, options)
+	const formatCurrency = (val, currency = 'USD') =>
+		val.toLocaleString(language, {
+			style: 'currency',
+			currency,
+			minimumFractionDigits: decimalPlaces,
+			maximumFractionDigits: decimalPlaces
+		})
+
+	const formatters = {
+		integer: (val) => formatWithLocaleOptions({ maximumFractionDigits: 0 }, val), // Integer without decimals
+		number: (val) =>
+			formatWithLocaleOptions(
+				{
+					minimumFractionDigits: decimalPlaces,
+					maximumFractionDigits: decimalPlaces
+				},
+				val
+			), // Number with fixed decimal places
+		date: (val) => val.toLocaleDateString(language), // Locale-specific date format
+		time: (val) => val.toLocaleTimeString(language), // Locale-specific time format
+		currency: currency ? (val) => formatCurrency(val, currency) : formatCurrency
+		// Currency with fixed decimal places and currency symbol
+	}
+	if (type in formatters) return formatters[type]
+	return identity
+	// return propOr(identity, type, formatters)(value) // Apply the formatter based on the type
+}
+
+// export

package/src/parser.js

@@ -1,3 +1,23 @@
+/**
+ * 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() {
 	let column = '[\\w]+'
 	let operator = ':|>|<|>=|<=|=<|=>|=|!=|~|~\\*|!~|!~\\*'
@@ -8,6 +28,15 @@ export function getRegex() {
 	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()
@@ -38,15 +67,30 @@ export function parseFilters(string) {
 	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 (!value) return value
+	// 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)
 	}
@@ -54,6 +98,12 @@ function processValue(value, operator) {
 	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

package/src/tabular.js

@@ -0,0 +1,64 @@
+import { createFormatter } from './formatter'
+
+export function tabular(data, columns, options) {
+	const { path, separator = '/', actions } = options ?? {}
+
+	let metadata = columns
+	if (!Array.isArray(columns) || columns.length === 0) metadata = deriveColumnMetadata(data)
+
+	return {
+		data,
+		columns: metadata,
+		filter: () => {},
+		sort: () => {}
+	}
+}
+
+/**
+ * Derives column metadata from the data to be used in a tabular component.
+ *
+ * @param {Array} data - The data to derive column metadata from.
+ * @returns {Array<import('./types').ColumnMetadata>} - The derived column metadata.
+ */
+export function deriveColumnMetadata(dataArray) {
+	if (dataArray.length === 0) {
+		return []
+	}
+
+	const firstRow = dataArray[0]
+	const language = navigator.language || 'en-US' // Get the browser's language or default to 'en-US'
+
+	const columns = []
+
+	for (const key in firstRow) {
+		// if (Object.prototype.hasOwnProperty.call(firstRow, key)) {
+		const dataType = typeof firstRow[key]
+		const formatter = createFormatter(dataType, language)
+		const fields = { text: key }
+
+		if (key.endsWith('_currency')) {
+			const currencyColumn = key
+			const baseColumn = key.replace(/_currency$/, '')
+
+			// Find the existing column and update its currency attribute
+			const existingColumn = columns.find((column) => column.name === baseColumn)
+			existingColumn.dataType = 'currency'
+			existingColumn.formatter = createFormatter('currency', language, 2)
+			if (existingColumn) {
+				existingColumn.fields = {
+					...existingColumn.fields,
+					currency: currencyColumn
+				}
+			}
+		} else {
+			columns.push({
+				name: key,
+				dataType: dataType,
+				fields,
+				formatter
+			})
+		}
+	}
+
+	return columns
+}

package/src/types.js

@@ -1,19 +1,39 @@
+/**
+ * Options for the sort order of the column.
+ *
+ * @typedef {'ascending'|'descending'|'none'} SortOptions
+ */
+
+/**
+ * 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']
- * @property {string} [notes='notes']
- * @property {string} [props='props']
+ * @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
  */
@@ -22,3 +42,38 @@
  * Component map to be used to render the item.
  * @typedef {Object<string, import('svelte').SvelteComponent>} ComponentMap
  */
+
+/**
+ * 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 {boolean} visible - Indicates whether the node is visible (true/false).
+ * @property {string} [label] - The label of the hierarchy node.
+ * @property {boolean} is_parent - Indicates if this node is a parent (true/false).
+ * @property {boolean} is_collapsed - Indicates whether the node is collapsed (true/false).
+ * @property {number[]} levels - Array of hierarchy indices, including parent indices.
+ */
+
+/**
+ * Track the state of all rows in the table.
+ *
+ * @typedef {Object} RowStateMap
+ * @property {RowState[]} rows - Flat list of hierarchy nodes.
+ */