Merge pull request #512 from ably/automate-icon-manifests

[WEB-4025] Autogenerate icon manifests

.gitignore

@@ -9,4 +9,5 @@ yarn-error.log
 .idea/*
 types
 index.d.ts
-computed-colors-*.json
+computed-colors-*.json
+computed-icons.ts

package.json

@@ -31,6 +31,7 @@
     "@types/js-cookie": "^3.0.6",
     "@types/lodash.throttle": "^4.1.9",
     "@types/react-dom": "^18.3.0",
+    "@types/svg-sprite": "^0.0.39",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
@@ -52,12 +53,13 @@
     "vite": "^5.2.12"
   },
   "scripts": {
-    "build:prebuild": "rm -rf core reset",
+    "build:prebuild": "rm -rf core reset && mkdir -p dist/core",
     "build:swc": "swc src/core src/reset -d dist --copy-files --include-dotfiles --strip-leading-paths --config-file .swc --ignore **/*.stories.tsx,**/*.snap",
     "build:tsc": "tsc && node tsc.js && rm -r types",
     "build:cleanup": "mv dist/* . && rm -r dist",
     "build:colors": "ts-node scripts/compute-colors.ts",
-    "build": "yarn build:prebuild && yarn build:colors && yarn build:swc && node sprites.js && yarn build:tsc && yarn build:cleanup",
+    "build:sprites": "ts-node scripts/generate-sprites.ts",
+    "build": "yarn build:prebuild && yarn build:colors && yarn build:sprites && yarn build:swc && yarn build:tsc && yarn build:cleanup",
     "watch": "yarn build:swc -w",
     "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx}",
     "format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx}",

scripts/generate-sprites.ts

@@ -0,0 +1,104 @@
+import path from "path";
+import fs from "fs";
+import svgSprite from "svg-sprite";
+
+// Configuration for svg-sprite
+const config = {
+  dest: "dist/core",
+  mode: {
+    symbol: {
+      inline: true,
+      sprite: "../sprites",
+    },
+  },
+  shape: {
+    id: {
+      generator: "sprite-%s",
+    },
+  },
+  svg: {
+    transform: [
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      function (svg: any) {
+        let globalDefs = "";
+
+        return svg
+          .replace(/<defs>(.+?)<\/defs>/g, (_match: string, def: string) => {
+            globalDefs += def;
+          })
+          .replace("<symbol", `<defs>${globalDefs}</defs><symbol`);
+      },
+    ],
+  },
+};
+
+// Create a new SVG sprite instance
+const sprite = new svgSprite(config);
+
+// Directory where your individual SVG files are located
+const svgDir = path.resolve(__dirname, "../src/core/icons");
+
+// Object to store the grouped filenames
+const iconGroups: Record<string, string[]> = {};
+
+// Read all SVG files from the directory and add them to the sprite
+fs.readdirSync(svgDir).forEach((file) => {
+  if (file.endsWith(".svg")) {
+    try {
+      // Extract the key from the filename
+      const match = file.match(/^icon-([^-]+)/);
+      if (match) {
+        const key = match[1];
+        if (!iconGroups[key]) {
+          iconGroups[key] = [];
+        }
+
+        // Remove the .svg extension before adding to the group
+        const fileNameWithoutExtension = file.replace(".svg", "");
+        iconGroups[key].push(fileNameWithoutExtension);
+      }
+
+      sprite.add(
+        path.resolve(svgDir, file),
+        null,
+        fs.readFileSync(path.resolve(svgDir, file), "utf-8"),
+      );
+    } catch (error) {
+      console.error(`Error processing file ${file}:`, error);
+    }
+  }
+});
+
+// Compile the sprite
+sprite.compile((err, result) => {
+  if (err) {
+    console.error("Error generating SVG sprite:", err);
+  } else {
+    try {
+      // Write the compiled sprite to the destination directory
+      fs.mkdirSync(path.resolve(__dirname, "dist/core"), { recursive: true });
+      fs.writeFileSync(
+        path.resolve(__dirname, "dist", result.symbol.sprite.path),
+        result.symbol.sprite.contents,
+      );
+
+      // Write the icon groups to a JSON file
+      const iconJsonPath = path.resolve(
+        __dirname,
+        "../src/core/Icon/computed-icons.ts",
+      );
+
+      const generatedIconGroups =
+        `// AUTOGENERATED BY build:sprites - DO NOT EDIT\n\nexport const computedIcons = ${JSON.stringify(iconGroups, null, 2)}`.replace(
+          /]/g,
+          "] as const",
+        );
+
+      fs.writeFileSync(iconJsonPath, generatedIconGroups, "utf-8");
+
+      console.log("🖼️  SVG sprites and icon manifest generated successfully!");
+    } catch (error) {
+      console.log("SVG sprite/manifest generation failed:", error);
+    }
+  }
+});

src/core/Icon/Icon.stories.tsx

@@ -50,7 +50,7 @@ const renderIcons = (
 };
 
 export const GUIIcons = {
-  render: () => renderIcons([...iconNames.core]),
+  render: () => renderIcons([...iconNames.gui]),
 };
 
 export const DisplayIcons = {
@@ -69,7 +69,7 @@ export const ProductIcons = {
   render: () => renderIcons([...iconNames.product]),
 };
 
-export const Other = {
+export const OtherIcons = {
   render: () => renderIcons([...iconNames.other]),
 };