@rokkit/core 1.0.0-next.15 → 1.0.0-next.151

package/dist/types.d.ts

@@ -0,0 +1,300 @@
+declare const _default: {};
+export default _default;
+export type LineType = "child" | "last" | "sibling" | "empty" | "icon";
+/**
+ * An object where keys are event names and values are event handler functions.
+ */
+export type EventHandlers = {
+    [x: string]: Function;
+};
+/**
+ * Component map to be used to render the item.
+ */
+export type ComponentMap = {
+    [x: string]: import("svelte").SvelteComponent<Record<string, any>, any, any>;
+};
+/**
+ * Options for the sort order of the column.
+ */
+export type SortOptions = "ascending" | "descending" | "none";
+export type SelectionState = "checked" | "unchecked" | "indeterminate";
+/**
+ * Options for the horizontal alignment of the column content.
+ */
+export type HorizontalAlignOptions = "left" | "middle" | "right";
+/**
+ * Options for the action type of the column.
+ */
+export type ActionTypes = "select" | "edit" | "delete";
+/**
+ * Structure to map custom fields for rendering. This is used to identofy the attributes for various purposes.
+ */
+export type FieldMapping = {
+    /**
+     * Unique id for the item
+     */
+    id?: string | undefined;
+    /**
+     * the text to render
+     */
+    text?: string | undefined;
+    /**
+     * the value associated with the item
+     */
+    value?: string | undefined;
+    /**
+     * a URL
+     */
+    url?: string | undefined;
+    /**
+     * icon to render
+     */
+    icon?: string | undefined;
+    /**
+     * the image to render
+     */
+    image?: string | undefined;
+    /**
+     * children of the item
+     */
+    children?: string | undefined;
+    /**
+     * summary of the item
+     */
+    summary?: string | undefined;
+    /**
+     * notes for the item
+     */
+    notes?: string | undefined;
+    /**
+     * additional properties
+     */
+    props?: string | undefined;
+    /**
+     * item is open or closed
+     */
+    isOpen?: string | undefined;
+    /**
+     * level of item
+     */
+    level?: string | undefined;
+    /**
+     * item is a parent
+     */
+    parent?: string | undefined;
+    /**
+     * {string} [isDeleted='_deleted'] item is deleted
+     */
+    currency?: string | undefined;
+    /**
+     * Field mapping to be used on children in the next level
+     */
+    fields?: FieldMapping | undefined;
+};
+/**
+ * Column metadata for the table.
+ */
+export type ColumnMetadata = {
+    /**
+     * - The name of the column.
+     */
+    name: string;
+    /**
+     * - The data type of the column (e.g., "string", "number", "date").
+     */
+    dataType: string;
+    /**
+     * - Additional attributes for the column.
+     */
+    fields?: FieldMapping | undefined;
+    /**
+     * - The number of digits for numeric values (defaults to 0).
+     */
+    digits?: number | undefined;
+    /**
+     * - A function to format the column value.
+     */
+    formatter: Function;
+    /**
+     * - Indicates if the column is virtual (true/false).
+     */
+    virtual?: boolean | undefined;
+    /**
+     * - Indicates if the column is sortable (true/false).
+     */
+    sortable?: boolean | undefined;
+    /**
+     * - The sort order of the column.
+     */
+    sortOrder?: SortOptions | undefined;
+    /**
+     * - The alignment of the column content.
+     */
+    align?: HorizontalAlignOptions | undefined;
+    /**
+     * - Action attribute for action columns.
+     */
+    action?: ActionTypes | undefined;
+};
+/**
+ * Track the state of a row in the table.
+ */
+export type RowState = {
+    /**
+     * - The index of the node in the flat list.
+     */
+    index: number;
+    /**
+     * - The depth of the node in the hierarchy.
+     */
+    depth: number;
+    /**
+     * - The value of the hierarchy node.
+     */
+    value?: string | undefined;
+    /**
+     * - Indicates whether the node is visible (true/false).
+     */
+    isHidden?: boolean | undefined;
+    /**
+     * - Indicates if this node is a parent (true/false).
+     */
+    isParent?: boolean | undefined;
+    /**
+     * - Indicates whether the node is expanded (true/false).
+     */
+    isExpanded?: boolean | undefined;
+    /**
+     * - The index of the parent node in the flat list.
+     */
+    parentIndex?: number | undefined;
+    /**
+     * - Indicates whether the node is selected (true/false/indeterminate).
+     */
+    selected?: SelectionState | undefined;
+    /**
+     * - The indices of the children in the flat list.
+     */
+    childred: Array<number>;
+};
+/**
+ * Track the state of all rows in the table.
+ */
+export type RowStateMap = {
+    /**
+     * - Flat list of hierarchy nodes.
+     */
+    rows: RowState[];
+};
+/**
+ * Shade mapping for color variables
+ */
+export type ShadeMapping = {
+    /**
+     * - the variable name to be used
+     */
+    key: string;
+    /**
+     * - the value to be used
+     */
+    value: string;
+    /**
+     * - light or dark mode
+     */
+    mode: string;
+};
+export type TickMark = {
+    /**
+     * - The value of the tick mark.
+     */
+    value: number;
+    /**
+     * - The label for the tick mark.
+     */
+    label: string;
+    /**
+     * - Indicates if the tick mark is a major tick.
+     */
+    major: boolean;
+};
+export type CalendarDay = {
+    /**
+     * - The day of the month.
+     */
+    day: number;
+    /**
+     * - indicates the offset for positioning
+     */
+    offset: number;
+    /**
+     * - Datevalue for the day.
+     */
+    date: date;
+    /**
+     * - formatted text for the day.
+     */
+    text: string;
+    /**
+     * - Indicates if the day is a holiday.
+     */
+    holiday: boolean;
+    /**
+     * - Indicates if the day is on the weekend.
+     */
+    weekend: boolean;
+};
+export type ColorPalette = {
+    /**
+     * 50 - The color for the 50 shade.
+     */
+    "": string;
+};
+export type ColorCollection = {
+    [x: string]: ColorPalette;
+};
+export type ColorMapping = {
+    /**
+     * - The primary color.
+     */
+    primary?: string | undefined;
+    /**
+     * - The secondary color.
+     */
+    secondary?: string | undefined;
+    /**
+     * - The tertiary color.
+     */
+    tertiary?: string | undefined;
+    /**
+     * - The surface color.
+     */
+    surface?: string | undefined;
+    /**
+     * - The info color.
+     */
+    info?: string | undefined;
+    /**
+     * - The success color.
+     */
+    success?: string | undefined;
+    /**
+     * - The warning color.
+     */
+    warning?: string | undefined;
+    /**
+     * - The error color.
+     */
+    error?: string | undefined;
+};
+export type ColorTheme = {
+    /**
+     * - The color mapping.
+     */
+    mapping?: ColorMapping | undefined;
+    /**
+     * - The color collection.
+     */
+    colors?: {
+        [x: string]: ColorPalette;
+    } | undefined;
+};

