Add build svg and workflows (#6)

* Feat: add tonic ui icon builder (#4) * feat: add TMIcon build workflow * fix * fix * fxi * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fic * fix * fix * fix * fix * fix * fix * fix --------- Co-authored-by: Joshua Tai <[email protected]> * fix: * fix: move mouldes * fix: build icon * fix: change workflow trigger branch --------- Co-authored-by: Joshua Tai <[email protected]>
trendmicro-frontend · May 21, 2024 · 786162e · 786162e
1 parent 9407c7d
commit 786162e
Show file tree

Hide file tree

Showing 4 changed files with 831 additions and 1 deletion.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,61 @@
+name: Build TMIcons
+
+on: push
+
+jobs:
+  update-file:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Set up Node.js 20
+      uses: actions/setup-node@v3
+
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Download font files
+      run: |
+        ls
+        css_url="https://i.icomoon.io/public/a8317e20c1/TMIcons/style.css"
+        css_file="style.css"
+        dist_dir="dist/fonts"
+
+        curl -o $css_file $css_url
+        font_urls=$(grep -oP 'url\(\K[^)]+' style.css | sort -u)
+
+        for url in $font_urls; do
+          clean_url=$(echo $url | sed 's/[?#].*//')
+          filename=$(basename "$clean_url")
+          full_url=$(echo $url | sed "s/'//g" | sed 's/"//g')
+          curl -o "$dist_dir/$filename" $full_url
+        done
+
+        rm $css_file
+        echo "Font files downloaded successfully."
+
+    - name: Build SVG files
+      run: |
+        node ./script/buildSVGIcons.js
+
+        echo "SVG files built successfully."
+    
+    - name: Build Tonic UI icons data
+      run: |
+        npm i
+
+        git status
+    # - name: Configure Git
+    #   run: |
+    #     git config --global user.name 'HIE UX Service'
+    #     git config --global user.email '[email protected]'
+
+    # - name: Add changes
+    #   run: git add test.txt
+
+    # - name: Commit changes
+    #   run: git commit -m "Add test.txt with dynamic content"
+
+    # - name: Push changes
+    #   env:
+    #     GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+    #   run: git push origin dev
diff --git a/package.json b/package.json
@@ -41,10 +41,13 @@
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@trendmicro/babel-config": "^1.0.0-alpha",
+    "ejs": "^3.1.10",
     "cross-env": "^7.0.3",
     "del-cli": "^3.0.1",
-    "ejs": "^3.1.5",
     "lodash.sortby": "^4.7.0",
     "rollup": "^2.35.1"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   }
 }
diff --git a/script/buildSVGIcons.js b/script/buildSVGIcons.js
@@ -0,0 +1,50 @@
+const fs = require("fs");
+const path = require("path");
+const svgGen = require('./svgGenerator');
+const preferences = require("../data/Preferences.json");
+const icons = require("../data/Icons.json");
+const svgTpl = fs.readFileSync(
+  path.join(__dirname, "..", "templates", "svg.tpl"),
+  "utf8"
+);
+const targetDir = path.join(__dirname, '..', 'dist', 'svg');
+const defaultColor = `rgb(${preferences.imagePref.color
+  .toString(16)
+  .match(/\w\w/gi)
+  .map((color) => parseInt(color, 16))
+  .join(",")})`;
+const viewBox = preferences.fontPref.metrics.emSize;
+const files = fs.readdirSync(targetDir);
+files.forEach(file => {
+  const filePath = path.join(targetDir, file);
+  if (fs.lstatSync(filePath).isFile()) {
+    fs.unlinkSync(filePath);
+  }
+});
+
+icons.sort(function (a, b) {
+  if (a.name > b.name) return 1;
+  if (a.name < b.name) return -1;
+  return 0;
+});
+
+icons.forEach((icon) => {
+  const targetPath = path.join(targetDir, `${icon.name}.svg`);
+  icon.width = icon.height = icon.grid;
+  icon.svgPath = svgGen(icon.paths);
+  const scale = icon.height / viewBox;
+  icon.scaledPath = icon.svgPath.scale(scale);
+  icon.scaledPathData = icon.scaledPath.getPathData(true);
+
+  let svgContent = svgTpl.replace(/_viewBox/gi, icon.grid);
+  let paths = [];
+  svgContent = svgContent.replace(/_title/gi, icon.name);
+  icon.paths.forEach((path, pathIndex) => {
+    let attr = Object.assign({ fill: defaultColor }, icon.attrs[pathIndex]);
+    let genAttrs = [];
+    Object.keys(attr).forEach((key) => genAttrs.push(`${key}="${attr[key]}"`));
+    paths.push(`<path ${genAttrs.join(' ')} d="${icon.scaledPathData[pathIndex]}"></path>`);
+  });
+  svgContent = svgContent.replace('<!--paths-->', paths.join('\n  '));
+  fs.writeFileSync(targetPath, svgContent);
+});