chore(seed-icon): change config, change chalk to kleur (#185)

* chore: prettier 설정, config 두 개의 옵션으로 변경 * chore: chalk -> kleur * Create great-pigs-drive.md
daangn · Feb 13, 2023 · 4634f52 · 4634f52
1 parent 8e1091d
commit 4634f52
Show file tree

Hide file tree

Showing 16 changed files with 155 additions and 128 deletions.
diff --git a/.changeset/great-pigs-drive.md b/.changeset/great-pigs-drive.md
@@ -0,0 +1,6 @@
+---
+"@seed-design/icon": patch
+---
+
+- change chalk to kleur
+- remove unnecessary options
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
-	"typescript.tsdk": "node_modules/typescript/lib",
-	"editor.codeActionsOnSave": {
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
   "editor.formatOnSave": true,

diff --git a/.yarn/cache/prettier-npm-2.8.4-ba64a351d1-c173064bf3.zip b/.yarn/cache/prettier-npm-2.8.4-ba64a351d1-c173064bf3.zip
diff --git a/packages/icon/.prettierrc b/packages/icon/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "root": true,
+  "singleQuote": false,
+  "semi": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "arrowParens": "always"
+}
diff --git a/packages/icon/build.mjs b/packages/icon/build.mjs
@@ -1,18 +1,16 @@
-import esbuild from 'esbuild';
-import pkg from './package.json' assert { type: 'json' };
+import esbuild from "esbuild";
+import pkg from "./package.json" assert { type: "json" };
 
 esbuild.build({
-  entryPoints: ['./src/index.ts'],
-  outfile: './bin/index.mjs',
+  entryPoints: ["./src/index.ts"],
+  outfile: "./bin/index.mjs",
   bundle: true,
   write: true,
   treeShaking: true,
   sourcemap: false,
   minify: true,
-  format: 'esm',
-  platform: 'node',
-  target: ['node16'],
-  external: [
-    ...Object.keys(pkg.dependencies),
-  ],
+  format: "esm",
+  platform: "node",
+  target: ["node16"],
+  external: [...Object.keys(pkg.dependencies)],
 });
diff --git a/packages/icon/package.json b/packages/icon/package.json
@@ -26,16 +26,17 @@
     "@types/findup-sync": "^4.0.2",
     "@types/js-yaml": "^4.0.5",
     "esbuild": "^0.17.6",
+    "prettier": "^2.8.4",
     "tsm": "^2.3.0",
     "typescript": "^4.5.2",
     "uvu": "^0.5.6"
   },
   "dependencies": {
     "@karrotmarket/karrot-ui-icon": "0.0.0-20230208.3",
-    "chalk": "^5.2.0",
     "commander": "^10.0.0",
     "findup-sync": "^5.0.0",
     "js-yaml": "^4.1.0",
+    "kleur": "^4.1.5",
     "string-dedent": "^3.0.1"
   }
 }
diff --git a/packages/icon/src/index.ts b/packages/icon/src/index.ts
@@ -1,70 +1,73 @@
 #!/usr/bin/env node
-import findup from 'findup-sync';
-import chalk from 'chalk';
-import { Command } from 'commander';
-import fs from 'fs';
-import yaml from 'js-yaml';
-import path from 'path';
-import pkg from '../package.json' assert { type: 'json' };
+import findup from "findup-sync";
+import kleur from "kleur";
+import { Command } from "commander";
+import fs from "fs";
+import yaml from "js-yaml";
+import path from "path";
+import pkg from "../package.json" assert { type: "json" };
 
-import generateComponent from './templates/component';
-import generateConfig from './templates/config';
-import generateSprite from './templates/sprite';
-import { IconConfig } from './types';
-import { validateIcons } from './validates/icons';
+import generateConfig from "./templates/config";
+import generateComponent from "./templates/component";
+import generateSprite from "./templates/sprite";
+import { IconConfig } from "./types";
+import { validateIcons } from "./validates/icons";
 
 const program = new Command();
 const projectPath = path.resolve(
-  path.dirname(findup('package.json')!),
-  'icon.config.yml',
+  path.dirname(findup("package.json")!),
+  "icon.config.yml",
 );
-const configPath = findup('icon.config.yml')!;
+const configPath = findup("icon.config.yml")!;
 const version = pkg.version;
 
