chore: update the fetchIcons script to prevent false positives

package.json

@@ -65,7 +65,7 @@
     "@size-limit/file": "^8.0.0",
     "@size-limit/webpack": "^8.0.0",
     "@stylelint/postcss-css-in-js": "^0.38.0",
-    "@testing-library/cypress": "^8.0.0",
+    "@testing-library/cypress": "^10.0.1",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^7.0.0",

packages/orbit-components/.eslintrc.cjs

@@ -15,7 +15,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: ["cypress/**/*.ts?(x)"],
+      files: ["cypress/**/*.ts?(x)", "config/**/*.mts"],
       rules: {
         "import/no-extraneous-dependencies": "off",
       },

packages/orbit-components/config/fetchIcons.mts

@@ -2,6 +2,9 @@ import dotenv from "dotenv-safe";
 import dedent from "dedent";
 import ora from "ora";
 import { path, argv, fs, globby, chalk, fetch, $ } from "zx";
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+import sharp from "sharp";
 
 interface User {
   id: string;
@@ -44,6 +47,12 @@ const FIGMA_FILE_URI = `https://api.figma.com/v1/files/${ICONS_ID}`;
 const FIGMA_IMAGE_URI = `https://api.figma.com/v1/images/${ICONS_ID}`;
 const SVG_FOLDER = path.resolve(process.cwd(), "src/icons/svg");
 
+const svgToPng = async (svg: string) => {
+  const svgBuffer = Buffer.from(svg, "utf8");
+  const pngBuffer = await sharp(svgBuffer, { density: 300 }).png().toBuffer();
+  return PNG.sync.read(pngBuffer);
+};
+
 const sliceIntoChunks = (arr: string[], chunkSize: number) =>
   arr.reduce<string[][]>((acc, _, i) => {
     if (i % chunkSize === 0) {
@@ -121,7 +130,7 @@ const setSvgContent = (name: string, content: string, id: string) => {
   `;
 };
 
-async function saveOrbitIcons(data) {
+async function saveOrbitIcons(data: { name: string; svg: string; id: string }[]) {
   const savedIds: string[] = [];
 
   for (const { name, svg } of data) {
@@ -137,11 +146,30 @@ async function saveOrbitIcons(data) {
         console.log(chalk.green.bold(`saved ${parsedName}`));
       });
     } else if (removeCommentId(content) !== removeCommentId(fs.readFileSync(filePath, "utf-8"))) {
+      // convert to PNG and compare via pixelmatch
+      const upcomingDiff = await svgToPng(content);
+      const existingDiff = await svgToPng(fs.readFileSync(filePath, "utf-8"));
+      const { width, height } = upcomingDiff;
+      const diff = new PNG({ width, height });
       const match = getId(fs.readFileSync(filePath, "utf-8"));
-      currentId = match;
-      await fs.writeFile(filePath, content, "utf-8").then(() => {
-        console.log(chalk.yellow.bold(`file was changed, updated the content for: ${parsedName}`));
-      });
+      const numDiffPixels = pixelmatch(
+        upcomingDiff.data,
+        existingDiff.data,
+        diff.data,
+        width,
+        height,
+        { threshold: 0.1 },
+      );
+
+      // update the content only if the diff is bigger than 0
+      if (numDiffPixels > 0) {
+        currentId = match;
+        await fs.writeFile(filePath, content, "utf-8").then(() => {
+          console.log(
+            chalk.yellow.bold(`file was changed, updated the content for: ${parsedName}`),
+          );
+        });
+      }
     }
 
     savedIds.push(currentId);

packages/orbit-components/package.json

@@ -108,6 +108,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/capitalize": "^2.0.0",
+    "@types/pixelmatch": "^5.2.4",
     "@types/readable-stream": "^2.3.13",
     "@types/styled-components": "^5.1.15",
     "@types/svgicons2svgfont": "^10.0.1",
@@ -128,6 +129,8 @@
     "nanostores": "^0.5.12",
     "onecolor": "^4.0.0",
     "ora": "^6.1.0",
+    "pixelmatch": "^5.3.0",
+    "pngjs": "^7.0.0",
     "react-element-to-jsx-string": "^14.3.2",
     "react-window": "^1.8.6",
     "sharp": "^0.30.5",

yarn.lock

@@ -5165,15 +5165,7 @@
     "@babel/runtime" "^7.14.6"
     "@testing-library/dom" "^9.0.0"
 
-"@testing-library/cypress@^8.0.0":
-  version "8.0.7"
-  resolved "https://registry.npmjs.org/@testing-library/cypress/-/cypress-8.0.7.tgz"
-  integrity sha512-3HTV725rOS+YHve/gD9coZp/UcPK5xhr4H0GMnq/ni6USdtzVtSOG9WBFtd8rYnrXk8rrGD+0toRFYouJNIG0Q==
-  dependencies:
-    "@babel/runtime" "^7.14.6"
-    "@testing-library/dom" "^8.1.0"
-
-"@testing-library/dom@^8.1.0", "@testing-library/dom@^8.5.0":
+"@testing-library/dom@^8.5.0":
   version "8.20.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"
   integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==
@@ -5581,14 +5573,22 @@
     "@types/eslint" "*"
     "@types/estree" "*"
 
-"@types/eslint@*", "@types/eslint@^7.29.0", "@types/eslint@^8.37.0":
+"@types/eslint@*":
   version "8.44.2"
   resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.44.2.tgz#0d21c505f98a89b8dd4d37fa162b09da6089199a"
   integrity sha512-sdPRb9K6iL5XZOmBubg8yiFp5yS/JdUDQsq5e6h95km91MCYMuvp7mh1fjPEYUhvHepKpZOjnEaMBR4PxjWDzg==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
 
+"@types/eslint@^7.29.0":
+  version "7.29.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.29.0.tgz#e56ddc8e542815272720bb0b4ccc2aff9c3e1c78"
+  integrity sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
 "@types/estree@*", "@types/estree@^1.0.0":
   version "1.0.1"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz"
@@ -5925,6 +5925,13 @@
   resolved "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz"
   integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==
 
+"@types/pixelmatch@^5.2.4":
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/@types/pixelmatch/-/pixelmatch-5.2.4.tgz#ca145cc5ede1388c71c68edf2d1f5190e5ddd0f6"
+  integrity sha512-HDaSHIAv9kwpMN7zlmwfTv6gax0PiporJOipcrGsVNF3Ba+kryOZc0Pio5pn6NhisgWr7TaajlPEKTbTAypIBQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/prettier@^2.1.5", "@types/prettier@^2.7.2":
   version "2.7.3"
   resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz"
@@ -19781,7 +19788,7 @@ pirates@^4.0.1, pirates@^4.0.4, pirates@^4.0.5:
   resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
-pixelmatch@^5.2.0:
+pixelmatch@^5.2.0, pixelmatch@^5.3.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.3.0.tgz"
   integrity sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==
@@ -19848,6 +19855,11 @@ pngjs@^6.0.0:
   resolved "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz"
   integrity sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==
 
+pngjs@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-7.0.0.tgz#a8b7446020ebbc6ac739db6c5415a65d17090e26"
+  integrity sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==
+
 polished@^4.2.2:
   version "4.2.2"
   resolved "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz"