@rokkit/core 1.0.0-next.94 → 1.0.0-next.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.94",
+  "version": "1.0.0-next.96",
   "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.94",
-    "validators": "1.0.0-next.94"
+    "@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.96",
+    "validators": "1.0.0-next.96"
   },
   "files": [
     "src/**/*.js",
+    "src/**/*.json",
     "src/**/*.svelte",
     "!spec"
   ],
@@ -35,14 +36,14 @@
     "./package.json": "./package.json",
     "./constants": "./src/constants.js",
     ".": {
-      "types": "./dist/types.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./src/index.js",
       "svelte": "./src/index.js"
     }
   },
   "dependencies": {
     "date-fns": "^3.6.0",
-    "ramda": "^0.29.1"
+    "ramda": "^0.30.1"
   },
   "scripts": {
     "format": "prettier --write .",

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/index.js

@@ -1,4 +1,4 @@
-import './types'
+export * from './types'
 export * from './constants'
 export * from './nested'
 export * from './mapping'

package/src/mapped-list.js

@@ -2,11 +2,25 @@ import { defaultFields } from './constants'
 import { isExpanded, hasChildren, getAttribute } from './mapping'
 import { equals } from 'ramda'
 
+/**
+ * Checks if a specifc attribute of an item matches a value.
+ *
+ * @param {Object} item - The item.
+ * @param {string} attr - The attribute to check.
+ */
 function isMatch(item, attr, value) {
 	const itemValue = attr ? getAttribute(item, attr) : item
 	return equals(itemValue, value)
 }
 
+/**
+ * Traverses the tree to find an item by value.
+ * @param {Array} items - The items array.
+ * @param {Object} fields - The fields mapping.
+ * @param {any} value - The value to find.
+ * @param {Array} position - The current position in the tree.
+ * @returns {Object} The found item, or null if not found.
+ */
 function findInChildren(item, index, fields, value, attr, position) {
 	if (hasChildren(item, fields)) {
 		return findItemByValue(value, item[fields.children], fields.fields ?? fields, attr, [
@@ -69,7 +83,7 @@ export function findNearestItemBefore(position, items, fields) {
 	if (position.length === 0) return { item: items[0], position: [0], fields }
 
 	let index = position[position.length - 1]
-	let result
+	let result = null
 	if (index > 0) {
 		index -= 1
 		if (position.length === 1) {
@@ -85,6 +99,7 @@ export function findNearestItemBefore(position, items, fields) {
 }
 
 /**
+ * Returns the next sibling of the current item.
  *
  * @param {*} parent
  * @param {Array<integer>} position
@@ -114,8 +129,8 @@ export function findNearestItemAfter(position, items, fields) {
 	if (items.length === 0) return null
 	if (position.length === 0) return { item: items[0], position: [0], fields }
 
-	let current = findItemByIndexArray(position, items, fields)
-	let result
+	const current = findItemByIndexArray(position, items, fields)
+	let result = null
 	if (isExpanded(current.item, current.fields)) {
 		result = getFirstChild(current, position)
 	} else if (position.length === 1) {

package/src/nested.js

@@ -4,7 +4,7 @@ import { defaultFields } from './constants'
 export function flattenNestedList(items, fields = defaultFields, level = 0) {
 	fields = { ...defaultFields, ...fields }
 	let data = []
-	items.map((item) => {
+	items.forEach((item) => {
 		const children = item[fields.children] ?? []
 		data = [
 			...data,
@@ -31,7 +31,7 @@ export function findValueFromPath(slug, data, fields) {
 	let items = data
 	let value = null
 
-	keys.map((key, index) => {
+	keys.forEach((key, index) => {
 		const match = items.find((item) => item[fields.key] === key)
 		if (match) {
 			if (index < keys.length - 1) {

package/src/parser.js

@@ -19,11 +19,11 @@
  * @returns {RegExp} - The regular expression pattern to identify search filter elements.
  */
 export function getRegex() {
-	let column = '[\\w]+'
-	let operator = ':|>|<|>=|<=|=<|=>|=|!=|~|~\\*|!~|!~\\*'
-	let value = '("[^"]+"|[^\\s=:<>!~*]+)'
+	const column = '[\\w]+'
+	const operator = ':|>|<|>=|<=|=<|=>|=|!=|~|~\\*|!~|!~\\*'
+	const value = '("[^"]+"|[^\\s=:<>!~*]+)'
 
-	let pattern = `(?<group>((?<column>${column})\\s?(?<operator>${operator})\\s?)(?<value>${value}))`
+	const pattern = `(?<group>((?<column>${column})\\s?(?<operator>${operator})\\s?)(?<value>${value}))`
 
 	return new RegExp(pattern, 'gm')
 }

package/src/string.js

@@ -70,7 +70,7 @@ export function compareStrings(a, b) {
  * @returns {String} timestamp based unique id
  */
 export function uniqueId(prefix = '', separator = '-') {
-	let pair = prefix && prefix.length > 0 ? [prefix] : []
+	const pair = prefix && prefix.length > 0 ? [prefix] : []
 	pair.push(Date.now().toString(36))
 	return pair.join(separator)
 }

package/src/theme.js

@@ -30,7 +30,8 @@ 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)`)
 		}
 	)
 }
@@ -47,8 +48,8 @@ export function stateColors(name, modifier = 'none') {
 export function themeColors(modifier = 'none') {
 	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
 
-	let states = ['info', 'danger', 'warning', 'success', 'error']
-	let variants = ['neutral', 'primary', 'secondary', 'accent']
+	const states = ['info', 'danger', 'warning', 'success', 'error']
+	const variants = ['neutral', 'primary', 'secondary', 'accent']
 	let colors = states.reduce(
 		(acc, state) => ({ ...acc, [state]: stateColors(state, modifier) }),
 		{}
@@ -70,19 +71,18 @@ 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'}.ShadeMappings>} 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) => ({
 		key: `--on-${variant}-${shade}`,
 		value: valueCondition(shade),
-		mode: mode
+		mode
 	}))
 }
 
@@ -110,7 +110,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 +165,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/types.js

@@ -85,3 +85,17 @@
  * @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 {Array<ShadeMapping>} ShadeMappings
+ */
+export default {}

package/src/utils.js

@@ -1,3 +1,10 @@
+/**
+ * A function that performs no operations.
+ */
+export function noop() {
+	// intentionally empty to support default actions
+}
+
 /**
  * Generates a random id
  *
@@ -60,6 +67,6 @@ export function iconShortcuts(icons, collection, variants) {
  * @returns {string|number}
  */
 export function scaledPath(size, x) {
-	if (Array.isArray(x)) return x.map((x) => scaledPath(size, x)).join(' ')
+	if (Array.isArray(x)) return x.map((v) => scaledPath(size, v)).join(' ')
 	return typeof x === 'number' ? x * size : x
 }