@qrvey/utils 1.12.0-9 → 1.13.0-0

package/dist/themes/helpers/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./calculateHSP";
+export * from "./getChannelsByHexadecimalColor";
+export * from "./getChannelsByNameColor";
+export * from "./getChannelsByRgbaColor";
+export * from "./getCSSVariablesByDestination";
+export * from "./getHexadecimalOpacity";
+export * from "./getRgbaOpacity";
+export * from "./isDarkColor";
+export * from "./isHexadecimalColor";
+export * from "./isRGBAColor";
+export * from "./lightOrDark";
+export * from "./setAutomaticCSSVariablesForDark";

package/dist/themes/helpers/index.js

@@ -0,0 +1,12 @@
+export * from "./calculateHSP";
+export * from "./getChannelsByHexadecimalColor";
+export * from "./getChannelsByNameColor";
+export * from "./getChannelsByRgbaColor";
+export * from "./getCSSVariablesByDestination";
+export * from "./getHexadecimalOpacity";
+export * from "./getRgbaOpacity";
+export * from "./isDarkColor";
+export * from "./isHexadecimalColor";
+export * from "./isRGBAColor";
+export * from "./lightOrDark";
+export * from "./setAutomaticCSSVariablesForDark";

package/dist/themes/helpers/isDarkColor.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Determines if the Color is dark or light.
+ * Uses the lightOrDark module.
+ * @param color the string of the color (RGBA, or Hexadecimal)
+ * @returns true: the color is dark.
+ */
+export declare function isDarkColor(color: string, brightnessThreshold?: number): boolean;

package/dist/themes/helpers/isDarkColor.js

@@ -0,0 +1,11 @@
+import { COLOR_TYPE } from "../constants/COLOR_TYPE";
+import { lightOrDark } from "./lightOrDark";
+/**
+ * Determines if the Color is dark or light.
+ * Uses the lightOrDark module.
+ * @param color the string of the color (RGBA, or Hexadecimal)
+ * @returns true: the color is dark.
+ */
+export function isDarkColor(color, brightnessThreshold = 127.5) {
+    return lightOrDark(color, brightnessThreshold) === COLOR_TYPE.DARK;
+}

package/dist/themes/helpers/isHexadecimalColor.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Validates if the given color is an hexadecimal structure
+ * @param color the string of the color
+ * @returns true: the color is an hexadecimal type
+ */
+export declare function isHexadecimalColor(color?: string): boolean;

package/dist/themes/helpers/isHexadecimalColor.js

@@ -0,0 +1,11 @@
+import { isEmpty } from "../../general/mix/isEmpty";
+import { HEXADECIMAL_REGULAR_EXPRESSION } from "../constants/HEXADECIMAL_REGULAR_EXPRESSION";
+/**
+ * Validates if the given color is an hexadecimal structure
+ * @param color the string of the color
+ * @returns true: the color is an hexadecimal type
+ */
+export function isHexadecimalColor(color = "") {
+    return (typeof color === "string" &&
+        !isEmpty(color.match(HEXADECIMAL_REGULAR_EXPRESSION)));
+}

package/dist/themes/helpers/isRGBAColor.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Validates if the given color is an RGBA structure
+ * @param color the string of the color
+ * @returns true: the color is an RGBA type
+ */
+export declare function isRGBAColor(color?: string): boolean;

package/dist/themes/helpers/isRGBAColor.js

@@ -0,0 +1,11 @@
+import { isEmpty } from "../../general/mix/isEmpty";
+import { RGBA_REGULAR_EXPRESSION } from "../constants/RGBA_REGULAR_EXPRESION";
+/**
+ * Validates if the given color is an RGBA structure
+ * @param color the string of the color
+ * @returns true: the color is an RGBA type
+ */
+export function isRGBAColor(color = "") {
+    return (typeof color === "string" &&
+        !isEmpty(color.toLowerCase().match(RGBA_REGULAR_EXPRESSION)));
+}

package/dist/themes/helpers/lightOrDark.d.ts

