feat: add progress bar & change async & change png folder name (x1 ->…

… 1x) (#34) * feat: change png folder naming * feat: add progress bar * chore: changeset
daangn · Dec 7, 2023 · b04ef92 · b04ef92
1 parent 567b450
commit b04ef92
Show file tree

Hide file tree

Showing 19 changed files with 213 additions and 82 deletions.
diff --git a/.changeset/heavy-years-repeat.md b/.changeset/heavy-years-repeat.md
@@ -0,0 +1,7 @@
+---
+"@icona/generator": minor
+"@icona/types": minor
+"@icona/utils": minor
+---
+
+feat: add progress bar & change async & change png folder name (x1 -> 1x)
diff --git a/.yarn/cache/@types-cli-progress-npm-3.11.5-180614d1b0-571fb3b116.zip b/.yarn/cache/@types-cli-progress-npm-3.11.5-180614d1b0-571fb3b116.zip
diff --git a/.yarn/cache/cli-progress-npm-3.12.0-d686625154-e8390dc3cd.zip b/.yarn/cache/cli-progress-npm-3.12.0-d686625154-e8390dc3cd.zip
diff --git a/figma-plugin/common/constants.ts b/figma-plugin/common/constants.ts
@@ -3,5 +3,5 @@ export const FRAME_NAME = "icona-frame";
 export const KEY = {
   GITHUB_API_KEY: "github-api-key",
   GITHUB_REPO_URL: "github-repo-url",
-  PNG_OPTION: "png-option",
+  PNG_OPTIONS: "png-options",
 };
diff --git a/figma-plugin/common/fromUi.ts b/figma-plugin/common/fromUi.ts
@@ -37,8 +37,8 @@ export type Events = {
     payload: SetGithubApiKeyPayload;
     handler: (props: SetGithubApiKeyPayload) => void;
   };
-  SET_PNG_OPTION: {
-    name: "SET_PNG_OPTION";
+  SET_PNG_OPTIONS: {
+    name: "SET_PNG_OPTIONS";
     payload: SetPngOptionPayload;
     handler: (props: SetPngOptionPayload) => void;
   };

diff --git a/figma-plugin/common/types.ts b/figma-plugin/common/types.ts
@@ -6,9 +6,9 @@ export interface GithubData {
 
 export interface ExportOptions {
   png: {
-    x1: boolean;
-    x2: boolean;
-    x3: boolean;
-    x4: boolean;
+    "1x": boolean;
+    "2x": boolean;
+    "3x": boolean;
+    "4x": boolean;
   };
 }
diff --git a/figma-plugin/plugin-src/code.ts b/figma-plugin/plugin-src/code.ts
@@ -21,13 +21,13 @@ function sendUserInfo() {
 async function sendStorageData() {
   const repoUrl = await getLocalData(KEY.GITHUB_REPO_URL);
   const apiKey = await getLocalData(KEY.GITHUB_API_KEY);
-  const pngOption = await getLocalData(KEY.PNG_OPTION);
+  const pngOption = await getLocalData(KEY.PNG_OPTIONS);
 
   emit("GET_GITHUB_REPO_URL", { repoUrl });
   emit("GET_GITHUB_API_KEY", { apiKey });
   emit("GET_DEPLOY_WITH_PNG", {
     options: pngOption || {
-      png: { x1: false, x2: false, x3: false, x4: false },
+      png: { "1x": false, "2x": false, "3x": false, "4x": false },
     },
   });
 }

diff --git a/figma-plugin/plugin-src/listeners.ts b/figma-plugin/plugin-src/listeners.ts
@@ -56,7 +56,7 @@ export function listenSetGithubUrl() {
 }
 
 export function listenPngOption() {
-  on("SET_PNG_OPTION", ({ options }) => {
-    setLocalData(KEY.PNG_OPTION, options);
+  on("SET_PNG_OPTIONS", ({ options }) => {
+    setLocalData(KEY.PNG_OPTIONS, options);
   });
 }
diff --git a/figma-plugin/ui-src/contexts/AppContext.tsx b/figma-plugin/ui-src/contexts/AppContext.tsx
@@ -23,10 +23,10 @@ type State = {
 
   // Options
   pngOption: {
-    x1: boolean;
-    x2: boolean;
-    x3: boolean;
-    x4: boolean;
+    "1x": boolean;
+    "2x": boolean;
+    "3x": boolean;
+    "4x": boolean;
   };
 
   // Status
@@ -41,7 +41,7 @@ type Actions =
   | Omit<PluginEvents["GET_ICON_PREVIEW"], "handler">
   | Omit<PluginEvents["DEPLOY_DONE"], "handler">
   | Omit<UiEvents["DEPLOY_ICON"], "handler">
-  | Omit<UiEvents["SET_PNG_OPTION"], "handler">
+  | Omit<UiEvents["SET_PNG_OPTIONS"], "handler">
   | Omit<UiEvents["SET_GITHUB_API_KEY"], "handler">
   | Omit<UiEvents["SET_GITHUB_URL"], "handler">;
 
@@ -55,15 +55,17 @@ function reducer(state: State, action: Actions): State {
     /* from Plugin */
     case "GET_DEPLOY_WITH_PNG": {
       const { options } = action.payload;
-      const png = options.png || { x1: false, x2: false, x3: false, x4: false };
+      const png = options.png || {
+        "1x": false,
+        "2x": false,
+        "3x": false,
+        "4x": false,
+      };
 
       return {
         ...state,
         pngOption: {
-          x1: png.x1 || false,
-          x2: png.x2 || false,
-          x3: png.x3 || false,
-          x4: png.x4 || false,
+          ...png,
         },
       };
     }
@@ -137,8 +139,8 @@ function reducer(state: State, action: Actions): State {
       };
     }
 
-    case "SET_PNG_OPTION": {
-      emit("SET_PNG_OPTION", action.payload);
+    case "SET_PNG_OPTIONS": {
+      emit("SET_PNG_OPTIONS", action.payload);
 
       return {
         ...state,
@@ -182,10 +184,10 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
 
     // Options
     pngOption: {
-      x1: false,
-      x2: false,
-      x3: false,
-      x4: false,
+      "1x": false,
+      "2x": false,
+      "3x": false,
+      "4x": false,
     },
 
     // Status

diff --git a/figma-plugin/ui-src/pages/Deploy.tsx b/figma-plugin/ui-src/pages/Deploy.tsx
@@ -113,89 +113,89 @@ const Deploy = () => {
         <Flex gap={6}>
           <Checkbox
             marginTop={2}
-            isChecked={pngOption.x1}
+            isChecked={pngOption["1x"]}
             onChange={() => {
               dispatch({
-                name: "SET_PNG_OPTION",
+                name: "SET_PNG_OPTIONS",
                 payload: {
                   options: {
                     png: {
                       ...pngOption,
-                      x1: !pngOption.x1,
+                      "1x": !pngOption["1x"],
                     },
                   },
                 },
               });
             }}
           >
             <Text fontWeight="bold" fontSize={14}>
-              x1
+              1x
             </Text>
           </Checkbox>
 
           <Checkbox
             marginTop={2}
-            isChecked={pngOption.x2}
+            isChecked={pngOption["2x"]}
             onChange={() => {
               dispatch({
-                name: "SET_PNG_OPTION",
+                name: "SET_PNG_OPTIONS",
                 payload: {
                   options: {
                     png: {
                       ...pngOption,
-                      x2: !pngOption.x2,
+                      "2x": !pngOption["2x"],
                     },
                   },
                 },
               });
             }}
           >
             <Text fontWeight="bold" fontSize={14}>
-              x2
+              2x
             </Text>
           </Checkbox>
 
           <Checkbox
             marginTop={2}
-            isChecked={pngOption.x3}
+            isChecked={pngOption["3x"]}
             onChange={() => {
               dispatch({
-                name: "SET_PNG_OPTION",
+                name: "SET_PNG_OPTIONS",
                 payload: {
                   options: {
                     png: {
                       ...pngOption,
-                      x3: !pngOption.x3,
+                      "3x": !pngOption["3x"],
                     },
                   },
                 },
               });
             }}
           >
             <Text fontWeight="bold" fontSize={14}>
-              x3
+              3x
             </Text>
           </Checkbox>
 
           <Checkbox
             marginTop={2}
-            isChecked={pngOption.x4}
+            isChecked={pngOption["4x"]}
             onChange={() => {
               dispatch({
-                name: "SET_PNG_OPTION",
+                name: "SET_PNG_OPTIONS",
                 payload: {
                   options: {
                     png: {
                       ...pngOption,
-                      x4: !pngOption.x4,
+                      "4x": !pngOption["4x"],
                     },
                   },
                 },
               });
             }}
           >
             <Text fontWeight="bold" fontSize={14}>
-              x4
+              4x
             </Text>
           </Checkbox>
         </Flex>

diff --git a/packages/generator/package.json b/packages/generator/package.json
@@ -28,6 +28,8 @@
     "@icona/types": "^0.3.0",
     "@icona/utils": "^0.3.0",
     "@svgr/core": "^8.0.0",
+    "@types/cli-progress": "^3.11.5",
+    "cli-progress": "^3.12.0",
     "pdfkit": "^0.13.0",
     "svg-to-pdfkit": "^0.1.8",
     "svg2vectordrawable": "^2.9.1",

diff --git a/packages/generator/src/core/drawable.ts b/packages/generator/src/core/drawable.ts
@@ -5,7 +5,8 @@ import {
   getProjectRootPath,
   makeFolderIfNotExistFromRoot,
 } from "@icona/utils";
-import { writeFileSync } from "fs";
+import { Presets, SingleBar } from "cli-progress";
+import { writeFile } from "fs/promises";
 import { resolve } from "path";
 import svg2vectordrawable from "svg2vectordrawable";
 
@@ -18,7 +19,7 @@ interface GenerateDrawableFunction {
   config: GenerateDrawableConfig;
 }
 
-export const generateDrawable = ({
+export const generateDrawable = async ({
   icons = getIconaIconsFile(),
   config,
 }: GenerateDrawableFunction) => {
@@ -40,8 +41,20 @@ export const generateDrawable = ({
     deleteAllFilesInDir(resolve(projectPath, path));
   }
 
+  console.log(`\nDrawable Generate in \`${path}\` folder...`);
+
+  const bar = new SingleBar(
+    {
+      format: "Drawable Generate | {bar} | {percentage}% | {value}/{total}",
+      hideCursor: true,
+    },
+    Presets.shades_grey,
+  );
+
+  bar.start(iconData.length, 0);
+
   // TODO: Name transform option
-  iconData.forEach(async ([name, data]) => {
+  for (const [name, data] of iconData) {
     const { svg } = data;
 
     const drawablePath = resolve(projectPath, path, `${name}.xml`);
@@ -52,6 +65,9 @@ export const generateDrawable = ({
       drawable = drawable.replace(/#FF212124/g, defaultColor);
     }
 
-    writeFileSync(drawablePath, drawable);
-  });
+    await writeFile(drawablePath, drawable);
+    bar.increment();
+  }
+
+  bar.stop();
 };
diff --git a/packages/generator/src/core/pdf.ts b/packages/generator/src/core/pdf.ts
@@ -5,6 +5,7 @@ import {
   getProjectRootPath,
   makeFolderIfNotExistFromRoot,
 } from "@icona/utils";
+import { Presets, SingleBar } from "cli-progress";
 import { createWriteStream } from "fs";
 import { resolve } from "path";
 import PDFDocument from "pdfkit";
@@ -41,8 +42,20 @@ export const generatePDF = ({
     deleteAllFilesInDir(resolve(projectPath, path));
   }
 
+  console.log(`\nPDF Generate in \`${path}\` folder...`);
+
+  const bar = new SingleBar(
+    {
+      format: "PDF Generate | {bar} | {percentage}% | {value}/{total}",
+      hideCursor: true,
+    },
+    Presets.shades_grey,
+  );
+
+  bar.start(iconData.length, 0);
+
   // TODO: Name transform option
-  iconData.forEach(async ([name, data]) => {
+  for (const [name, data] of iconData) {
     const { svg } = data;
     const svgPath = resolve(projectPath, path, `${name}.pdf`);
 
@@ -74,6 +87,8 @@ export const generatePDF = ({
 
     SVGtoPDF(pdfDoc, svg, x, y, restSvgToPdfOptions);
     pdfDoc.pipe(createWriteStream(svgPath));
-    pdfDoc.end();
-  });
+    bar.increment();
+  }
+
+  bar.stop();
 };