feat: export png & width, height includes in icons.json & refactoring (…

…#26)

* feat: 여러가지

- 폴더 리팩토링
- png 포맷 뽑기
- 피그마 노드의 width, height도 데이터에 넣기

* chore: changeset

.changeset/lucky-waves-obey.md

@@ -0,0 +1,7 @@
+---
+"@icona/generator": minor
+"@icona/types": minor
+"@icona/utils": minor
+---
+
+PNG 내보내기 & width, height 정보 받기

figma-plugin/plugin-src/service.ts

@@ -96,33 +96,41 @@ export async function getAssetInIconFrame(
 
   const targetComponents = targetNodes.filter((component) => component);
 
-  const svgs = await Promise.all(
+  const datas = await Promise.all(
     targetComponents.map(async (component) => {
+      const data = {} as IconaIconData;
       const node = figma.getNodeById(component.id) as ComponentNode;
 
+      // base
+      data.style = {
+        width: node.width,
+        height: node.height,
+      };
+      data.name = component.name;
+
       // svg
       const svg = await node.exportAsync({
         format: "SVG_STRING",
         svgIdAttribute: true,
       });
+      data.svg = svg;
 
       // png
       if (withPng) {
-        const png = await node.exportAsync({
-          format: "PNG",
-        });
+        const png = await node.exportAsync({ format: "PNG" });
         const base64String = Base64.fromUint8Array(png);
-        return { name: component.name, svg, png: base64String };
+        data.png = base64String;
       }
-      return { name: component.name, svg };
+
+      return data;
     }),
   );
 
-  const svgsMap = svgs.reduce((acc, cur) => {
+  const dataMap = datas.reduce((acc, cur) => {
     acc[cur.name] = cur;
 
     return acc;
   }, {} as Record<string, IconaIconData>);
 
-  return svgsMap;
+  return dataMap;
 }

packages/legacy/icona-cli/src/cli.ts → legacy/icona-cli/src/cli.ts

@@ -4,7 +4,7 @@ import { Command } from "commander";
 
 import pkg from "../package.json" assert { type: "json" };
 // import { generateCommand } from "./commands/generate";
-import { initCommand } from "./commands/init";
+import { initCommand } from "./commands/init.js";
 
 const program = new Command();
 const version = pkg.version;

legacy/icona-cli/src/index.ts

@@ -0,0 +1,3 @@
+import { generate } from "./core/generate.js";
+
+export { generate };

package.json

@@ -6,8 +6,8 @@
   "author": "junghyeonsu <[email protected]>",
   "workspaces": [
     "packages/types",
-    "packages/icona-utils",
-    "packages/icona-generator",
+    "packages/utils",
+    "packages/generator",
     "figma-plugin"
   ],
   "scripts": {

packages/icona-generator/src/core/react.ts → packages/generator/src/core/react.ts

@@ -37,7 +37,8 @@ export const generateReact = ({
 
     const componentName = name
       .replace(/^[a-z]/, (ch) => ch.toUpperCase())
-      .replace(/_[a-z]/g, (ch) => ch[1].toUpperCase());
+      .replace(/_[a-z]/g, (ch) => ch[1].toUpperCase())
+      .replace(/-[a-z]/g, (ch) => ch[1].toUpperCase());
 
     const component = await transform(svg, svgrConfig as Config, {
       componentName,

packages/icona-generator/src/generator.ts → packages/generator/src/generator.ts

@@ -1,11 +1,11 @@
 import type { IconaConfig, IconaIconData } from "@icona/types";
 import { getIconaIconsFile } from "@icona/utils";
 
-import { generateDrawable } from "./core/drawable";
-import { generatePDF } from "./core/pdf";
-import { generatePNG } from "./core/png";
-import { generateReact } from "./core/react";
-import { generateSVG } from "./core/svg";
+import { generateDrawable } from "./core/drawable.js";
+import { generatePDF } from "./core/pdf.js";
+import { generatePNG } from "./core/png.js";
+import { generateReact } from "./core/react.js";
+import { generateSVG } from "./core/svg.js";
 
 export const generator = (
   icons: Record<string, IconaIconData>,

packages/generator/src/index.ts

@@ -0,0 +1,17 @@
+import { generateDrawable } from "./core/drawable.js";
+import { generatePDF } from "./core/pdf.js";
+import { generatePNG } from "./core/png.js";
+import { generateReact } from "./core/react.js";
+import { generateSVG } from "./core/svg.js";
+import { generate, generator } from "./generator.js";
+
+export {
+  generate,
+  generateDrawable,
+  generatePDF,
+  generatePNG,
+  generateReact,
+  generateSVG,
+};
+
+export default generator;

packages/types/src/data.ts

@@ -0,0 +1,13 @@
+type Base64 = string;
+
+export interface Style {
+  width: number;
+  height: number;
+}
+
+export interface IconaIconData {
+  name: string;
+  style: Style;
+  svg: string;
+  png?: Base64;
+}

packages/types/src/index.ts

@@ -1,164 +1,2 @@
-import type { Config as SvgrConfig } from "@svgr/core";
-import type { SVGtoPDFOptions } from "svg-to-pdfkit";
-import type { Config as SvgoConfig } from "svgo";
-
-type PDFKitConfig = PDFKit.PDFDocumentOptions & {
-  /**
-   * @readme
-   * If you use `info` option, pdf output will be different every time.
-   * So it occur git diff. So we use default info option.
-   * If user want change info option, they can change it.
-   * **But not recommend.**
-   * 
-   * ```ts
-   *  const defaultPdfkitConfigInfo = {
-        Author: "Icona",
-        Creator: "Icona",
-        Producer: "Icona",
-        Title: IconName,
-        Subject: IconName,
-        Keywords: IconName,
-        CreationDate: new Date(0),
-        ModDate: new Date(0),
-      };
-   * ```
-   */
-  info?: PDFKit.PDFDocumentOptions["info"];
-};
-
-type Base64 = string;
-export type IconaIconData = {
-  name: string;
-  svg: string;
-  png?: Base64;
-};
-
-export interface SvgToPdfOptions extends SVGtoPDFOptions {
-  x?: number;
-  y?: number;
-}
-export interface GeneratePDFConfig {
-  /**
-   * generate drawable pdf files
-   * @default false
-   */
-  active: boolean;
-
-  /**
-   * pdf files path that will be generated
-   * @default pdf
-   */
-  path?: string;
-
-  /**
-   * PDFKit.PDFDocumentOptions
-   * @see https://pdfkit.org/docs/getting_started.html#document-structure
-   *
-   * @readme
-   * If you use `info` option, pdf output will be different every time.
-   * So it occur git diff. So we use default info option.
-   *
-   * If user want change info option, they can change it.
-   * But not recommend.
-   */
-  pdfKitConfig?: PDFKitConfig;
-
-  svgToPdfOptions?: SvgToPdfOptions;
-}
-
-export interface GenerateReactConfig {
-  /**
-   * generate drawable react files
-   * @default false
-   */
-  active: boolean;
-
-  /**
-   * react component files path that will be generated
-   * @default react
-   */
-  path?: string;
-
-  /**
-   * Config (@svgr/core)
-   * @see https://react-svgr.com/docs/options/
-   */
-  svgrConfig?: SvgrConfig;
-}
-
-export interface GenerateSVGConfig {
-  /**
-   * generate drawable svg files
-   * @default true
-   */
-  active: boolean;
-
-  /**
-   * svg files path that will be generated
-   * @default svg
-   */
-  path?: string;
-
-  /**
-   * Config (svgo)
-   * @see https://github.com/svg/svgo#configuration
-   */
-  svgoConfig?: SvgoConfig;
-}
-
-interface Svg2vectordrawableOptions {
-  floatPrecision?: number; // default 2
-  strict?: boolean; // defaults to false
-  fillBlack?: boolean; // defaults to false
-  xmlTag?: boolean; // defaults to false
-  tint?: string;
-}
-
-export interface GenerateDrawableConfig {
-  /**
-   * generate drawable xml files
-   * @default false
-   */
-  active: boolean;
-
-  /**
-   * xml files path that will be generated
-   * @default xml
-   */
-  path?: string;
-
-  /**
-   * Config (svg2vectordrawable)
-   * @see https://github.com/Ashung/svg2vectordrawable
-   */
-  svg2vectordrawableConfig?: Svg2vectordrawableOptions;
-
-  /**
-   * drawable default color is #FF212124
-   * if you want to change default color, you can use this option
-   * @default #FF212124
-   */
-  defaultColor?: string;
-}
-
-export interface GeneratePNGConfig {
-  /**
-   * generate drawable xml files
-   * @default false
-   */
-  active: boolean;
-
-  /**
-   * xml files path that will be generated
-   * @default xml
-   */
-  path?: string;
-}
-
-export interface IconaConfig {
-  svg: GenerateSVGConfig;
-  react: GenerateReactConfig;
-  pdf: GeneratePDFConfig;
-  drawable: GenerateDrawableConfig;
-  png: GeneratePNGConfig;
-}
+export * from "./data";
+export * from "./lib";