xmlui 0.4.0

package/dist/scripts/src/components-core/theming/transformThemeVars.js

@@ -0,0 +1,286 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveThemeVar = resolveThemeVar;
+exports.generateBaseTones = generateBaseTones;
+exports.generateBaseSpacings = generateBaseSpacings;
+exports.generateBaseFontSizes = generateBaseFontSizes;
+exports.generateButtonTones = generateButtonTones;
+const color_1 = __importDefault(require("color"));
+const hvar_1 = require("@components-core/theming/hvar");
+function resolveThemeVar(varName, theme = {}) {
+    const value = theme[varName];
+    if (typeof value === "string" && value.startsWith("$")) {
+        return resolveThemeVar(value.substring(1), theme);
+    }
+    return value;
+}
+function generateBaseTones(theme) {
+    if (!theme) {
+        return {};
+    }
+    const resolvedTheme = resolveThemeVars(theme);
+    let colorTones = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generateBaseTonesForColor("color-primary", resolvedTheme)), generateBaseTonesForColor("color-secondary", resolvedTheme)), generateBaseTonesForColor("color-info", resolvedTheme)), generateBaseTonesForColor("color-success", resolvedTheme)), generateBaseTonesForColor("color-warn", resolvedTheme)), generateBaseTonesForColor("color-danger", resolvedTheme)), generateBaseTonesForColor("color-surface", resolvedTheme, { distributeEven: true }));
+    return Object.assign(Object.assign(Object.assign({}, colorTones), generateRbgChannelsForTone("color-surface", Object.assign(Object.assign({}, resolvedTheme), colorTones))), generateRbgChannelsForTone("color-primary", Object.assign(Object.assign({}, resolvedTheme), colorTones)));
+}
+function generateBaseSpacings(theme) {
+    if (!theme) {
+        return {};
+    }
+    const resolvedTheme = resolveThemeVars(theme);
+    const base = resolvedTheme["space-base"];
+    if (!base || typeof base !== "string") {
+        return {};
+    }
+    let baseTrimmed = base.trim();
+    if (baseTrimmed.startsWith(".")) {
+        //if we have something like .5rem
+        baseTrimmed = `0${baseTrimmed}`;
+    }
+    const baseNum = parseFloat(baseTrimmed);
+    let baseUnit = baseTrimmed.replace(baseNum + "", "") || "px";
+    //  a) non-baseNum -> "0px"
+    if (Number.isNaN(baseNum)) {
+        return {};
+    }
+    const scale = [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96];
+    const ret = {};
+    scale.forEach((step) => {
+        ret[`space-${(step + "").replace(".", "_")}`] = `${step * baseNum}${baseUnit}`;
+    });
+    return ret;
+}
+function generateBaseFontSizes(theme) {
+    if (!theme) {
+        return {};
+    }
+    const resolvedTheme = resolveThemeVars(theme);
+    const base = resolvedTheme["font-size"];
+    if (!base || typeof base !== "string") {
+        return {};
+    }
+    let baseTrimmed = base.trim();
+    if (baseTrimmed.startsWith(".")) {
+        //if we have something like .5rem
+        baseTrimmed = `0${baseTrimmed}`;
+    }
+    const baseNum = parseFloat(baseTrimmed);
+    let baseUnit = baseTrimmed.replace(baseNum + "", "") || "px";
+    //  a) non-baseNum -> "0px"
+    if (Number.isNaN(baseNum)) {
+        return {};
+    }
+    const ret = {};
+    ret[`font-size-large`] = `${1.5 * baseNum}${baseUnit}`;
+    ret[`font-size-medium`] = `${1.25 * baseNum}${baseUnit}`;
+    ret[`font-size-normal`] = base;
+    ret[`font-size-small`] = `${0.875 * baseNum}${baseUnit}`;
+    ret[`font-size-smaller`] = `${0.75 * baseNum}${baseUnit}`;
+    ret[`font-size-tiny`] = `${0.625 * baseNum}${baseUnit}`;
+    return ret;
+}
+function generateButtonTones(theme) {
+    if (!theme) {
+        return {};
+    }
+    const resolvedTheme = resolveThemeVars(theme);
+    const variants = ["primary", "secondary", "attention"];
+    let ret = {};
+    variants.forEach((variant) => {
+        const solidTones = mapTones(findClosest(resolvedTheme, `color-Button-${variant}-solid`), (tones) => {
+            return {
+                [`color-bg-Button-${variant}-solid`]: tones.base,
+                [`color-bg-Button-${variant}-solid--hover`]: tones.tone1,
+                [`color-bg-Button-${variant}-solid--active`]: tones.tone2,
+                [`color-border-Button-${variant}-solid`]: tones.base,
+                [`color-border-Button-${variant}-solid--hover`]: tones.base,
+                [`color-border-Button-${variant}-solid--active`]: tones.base,
+                [`color-text-Button-${variant}-solid`]: tones.tone3,
+                [`color-text-Button-${variant}-solid--hover`]: tones.tone3,
+                [`color-text-Button-${variant}-solid--active`]: tones.tone3,
+            };
+        });
+        const outlinedTones = mapTones(findClosest(resolvedTheme, `color-Button-${variant}-outlined`), (tones) => {
+            return {
+                [`color-bg-Button-${variant}-outlined--hover`]: tones.alpha1,
+                [`color-bg-Button-${variant}-outlined--active`]: tones.alpha2,
+                [`color-border-Button-${variant}-outlined`]: tones.base,
+                [`color-border-Button-${variant}-outlined--hover`]: tones.tone1,
+                [`color-border-Button-${variant}-outlined--active`]: tones.tone2,
+                [`color-text-Button-${variant}-outlined`]: tones.base,
+                [`color-text-Button-${variant}-outlined--hover`]: tones.tone1,
+                [`color-text-Button-${variant}-outlined--active`]: tones.tone2,
+            };
+        });
+        const ghostTones = mapTones(findClosest(resolvedTheme, `color-Button-${variant}-ghost`), (tones) => {
+            return {
+                [`color-bg-Button-${variant}-ghost--active`]: tones.alpha2,
+                [`color-bg-Button-${variant}-ghost--hover`]: tones.alpha1,
+                [`color-text-Button-${variant}-ghost`]: tones.base,
+                [`color-text-Button-${variant}-ghost--hover`]: tones.tone1,
+                [`color-text-Button-${variant}-ghost--active`]: tones.tone2,
+            };
+        });
+        ret = Object.assign(Object.assign(Object.assign(Object.assign({}, ret), solidTones), outlinedTones), ghostTones);
+    });
+    return ret;
+}
+function findClosest(theme, themeVarName) {
+    if (theme[themeVarName]) {
+        return theme[themeVarName];
+    }
+    const hVar = (0, hvar_1.parseHVar)(themeVarName);
+    if (!hVar) {
+        return null;
+    }
+    let closest = null;
+    let closestKey = null;
+    Object.keys(theme).forEach((themeVar) => {
+        const parsedVar = (0, hvar_1.parseHVar)(themeVar);
+        if (!parsedVar || parsedVar.component !== hVar.component || parsedVar.attribute !== hVar.attribute) {
+            return;
+        }
+        if (parsedVar.states.length) {
+            return;
+        }
+        if (parsedVar.traits.every((tr) => hVar.traits.includes(tr)) &&
+            (!closest || closest.traits.length <= parsedVar.traits.length)) {
+            closest = parsedVar;
+            closestKey = themeVar;
+            return;
+        }
+    });
+    if (closestKey) {
+        // console.log("found closest for", themeVarName, closestKey);
+        return theme[closestKey];
+    }
+    return null;
+}
+function resolveThemeVars(theme) {
+    const ret = {};
+    Object.keys(theme).forEach((key) => {
+        ret[key] = resolveThemeVar(key, theme);
+    });
+    return ret;
+}
+function getRgbChannelsString(colorStr) {
+    if (!colorStr) {
+        return undefined;
+    }
+    const color = (0, color_1.default)(colorStr);
+    let rgb = color.rgb();
+    return `${rgb.red()},${rgb.green()},${rgb.blue()}`;
+}
+function generateBaseTonesForColor(varName, theme, options = { distributeEven: false }) {
+    const { distributeEven } = options;
+    const color = theme[varName];
+    if (!color || typeof color !== "string") {
+        return {};
+    }
+    const baseColor = (0, color_1.default)(color);
+    let color50;
+    let color100;
+    let color200;
+    let color300;
+    let color400;
+    let color500;
+    let color600;
+    let color700;
+    let color800;
+    let color900;
+    let color950;
+    if (distributeEven) {
+        color50 = baseColor.lightness(98);
+        color100 = baseColor.lightness(95);
+        color200 = baseColor.lightness(83);
+        color300 = baseColor.lightness(75);
+        color400 = baseColor.lightness(63);
+        color500 = baseColor.lightness(52);
+        color600 = baseColor.lightness(40);
+        color700 = baseColor.lightness(32);
+        color800 = baseColor.lightness(27);
+        color900 = baseColor.lightness(16);
+        color950 = baseColor.lightness(13);
+    }
+    else {
+        const baseL = baseColor.hsl().l();
+        const darkStep = baseL / 5;
+        const lightStep = (100 - baseL) / 5;
+        color50 = baseColor.lightness(baseL + lightStep * 4.5);
+        color100 = baseColor.lightness(baseL + lightStep * 4);
+        color200 = baseColor.lightness(baseL + lightStep * 3);
+        color300 = baseColor.lightness(baseL + lightStep * 2);
+        color400 = baseColor.lightness(baseL + lightStep * 1);
+        color500 = baseColor;
+        color600 = baseColor.lightness(baseL - darkStep * 1);
+        color700 = baseColor.lightness(baseL - darkStep * 2);
+        color800 = baseColor.lightness(baseL - darkStep * 3);
+        color900 = baseColor.lightness(baseL - darkStep * 4);
+        color950 = baseColor.lightness(baseL - darkStep * 4.5);
+    }
+    return {
+        [`${varName}-50`]: color50.toString(),
+        [`${varName}-100`]: color100.toString(),
+        [`${varName}-200`]: color200.toString(),
+        [`${varName}-300`]: color300.toString(),
+        [`${varName}-400`]: color400.toString(),
+        [`${varName}-500`]: color500.toString(),
+        [`${varName}-600`]: color600.toString(),
+        [`${varName}-700`]: color700.toString(),
+        [`${varName}-800`]: color800.toString(),
+        [`${varName}-900`]: color900.toString(),
+        [`${varName}-950`]: color950.toString(),
+    };
+}
+function generateRbgChannelsForTone(varName, theme) {
+    return {
+        [`${varName}-50-rgb`]: getRgbChannelsString(theme[`${varName}-50`]),
+        [`${varName}-100-rgb`]: getRgbChannelsString(theme[`${varName}-100`]),
+        [`${varName}-200-rgb`]: getRgbChannelsString(theme[`${varName}-200`]),
+        [`${varName}-300-rgb`]: getRgbChannelsString(theme[`${varName}-300`]),
+        [`${varName}-400-rgb`]: getRgbChannelsString(theme[`${varName}-400`]),
+        [`${varName}-500-rgb`]: getRgbChannelsString(theme[`${varName}-500`]),
+        [`${varName}-600-rgb`]: getRgbChannelsString(theme[`${varName}-600`]),
+        [`${varName}-700-rgb`]: getRgbChannelsString(theme[`${varName}-700`]),
+        [`${varName}-800-rgb`]: getRgbChannelsString(theme[`${varName}-800`]),
+        [`${varName}-900-rgb`]: getRgbChannelsString(theme[`${varName}-900`]),
+        [`${varName}-950-rgb`]: getRgbChannelsString(theme[`${varName}-950`]),
+    };
+}
+function mapTones(baseColor, mapper) {
+    const tones = generateTones(baseColor);
+    if (!tones) {
+        return {};
+    }
+    return mapper(tones);
+}
+function generateTones(baseColorStr) {
+    if (!baseColorStr || typeof baseColorStr !== "string" || baseColorStr.startsWith("$"))
+        return null; //TODO illesg here the startsWidth $ should be something else
+    const baseColor = (0, color_1.default)(baseColorStr);
+    let tone1;
+    let tone2;
+    let tone3;
+    if (baseColor.isLight()) {
+        tone1 = baseColor.darken(0.2).toString();
+        tone2 = baseColor.darken(0.1).toString();
+        tone3 = baseColor.darken(0.95).toString();
+    }
+    else {
+        tone1 = baseColor.lighten(0.2).toString();
+        tone2 = baseColor.lighten(0.1).toString();
+        tone3 = baseColor.lighten(0.95).toString();
+    }
+    const alpha1 = baseColor.alpha(0.1).toString();
+    const alpha2 = baseColor.alpha(0.2).toString();
+    return {
+        base: baseColorStr,
+        tone1,
+        tone2,
+        tone3,
+        alpha1,
+        alpha2,
+    };
+}

