@rokkit/core 1.0.0-next.100

package/src/theme.js

@@ -0,0 +1,197 @@
+import { defaultThemeMapping, defaultColors, syntaxColors } from './constants'
+import { shades, defaultPalette } from './colors'
+
+const modifiers = {
+	hsl: (value) => `hsl(${value})`,
+	rgb: (value) => `rgb(${value})`,
+	none: (value) => value
+}
+
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @param {string} modifier
+ * @returns
+ */
+export function shadesOf(name, modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+
+	return shades.reduce(
+		(result, shade) => ({
+			...result,
+			[shade]: fn(`var(--${name}-${shade})`)
+		}),
+		{
+			DEFAULT: fn(`var(--${name}-500)`),
+			base: fn(`var(--${name}-50)`),
+			inset: fn(`var(--${name}-100)`),
+			subtle: fn(`var(--${name}-200)`),
+			muted: fn(`var(--${name}-300)`),
+			raised: fn(`var(--${name}-400)`),
+			elevated: fn(`var(--${name}-600)`),
+			floating: fn(`var(--${name}-700)`),
+			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 {
+		DEFAULT: fn(`var(--${name}-500)`),
+		light: fn(`var(--${name}-200)`),
+		dark: fn(`var(--${name}-700)`)
+	}
+}
+
+export function themeColors(modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+
+	const states = ['info', 'danger', 'warning', 'success', 'error']
+	const variants = ['neutral', 'primary', 'secondary', 'accent']
+	let colors = states.reduce(
+		(acc, state) => ({ ...acc, [state]: stateColors(state, modifier) }),
+		{}
+	)
+	colors = variants.reduce(
+		(acc, variant) => ({ ...acc, [variant]: shadesOf(variant, modifier) }),
+		colors
+	)
+	colors.neutral = {
+		...colors.neutral,
+		// contrast: fn(`var(--neutral-800)`),
+		zebra: fn('var(--neutral-zebra)')
+	}
+
+	return colors
+}
+
+/**
+ * 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 {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 {{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) => ({
+		key: `--on-${variant}-${shade}`,
+		value: valueCondition(shade),
+		mode
+	}))
+}
+
+/**
+ * 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 = '#ffffff', dark = '#000000', palette = defaultPalette) {
+	const colors = palette
+		.flatMap((variant) => [
+			createShadeMappings(variant, 'light', (shade) => (shade < 500 ? dark : light)),
+			createShadeMappings(variant, 'dark', (shade) => (shade > 500 ? dark : light))
+		])
+		.reduce((acc, item) => [...acc, ...item], [])
+	return colors
+}
+/**
+ * Generates color rules for a specific theme variant, for both light and dark modes.
+ *
+ * @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 {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) => [
+		{
+			key: `--${variant}-${shade}`,
+			value: colors[mapping[variant]][shade],
+			mode: 'light'
+		},
+		{
+			key: `--${variant}-${shade}`,
+			value: colors[mapping[variant]][shades[shades.length - index - 1]],
+			mode: 'dark'
+		}
+	])
+}
+
+/**
+ * Filters the rules for a specific mode and transforms them into an object mapping
+ * CSS variable names to their values.
+ *
+ * @param {Array<Object>} rules - The array of rules to filter and transform.
+ * @param {'light' | 'dark'} mode - The mode to filter by.
+ * @returns {Object} An object containing the rules specific to the provided mode.
+ */
+function filterRulesByMode(rules, mode) {
+	return rules
+		.filter((rule) => rule.mode === mode)
+		.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+}
+
+/**
+ * Creates a theme variant object with a given mode, a collection of color rules, and additional colors.
+ *
+ * @param {string} name - The base name for the theme variant.
+ * @param {'light' | 'dark'} mode - The mode of the theme variant.
+ * @param {Object} colors - The object containing color rules for the theme.
+ * @param {Object} extraColors - Any additional color properties for the theme.
+ * @returns {Array} An array where the first element is the theme's name and the second element
+ * is an object containing all color rules and extra properties for the theme variant.
+ */
+function createThemeVariant(name, mode, colors, extraColors) {
+	return [
+		`${name}-mode-${mode}`,
+		{
+			...colors,
+			...extraColors,
+			'--plot-background': 'var(--neutral-200)'
+		}
+	]
+}
+
+/**
+ * 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 = 'rokkit', mapping = defaultThemeMapping, colors = defaultColors) {
+	mapping = { ...defaultThemeMapping, ...mapping }
+	const variants = Object.keys(mapping)
+
+	const rules = variants.reduce(
+		(acc, variant) => [...acc, ...generateColorRules(variant, colors, mapping)],
+		[]
+	)
+
+	const lightRules = filterRulesByMode(rules, 'light')
+	const darkRules = filterRulesByMode(rules, 'dark')
+
+	const lightTheme = createThemeVariant(name, 'light', lightRules, syntaxColors['one-dark'].light)
+	const darkTheme = createThemeVariant(name, 'dark', darkRules, syntaxColors['one-dark'].dark)
+
+	return [lightTheme, darkTheme]
+}

package/src/ticks.js

@@ -0,0 +1,26 @@
+/**
+ * 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,
+	upperBound,
+	minorTickStep = upperBound - lowerBound,
+	majorTickStep = 1
+) {
+	const length = 1 + Math.ceil((upperBound - lowerBound) / minorTickStep)
+	return Array.from({ length }, (_, i) => {
+		const value = i === length - 1 ? upperBound : lowerBound + minorTickStep * i
+		const major = i === 0 || i === length - 1 || i % majorTickStep === 0
+		return {
+			value,
+			label: major ? value : '',
+			major
+		}
+	})
+}

package/src/types.js

@@ -0,0 +1,115 @@
+/**
+ * Component map to be used to render the item.
+ * @typedef {Object<string, import('svelte').SvelteComponent>} ComponentMap
+ */
+
+/**
+ * Options for the sort order of the column.
+ *
+ * @typedef {'ascending'|'descending'|'none'} SortOptions
+ */
+
+/**
+ * @typedef {'checked'|'unchecked'|'indeterminate'} SelectionState
+ */
+
+/**
+ * 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']    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
+ */
+
+/**
+ * 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 {number} index              - The index of the node in the flat list.
+ * @property {number} depth              - The depth of the node in the hierarchy.
+ * @property {string} [value]            - The value of the hierarchy node.
+ * @property {boolean} [isHidden]        - Indicates whether the node is visible (true/false).
+ * @property {boolean} [isParent]        - Indicates if this node is a parent (true/false).
+ * @property {boolean} [isExpanded]      - Indicates whether the node is expanded (true/false).
+ * @property {number} [parentIndex]      - The index of the parent node in the flat list.
+ * @property {SelectionState} [selected] - Indicates whether the node is selected (true/false/indeterminate).
+ * @property {Array<number>} childred    - The indices of the children in the flat list.
+ */
+
+/**
+ * Track the state of all rows in the table.
+ *
+ * @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 {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/utils.js

@@ -0,0 +1,72 @@
+/**
+ * A function that performs no operations.
+ */
+export function noop() {
+	// intentionally empty to support default actions
+}
+
+/**
+ * Generates a random id
+ *
+ * @returns {string} A random id
+ */
+export function id() {
+	return Math.random().toString(36).substring(2, 9)
+}
+
+/**
+ * Check if a value is a json object
+ *
+ * @param {*} val
+ * @returns {boolean}
+ */
+export function isObject(val) {
+	return typeof val === 'object' && val !== null && !(val instanceof Date)
+}
+
+/**
+ * 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) {
+	if (value === null || value === undefined) return value
+	if (isObject(value)) return JSON.stringify(value, null, 2)
+	return value.toString()
+}
+
+/**
+ * Generates icon shortcuts for a collection of icons
+ *
+ * @param {string[]} icons
+ * @param {string} collection
+ * @param {string} variants
+ * @returns {Object}
+ */
+export function iconShortcuts(icons, collection, variants) {
+	const suffix = variants ? `-${variants}` : ''
+	const shortcuts = !collection
+		? {}
+		: icons.reduce(
+				(acc, name) => ({
+					...acc,
+					[name]: [collection, name].join(':') + suffix
+				}),
+				{}
+			)
+
+	return shortcuts
+}
+
+/**
+ * Scales the path by the size
+ *
+ * @param {number} size
+ * @param {string|number} x
+ * @returns {string|number}
+ */
+export function scaledPath(size, x) {
+	if (Array.isArray(x)) return x.map((v) => scaledPath(size, v)).join(' ')
+	return typeof x === 'number' ? x * size : x
+}