@genexus/mercury 0.0.2

package/svg-generator/processor-sass.js

@@ -0,0 +1,301 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+
+// Define the path to the parent directory containing the folders
+const SRC_DIRECTORY = await process.argv[2];
+const OUTPUT_DIRECTORY = await process.argv[3];
+const MONOCHROME_STATES_FILE = await process.argv[4];
+const MONOCHROME_ID = "monochrome";
+const MULTICOLOR_ID = "multicolor";
+let monochromeLists = [];
+let multicolorLists = [];
+
+function getStatesJson() {
+  try {
+    const statesJson = fs.readFileSync(`./${MONOCHROME_STATES_FILE}`, "utf8");
+    return JSON.parse(statesJson);
+  } catch (error) {
+    if (error.code === "ENOENT") {
+      console.error(
+        `states.json not found in /${SRC_DIRECTORY}. All states will be generated for every icon.`
+      );
+    } else {
+      console.error(
+        `Error reading ${SRC_DIRECTORY}/states.json:`,
+        error.message
+      );
+    }
+  }
+}
+
+// Function to read the directories and files
+function readDirectoriesAndFiles(directoryPath) {
+  // Read the contents of the directory
+  const files = fs.readdirSync(directoryPath);
+
+  // Filter out only directories
+  const directories = files.filter((file) =>
+    fs.statSync(path.join(directoryPath, file)).isDirectory()
+  );
+
+  // Initialize an array to store the objects
+  const result = [];
+
+  // Iterate over each directory
+  directories.forEach((directory) => {
+    const categoryName = directory;
+    const icons = [];
+
+    // Read the contents of the current directory
+    const filesInDirectory = fs.readdirSync(
+      path.join(directoryPath, directory)
+    );
+
+    // Filter out only SVG files
+    const svgFiles = filesInDirectory.filter(
+      (file) => path.extname(file).toLowerCase() === ".svg"
+    );
+
+    // Add each SVG file to the icons array
+    svgFiles.forEach((svgFile) => {
+      icons.push(path.parse(svgFile).name);
+    });
+
+    // Create an object with category and icons array and push it to the result array
+    result.push({ categoryName, icons });
+  });
+
+  return result;
+}
+
+function writeSassFiles(iconsLists) {
+  // Create the 'sass-output' directory if it doesn't exist
+  if (!fs.existsSync(OUTPUT_DIRECTORY)) {
+    fs.mkdirSync(OUTPUT_DIRECTORY);
+  }
+
+  iconsLists.forEach((iconsList) => {
+    if (!iconsList.icons.length) {
+      //only proceed if the list is not empty
+      return;
+    }
+    const iconsType = getIconsType(iconsList);
+
+    // Create .sass file
+    const sassFileName = `_${iconsList.categoryName}.scss`;
+    const sassFilePath = path.join(
+      `${OUTPUT_DIRECTORY}/${iconsType}`,
+      sassFileName
+    );
+
+    // Write sass list to .sass file
+    let sassContent = `$icons-${iconsList.categoryName}: ${iconsList.icons.join(
+      ", "
+    )};`;
+
+    if (iconsType === MONOCHROME_ID) {
+      sassContent += monochromeStyles(iconsList);
+      monochromeLists.push(iconsList.categoryName);
+    } else if (iconsType === MULTICOLOR_ID) {
+      sassContent += multicolorStyles(iconsList);
+      multicolorLists.push(iconsList.categoryName);
+    }
+
+    createFolder(iconsType);
+    fs.writeFileSync(sassFilePath, sassContent);
+  });
+}
+
+function createFolder(type) {
+  const path = `${OUTPUT_DIRECTORY}/${type}`;
+  if (!fs.existsSync(path)) {
+    fs.mkdirSync(path);
+  }
+}
+
+/**
+ * @description It returns the icon type (multicolor or monochrome). This is needed to determine how to write the sass file css selectors.
+ */
+function getIconsType(iconsList) {
+  if (statesJson === undefined) {
+    /*If no monochrome states file is found, the category is considered as "multicolor" */
+    return;
+  }
+  const categoryName = iconsList.categoryName;
+  const categoryFound = statesJson[categoryName];
+  if (categoryFound) {
+    return MONOCHROME_ID;
+  } else {
+    return MULTICOLOR_ID;
+  }
+}
+
+function monochromeStyles(iconsList) {
+  let output = "";
+  let list = "";
+  const category = iconsList.categoryName;
+  iconsList.icons.forEach((icon) => {
+    list += `
+  // ${icon}.svg`;
+    const states = Object.keys(statesJson[category][icon]["states"]);
+    states.forEach((state) => {
+      list += `
+  &-${icon}--${state}-light {
+    --icon-path :url("#{$icons-path}icons/${category}/light/${icon}.svg#${state}");
+  }
+  &-${icon}--${state}-dark {
+    --icon-path :url("#{$icons-path}icons/${category}/dark/${icon}.svg#${state}");
+  }
+      `;
+    });
+  });
+  output += `
+%icon__${iconsList.categoryName} {
+  ${list}
+}
+  `;
+  return output;
+}
+
+function multicolorStyles(iconsList) {
+  let output = "";
+  let list = "";
+  const category = iconsList.categoryName;
+  iconsList.icons.forEach((icon) => {
+    list += `
+  // ${icon}.svg
+  &-${icon}--enabled-light {
+    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/light/${icon}.svg#enabled");
+  }
+  &-${icon}--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/dark/${icon}.svg#enabled");
+  }
+
+  &-${icon}--hover-light {
+    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/light/${icon}.svg#hover");
+  }
+  &-${icon}--hover-dark {
+    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/dark/${icon}.svg#hover");
+  }
+
+  &-${icon}--active-light {
+    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/light/${icon}.svg#active");
+  }
+  &-${icon}--active-dark {
+    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/dark/${icon}.svg#active");
+  }
+
+  &-${icon}--disabled-light {
+    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/light/${icon}.svg#disabled");
+  }
+  &-${icon}--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/dark/${icon}.svg#disabled");
+  }
+    `;
+  });
+  output += `
+%icon__${iconsList.categoryName} {
+  ${list}
+}
+  `;
+  return output;
+}
+
+/**
+ * @description this function writes on disk a single .scss file that imports each .scss file for each icons category. This is the only .scss file that the final user should import later. (One .scss file per icons category is more easy to understand and inspect, rather than all the icons categories on a single file)
+ */
+function writeImportScss(iconsLists) {
+  // Create .sass file
+  const sassFileName = `icons-selectors.scss`;
+  const sassFilePath = path.join(OUTPUT_DIRECTORY, sassFileName);
+
+  let sassContentMonochrome = "";
+
+  /* --------------------------
+  Import monochrome icons lists
+  --------------------------- */
+
+  if (monochromeLists.length) {
+    sassContentMonochrome += `//Monochrome lists
+    `;
+
+    monochromeLists.forEach((list) => {
+      sassContentMonochrome += `
+@import "${MONOCHROME_ID}/${list}";`;
+    });
+
+    let allMonochromeLists = `
+$all-monochrome-lists: (`;
+    monochromeLists.forEach((list, i) => {
+      allMonochromeLists += `
+  ${list}: $icons-${list}`;
+
+      if (i === monochromeLists.length - 1) {
+        allMonochromeLists += `
+);`;
+      } else {
+        allMonochromeLists += `,`;
+      }
+    });
+
+    sassContentMonochrome += `
+    ${allMonochromeLists}`;
+  }
+
+  /* --------------------------
+  Import multicolor icons lists
+  --------------------------- */
+
+  let sassContentMulticolor = "";
+  if (multicolorLists.length) {
+    let iconsImports = "";
+    sassContentMulticolor += `
+    
+//Multicolor lists
+    `;
+    multicolorLists.forEach((list) => {
+      iconsImports += `@import "${MULTICOLOR_ID}/${list}";\n`;
+    });
+    let allMulticolorLists = `
+@mixin icons-lists($icons-path: "./assets/icons") {
+  ${iconsImports}
+  $all-multicolor-lists: (`;
+    multicolorLists.forEach((list, i) => {
+      allMulticolorLists += `
+    ${list}: $icons-${list}`;
+
+      if (i === multicolorLists.length - 1) {
+        allMulticolorLists += `
+  );`;
+      } else {
+        allMulticolorLists += `,`;
+      }
+    });
+
+    sassContentMulticolor += `
+    ${allMulticolorLists}
+}`;
+  }
+
+  fs.writeFileSync(sassFilePath, sassContentMulticolor);
+}
+
+/**
+ * @description It clears the OUTPUT_DIRECTORY
+ */
+function clearOutputDir() {
+  fs.rmSync(OUTPUT_DIRECTORY, { recursive: true, force: true }, (err) => {
+    if (err) {
+      throw err;
+    }
+  });
+}
+
+//run
+const statesJson = getStatesJson();
+clearOutputDir();
+const iconsLists = readDirectoriesAndFiles(SRC_DIRECTORY);
+writeSassFiles(iconsLists);
+writeImportScss(iconsLists);