@@ -0,0 +1,9 @@
+import { IColorType } from "../interfaces/IColorType";
+/**
+ * Validates if the given color is light or dark
+ * The module extracts the rgba channels and calculate the brightness or darkness by a threshold
+ * - If there is not color provided, the returning will be Light
+ * @param color the string of the color.
+ * @returns the color type (Dark or Light)
+ */
+export declare function lightOrDark(color: string, brightnessThreshold?: number, opacityThreshold?: number): IColorType;

package/dist/themes/helpers/lightOrDark.js

@@ -0,0 +1,36 @@
+import { isEmpty } from "../../general/mix/isEmpty";
+import { COLOR_TYPE } from "../constants/COLOR_TYPE";
+import { calculateHSP } from "./calculateHSP";
+import { getChannelsByHexadecimalColor } from "./getChannelsByHexadecimalColor";
+import { getChannelsByNameColor } from "./getChannelsByNameColor";
+import { getChannelsByRgbaColor } from "./getChannelsByRgbaColor";
+import { isHexadecimalColor } from "./isHexadecimalColor";
+import { isRGBAColor } from "./isRGBAColor";
+/**
+ * Validates if the given color is light or dark
+ * The module extracts the rgba channels and calculate the brightness or darkness by a threshold
+ * - If there is not color provided, the returning will be Light
+ * @param color the string of the color.
+ * @returns the color type (Dark or Light)
+ */
+export function lightOrDark(color, brightnessThreshold = 127.5, opacityThreshold = 0.5) {
+    if (isEmpty(color) || typeof color !== "string")
+        return COLOR_TYPE.LIGHT;
+    let rgbaChannel = { r: 0, g: 0, b: 0, a: 1 };
+    const rgbaColor = isRGBAColor(color);
+    const hexadecimalColor = isHexadecimalColor(color);
+    if (rgbaColor) {
+        rgbaChannel = getChannelsByRgbaColor(color);
+    }
+    else if (hexadecimalColor) {
+        rgbaChannel = getChannelsByHexadecimalColor(color);
+    }
+    else {
+        rgbaChannel = getChannelsByNameColor(color);
+    }
+    const hsp = calculateHSP(rgbaChannel);
+    if (hsp > brightnessThreshold || rgbaChannel.a < opacityThreshold) {
+        return COLOR_TYPE.LIGHT;
+    }
+    return COLOR_TYPE.DARK;
+}

package/dist/themes/helpers/setAutomaticCSSVariablesForDark.d.ts

@@ -0,0 +1,9 @@
+import { IColorCSSVariableDestination } from "../interfaces/IColorCSSVariableDestination";
+import { IColorType } from "../interfaces/IColorType";
+/**
+ * Sets CSS Variables into a given wrapper collection.
+ * For the Dark Theme feature.
+ * @param colorType the color type
+ * @param wrapperTags the html elements to set the CSS variables
+ */
+export declare function setAutomaticCSSVariablesForDark(colorType: IColorType, wrapperTags: string[], destination?: IColorCSSVariableDestination): void;

package/dist/themes/helpers/setAutomaticCSSVariablesForDark.js

@@ -0,0 +1,39 @@
+import { isEmpty } from "../../general/mix/isEmpty";
+import { CSS_VARIABLE_DESTINATION } from "../constants/CSS_VARIABLE_DESTINATION";
+import { getCSSVariablesByDestination } from "./getCSSVariablesByDestination";
+/**
+ * Sets CSS Variables into a given wrapper collection.
+ * For the Dark Theme feature.
+ * @param colorType the color type
+ * @param wrapperTags the html elements to set the CSS variables
+ */
+export function setAutomaticCSSVariablesForDark(colorType, wrapperTags, destination = CSS_VARIABLE_DESTINATION.GLOBAL) {
+    if (isEmpty(colorType) || !Array.isArray(wrapperTags))
+        return;
+    const cssVariables = getCSSVariablesByDestination(destination);
+    const cssVariablesKeys = Object.keys(cssVariables[colorType] || {});
+    wrapperTags.forEach((wrapperTag) => {
+        const wrapperElement = document.querySelector(wrapperTag);
+        setCSSVariable(wrapperElement, cssVariablesKeys, cssVariables[colorType]);
+    });
+}
+/**
+ * Sets CSS Variables into a given wrapper collection.
+ * For the Dark Theme feature.
+ * @param colorType the color type
+ * @param wrapper the html element to set the CSS variables
+ * @param cssVariables the CSS variables name to apply the style property
+ */
+function setCSSVariable(wrapper, cssVariables, cssProperties) {
+    if (isEmpty(wrapper) || isEmpty(cssVariables))
+        return;
+    cssVariables.forEach((cssVariable) => {
+        const cssProperty = cssProperties[cssVariable];
+        if (isEmpty(cssProperty)) {
+            wrapper.style.removeProperty(cssVariable);
+        }
+        else {
+            wrapper.style.setProperty(cssVariable, cssProperty);
+        }
+    });
+}