package/dist/utils.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Detects text direction based on HTML lang attribute
+ * @returns {'ltr' | 'rtl'}
+ */
+export function detectDirection(): "ltr" | "rtl";
+/**
+ * Checks if current document direction is RTL
+ * @returns {boolean}
+ */
+export function isRTL(): boolean;
+/**
+ * Finds the closest ancestor of the given element that has the given attribute.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @returns {HTMLElement|null}
+ */
+export function getClosestAncestorWithAttribute(element: HTMLElement, attribute: string): HTMLElement | null;
+/**
+ * A function that performs no operations.
+ */
+export function noop(): void;
+/**
+ * Generates a random id
+ *
+ * @returns {string} A random id
+ */
+export function id(prefix?: string): string;
+/**
+ * Check if a value is a json object
+ *
+ * @param {*} val
+ * @returns {boolean}
+ */
+export function isObject(val: any): boolean;
+/**
+ * Converts the value to a string. If the value is an object, it will convert it to a JSON string.
+ *
+ * @param {*} value
+ * @returns {string}
+ */
+export function toString(value: any): string;
+/**
+ * Generates icon shortcuts for a collection of icons
+ *
+ * @param {string[]} icons
+ * @param {string} collection
+ * @param {string} variants
+ * @returns {Object}
+ */
+export function iconShortcuts(icons: string[], collection: string, variants: string): Object;
+/**
+ * Scales the path by the size
+ *
+ * @param {number} size
+ * @param {string|number} x
+ * @returns {string|number}
+ */
+export function scaledPath(size: number, x: string | number): string | number;
+/**
+ * Gets a key string from path
+ * @param {string[]} path
+ * @returns {string}
+ */
+export function getKeyFromPath(path: string[]): string;
+/**
+ * Gets a path array from key string
+ * @param {string} key
+ * @returns {string[]}
+ */
+export function getPathFromKey(key: string): string[];
+/**
+ * Get snippet function from an object
+ * @param {Object} obj
+ * @param {string} key
+ * @param {null|Function} defaultSnippet
+ * @returns {Function|undefined}
+ */
+export function getSnippet(obj: Object, key: string, defaultSnippet?: null | Function): Function | undefined;
+export function resolveSnippet(snippets: any, proxy: any, fallback?: string): Function | null;
+/**
+ * convert hex string to `{r} {g} {b}`
+ * @param {string} hex
+ * @return {string}
+ */
+export function hex2rgb(hex: string): string;
+/**
+ * Convert a CSS color value to r,g,b for use in CSS variables.
+ * Hex values (#rrggbb) are converted to "r,g,b" for rgba() support.
+ * All other CSS color formats (oklch, hsl, named) are returned as-is.
+ * Non-string values are returned unchanged.
+ * Note: non-hex values will NOT work with UnoCSS opacity utilities like bg-primary/50.
+ *
+ * @param {unknown} value
+ * @returns {unknown}
+ */
+export function colorToRgb(value: unknown): unknown;
+/**
+ * A utility function that detects if a string is an image URL or image data (base64)
+ *
+ * @param {string} str - The string to check
+ * @returns {string|null} - Returns the original string if it's an image URL or image data, otherwise null
+ */
+export function getImage(str: string): string | null;

