maru_design2 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",
@@ -13,34 +13,37 @@
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
+    "@chromatic-com/storybook": "^1",
+    "@popperjs/core": "^2.11.6",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",
-    "@storybook/addon-actions": "^8.0.6",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/addon-links": "^8.0.6",
+    "@storybook/addon-actions": "^8.0.9",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-interactions": "^8.0.9",
+    "@storybook/addon-links": "^8.0.9",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.0.6",
-    "@storybook/react-webpack5": "^8.0.6",
-    "@storybook/test": "^8.0.6",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-webpack5": "^8.0.9",
+    "@storybook/test": "^8.0.9",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.8",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
     "chromatic": "^11.3.0",
+    "classnames": "^2.5.1",
     "css-loader": "^6.7.1",
-    "eslint": "^9.0.0",
+    "eslint": "^8.20.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "postcss": "^8.4.16",
     "postcss-url": "^10.1.3",
     "prettier": "^3.2.5",
@@ -49,7 +52,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.54.4",
     "sass-loader": "^13.0.2",
-    "storybook": "^8.0.6",
+    "storybook": "^8.0.9",
     "style-loader": "^3.3.1",
     "typescript": "^4.7.4"
   },

package/scripts/svg-parser.js

@@ -0,0 +1,224 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
+const path = require('path');
+
+const inputDir = './src/assets/icons';
+const outputDir = './src/components/atoms/icon';
+const svgs = fs.readdirSync(inputDir);
+
+// 아이콘의 정보들을 모을 객체
+const icons = {};
+// 아이콘의 이름을 모을 객체
+const names = {};
+
+const toCamelCase = (pascalStr) =>
+  pascalStr
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('');
+
+const readFile = (filePath, fileName, fileExtension) =>
+  new Promise((resolve, reject) => {
+    fs.readFile(filePath, 'utf8', (err, data) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+
+      console.log('---------- parsing start ----------');
+
+      console.log('((data))', data);
+
+      // svg args 추출
+      const svgStartRegex = /<svg/g;
+      const svgEndRegex = />/;
+      const svgArgs = data.split(svgStartRegex)[1].split(svgEndRegex)[0];
+
+      console.log('**svgArgs', svgArgs);
+
+      // width 추출
+      const widthRegex = /width=".{1,9}"/g;
+      const width = svgArgs.match(widthRegex)?.[0]?.split('"')?.[1];
+      console.log('*width', width);
+
+      // height 추출
+      const heightRegex = /height=".{1,9}"/g;
+      const height = svgArgs.match(heightRegex)?.[0]?.split('"')?.[1];
+      console.log('*height', height);
+
+      // viewBox 추출
+      const viewBoxRegex = /viewBox="[0-9\s-.]*"/;
+      const viewBox = svgArgs.match(viewBoxRegex)?.[0]?.split('"')?.[1];
+      console.log('*viewBox', viewBox);
+
+      // svgFill 추출
+      const fillRegex = /fill=".{1,9}"/g;
+      const svgFill = svgArgs.match(fillRegex)?.[0]?.split('"')?.[1];
+      console.log('*svgFill', svgFill);
+
+      // path args 추출
+      const pathStartRegex = /<path/g;
+      const paths = data
+        .split(pathStartRegex)
+        .filter((_, idx) => idx > 0)
+        .map((pathArgs) => {
+          // d 추출
+          const dRegex = /d=".*"/g;
+          const d = pathArgs.match(dRegex)?.[0]?.split('"')?.[1];
+          console.log('*d', d);
+
+          // pathFill 추출
+          const pathFill = pathArgs.match(fillRegex)?.[0]?.split('"')?.[1];
+          console.log('*pathFill', pathFill);
+
+          // fillRule 추출
+          const fillRuleRegex = /fill-rule=".{1,9}"/g;
+          const fillRule = pathArgs.match(fillRuleRegex)?.[0]?.split('"')?.[1];
+          console.log('*fillRule', fillRule);
+
+          // clipRule 추출
+          const clipRuleRegex = /clip-rule=".{1,9}"/g;
+          const clipRule = pathArgs.match(clipRuleRegex)?.[0]?.split('"')?.[1];
+          console.log('*clipRule', clipRule);
+
+          // stroke 추출
+          const strokeRegex = /stroke=".{1,9}"/g;
+          const stroke = pathArgs.match(strokeRegex)?.[0]?.split('"')?.[1];
+          console.log('*stroke', stroke);
+
+          // strokeWidth 추출
+          const strokeWidthRegex = /stroke-width=".{1,9}"/g;
+          const strokeWidth = pathArgs
+            .match(strokeWidthRegex)?.[0]
+            ?.split('"')?.[1];
+          console.log('*strokeWidth', strokeWidth);
+
+          // strokeLinecap 추출
+          const strokeLinecapRegex = /stroke-linecap=".{1,9}"/g;
+          const strokeLinecap = pathArgs
+            .match(strokeLinecapRegex)?.[0]
+            ?.split('"')?.[1];
+          console.log('*strokeLinecap', strokeLinecap);
+
+          // strokeLinejoin 추출
+          const strokeLinejoinRegex = /stroke-linejoin=".{1,9}"/g;
+          const strokeLinejoin = pathArgs
+            .match(strokeLinejoinRegex)?.[0]
+            ?.split('"')?.[1];
+          console.log('*strokeLinejoin', strokeLinejoin);
+
+          return {
+            d,
+            fill: pathFill,
+            fillRule,
+            clipRule,
+            stroke,
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin,
+          };
+        });
+
+      // circle args 추출
+      const circleStartRegex = /<circle/g;
+      const circles = data
+        .split(circleStartRegex)
+        .filter((_, idx) => idx > 0)
+        .map((circleArgs) => {
+          // cx 추출
+          const cxRegex = /cx=".{1,9}"/g;
+          const cx = circleArgs.match(cxRegex)?.[0]?.split('"')?.[1];
+          console.log('*cx', cx);
+
+          // cy 추출
+          const cyRegex = /cy=".{1,9}"/g;
+          const cy = circleArgs.match(cyRegex)?.[0]?.split('"')?.[1];
+          console.log('*cy', cy);
+
+          // r 추출
+          const rRegex = /r=".{1,9}"/g;
+          const r = circleArgs.match(rRegex)?.[0]?.split('"')?.[1];
+          console.log('*r', r);
+
+          // circleFill 추출
+          const circleFill = circleArgs.match(fillRegex)?.[0]?.split('"')?.[1];
+          console.log('*circleFill', circleFill);
+
+          return { cx, cy, r, fill: circleFill };
+        });
+
+      const fileNameWithoutExtension = toCamelCase(
+        fileName.split(fileExtension)[0],
+      );
+      console.log('fileNameWithoutExtension', fileNameWithoutExtension);
+
+      icons[fileNameWithoutExtension] = {
+        width,
+        height,
+        viewBox,
+        fill: svgFill,
+        paths,
+        circles,
+      };
+      names[fileNameWithoutExtension] = fileNameWithoutExtension;
+
+      resolve();
+    });
+  });
+
+async function main() {
+  for (const svg of svgs) {
+    const extension = path.extname(svg);
+    if (extension === '.svg' && !svg.includes('NoConvert')) {
+      await readFile(`${inputDir}/${svg}`, svg, extension);
+    }
+  }
+
+  console.log('### icons', icons);
+  console.log('### names', names);
+
+  fs.writeFileSync(
+    `${outputDir}/iconmap.ts`,
+    `/* eslint-disable no-multiple-empty-lines */
+    /* eslint-disable no-trailing-spaces */
+    /* eslint-disable eol-last */
+    /* eslint-disable object-curly-spacing */
+    /* eslint-disable comma-spacing */
+    /* eslint-disable key-spacing */
+    /* eslint-disable quotes */
+    /* eslint-disable quote-props */
+    export const iconmap: {
+      [key: string]: {
+        width: string;
+        height: string;
+        viewBox: string;
+        fill: string;
+        paths: {
+          d: string;
+          fill?: string;
+          fillRule?: string;
+          clipRule?: string;
+          stroke?: string;
+          strokeWidth?: string;
+          strokeLinecap?: string;
+          strokeLinejoin?: string;
+        }[];
+        circles: {
+          cx: string;
+          cy: string;
+          r: string;
+          fill: string;
+        }[];
+      };
+    } = ${JSON.stringify(icons)};
+    export const ICONS = ${JSON.stringify(names)} as const;
+    export type TIcons = (typeof ICONS)[keyof typeof ICONS];
+    `,
+    'utf8',
+    (error) => {
+      if (error) throw error;
+    },
+  );
+}
+
+main();