package/dist/themes/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./constants";
+export * from "./interfaces";
+export * from "./helpers";

package/dist/themes/index.js

@@ -0,0 +1,3 @@
+export * from "./constants";
+export * from "./interfaces";
+export * from "./helpers";

package/dist/themes/interfaces/IColorCSSVariableDestination.d.ts

@@ -0,0 +1,5 @@
+import { CSS_VARIABLE_DESTINATION } from "../constants/CSS_VARIABLE_DESTINATION";
+/**
+ * CSS Variable Destination types
+ */
+export type IColorCSSVariableDestination = CSS_VARIABLE_DESTINATION;

package/dist/themes/interfaces/IColorCSSVariableDestination.js

@@ -0,0 +1 @@
+export {};

package/dist/themes/interfaces/IColorChannel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Structure for the RGBA Color channels
+ */
+export interface IColorChannel {
+    a?: number;
+    b: number;
+    g: number;
+    r: number;
+}

package/dist/themes/interfaces/IColorChannel.js

@@ -0,0 +1 @@
+export {};

package/dist/themes/interfaces/IColorType.d.ts

@@ -0,0 +1,5 @@
+import { COLOR_TYPE } from "../constants/COLOR_TYPE";
+/**
+ * Color types
+ */
+export type IColorType = COLOR_TYPE;

package/dist/themes/interfaces/IColorType.js

@@ -0,0 +1 @@
+export {};

package/dist/themes/interfaces/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./IColorChannel";
+export * from "./IColorCSSVariableDestination";
+export * from "./IColorType";

package/dist/themes/interfaces/index.js

@@ -0,0 +1,3 @@
+export * from "./IColorChannel";
+export * from "./IColorCSSVariableDestination";
+export * from "./IColorType";

package/dist/tokens/getCleanCustomTokens.d.ts

@@ -0,0 +1,9 @@
+import { ICustomTokensComplex } from "../interfaces";
+/**
+ * The function `getCleanCustomTokens` takes an object `customTokens` and returns a new object
+ * `cleanTokens` with filtered values based on certain conditions.
+ * @param {ICustomTokensComplex} customTokens - The `customTokens` parameter is an object of type
+ * `ICustomTokensComplex`.
+ * @returns a cleaned version of the customTokens object.
+ */
+export declare function getCleanCustomTokens(customTokens?: ICustomTokensComplex): ICustomTokensComplex;

package/dist/tokens/getCleanCustomTokens.js

@@ -0,0 +1,18 @@
+import { _hasProperty, isEmpty } from "../general";
+/**
+ * The function `getCleanCustomTokens` takes an object `customTokens` and returns a new object
+ * `cleanTokens` with filtered values based on certain conditions.
+ * @param {ICustomTokensComplex} customTokens - The `customTokens` parameter is an object of type
+ * `ICustomTokensComplex`.
+ * @returns a cleaned version of the customTokens object.
+ */
+export function getCleanCustomTokens(customTokens = {}) {
+    const cleanTokens = {};
+    for (const tokenKey in customTokens) {
+        if (_hasProperty(customTokens, tokenKey)) {
+            const tokensGroup = customTokens[tokenKey];
+            cleanTokens[tokenKey] = tokensGroup.filter((token) => !isEmpty(token.value) && (token.label || token.key));
+        }
+    }
+    return cleanTokens;
+}

package/dist/tokens/getCustomtonTokens.d.ts