package/dist/vite/icon-collections.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Creates icon collection loaders for UnoCSS presetIcons from a simple config.
+ *
+ * This function transforms a map of collection names to JSON package paths
+ * into the format expected by UnoCSS's presetIcons.
+ *
+ * Supports three types of paths:
+ * - Package paths (e.g., '@rokkit/icons/ui.json') - resolved via require
+ * - Absolute paths (e.g., '/path/to/icons.json') - used directly
+ * - Relative paths (e.g., './static/icons.json') - resolved from process.cwd()
+ *
+ * @example
+ * // uno.config.js
+ * import { iconCollections } from '@rokkit/core/vite'
+ *
+ * export default defineConfig({
+ *   presets: [
+ *     presetIcons({
+ *       collections: iconCollections({
+ *         rokkit: '@rokkit/icons/ui.json',
+ *         logo: '@rokkit/icons/auth.json',
+ *         solar: '@iconify-json/solar/icons.json',
+ *         custom: './static/icons/custom.json'
+ *       })
+ *     })
+ *   ]
+ * })
+ *
+ * @param {Record<string, string>} config - Map of collection alias to JSON path
+ * @returns {Record<string, () => any>} Collections object for presetIcons
+ */
+export function iconCollections(config: Record<string, string>): Record<string, () => any>;

package/dist/vite/index.d.ts

@@ -0,0 +1 @@
+export { iconCollections } from "./icon-collections.js";

package/package.json

@@ -1,59 +1,51 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.15",
-  "description": "Core components, actions and stores for svelte apps.",
+  "version": "1.0.0-next.151",
+  "description": "Contains core utility functions and classes that can be used in various components.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jerrythomas/rokkit.git"
+  },
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
-  "main": "index.js",
-  "svelte": "src/index.js",
-  "module": "src/index.js",
-  "types": "dist/index.d.ts",
   "type": "module",
-  "prettier": "@jerrythomas/prettier-config",
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@jerrythomas/eslint-config-svelte": "^1.0.2",
-    "@jerrythomas/prettier-config": "^1.0.0",
-    "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@testing-library/svelte": "^3.2.2",
-    "@vitest/coverage-istanbul": "^0.28.5",
-    "@vitest/ui": "~0.12.10",
-    "eslint": "^7.32.0",
-    "jsdom": "^19.0.0",
-    "svelte": "^3.55.1",
-    "typescript": "^4.9.5",
-    "validators": "latest",
-    "vite": "^4.1.1",
-    "vitest": "~0.19.1",
-    "shared-config": "1.0.0"
+  "scripts": {
+    "prepublishOnly": "cp ../../LICENSE . && bunx tsc --project tsconfig.build.json",
+    "postpublish": "rm -f LICENSE",
+    "clean": "rm -rf dist",
+    "build": "bun clean && bun prepublishOnly"
   },
   "files": [
     "src/**/*.js",
-    "src/**/*.svelte",
-    "!src/mocks",
-    "!src/**/*.spec.js"
+    "src/**/*.ts",
+    "src/**/*.json",
+    "dist/**/*.d.ts",
+    "README.md",
+    "package.json",
+    "LICENSE"
   ],
   "exports": {
     "./src": "./src",
     "./package.json": "./package.json",
-    "./stores": "./src/stores/index.js",
-    "./actions": "./src/actions/index.js",
-    "./constants": "./src/constants.js",
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./src/index.js"
+      "import": "./src/index.js",
+      "svelte": "./src/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./src/vite/index.js"
     }
   },