package/dist/scripts/src/components-core/utils/DataLoaderQueryKeyGenerator.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataLoaderQueryKeyGenerator = void 0;
+const lodash_es_1 = require("lodash-es");
+class DataLoaderQueryKeyGenerator {
+    constructor(url, queryParams) {
+        this.url = url;
+        this.queryParams = queryParams;
+        if (queryParams) {
+            this.key = [url, queryParams];
+        }
+        else {
+            this.key = [url];
+        }
+    }
+    asKey() {
+        if (!this.key) {
+            throw new Error("no key defined");
+        }
+        return this.key;
+    }
+    asPredicate() {
+        if (!this.key) {
+            throw new Error("no key defined");
+        }
+        return {
+            predicate: (query) => {
+                const queryKey = query.queryKey;
+                return queryKey[0] === this.url && (!this.queryParams || (0, lodash_es_1.isEqual)(queryKey[1], this.queryParams));
+            }
+        };
+    }
+}
+exports.DataLoaderQueryKeyGenerator = DataLoaderQueryKeyGenerator;

package/dist/scripts/src/components-core/utils/LruCache.js

@@ -0,0 +1,184 @@
+"use strict";
+// ====================================================================================================================
+// Types to implement an LRU cache we use to provide stable
+// Implementation source: https://www.nickang.com/2021-11-28-how-to-implement-an-lru-cache-in-javascript/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LRUCache = void 0;
+/**
+ * A single node of the LRU cache
+ */
+class DoublyLinkedNode {
+    constructor(value, key) {
+        this.value = value;
+        this.key = key;
+        this.next = undefined;
+        this.prev = undefined;
+    }
+}
+/**
+ * We keep values in the LRU cache in a doubly linked list
+ */
+class DoublyLinkedList {
+    constructor() {
+        this.size = 0;
+        this.head = undefined;
+        this.tail = undefined;
+        this.size = 0;
+    }
+    /**
+     * Adds a new node to the head of the list
+     * @param node The node to add to head of list
+     */
+    unshift(node) {
+        // case 1: there is only a root node in the list
+        //    point node.prev to root node
+        //    point node.next to undefined
+        //    point DoublyLinkedList head to node
+        //    point DoublyLinkedList tail to node
+        //    increment DoublyLinkedList size by 1
+        // case 2: there are data nodes in the list
+        //    point head node.prev to node
+        //    point node.next to head node
+        //    point node.prev to root node
+        //    point DoublyLinkedList head to node
+        //    increment DoublyLinkedList size by 1
+        if (this.size === 0) {
+            // case 1
+            this.head = node;
+            this.tail = node;
+            this.size++;
+        }
+        else {
+            // case 2
+            this.head.prev = node;
+            node.next = this.head;
+            node.prev = undefined;
+            this.head = node;
+            this.size++;
+        }
+    }
+    /**
+     * Remove least recently used node from tail
+     */
+    pop() {
+        const node = this.tail;
+        if (!node) {
+            return undefined;
+        }
+        else if (this.head === this.tail) {
+            this.head = undefined;
+            this.tail = undefined;
+        }
+        else {
+            this.tail.prev.next = undefined;
+        }
+        this.tail = node.prev;
+        this.size--;
+        return node;
+    }
+    /**
+     * Moves the specified node to the head
+     */
+    moveToHead(node) {
+        if (node === this.head) {
+            return;
+        }
+        if (node === this.head && node === this.tail) {
+            return;
+        }
+        if (node === this.tail) {
+            // set tail to tail node.prev
+            this.tail = this.tail.prev;
+            // set new tail node.next to undefined
+            this.tail.next = undefined;
+            // set node.next to current head
+            node.next = this.head;
+            // set current head node.prev to node
+            this.head.prev = node;
+            // set head to node
+            this.head = node;
+            // set node.prev to undefined
+            node.prev = undefined;
+        }
+        else {
+            // set node.prev.next to node.next
+            node.prev.next = node.next;
+            // set node.next.prev to node.prev
+            node.next.prev = node.prev;
+            // set node.next to current head
+            node.next = this.head;
+            // set current head node.prev to node
+            this.head.prev = node;
+            // set node as new head
+            this.head = node;
+            // set node.prev to undefined
+            node.prev = undefined;
+        }
+    }
+}
+/**
+ * This class implements the LRU cache
+ */
+class LRUCache {
+    constructor(maxSize) {
+        this.maxSize = maxSize;
+        this.store = {};
+        this.list = new DoublyLinkedList();
+    }
+    /**
+     * Gets the number of items stored in the cache
+     */
+    get length() {
+        return this.list.size;
+    }
+    /**
+     * Gets the value with the specified key
+     * @param key
+     */
+    get(key) {
+        // case 1: node with this key found
+        //    update position of node to head of DoublyLinkedList
+        //    return existing node
+        // case 2: node with this key not found (i.e. doesn't exist)
+        //    return undefined
+        const existingNode = this.store[key];
+        if (existingNode) {
+            this.list.moveToHead(existingNode);
+        }
+        return existingNode === null || existingNode === void 0 ? void 0 : existingNode.value;
+    }
+    /**
+     * Sets the value for a particular key within the cache
+     * @param key Cache item key
+     * @param value Cache item value
+     */
+    set(key, value) {
+        // case 1: search and found existing node with this key
+        //    use get() to obtain node
+        //    if not exist, go to case 2
+        //    if exist, let get() handle re-ordering in DoublyLinkedList
+        //        set node to hold new value
+        const existingNode = this.get(key);
+        if (existingNode) {
+            existingNode.value = value;
+        }
+        // case 2: search and couldn't find existing node with this key
+        //    create new node
+        //    insert key-value pair into store
+        //    insert as new head of DoublyLinkedList
+        const newNode = new DoublyLinkedNode(value, key);
+        this.store[key] = newNode;
+        this.list.unshift(newNode);
+        if (this.hasReachedMaxSize()) {
+            this.evictLeastRecentlyUsed();
+        }
+    }
+    hasReachedMaxSize() {
+        return this.list.size === this.maxSize + 1;
+    }
+    evictLeastRecentlyUsed() {
+        const evictedNode = this.list.pop();
+        delete this.store[evictedNode.key];
+    }
+}
+exports.LRUCache = LRUCache;