@@ -1,10 +1,10 @@
 import { ICustomTokensComplex, ICustomTokensSimple } from "../interfaces";
 /**
  * The function `getCustomtonTokens` takes a configuration object and returns a parsed version of the
- * custom tokens.
+ * custom tokens, with keys and values appropriately formatted.
  * @param {ICustomTokensSimple | ICustomTokensComplex} customtonTokensConfig - The
- * `customtonTokensConfig` parameter is an object that can be either of type `ICustomTokensSimple` or
- * `ICustomTokensComplex`.
+ * `customtonTokensConfig` parameter is an object that can have two possible types:
+ * `ICustomTokensSimple` or `ICustomTokensComplex`.
  * @returns an object of type `ICustomTokensComplex`.
  */
 export declare function getCustomtonTokens(customtonTokensConfig: ICustomTokensSimple | ICustomTokensComplex): ICustomTokensComplex;

package/dist/tokens/getCustomtonTokens.js

@@ -1,12 +1,13 @@
 import { CUSTOM_TOKEN_DEFAULT_KEY } from "../constants";
-import { camelize } from "../general";
+import { camelize, isEmpty } from "../general";
+import { getCleanCustomTokens } from "./getCleanCustomTokens";
 import { getCustomtonTokensWithKeys } from "./getCustomtonTokensWithKeys";
 /**
  * The function `getCustomtonTokens` takes a configuration object and returns a parsed version of the
- * custom tokens.
+ * custom tokens, with keys and values appropriately formatted.
  * @param {ICustomTokensSimple | ICustomTokensComplex} customtonTokensConfig - The
- * `customtonTokensConfig` parameter is an object that can be either of type `ICustomTokensSimple` or
- * `ICustomTokensComplex`.
+ * `customtonTokensConfig` parameter is an object that can have two possible types:
+ * `ICustomTokensSimple` or `ICustomTokensComplex`.
  * @returns an object of type `ICustomTokensComplex`.
  */
 export function getCustomtonTokens(customtonTokensConfig) {
@@ -34,5 +35,7 @@ export function getCustomtonTokens(customtonTokensConfig) {
             }
         }
     }
-    return customTokensparsed;
+    if (isEmpty(customTokensparsed[CUSTOM_TOKEN_DEFAULT_KEY]))
+        delete customTokensparsed[CUSTOM_TOKEN_DEFAULT_KEY];
+    return getCleanCustomTokens(customTokensparsed);
 }

package/dist/tokens/getCustomtonTokensWithKeys.js

@@ -10,5 +10,5 @@ import { camelize } from "../general";
  * `CustomTokens` object.
  */
 export function getCustomtonTokensWithKeys(customTokens) {
-    return customTokens.map((token) => (Object.assign(Object.assign({}, token), { key: camelize((token === null || token === void 0 ? void 0 : token.key) || token.label) })));
+    return customTokens.map((token) => (Object.assign(Object.assign({}, token), { label: token.label || token.key, key: camelize((token === null || token === void 0 ? void 0 : token.key) || token.label) })));
 }

package/dist/tokens/index.d.ts

@@ -2,3 +2,4 @@ export * from "./isTokenLabel";
 export * from "./getCustomtonTokensWithKeys";
 export * from "./getCustomtonTokens";
 export * from "./getCustomTokenBoxParse";
+export * from "./getCleanCustomTokens";

package/dist/tokens/index.js

@@ -2,3 +2,4 @@ export * from "./isTokenLabel";
 export * from "./getCustomtonTokensWithKeys";
 export * from "./getCustomtonTokens";
 export * from "./getCustomTokenBoxParse";
+export * from "./getCleanCustomTokens";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qrvey/utils",
-  "version": "1.12.0-9",
+  "version": "1.13.0-0",
   "description": "Helper, Utils for all Qrvey Projects",
   "homepage": "https://bitbucket.org/qrvey/qrvey_utils/wiki/Home",
   "main": "dist/index.js",
@@ -13,7 +13,7 @@
     "lint.dev": "eslint . --debug --ext .ts,.tsx",
     "prepare": "husky install",
     "publishing.beta.1": "node ./scripts/publishing --np-new-version=$npm_config_np_new_version --np-any-branch=$npm_config_np_any_branch --np-tag=$npm_config_np_tag",
