chore(icons): set up linting

.markdownlint-cli2.jsonc

@@ -13,5 +13,5 @@
     "ul-style": { "style": "dash" },
   },
   "gitignore": true,
-  "ignores": ["**/THIRD-PARTY-LICENSES.md"],
+  "ignores": ["**/THIRD-PARTY-LICENSES.md", "node_modules"],
 }

packages/calcite-ui-icons/bin/build-fonts.js

@@ -1,6 +1,16 @@
 #!/usr/bin/env node
 import { execSync } from "node:child_process";
-import { readdirSync, mkdirSync, rmSync, existsSync, lstatSync, symlinkSync, unlinkSync, readFileSync, writeFileSync } from "fs";
+import {
+  readdirSync,
+  mkdirSync,
+  rmSync,
+  existsSync,
+  lstatSync,
+  symlinkSync,
+  unlinkSync,
+  readFileSync,
+  writeFileSync,
+} from "fs";
 import { join, basename } from "node:path";
 import prettier from "@prettier/sync";
 const SCRIPT_DIR = import.meta.dirname;
@@ -15,7 +25,8 @@ const clearAndPrepareDirs = () => {
   }
   sizes.forEach((size) => ensureDir(join(fontsDir, size.toString())));
 };
-const filterIcons = () => readdirSync(iconsDir).filter((file) => {
+const filterIcons = () =>
+  readdirSync(iconsDir).filter((file) => {
     const filePath = join(iconsDir, file);
     return file.endsWith(".svg") && !readFileSync(filePath, "utf8").includes("opacity");
   });
@@ -33,14 +44,14 @@ const organizeIconsBySize = (size) => {
       const src = join(fontsDir, file);
       const dest = join(sizeDir, file.replace(`-${size}`, ""));
       if (lstatSync(src).isSymbolicLink()) {
-                if (existsSync(dest))
-                    unlinkSync(dest);
+        if (existsSync(dest)) unlinkSync(dest);
         symlinkSync(src, dest);
       }
     }
   });
 };
