@rokkit/core 1.0.0-next.11 → 1.0.0-next.111

package/dist/theme.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @param {string} modifier
+ * @returns
+ */
+export function shadesOf(name: string, modifier?: string): {
+    DEFAULT: any;
+    base: any;
+    inset: any;
+    subtle: any;
+    muted: any;
+    raised: any;
+    elevated: any;
+    floating: any;
+    contrast: any;
+    overlay: any;
+};
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @param {string} modifier
+ * @returns {object}
+ */
+export function stateColors(name: string, modifier?: string): object;
+/**
+ *
+ * @param {string} modifier
+ * @returns
+ */
+export function themeColors(modifier?: string): {};
+/**
+ * Generates contrast colors for light and dark modes based on a given palette. Each color variant in the
+ * palette is mapped to either a light or dark contrast color depending on the shade's value.
+ *
+ * @param {string} [light='#ffffff'] - The default light color used when the shade is >= 500 in light mode or <= 500 in dark mode.
+ * @param {string} [dark='#000000'] - The default dark color used when the shade is < 500 in light mode or > 500 in dark mode.
+ * @param {Array<string>} [palette=defaultPalette] - An array of color variant names to generate contrast colors for.
+ * @returns {Array<Object>} An array containing contrast color rules organized by light and dark modes for each variant in the palette.
+ */
+export function contrastColors(light?: string, dark?: string, palette?: Array<string>): Array<Object>;
+/**
+ * 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 {Object} [mapping=defaultThemeMapping] - An object mapping variant names to color property names.
+ * @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?: string, mapping?: Object, colors?: Object): Array<any[]>;

package/dist/ticks.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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} [minorTickStep=upperBound-lowerBound] - The step size for minor ticks.
+ * @param {number} [majorTickStep=1]                     - The step size for major ticks.
+ * @returns {import('./types').TickMark[]>} An array of tick mark objects.
+ */
+export function generateTicks(lowerBound: number, upperBound: number, minorTickStep?: number, majorTickStep?: number): import("./types").TickMark[];

package/dist/types.d.ts

@@ -0,0 +1,245 @@
+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;
+};

package/dist/utils.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 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(): 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 importIcons(icons: Object): Object;

package/package.json

@@ -1,59 +1,34 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.11",
-  "description": "Core components, actions and stores for svelte apps.",
+  "version": "1.0.0-next.111",
+  "description": "Contains core utility functions and classes that can be used in various components.",
   "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",
+  "module": "src/index.js",
   "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": "tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "build": "bun clean && bun prepublishOnly"
   },
   "files": [
     "src/**/*.js",
-    "src/**/*.svelte",
-    "!src/mocks",
-    "!src/**/*.spec.js"
+    "src/**/*.json",
+    "dist/**/*.d.ts"
   ],
   "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"
     }
   },
-  "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": {
+    "date-fns": "^4.1.0",
+    "ramda": "^0.30.1"
   }
-}
+}

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

@@ -0,0 +1,19 @@
+import defaultTailwindColors from './tailwind.json' with { type: 'json' }
+import syntaxColorPalette from './syntax.json' with { type: 'json' }
+
+export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+export const defaultPalette = [
+	'neutral',
+	'primary',
+	'secondary',
+	'accent',
+	'success',
+	'warning',
+	'danger',
+	'info'
+]
+
+export const syntaxColors = syntaxColorPalette
+export const defaultColors = {
+	...defaultTailwindColors
+}

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