-    "publishing": "node ./scripts/clean-build && np $npm_config_np_new_version --any-branch --tag=$npm_config_np_tag",
+    "publishing": "node ./scripts/clean-build && np $npm_config_np_new_version --any-branch --tag=$npm_config_np_tag --no-yarn",
     "publishing.win": "node ./scripts/clean-build && np %npm_config_np_new_version% --any-branch --tag=%npm_config_np_tag%",
     "test": "jest test --verbose",
     "test.coverage": "jest test --collect-coverage",
@@ -23,30 +23,33 @@
   "author": "Qrvey Inc",
   "license": "MIT",
   "engines": {
-    "node": ">=14 <=18"
+    "node": ">=18 <=20"
   },
   "devDependencies": {
-    "@types/jest": "29.5.3",
-    "@types/responselike": "1.0.0",
-    "@typescript-eslint/eslint-plugin": "6.2.1",
-    "@typescript-eslint/parser": "6.2.1",
+    "@types/jest": "29.5.11",
+    "@typescript-eslint/eslint-plugin": "6.19.0",
+    "@typescript-eslint/parser": "6.19.0",
     "auto-changelog": "2.4.0",
-    "eslint": "8.46.0",
-    "eslint-config-prettier": "8.9.0",
-    "eslint-plugin-prettier": "5.0.0",
-    "eslint-plugin-sonarjs": "0.19.0",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsdoc": "48.0.2",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-sonarjs": "0.23.0",
     "husky": "8.0.3",
-    "jest": "29.6.2",
-    "lint-staged": "13.2.3",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "lint-staged": "15.2.0",
     "np": "8.0.4",
-    "prettier": "3.0.0",
+    "prettier": "3.2.4",
     "ts-jest": "29.1.1",
-    "typescript": "5.1.6"
+    "typescript": "5.3.3"
   },
   "dependencies": {
     "d3-format": "2.0.0",
-    "dayjs": "1.11.9",
-    "i18next": "22.4.9"
+    "dayjs": "1.11.10",
+    "i18next": "23.7.16"
   },
   "files": [
     "dist/**/*"

package/dist/cjs/tokens/getCustomtonTokensWithKeys.test.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const getCustomtonTokensWithKeys_1 = require("../../src/tokens/getCustomtonTokensWithKeys");
-describe("getCustomtonTokensWithKeys", () => {
-    test("should add camelized key to custom tokens", () => {
-        const customTokens = [
-            { label: "token one", value: "value1" },
-            { label: "Token 2", value: "value2", key: "{{token dos}}" },
-            { label: "3rd token", value: "value3" },
-        ];
-        const result = (0, getCustomtonTokensWithKeys_1.getCustomtonTokensWithKeys)(customTokens);
-        expect(result).toEqual([
-            { label: "token one", value: "value1", key: "tokenOne" },
-            { label: "Token 2", value: "value2", key: "tokenDos" },
-            { label: "3rd token", value: "value3", key: "3rdToken" },
-        ]);
-    });
-    test("should handle empty array", () => {
-        const emptyTokens = [];
-        const result = (0, getCustomtonTokensWithKeys_1.getCustomtonTokensWithKeys)(emptyTokens);
-        expect(result).toEqual([]);
-    });
-});

package/dist/tokens/getCustomtonTokensWithKeys.test.js

@@ -1,21 +0,0 @@
-import { getCustomtonTokensWithKeys } from "../../src/tokens/getCustomtonTokensWithKeys";
-describe("getCustomtonTokensWithKeys", () => {
-    test("should add camelized key to custom tokens", () => {
-        const customTokens = [
-            { label: "token one", value: "value1" },
-            { label: "Token 2", value: "value2", key: "{{token dos}}" },
-            { label: "3rd token", value: "value3" },
-        ];
-        const result = getCustomtonTokensWithKeys(customTokens);
-        expect(result).toEqual([
-            { label: "token one", value: "value1", key: "tokenOne" },
-            { label: "Token 2", value: "value2", key: "tokenDos" },
-            { label: "3rd token", value: "value3", key: "3rdToken" },
-        ]);
-    });
-    test("should handle empty array", () => {
-        const emptyTokens = [];
-        const result = getCustomtonTokensWithKeys(emptyTokens);
-        expect(result).toEqual([]);
-    });
-});