-const generateFonts = (size) => execSync(`fantasticon fonts/icons/${size}/ -n calcite-ui-icons-${size} --normalize true -t ttf -g json -o fonts/`, {
+const generateFonts = (size) =>
+  execSync(`fantasticon fonts/icons/${size}/ -n calcite-ui-icons-${size} --normalize true -t ttf -g json -o fonts/`, {
     stdio: "inherit",
   });
 const updateConfig = () => {

packages/calcite-ui-icons/bin/convert-mobile.js

@@ -3,11 +3,13 @@ import fsExtra from "fs-extra";
 import svg2img from "svg2img";
 import path from "node:path";
 import yargs from "yargs";
-import { hideBin } from 'yargs/helpers';
+import { hideBin } from "yargs/helpers";
 const { readdir, writeFile, readFile, mkdirSync, writeFileSync, existsSync } = fsExtra;
 
 const options = yargs(hideBin(process.argv))
-    .usage("Usage: -n <name of icon, omit if doing bulk>, \n-s <output size, defaults to 24>, \n-o <output path (defaults to ./output)>, \n-p <target platform (e.g. ios) \n-i <16, 24, 32, omit for 16>")
+  .usage(
+    "Usage: -n <name of icon, omit if doing bulk>, \n-s <output size, defaults to 24>, \n-o <output path (defaults to ./output)>, \n-p <target platform (e.g. ios) \n-i <16, 24, 32, omit for 16>",
+  )
   .option("n", {
     alias: "name",
     describe: "name of icon, without -32.svg; omit to convert all icons",
@@ -92,26 +94,24 @@ function convertIconToXcodeImageSet(svgFilePath, width, height, outputBasePath,
  */
 async function indexCalciteIcons(baseIconPath) {
   return new Promise((resolve) => {
-        var iconIndex = {};
+    const iconIndex = {};
     readdir(baseIconPath, function (error, files) {
       if (error) {
         console.log(error);
         process.exit(1);
       }
       files.forEach(function (file) {
         // strip all files of file size information, catalog in an index
-                var base_name = path.basename(file);
+        let base_name = path.basename(file);
         base_name = base_name.replace(".svg", "");
-                var size = undefined;
+        let size = undefined;
         if (base_name.includes("-16")) {
           base_name = base_name.replace("-16", "");
           size = 16;
-                }
-                else if (base_name.includes("-24")) {
+        } else if (base_name.includes("-24")) {
           base_name = base_name.replace("-24", "");
           size = 24;
-                }
-                else if (base_name.includes("-32")) {
+        } else if (base_name.includes("-32")) {
           base_name = base_name.replace("-32", "");
           size = 32;
         }
@@ -131,63 +131,58 @@ async function indexCalciteIcons(baseIconPath) {
 async function createCalciteXCAssets(xcAssetsBaseDirectory) {
   return new Promise((resolve) => {
     // Put in .xcassets folder
-        var directory = path.join(xcAssetsBaseDirectory, "calcite.xcassets");
+    const directory = path.join(xcAssetsBaseDirectory, "calcite.xcassets");
     // Make sure dir exists
     if (!existsSync(directory)) {
       mkdirSync(directory, {
         recursive: true,
       });
     }
     // read contents.json template
-        let template_path = path.join(import.meta.dirname, "templates", "xcassets.json");
+    const template_path = path.join(import.meta.dirname, "templates", "xcassets.json");
     // write out file
     readFile(template_path, "utf8", function (error, buffer) {
       if (error) {
         console.log(error);
         process.exit(1);
       }
       const contents_output_path = path.join(directory, "Contents.json");
-            writeFile(contents_output_path, buffer, function (error) {
+      writeFile(contents_output_path, buffer, function () {
         resolve(directory);
       });
     });
   });
 }
 async function main() {
   // index all calcite icons
-    let iconIndex = await indexCalciteIcons("./icons/");
+  const iconIndex = await indexCalciteIcons("./icons/");
   // establish output root path
-    var outputRoot = path.join(import.meta.dirname, "output");
+  let outputRoot = path.join(import.meta.dirname, "output");
   if (options.outputDir) {
     outputRoot = path.join(import.meta.dirname, options.outputDir);
   }
   // establish input size
-    var inputSize = 24;
+  let inputSize = 24;
   if (options.inSize === "16") {
     inputSize = 16;
-    }
-    else if (options.inSize === "24") {
+  } else if (options.inSize === "24") {
     inputSize = 24;
-    }
-    else if (options.inSize === "32") {
+  } else if (options.inSize === "32") {
     inputSize = 32;
-    }
-    else if (options.outSize) {
-        let size = parseInt(options.outSize);
+  } else if (options.outSize) {
+    const size = parseInt(options.outSize);
     if (size < 24) {
       inputSize = 16;
-        }
-        else if (size < 32) {
+    } else if (size < 32) {
       inputSize = 24;
-        }
-        else if (size >= 32) {
+    } else if (size >= 32) {
       inputSize = 32;
     }
   }
   // establish output size (in pixels)
-    var outputSize = 24;
+  let outputSize = 24;
   if (options.outSize) {
-        let size = parseInt(options.outSize);
+    const size = parseInt(options.outSize);
     if (size) {
       outputSize = size;
     }
@@ -201,29 +196,26 @@ async function main() {
   }
   // build xcassets if output for iOS
   if (options.outputPlatform === "ios") {
-        let xcAssetsDirectory = await createCalciteXCAssets(outputRoot);
+    const xcAssetsDirectory = await createCalciteXCAssets(outputRoot);
     if (options.name) {
-            let name = options.name;
-            let file = iconIndex[name][inputSize];
+      const name = options.name;
+      const file = iconIndex[name][inputSize];
       convertIconToXcodeImageSet(file, outputSize, outputSize, xcAssetsDirectory, name);
-        }
-        else {
-            for (let key in iconIndex) {
-                let file = iconIndex[key][inputSize];
+    } else {
+      for (const key in iconIndex) {
+        const file = iconIndex[key][inputSize];
         convertIconToXcodeImageSet(file, outputSize, outputSize, xcAssetsDirectory, key);
       }
     }
-    }
-    else {
+  } else {
     // platform is not ios, render plain png
     if (options.name) {
-            let name = options.name;
-            let file = iconIndex[name][inputSize];
+      const name = options.name;
+      const file = iconIndex[name][inputSize];
       convertSingleIconToPng(file, outputSize, outputSize, outputRoot, name, undefined);
-        }
-        else {
-            for (let key in iconIndex) {
-                let file = iconIndex[key][inputSize];
+    } else {
+      for (const key in iconIndex) {
+        const file = iconIndex[key][inputSize];
         convertSingleIconToPng(file, outputSize, outputSize, outputRoot, key, undefined);
       }
     }

packages/calcite-ui-icons/bin/optimize.js

@@ -30,13 +30,17 @@ const options = {
  */
 function optimizeIcons(filePaths, bar) {
   let num = 0;
-    return Promise.all(filePaths.map((path) => readFile(path, "utf-8")
+  return Promise.all(
+    filePaths.map((path) =>
+      readFile(path, "utf-8")
         .then((svg) => optimize(svg, { path, ...options }))
         .then((result) => {
           num++;
           bar.update(num);
           return writeFile(path, result.data, "utf-8");
-    })));
+        }),
+    ),
+  );
 }
 export default (function (files, remove = false) {
   if (!files) {

packages/calcite-ui-icons/bin/path-data.js

@@ -12,8 +12,8 @@ const version = package$0.version;
  * @return {object} - Formatted object with all icon metadata
  */
 function formatSVG(svg) {
-    let file = path.basename(svg.file);
-    let filled = file.indexOf("-f.svg") > -1;
+  const file = path.basename(svg.file);
+  const filled = file.indexOf("-f.svg") > -1;
   return {
     file,
     filled,
@@ -43,7 +43,7 @@ function getPaths(svg) {
  * @return {array} - Icon filename without size, fill, or file extension
  */
 function getVariant(name, filled) {
-    var noF = name.replace("-f.svg", ".svg");
+  const noF = name.replace("-f.svg", ".svg");
   return noF.substring(0, noF.length - 7) + (filled ? "-f" : "");
 }
 /**
@@ -52,7 +52,7 @@ function getVariant(name, filled) {
  * @return {integer} - 16, 24, 36
  */
 function getSize(name) {
-    var noF = name.replace("-f.svg", ".svg");
+  const noF = name.replace("-f.svg", ".svg");
   return parseInt(noF.substring(noF.length - 4, noF.length - 6), 10);
 }
 /**
@@ -61,10 +61,12 @@ function getSize(name) {
  * @return {Promise} - Promise resolving to object which includes name and svgson data
  */
 function readSVG(fileName) {
-    return new Promise((resolve, reject) => readFile(fileName, "utf-8").then((svg) => parse(svg).then((contents) => resolve({ file: fileName, contents }))));
+  return new Promise((resolve) =>
+    readFile(fileName, "utf-8").then((svg) => parse(svg).then((contents) => resolve({ file: fileName, contents }))),
+  );
 }
 export default (function generatePathFile() {
-    let banner = "// File generated automatically by path-data.js, do not edit directly\n";
+  const banner = "// File generated automatically by path-data.js, do not edit directly\n";
   let jsFile = `${banner}`;
   let tsFile = `
 ${banner}
@@ -78,17 +80,17 @@ export type CalciteIconPath = string | CalciteMultiPathEntry[];
     .then((filePaths) => Promise.all(filePaths.map(readSVG)))
     .then((files) => files.map(formatSVG))
     .then((files) => {
-        let icons = {};
-        let promises = [];
-        let keywords = JSON.parse(readFileSync("docs/keywords.json", "utf-8"));
+      const icons = {};
+      const promises = [];
+      const keywords = JSON.parse(readFileSync("docs/keywords.json", "utf-8"));
       files.forEach((file) => {
         // add to json file
         icons[file.variant] = icons[file.variant] || keywords[file.variant] || { alias: [], category: "", release: "" };
-            var icon = icons[file.variant];
+        const icon = icons[file.variant];
         const firstPath = file.paths[0] || { d: "" }; // back up for "blank" icon
         const paths = file.paths.length > 1 ? file.paths : firstPath.d;
         icon[file.size] = paths;
-            var base = file.variant.substring(0, file.variant.length - 2);
+        const base = file.variant.substring(0, file.variant.length - 2);
         // make sure filled variants get the keywords from their standard counterpart
         if (file.filled && !icon.release) {
           const variantKeywords = keywords[base];
@@ -107,8 +109,7 @@ export type CalciteIconPath = string | CalciteMultiPathEntry[];
           tsFile += `export const ${camelCaseName}: string;\n`;
           contents = `export const ${camelCaseName} = "${paths}";\n`;
           tsContents = `export const ${camelCaseName}: string;\n`;
-            }
-            else {
+        } else {
           icon.multiPath = true;
           tsFile += `export const ${camelCaseName}: CalciteMultiPathEntry[];\n`;
           contents = `export const ${camelCaseName} = ${JSON.stringify(paths)};\n`;

packages/calcite-ui-icons/bin/server.js

@@ -25,8 +25,7 @@ build().then(() => {
     if (event === "add") {
       console.log("🗜  new icon detected, optimizing... \n");
       optimize(file, true).then(() => {});
-        }
-        else {
+    } else {
       update();
     }
   }