@genexus/mercury 0.3.1 → 0.3.2

package/dist/assets-manager.d.ts

@@ -0,0 +1,84 @@
+export type AssetsMetadata = {
+    category: string;
+    name: string;
+    colorType?: string;
+};
+/**
+ * For example:
+ * ```
+ * {
+ *   icons: {
+ *     objects: { // Category
+ *       stencil: { // Icon Name
+ *         enabled: { // State
+ *           name: "objects_stencil--enabled"
+ *         }
+ *       },
+ *     },
+ *     windows-tools: { // Category
+ *       workflow: { // Icon Name
+ *         "on-surface": { // Color Type
+ *           enabled: { // State
+ *             name: "windows-tools_workflow_on-surface--enabled"
+ *           },
+ *           hover: {
+ *             name: "windows-tools_workflow_on-surface--hover"
+ *           }
+ *         }
+ *       }
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export type Assets = {
+    icons: {
+        [key in string]: AssetsCategories;
+    };
+};
+export type AssetsCategories = {
+    [key: string]: AssetsIconName;
+};
+export type AssetsIconName = {
+    [key: string]: AssetsColorType;
+} | AssetsColorType;
+export type AssetsColorType = {
+    [key: string]: AssetsIconMetadata;
+};
+export interface AssetsIconMetadata {
+    name: string;
+}
+export type ImageMultiState = {
+    base: string;
+    hover?: string;
+    active?: string;
+    focus?: string;
+    disabled?: string;
+};
+/**
+ * Given a vendor and its assets, it register the assets of the vendor. After
+ * the registration, the `getAsset` function can be used to retrieve any assets
+ * related to the vendor.
+ * @param vendorName The name of the vendor (for example, "Mercury"). Must be unique.
+ * @param vendorAlias The alias of the vendor (for example, "mer"). Must be unique.
+ * @param assets The assets (generated by the SVG Sass Generator) to register.
+ */
+export declare const registerAssets: (vendorName: string, vendorAlias: string, assets: Assets) => void;
+/**
+ * @param vendorAlias The name or alias of the vendor.
+ * @param assetMetadata The metadata required to retrieve the icon
+ * @return The required asset or undefined if not found.
+ */
+export declare const getAsset: (vendorAliasOrName: string, assetMetadata: AssetsMetadata) => AssetsColorType | undefined;
+/**
+ * Given the metadata of the icon, it transforms the metadata into a string
+ * that contains the given information.
+ */
+export declare const iconMetadataToPath: (iconMetadata: AssetsMetadata, vendorAlias?: string) => `${string}/${string}/${string}${string}`;
+export declare const getImagePathCallback: (iconPath: string) => ImageMultiState | undefined;
+export declare const getTreeViewImagePathCallback: (item: {
+    startImgSrc?: string;
+    endImgSrc?: string;
+}, direction: "start" | "end") => {
+    default: ImageMultiState;
+} | undefined;

package/dist/assets-manager.js