-  "scripts": {
-    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
-    "format": "prettier --write --plugin-search-dir=. .",
-    "test:ct": "playwright test -c playwright.config.js",
-    "test:ci": "vitest run",
-    "test:ui": "vitest --ui",
-    "test": "vitest",
-    "coverage": "vitest run --coverage",
-    "upgrade": "pnpm upgrade"
+  "dependencies": {
+    "@unocss/preset-mini": "^66.6.1",
+    "date-fns": "^4.1.0",
+    "ramda": "^0.32.0"
+  },
+  "devDependencies": {
+    "@rokkit/icons": "workspace:*"
   }
-}
+}

package/src/calendar.js

@@ -0,0 +1,44 @@
+import { getDay, getMonth, getYear, getDaysInMonth, format, isWeekend } from 'date-fns'
+
+export const weekdays = [
+	'Sunday',
+	'Monday',
+	'Tuesday',
+	'Wednesday',
+	'Thursday',
+	'Friday',
+	'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)
+	const offset = getDay(new Date(year, month, 1)) + 1
+
+	holidays = holidays.map((x) => format(new Date(x), 'yyyy-MMM-dd'))
+	let days = Array.from({ length: getDaysInMonth(value) }, (_, i) => ({
+		day: i + 1,
+		offset: i === 0 ? offset : 0,
+		date: new Date(year, month, i + 1)
+	})).map((x) => ({
+		...x,
+		text: format(x.date, 'yyyy-MMM-dd'),
+		weekend: isWeekend(x.date),
+		holiday: holidays.includes(format(x.date, 'yyyy-MMM-dd'))
+	}))
+
+	if (fixed && days[0].offset > 4) {
+		const n = 5 * 7 - days[0].offset
+		days = [...days.slice(n + 1), ...days.slice(0, n + 1)]
+	}
+
+	return days
+}

package/src/colors/extra.json

@@ -0,0 +1,16 @@
+{
+  "shark": {
+    "DEFAULT": "#828C9F",
+    "50": "#ffffff",
+    "100": "#efefef",
+    "200": "#E0E0E0",
+    "300": "#C1C6D0",
+    "400": "#828C9F",
+    "500": "#677287",
+    "600": "#51596A",
+    "700": "#3B414D",
+    "800": "#2E323C",
+    "900": "#20242A",
+    "950": "#1A1C22"
+  }
+}

package/src/colors/index.ts

@@ -0,0 +1,24 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { colors } from '@unocss/preset-mini/colors'
+import type { PresetMiniColors } from '@unocss/preset-mini/colors'
+import syntaxColorPalette from './syntax.json' with { type: 'json' }
+import extraColors from './extra.json' with { type: 'json' }
+
+export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+export const defaultPalette = [
+	'surface',
+	'primary',
+	'secondary',
+	'accent',
+	'success',
+	'warning',
+	'danger',
+	'info'
+]
+
+export const syntaxColors = syntaxColorPalette
+export const defaultColors: PresetMiniColors & typeof extraColors = {
+	...colors,
+	...extraColors
+}

package/src/colors/syntax.json

@@ -0,0 +1,42 @@
+{
+  "one-dark": {
+    "dark": {
+      "--tab-size": "2",
+      "--code-fill": "var(--surface-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-z2": "#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(--surface-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-z2": "#999",
+      "--code-cursor": "#24292e",
+      "--code-cursor-block": "rgba(20, 255, 20, 0.5)",
+      "--code-linenumbers": "rgba(27, 31, 35, 0.3)"
+    }
+  }
+}