package/svg-generator/processor-svg.js

@@ -0,0 +1,397 @@
+import { glob } from "glob";
+import { readFileSync, writeFile, existsSync, mkdirSync, rmSync } from "fs";
+//import * as path from "path";
+import { dirname, basename, join } from "path";
+import { optimize } from "svgo";
+import * as cheerio from "cheerio";
+
+const REGEX_USED_VARS = new RegExp("--i\\d\\d", "g");
+const REGEX_REMOVE_VARS = new RegExp("--i\\d\\d:[^;]+;", "g");
+const SRC_DIRECTORY = await process.argv[2];
+const OUTPUT_DIRECTORY = await process.argv[3];
+const MULTICOLOR_TEMPLATE_SVG = await process.argv[4];
+const MONOCHROME_TEMPLATE_SVG = await process.argv[5];
+const MONOCHROME_STATES_FILE = process.argv[6];
+const SVG_FIGURES = [
+  "rect",
+  "circle",
+  "ellipse",
+  "line",
+  "path",
+  "polygon",
+  "polyline",
+];
+
+const MULTICOLOR_TEMPLATE = readAllTextFile(MULTICOLOR_TEMPLATE_SVG);
+const MONOCHROME_TEMPLATE = readAllTextFile(MONOCHROME_TEMPLATE_SVG);
+
+const files = await glob(`${SRC_DIRECTORY}/**/*.svg`);
+const statesJson = getStatesJson();
+
+//ch is for Cheerio
+let ch;
+
+clearOutputDir();
+
+files.forEach((file) => {
+  processSvg(file, readAllTextFile(file), getOutputPaths(file));
+});
+
+/**
+ * @description It removes the OUTPUT_DIR, and it then creates the folder.
+ */
+function clearOutputDir() {
+  rmSync(OUTPUT_DIRECTORY, { recursive: true, force: true }, (err) => {
+    if (err) {
+      throw err;
+    }
+  });
+}
+
+function getStatesJson() {
+  try {
+    const statesJson = readFileSync(`./${MONOCHROME_STATES_FILE}`, "utf8");
+    return JSON.parse(statesJson);
+  } catch (error) {
+    if (error.code === "ENOENT") {
+      console.error(
+        `states.json not found in /${SRC_DIRECTORY}. All states will be generated for every icon.`
+      );
+    } else {
+      console.error(
+        `Error reading ${SRC_DIRECTORY}/states.json:`,
+        error.message
+      );
+    }
+  }
+}
+
+function readAllTextFile(file) {
+  try {
+    return readFileSync(file, "utf8");
+  } catch (err) {
+    throw err;
+  }
+}
+
+function getOutputPaths(file) {
+  const categoryFolder = basename(dirname(file));
+  const folder = join(OUTPUT_DIRECTORY, categoryFolder);
+  const directoryLight = join(folder, "light");
+  const directoryDark = join(folder, "dark");
+  const fileName = basename(file);
+
+  if (!existsSync(directoryLight)) {
+    mkdirSync(directoryLight, { recursive: true });
+  }
+  if (!existsSync(directoryDark)) {
+    mkdirSync(directoryDark, { recursive: true });
+  }
+
+  return {
+    light: join(directoryLight, fileName),
+    dark: join(directoryDark, fileName),
+  };
+}
+
+function processSvg(path, data, output) {
+  ch = cheerio.load(data, { xmlMode: true });
+  const chSvg = ch("svg");
+  const contents = chSvg.contents();
+  const size = chSvg.attr("viewBox");
+  const width = size.split(" ")[2];
+  const height = size.split(" ")[3];
+  const content = parseContent(contents);
+  const templateInfo = getTemplate(path);
+  const template = templateInfo["template"];
+  const states = templateInfo["states"];
+  let svg = template;
+
+  if (states !== undefined) {
+    //only for monochrome icons. states is defined only for monochrome icons.
+    svg = removeUnusedStates(svg, states);
+  }
+
+  svg = setSize(svg, width, height);
+  svg = setContent(svg, content);
+  svg = setX(svg, width, states);
+
+  if (states === undefined) {
+    //only for multicolor icons.
+    svg = removeUnusedVars(svg, content, path);
+  }
+
+  writeAllTextFile(output.light, compressSvg(setColorScheme(svg, "light")));
+  writeAllTextFile(output.dark, compressSvg(setColorScheme(svg, "dark")));
+}
+
+/**
+ * @description it removes the unused styles, views and uses from the svg. This is only for the monochrome icons. The list of states for every icon is defined on states-monochrome.json
+ */
+function removeUnusedStates(template, states) {
+  const templateHtml = ch.load(template, null, false);
+
+  for (const state in states) {
+    const selected = states[state];
+
+    if (!selected) {
+      templateHtml(`style[data-state="${state}"]`).remove();
+      templateHtml(`view[id="${state}"]`).remove();
+      templateHtml(`use[data-state="${state}"]`).remove();
+    }
+  }
+
+  return templateHtml.html();
+}
+
+function getTemplate(path) {
+  if (statesJson) {
+    //states json is used for coloring monochrome icons
+    let iconPath = path.split("\\");
+
+    if (iconPath.length === 2) {
+      // no category. icon is direct children of the source folder
+      iconPath.splice(0, 1);
+    }
+    if (iconPath.length > 2) {
+      iconPath = iconPath.slice(-2);
+    }
+
+    //remove icon file extension
+    const fileNameExtension = iconPath[iconPath.length - 1];
+    const fileName = getIconName(fileNameExtension);
+    iconPath[iconPath.length - 1] = fileName;
+
+    //find the icon "states" in states.json. If "states" is returned it means this is a monochrome colored icon, otherwise it is considered a multicolor icon.
+    const iconStates = getIconStates(statesJson, iconPath);
+
+    if (iconStates !== undefined) {
+      return {
+        template: MONOCHROME_TEMPLATE,
+        states: iconStates,
+      };
+    }
+    //if iconStates is undefined, this is likely to be a multicolor icon
+    return {
+      template: MULTICOLOR_TEMPLATE,
+      states: undefined,
+    };
+  } else {
+    //SOURCE_FOLDER/states-monochrome.json is needed to process monochrome icons.
+    return {
+      template: MULTICOLOR_TEMPLATE,
+      states: undefined,
+    };
+  }
+}
+
+function getIconName(fileNameExtension) {
+  // Find the position of the last dot (.)
+  const dotIndex = fileNameExtension.lastIndexOf(".");
+  // If dotIndex is greater than 0, return the substring before the last dot
+  if (dotIndex > 0) {
+    const fileName = fileNameExtension.slice(0, dotIndex);
+    return fileName;
+  }
+  // If no dot is found or it's the first character, return the original string
+  return fileNameExtension;
+}
+
+function getIconStates(stateObj, iconPath, i = 0) {
+  // i has to be the index of the category folder in the path, or the icon name.
+
+  // Base case: if obj is not an object or is null, return undefined
+  if (typeof stateObj !== "object" || stateObj === null) {
+    return undefined;
+  }
+
+  const key = [iconPath[i]];
+
+  // Check if the current object has the desired key
+  if (stateObj.hasOwnProperty(key)) {
+    // If the key has a "states" property, return its value
+    if (stateObj[key].hasOwnProperty("states")) {
+      return stateObj[key]["states"];
+    } else {
+      return getIconStates(stateObj[key], iconPath, i + 1);
+    }
+  } else {
+    //icon not found
+    return undefined;
+  }
+}
+
+function setSize(svg, width, height) {
+  return svg.replaceAll("$width$", width).replaceAll("$height$", height);
+}
+
+function setContent(svg, content) {
+  return svg.replace("$content$", content);
+}
+
+function setX(svg, width, states) {
+  const size = parseInt(width);
+
+  if (states === undefined) {
+    //if icons has no states, if because is multicolor
+    return svg
+      .replaceAll("$x-enabled$", size * 0)
+      .replaceAll("$x-hover$", size * 1)
+      .replaceAll("$x-active$", size * 2)
+      .replaceAll("$x-disabled$", size * 3);
+  } else {
+    //if icons has states, if because is monochrome
+    let counter = 0;
+    for (let state in states) {
+      if (states[state]) {
+        svg = svg.replaceAll(`$x-${state}$`, size * counter);
+        counter++;
+      }
+    }
+    return svg;
+  }
+}
+
+/**
+ * @description For every figure (path, circle, etc) it will update the fill value with a css var()
+ * that matches the class name. For example, if the class name is "--icon-04" the fill value will be
+ * updated to "var(--icon-04)".
+ * @argument content: it expects to be a cheerio virtual DOM.
+ */
+function parseContent(content) {
+  const svgFigures = content.find(SVG_FIGURES.join(","));
+  let updatedContent = "";
+
+  svgFigures.each((i, svgFigure) => {
+    let cssClasses = svgFigure.attribs.class;
+    let colorClass;
+    let isMultiColor = false;
+    let hasFill = svgFigure.attribs.fill;
+    const hasStroke = svgFigure.attribs.stroke;
+
+    //temporary fix
+    if (!hasFill) {
+      svgFigure.attribs.fill = "black";
+      hasFill = true;
+    }
+
+    if (cssClasses) {
+      cssClasses = cssClasses.split(" ");
+      colorClass = cssClasses.find((cssClass) => cssClass.includes("--i"));
+      //figures that have a class '--i**' are multicolor icons. A single --i** is expected for every figure.
+      if (colorClass !== undefined) {
+        isMultiColor = true;
+      }
+    }
+
+    //fill (is not a linear icon)
+    if (hasFill) {
+      if (isMultiColor) {
+        svgFigure.attribs.fill = `var(${colorClass})`;
+      } else {
+        svgFigure.attribs.fill = `var(--icon-color)`;
+      }
+    }
+
+    //stroke (is a linear icon)
+    if (hasStroke) {
+      if (isMultiColor) {
+        svgFigure.attribs.stroke = `var(${colorClass})`;
+      } else {
+        svgFigure.attribs.stroke = `var(--icon-color)`;
+      }
+      const strokeWidth = svgFigure.attribs.strokeWidth;
+      svgFigure.attribs.strokeWidth = strokeWidth;
+      //prevent "automatic" fill if "Remove svg element fill" option was not activated on SVG Export figma plugin.
+      svgFigure.attribs.fill = "none";
+    }
+
+    //Remove class, not needed anymore
+    delete svgFigure.attribs.class;
+    //Remove style, if any;
+    delete svgFigure.attribs.style;
+    //convert object to string
+    updatedContent += ch.html(svgFigure);
+  });
+
+  return updatedContent;
+}
+
+function removeUnusedVars(svg, content, path) {
+  let usedVars = content.match(REGEX_USED_VARS);
+  if (usedVars) {
+    //remove repeated vars
+    usedVars = usedVars.filter((item, index) => {
+      return usedVars.indexOf(item) === index;
+    });
+  }
+  return svg.replace(REGEX_REMOVE_VARS, (match) => {
+    if (usedVars.includes(match.slice(0, 5))) {
+      return match;
+    }
+    return "";
+  });
+}
+
+function setColorScheme(svg, colorScheme) {
+  return svg.replaceAll("$color-scheme$", colorScheme);
+}
+
+function compressSvg(svg) {
+  svg = optimizeSvg(svg);
+  svg = minifyCssVars(svg);
+  return svg;
+}
+
+function optimizeSvg(svg) {
+  return optimize(svg, {
+    multipass: true,
+    plugins: [
+      {
+        name: "preset-default",
+        params: {
+          overrides: {
+            cleanupIds: {
+              preserve: [
+                "enabled",
+                "hover",
+                "active",
+                "disabled",
+                "on-surface",
+                "on-primary",
+                "on-primary--active",
+              ],
+            },
+          },
+        },
+      },
+    ],
+  }).data;
+}
+
+function minifyCssVars(svg) {
+  const map = {
+    "--i01": "--a",
+    "--i02": "--b",
+    "--i03": "--c",
+    "--i04": "--d",
+    "--i05": "--e",
+    "--i06": "--f",
+    "--i07": "--g",
+    "--i08": "--h",
+    "--i09": "--i",
+  };
+
+  return svg.replace(REGEX_USED_VARS, (match) => {
+    return map[match];
+  });
+}
+
+function writeAllTextFile(filePath, data) {
+  writeFile(filePath, data, "utf8", (err) => {
+    if (err) {
+      console.error("Error writing to output file:", err);
+      return;
+    }
+  });
+}