package/dist/scripts/src/components-core/utils/actionUtils.js

@@ -0,0 +1,32 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.invalidateQueries = invalidateQueries;
+const DataLoaderQueryKeyGenerator_1 = require("@components-core/utils/DataLoaderQueryKeyGenerator");
+const extractParam_1 = require("@components-core/utils/extractParam");
+function invalidateQueries(invalidates, appContext, state) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        if (invalidates) {
+            let arrayToInvalidate = [invalidates];
+            if (Array.isArray(invalidates)) {
+                arrayToInvalidate = invalidates;
+            }
+            arrayToInvalidate.forEach((invalidate) => {
+                var _a;
+                (_a = appContext.queryClient) === null || _a === void 0 ? void 0 : _a.invalidateQueries(new DataLoaderQueryKeyGenerator_1.DataLoaderQueryKeyGenerator((0, extractParam_1.extractParam)(state, invalidate, appContext)).asPredicate());
+            });
+        }
+        else {
+            yield ((_a = appContext.queryClient) === null || _a === void 0 ? void 0 : _a.invalidateQueries());
+        }
+    });
+}

package/dist/scripts/src/components-core/utils/classnames.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = clsx;
+/**
+ * This utility function adds class names from CSS Modules to React components making it more readable to add multiple
+ * class styles to a single component.
+ * @param input class names that should be concatenated
+ * @returns Concatenated string of class names separated by a space
+ */
+function clsx(...input) {
+    // filter falsy (null, undefined, "", false) values
+    const args = input.filter(Boolean);
+    let i = 0, tmp, x = "", str = "";
+    while (i < args.length) {
+        tmp = args[i++];
+        if (tmp) {
+            x = toVal(tmp);
+            if (x) {
+                str && (str += " ");
+                str += x;
+            }
+        }
+    }
+    return str;
+    /**
+     * Converts the specified value to its string representation
+     * @param mix
+     */
+    function toVal(mix) {
+        let k, y, str = "";
+        if (typeof mix === "string" || typeof mix === "number") {
+            str += mix;
+        }
+        else if (typeof mix === "object") {
+            if (Array.isArray(mix)) {
+                for (k = 0; k < mix.length; k++) {
+                    if (mix[k]) {
+                        y = toVal(mix[k]);
+                        if (y) {
+                            str && (str += " ");
+                            str += y;
+                        }
+                    }
+                }
+            }
+            else {
+                for (k in mix) {
+                    // @ts-ignore
+                    if (mix[k]) {
+                        str && (str += " ");
+                        str += k;
+                    }
+                }
+            }
+        }
+        return str;
+    }
+}