-const initCommand = new Command('init')
-  .alias('-i')
-  .description('Initialize icon.config.yml')
+const initCommand = new Command("init")
+  .alias("-i")
+  .description("Initialize icon.config.yml")
   .action(() => {
     try {
       const config = generateConfig();
       fs.writeFileSync(projectPath, config);
-      console.log(chalk.green('icon.config.yml generated!'));
+      console.log(kleur.green().underline("icon.config.yml generated!"));
     } catch (e) {
       console.error(e);
     }
   });
 
-const generateCommand = new Command('generate')
-  .alias('gen')
-  .description('Generate SVG sprite and SeedIcon component')
+const generateCommand = new Command("generate")
+  .alias("gen")
+  .description("Generate SVG sprite and SeedIcon component")
   .action(() => {
     try {
       const fileContents = yaml.load(
-        fs.readFileSync(configPath, 'utf8'),
+        fs.readFileSync(configPath, "utf8"),
       ) as IconConfig;
 
       const icons = fileContents.icons;
 
-      const spriteFileName = fileContents.spriteFileName || 'sprite';
-      const spriteOutputPath = fileContents.spriteOutputPath || 'assets';
+      const spritePath = fileContents.spritePath || "src/assets/sprite.svg";
+      const spriteFileName = path.basename(spritePath, ".svg");
+      const spriteDir = path.dirname(spritePath);
 
-      const componentFileName = fileContents.componentFileName || 'SeedIcon';
-      const componentOutputPath = fileContents.componentOutputPath || 'src';
+      const componentPath =
+        fileContents.componentPath || "src/components/SeedIcon.tsx";
+      const componentFileName = path.basename(componentPath, ".tsx");
+      const componentDir = path.dirname(componentPath);
 
       validateIcons(icons);
 
       const seedIconComponent = generateComponent({
-        componentOutputPath,
         componentFileName,
-        spriteOutputPath,
+        componentOutputPath: componentDir,
         spriteFileName,
+        spriteOutputPath: spriteDir,
         version,
         icons,
       });
       const spriteSvg = generateSprite({ icons });
 
-      const spriteOutputDir = path.resolve(spriteOutputPath);
-      const iconComponentOutputDir = path.resolve(componentOutputPath);
+      const spriteOutputDir = path.resolve(spriteDir);
+      const iconComponentOutputDir = path.resolve(componentDir);
 
       if (!fs.existsSync(spriteOutputDir)) {
         fs.mkdirSync(spriteOutputDir, { recursive: true });
@@ -75,23 +78,25 @@ const generateCommand = new Command('generate')
       }
 
       fs.writeFileSync(
-        path.resolve(spriteOutputPath, `${spriteFileName}.svg`),
+        path.resolve(spriteDir, `${spriteFileName}.svg`),
         spriteSvg,
       );
       fs.writeFileSync(
-        path.resolve(componentOutputPath, `${componentFileName}.tsx`),
+        path.resolve(componentDir, `${componentFileName}.tsx`),
         seedIconComponent,
       );
 
       console.log(
-        chalk.green(
-          `SVG sprite generate complete at ${spriteOutputPath}/${spriteFileName}.svg!`,
-        ),
+        kleur
+          .green()
+          .underline(`SVG sprite generate complete at ${spritePath}!`),
       );
       console.log(
-        chalk.green(
-          `SeedIcon component generate complete at ${componentOutputPath}/${componentFileName}.tsx!`,
-        ),
+        kleur
+          .green()
+          .underline(
+            `SeedIcon component generate complete at ${componentPath}!`,
+          ),
       );
     } catch (error) {
       if (error instanceof Error) {
@@ -104,8 +109,8 @@ const generateCommand = new Command('generate')
   });
 
 program
-  .version(version, '-v, --version')
-  .description('Generate SVG sprite and SeedIcon component')
+  .version(version, "-v, --version")
+  .description("Generate SVG sprite and SeedIcon component")
   .addCommand(initCommand)
   .addCommand(generateCommand)
   .parse(process.argv);
diff --git a/packages/icon/src/templates/component.ts b/packages/icon/src/templates/component.ts
@@ -1,7 +1,7 @@
-import dedent from 'string-dedent';
-import { generateRelativePath } from '../utils/path';
+import dedent from "string-dedent";
+import { generateRelativeFilePath } from "../utils/path";
 
-import type { IconName } from '../types';
+import type { IconName } from "../types";
 
 interface ComponentInterface {
   componentOutputPath: string;
@@ -20,8 +20,11 @@ export default function generate({
   version,
   icons,
 }: ComponentInterface) {
-  const relativeSpritePath = generateRelativePath(componentOutputPath, spriteOutputPath);
-  const spriteUrl = relativeSpritePath.endsWith('/')
+  const relativeSpritePath = generateRelativeFilePath(
+    componentOutputPath,
+    spriteOutputPath
+  );
+  const spriteUrl = relativeSpritePath.endsWith("/")
     ? `${relativeSpritePath}${spriteFileName}.svg`
     : `${relativeSpritePath}/${spriteFileName}.svg`;
 
@@ -57,7 +60,7 @@ export default function generate({
     export default forwardRef(${componentFileName});
 
     type IconName = (
-      | ${icons.map((icon) => `"${icon}"`).join('\n  | ')}
+      | ${icons.map((icon) => `"${icon}"`).join("\n  | ")}
     );\n
   `;
 }
diff --git a/packages/icon/src/templates/config.ts b/packages/icon/src/templates/config.ts
@@ -3,18 +3,12 @@ import dedent from "string-dedent";
 export default function generate() {
   return dedent`
     # 아이콘 컴포넌트가 저장될 경로입니다. 프로젝트 루트 기준입니다.
-    # 예: src | src/components
-    componentOutputPath: src
-    # 아이콘 컴포넌트의 이름입니다.
-    # 예: SeedIcon | Icon
-    componentFileName: SeedIcon
+    # 예: src/components/SeedIcon.tsx
+    componentPath: src/components/SeedIcon.tsx
 
-    # svg 파일이 저장될 경로입니다. 프로젝트 루트 기준입니다.
-    # 예: src | src/assets
-    spriteOutputPath: assets
-    # svg 파일의 이름입니다.
-    # 예: sprite | icon
-    spriteFileName: sprite
+    # sprite svg 파일이 저장될 경로입니다. 프로젝트 루트 기준입니다.
+    # 예: src/assets/sprite.svg
+    spritePath: src/assets/sprite.svg
   
     # https://www.figma.com/file/58VvezaS8z1FsIOr9KFHKW/icon?node-id=0%3A1
     # 위 피그마 파일에서 사용되는 아이콘 이름을 추가해주세요.
@@ -25,4 +19,4 @@ export default function generate() {
       - icon_add_circle_thin
 
   `;
-};
+}
diff --git a/packages/icon/src/templates/sprite.ts b/packages/icon/src/templates/sprite.ts
@@ -6,11 +6,14 @@ import type { IconName } from "../types";
 export default function generate({ icons }: { icons: IconName[] }) {
   return dedent`
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    ${icons?.map((id) => {
-      const icon = IconData[id];
-      return icon
-        .replace("<svg", `  <symbol id="${id}"`)
-        .replace(/<path/g, "  <path")
-        .replace("</svg>", "  </symbol>")}).join("")}</svg>\n
+    ${icons
+      ?.map((id) => {
+        const icon = IconData[id];
+        return icon
+          .replace("<svg", `  <symbol id="${id}"`)
+          .replace(/<path/g, "  <path")
+          .replace("</svg>", "  </symbol>");
+      })
+      .join("")}</svg>\n
   `;
-};
+}
diff --git a/packages/icon/src/types.ts b/packages/icon/src/types.ts
@@ -2,11 +2,9 @@ import type IconData from "@karrotmarket/karrot-ui-icon/lib/IconData";
 
 export type IconName = keyof typeof IconData;
 export interface IconConfig {
-  componentOutputPath: string;
-  componentFileName: string;
+  componentPath: string;
+
+  spritePath: string;
 
-  spriteOutputPath: string;
-  spriteFileName: string;
-
   icons: IconName[];
 }
diff --git a/packages/icon/src/utils/path.ts b/packages/icon/src/utils/path.ts
@@ -1,6 +1,6 @@
 import { relative } from "path";
 
-export const generateRelativePath = (from: string, to: string) => {
+export const generateRelativeFilePath = (from: string, to: string) => {
   const relatived = relative(from, to);
   return relatived.startsWith("..") ? relatived : `./${relatived}`;
-}
+};
diff --git a/packages/icon/src/validates/icons.ts b/packages/icon/src/validates/icons.ts
@@ -13,4 +13,4 @@ export const validateIcons = (icons: IconName[]) => {
       throw new Error(`icon ${icon} is not exist`);
     }
   }
-}
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,4 +13,4 @@ export const validateIcons = (icons: IconName[]) => { @@
           throw new Error(`icon ${icon} is not exist`);
         }
       }
-    }
+    };