@@ -0,0 +1,126 @@
+import { MERCURY_ASSETS } from "./assets/MERCURY_ASSETS";
+const ASSETS_BY_VENDOR = {};
+const ALIAS_TO_VENDOR_NAME = {};
+const SEPARATOR = "/";
+const MERCURY_ALIAS = "mer";
+/**
+ * Given a vendor and its assets, it register the assets of the vendor. After
+ * the registration, the `getAsset` function can be used to retrieve any assets
+ * related to the vendor.
+ * @param vendorName The name of the vendor (for example, "Mercury"). Must be unique.
+ * @param vendorAlias The alias of the vendor (for example, "mer"). Must be unique.
+ * @param assets The assets (generated by the SVG Sass Generator) to register.
+ */
+export const registerAssets = (vendorName, vendorAlias, assets) => {
+    // Already registered
+    if (ASSETS_BY_VENDOR[vendorName] || ALIAS_TO_VENDOR_NAME[vendorAlias]) {
+        return;
+    }
+    ASSETS_BY_VENDOR[vendorName] = assets;
+    ALIAS_TO_VENDOR_NAME[vendorAlias] = vendorName;
+};
+/**
+ * @param vendorAlias The name or alias of the vendor.
+ * @param assetMetadata The metadata required to retrieve the icon
+ * @return The required asset or undefined if not found.
+ */
+export const getAsset = (vendorAliasOrName, assetMetadata) => {
+    const vendorName = ALIAS_TO_VENDOR_NAME[vendorAliasOrName] ?? vendorAliasOrName;
+    const vendorAssets = ASSETS_BY_VENDOR[vendorName];
+    if (!vendorAssets) {
+        return undefined;
+    }
+    const iconCategoryObject = vendorAssets.icons[assetMetadata.category];
+    // The category does not exists
+    if (!iconCategoryObject) {
+        return undefined;
+    }
+    const iconNameObject = iconCategoryObject[assetMetadata.name];
+    // The name in the category does not exists
+    if (!iconNameObject) {
+        return undefined;
+    }
+    return assetMetadata.colorType
+        ? iconNameObject[assetMetadata.colorType]
+        : iconNameObject;
+};
+/**
+ * Given the metadata of the icon, it transforms the metadata into a string
+ * that contains the given information.
+ */
+export const iconMetadataToPath = (iconMetadata, vendorAlias = MERCURY_ALIAS) => {
+    const additionalInfo = iconMetadata.colorType
+        ? `${SEPARATOR}${iconMetadata.colorType}`
+        : "";
+    return `${vendorAlias}${SEPARATOR}${iconMetadata.category}${SEPARATOR}${iconMetadata.name}${additionalInfo}`;
+};
+const getCustomFullValue = (iconName, vendorAliasOrName, suffix) => {
+    const vendorPrefix = vendorAliasOrName === MERCURY_ALIAS ? "" : `${vendorAliasOrName}-`;
+    return suffix
+        ? `var(--icon__${vendorPrefix}${iconName}--${suffix})`
+        : `var(--icon__${vendorPrefix}${iconName})`;
+};
+/**
+ * Parses the incoming iconMetadata, assuming Mercury as the default vendor if
+ * the vendor is not specified (it is not found in the register)
+ */
+const parseIconMetadata = (iconPath) => {
+    const iconMetadata = iconPath.split(SEPARATOR);
+    const vendorAliasOrName = iconMetadata[0];
+    const vendorName = ALIAS_TO_VENDOR_NAME[vendorAliasOrName] ?? vendorAliasOrName;
+    const vendorAssets = ASSETS_BY_VENDOR[vendorName];
+    // The vendor is not contained in the path, assume by default Mercury.
+    if (!vendorAssets) {
+        const category = iconMetadata[0]; // Assume that the first value is the category
+        const name = iconMetadata[1];
+        const colorType = iconMetadata[2];
+        return {
+            vendor: MERCURY_ALIAS,
+            category,
+            name,
+            colorType: colorType
+        };
+    }
+    const category = iconMetadata[1];
+    const name = iconMetadata[2];
+    const colorType = iconMetadata[3];
+    return {
+        vendor: vendorAliasOrName,
+        category,
+        name,
+        colorType: colorType
+    };
+};
+export const getImagePathCallback = (iconPath) => {
+    const { vendor, category, name, colorType } = parseIconMetadata(iconPath);
+    const assetStates = getAsset(vendor, colorType ? { category, name, colorType } : { category, name });
+    if (!assetStates) {
+        return undefined;
+    }
+    const result = {
+        base: getCustomFullValue(assetStates.enabled.name, vendor)
+    };
+    if (assetStates.hover) {
+        result.hover = getCustomFullValue(assetStates.hover.name, vendor);
+    }
+    if (assetStates.active) {
+        result.active = getCustomFullValue(assetStates.active.name, vendor);
+    }
+    if (assetStates.disabled) {
+        result.disabled = getCustomFullValue(assetStates.disabled.name, vendor);
+    }
+    return result;
+};
+export const getTreeViewImagePathCallback = (item, direction) => {
+    if ((!item.startImgSrc && direction === "start") ||
+        (!item.endImgSrc && direction === "end")) {
+        return undefined;
+    }
+    const paths = getImagePathCallback(direction === "start" ? item.startImgSrc : item.endImgSrc);
+    if (!paths) {
+        return undefined;
+    }
+    return { default: paths };
+};
+// Initialize Mercury at the start
+registerAssets("Mercury", MERCURY_ALIAS, MERCURY_ASSETS);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
   "main": "dist/mercury.scss",
   "module": "dist/assets-manager.js",
@@ -11,9 +11,9 @@
   "type": "module",
   "scripts": {
     "build": "tsc && npm run icons-svg && npm run icons-sass && npm run build.scss && npm run copy-tasks && npm run showcase.scss",
-    "build-no-svg": "npm run build.scss && npm run copy-tasks",
+    "build-no-svg": "tsc && npm run build.scss && npm run copy-tasks",
     "build.scss": "scss-bundle -e ./src/mercury.scss -o dist/mercury.scss && sass test/test.scss dist/css/mercury.css",
-    "test": "sass test/test.scss  test/mercury.css",
+    "test": "sass test/test.scss test/mercury.css",
     "validate.ci": "npm run build-no-svg",
     "icons-svg": "ssg-svg --srcDir=src/icons/svg-source --outDir=src/assets/icons/_generated/ --configFilePath=src/icons/svg-source/.config/color-states.json --showcaseDir=showcase/icons/ --showcaseBaseHref=../assets/icons/ --logDir=./log --objectFilePath=src/assets/MERCURY_ASSETS.ts",
     "icons-sass": "ssg-sass src/assets/icons/ src/icons/_generated/ src/icons/svg-source/.config/color-states.json",
@@ -24,7 +24,7 @@
   "license": "MIT",
   "devDependencies": {
     "@atao60/fse-cli": "^0.1.9",
-    "@genexus/svg-sass-generator": "1.1.15",
+    "@genexus/svg-sass-generator": "1.1.16",
     "chokidar": "^3.6.0",
     "chokidar-cli": "^3.0.0",
     "sass": "~1.72.0",