feat, refactor: v0.7.0 (#44)

* feat, refactor: v0.7.0

- Add `vue2`, `vue3` generate function
- Remove `flutter`, `font` generate function (cause unstable)
- Add `genIndexFile` option in `react`, `vue2`, `vue3`
- Remove `generator`, only `generate` functions
- Remove `@icona/utils` package (merge into `@icona/generator`
- Refactoring variables name, some logics

* chore: changeset

.changeset/eleven-lizards-build.md

@@ -0,0 +1,11 @@
+---
+"@icona/generator": minor
+"@icona/types": minor
+---
+
+- Add `vue2`, `vue3` generate function
+- Remove `flutter`, `font` generate function (cause unstable)
+- Add `genIndexFile` option in `react`, `vue2`, `vue3`
+- Remove `generator`, only `generate` functions
+- Remove `@icona/utils` package (merge into `@icona/generator`
+- Refactoring variables name, some logics

packages/generator/README.md

@@ -10,55 +10,140 @@ yarn add -D @icona/generator
 
 ## Usage
 
-```js
+```ts
+// icona.js (ts also available)
+import type {
+  DrawableConfig,
+  PDFConfig,
+  PNGConfig,
+  ReactConfig,
+  SVGConfig,
+  Vue2Config,
+  Vue3Config,
+} from "@icona/generator";
 import { generate } from "@icona/generator";
 
-generate({
-  config: {
-    svg: {
-      active: true, // you can disable svg generator if you set false
-      path: "svg", // will generate svg files in svg folder
-      svgoConfig: {},
-    },
-    drawable: {
-      active: true, // you can disable drawable generator if you set false
-      path: "drawable", // will generate xml files in drawable folder
-      svg2vectordrawableConfig: {},
-      defaultColor: "#000000", // default color for android vector drawable
-    },
-    pdf: {
-      active: true, // you can disable pdf generator if you set false
-      path: "pdf", // will generate pdf files in pdf folder
-      pdfKitConfig: {},
-      svgToPdfOptions: {},
-    },
-    react: {
-      active: true, // you can disable react generator if you set false
-      path: "react", // will generate react component files in react folder
-      svgrConfig: {},
-    },
-    png: {
-      active: false,
-      genMode: "recreate",
-      path: "png",
+const svgConfig: SVGConfig = {
+  path: "svg",
+  svgoConfig: {
+    js2svg: {
+      indent: 2,
+      pretty: true,
     },
-    font: {
-      genMode: "recreate",
-      active: true,
-      svgToFontOptions: {
-        src: "svg",
-        dist: "font",
-        fontName: "seed-icon",
+    plugins: [
+      {
+        name: "addAttributesToSVGElement",
+        params: {
+          attributes: [{ "data-seed-icon": "true" }],
+        },
       },
+      {
+        name: "convertColors",
+        params: {
+          currentColor: true,
+        },
+      },
+      {
+        name: "removeAttrs",
+        params: {
+          attrs: ["id"],
+        },
+      },
+    ],
+  },
+};
+
+const pdfConfig: PDFConfig = {
+  active: false,
+  path: "pdf",
+  pdfKitConfig: {
+    size: [24, 24],
+    margin: 0,
+    layout: "landscape",
+  },
+  svgToPdfOptions: {
+    assumePt: true,
+    width: 24,
+    height: 24,
+  },
+};
+
+const drawableConfig: DrawableConfig = {
+  active: false,
+  path: "drawable",
+  svg2vectordrawableConfig: {},
+  defaultColor: "@color/gray900",
+};
+
+const reactConfig: ReactConfig = {
+  active: true,
+  path: "react",
+  genIndexFile: true,
+  svgrConfig: {
+    jsxRuntime: "classic",
+    plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx", "@svgr/plugin-prettier"],
+    prettierConfig: {
+      tabWidth: 2,
+      useTabs: false,
+      singleQuote: true,
+      semi: true,
     },
-    flutter: {
-      active: true,
-      ttfPath: "font/seed-icon.ttf",
-      fileName: "SeedIcons",
-      fontFamily: "SeedIcon",
-      genMode: "recreate",
-      path: "flutter",
+    svgoConfig: {
+      plugins: [
+        {
+          name: "addAttributesToSVGElement",
+          params: {
+            attributes: [{ "data-seed-icon": "true" }],
+          },
+        },
+        {
+          name: "convertColors",
+          params: {
+            currentColor: true,
+          },
+        },
+        {
+          name: "removeAttrs",
+          params: {
+            attrs: ["id"],
+          },
+        },
+      ],
     },
+    typescript: true,
+    dimensions: false,
+  },
+};
+
+const pngConfig: PNGConfig = {
+  active: false,
+  genMode: "recreate",
+  path: "png",
+};
+
+const vue2Config: Vue2Config = {
+  path: "packages/vue2",
+  active: false,
+  genIndexFile: true,
+  genShimFile: true,
+};
+
+const vue3Config: Vue3Config = {
+  path: "packages/vue3",
+  active: false,
+  genIndexFile: true,
+  genShimFile: true,
+};
+
+generate({
+  config: {
+    svg: svgConfig,
+    drawable: drawableConfig,
+    pdf: pdfConfig,
+    react: reactConfig,
+    png: pngConfig,
+    vue2: vue2Config,
+    vue3: vue3Config,
   },
 });
 ```
@@ -70,8 +155,6 @@ generate({
 - [pdfkit (PDF)](https://pdfkit.org/docs/getting_started.html#document-structure)
 - [svg-to-pdfkit (PDF)](https://github.com/alafr/SVG-to-PDFKit)
 - [svgr (React Components)](https://react-svgr.com/)
-- [svgtofont (Font Files)](https://www.npmjs.com/package/svgtofont)
-- [opentype.js (Flutter Icons)](https://github.com/opentypejs/opentype.js)
 
 you configure each library options in `config` object.
 If you want to see real example, you can see [here (seed-icon)](https://github.com/daangn/seed-icon/blob/main/icona.js)

packages/generator/package.json

@@ -26,10 +26,10 @@
   },
   "dependencies": {
     "@icona/types": "^0.6.0",
-    "@icona/utils": "^0.6.0",
     "@svgr/core": "^8.0.0",
     "@types/cli-progress": "^3.11.5",
     "cli-progress": "^3.12.0",
+    "findup-sync": "^5.0.0",
     "opentype.js": "^1.3.4",
     "pdfkit": "^0.13.0",
     "svg-to-pdfkit": "^0.1.8",
@@ -38,6 +38,7 @@
     "svgtofont": "^4.2.0"
   },
   "devDependencies": {
+    "@types/findup-sync": "^4.0.5",
     "@types/opentype.js": "^1.3.8",
     "nanobundle": "^1.6.0",
     "prettier": "^2.8.8",

packages/generator/src/constants.ts

@@ -0,0 +1,3 @@
+export const ICONA_FOLDER = ".icona";
+export const ICONA_ICONS_FILE = "icons.json";
+export const ICONA_CONFIG_FILE_NAME = "icona.config";

packages/generator/src/core/drawable.ts

@@ -1,30 +1,29 @@
-import type { GenerateDrawableConfig, IconaIconData } from "@icona/types";
+import type { DrawableConfig, IconaIconData } from "@icona/types";
+import { writeFile } from "fs/promises";
+import { resolve } from "path";
+import svg2vectordrawable from "svg2vectordrawable";
+
+import { createBar } from "../utils/bar";
 import {
   deleteAllFilesInDir,
   getIconaIconsFile,
-  getProjectRootPath,
+  getTargetPath,
   makeFolderIfNotExistFromRoot,
-} from "@icona/utils";
-import { Presets, SingleBar } from "cli-progress";
-import { writeFile } from "fs/promises";
-import { resolve } from "path";
-import svg2vectordrawable from "svg2vectordrawable";
+} from "../utils/file";
 
-interface GenerateDrawableFunction {
+interface Props {
   /**
    * @description Icona icons data
    * @default .icona/icons.json
    */
   icons?: Record<string, IconaIconData> | null;
-  config: GenerateDrawableConfig;
+
+  config: DrawableConfig;
 }
 
-export const generateDrawable = async ({
-  icons = getIconaIconsFile(),
-  config,
-}: GenerateDrawableFunction) => {
-  const projectPath = getProjectRootPath();
-  const path = config.path || "drawable";
+export const generateDrawable = async (props: Props) => {
+  const { config, icons = getIconaIconsFile() } = props;
+  const targetPath = getTargetPath(config.path || "drawable");
   const drawableConfig = config.svg2vectordrawableConfig || {};
   const defaultColor = config.defaultColor;
 
@@ -34,30 +33,27 @@ export const generateDrawable = async ({
 
   const iconData = Object.entries(icons);
   if (iconData.length !== 0) {
-    makeFolderIfNotExistFromRoot(path);
+    makeFolderIfNotExistFromRoot(targetPath);
   }
 
   if (config.genMode === "recreate") {
-    deleteAllFilesInDir(resolve(projectPath, path));
+    deleteAllFilesInDir(targetPath);
   }
 
-  console.log(`\nDrawable Generate in \`${path}\` folder...`);
+  console.log(`\nDrawable Generate in \`${targetPath}\` folder...`);
 
-  const bar = new SingleBar(
-    {
-      format: "Drawable Generate | {bar} | {percentage}% | {value}/{total}",
-      hideCursor: true,
-    },
-    Presets.shades_grey,
-  );
+  const bar = createBar({
+    name: "Drawable",
+    total: iconData.length,
+  });
 
-  bar.start(iconData.length, 0);
+  bar.start();
 
   // TODO: Name transform option
   for (const [name, data] of iconData) {
     const { svg } = data;
 
-    const drawablePath = resolve(projectPath, path, `${name}.xml`);
+    const drawablePath = resolve(targetPath, `${name}.xml`);
     let drawable = await svg2vectordrawable(svg, drawableConfig);
 
     // NOTE(@junghyeonsu): DRAWABLE_DEFAULT_COLOR = "#FF212124"