@team-monolith/cds 1.78.0 → 1.78.2

package/dist/icons/custom/svgrColoredTemplate.js

@@ -1,30 +1,33 @@
 "use strict";
 /* eslint-disable */
+const URL_PATTERN = /(url\(#\w+)(\))/;
 /**
  * svg에서 uniqueId 적용 및 중복 스타일 제거하는 함수
  * svg의 하위 엘리먼트에 대한 재귀 호출
  * @returns {boolean} useUniqueId
  */
-function modifySVGElements(element) {
+function modifySVGElementsRecursive(element) {
     let useUniqueId = false;
     const elementAttributes = element.openingElement.attributes;
-    // uniqueId 적용
-    const urlPattern = /(url\(#\w+)(\))/;
+    // svg 컴포넌트가 여러 번 렌더링되는 경우 같은 id로 인식되어 style 공유를 막기 위한 uniqueId 적용
     elementAttributes.forEach(attr => {
         if (attr.value.value) {
             // id attribute에 uniqueId 적용
+            // id="paint0_linear_4029_17033" -> id="paint0_linear_4029_17033_${uniqueId}"
             if (attr.name.name === 'id') {
                 attr.value.value = `${attr.value.value}_\${uniqueId}`;
                 useUniqueId = true;
             }
             // url 패턴에 매칭되는 attribute에 uniqueId 적용
-            if (attr.value.value.match(urlPattern)) {
-                attr.value.value = attr.value.value.replace(urlPattern, "$1_${uniqueId}$2");
+            // fill="url(#paint0_linear_4029_17033)" => fill="url(#paint0_linear_4029_17033_${uniqueId})"
+            if (attr.value.value.match(URL_PATTERN)) {
+                attr.value.value = attr.value.value.replace(URL_PATTERN, "$1_${uniqueId}$2");
                 useUniqueId = true;
             }
         }
     });
-    // 중복 스타일 제거
+    // 중복 스타일 제거 (객체 리터럴의 중복 속성 타입 오류 방지)
+    // style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);" => style="fill:color(display-p3 0.2118 0.2118 0.2118);"
     const styleAttribute = elementAttributes.find(attr => attr.name.name === 'style');
     if (styleAttribute) {
         const styleMap = new Map();
@@ -41,11 +44,9 @@ function modifySVGElements(element) {
         });
         styleAttribute.value.expression.properties = Array.from(styleMap.values());
     }
-    if (element.children.length > 0) {
-        element.children.forEach(child => {
-            useUniqueId = modifySVGElements(child) || useUniqueId;
-        });
-    }
+    element.children.forEach(child => {
+        useUniqueId = modifySVGElementsRecursive(child) || useUniqueId;
+    });
     return useUniqueId;
 }
 const template = (variables, { tpl }) => {
@@ -58,8 +59,7 @@ const template = (variables, { tpl }) => {
     // variables.jsx는 prop이 포함된 jsx 정보를 가지고 있기 때문에 원본 파일 경로에서 import 후 export 처리
     const _ = require("lodash");
     const originSvgFilePath = `./${_.kebabCase(originSvgFileName)}.svg`;
-    /** svg파일의 하위 엘리먼트(재귀 호출)에 대한 전처리 작업 수행 */
-    const useUniqueId = modifySVGElements(variables.jsx);
+    const useUniqueId = modifySVGElementsRecursive(variables.jsx);
     if (useUniqueId) {
         return tpl `
       import { uid } from "uid";

package/dist/icons/custom/svgrDefaultTemplate.js

@@ -1,43 +1,44 @@
 "use strict";
 /* eslint-disable */
-const baseColor = "#363636";
+const BASE_COLOR = "#363636";
+const URL_PATTERN = /(url\(#\w+)(\))/;
 /**
  * svg에서 uniqueId 적용 및 스타일 속성 제거하는 함수
  * svg의 하위 엘리먼트에 대한 재귀 호출
  * @returns {boolean} useUniqueId
  */
-function modifySVGElements(element, uniqueIdSet) {
+function modifySVGElementsRecursive(element) {
     let useUniqueId = false;
     const elementAttributes = element.openingElement.attributes;
-    // uniqueId 적용
-    const urlPattern = /(url\(#\w+)(\))/;
+    // svg 컴포넌트가 여러 번 렌더링되는 경우 같은 id로 인식되어 style 공유를 막기 위한 uniqueId 적용
     elementAttributes.forEach(attr => {
         if (attr.value.value) {
             // id attribute에 uniqueId 적용
+            // id="paint0_linear_4029_17033" -> id="paint0_linear_4029_17033_${uniqueId}"
             if (attr.name.name === 'id') {
                 attr.value.value = `${attr.value.value}_\${uniqueId}`;
                 useUniqueId = true;
             }
             // url 패턴에 매칭되는 attribute에 uniqueId 적용
-            if (attr.value.value.match(urlPattern)) {
-                attr.value.value = attr.value.value.replace(urlPattern, "$1_${uniqueId}$2");
+            // fill="url(#paint0_linear_4029_17033)" => fill="url(#paint0_linear_4029_17033_${uniqueId})"
+            if (attr.value.value.match(URL_PATTERN)) {
+                attr.value.value = attr.value.value.replace(URL_PATTERN, "$1_${uniqueId}$2");
                 useUniqueId = true;
             }
         }
     });
-    // currentColor 변환
-    // 단색 아이콘의 경우 #363636 컬러값 고정 (remixicon 컬러값 반영), 배경색의 경우 white 또는 foreground에서 수동 적용
+    // 단색 컬러 #363636(remixicon 컬러값)에 대해서 color prop을 적용하기 위한 currentColor로 변환
+    // fill="#363636" => fill="currentColor"
+    // 배경색인 white 또는 foreground값은 유지
     const fillAttribute = elementAttributes.find(attr => attr.name.name === 'fill');
-    if (fillAttribute && fillAttribute.value.value === baseColor) {
+    if (fillAttribute && fillAttribute.value.value === BASE_COLOR) {
         fillAttribute.value.value = 'currentColor';
     }
     // color prop이 있는 단색 svg의 경우 스타일 속성 제거
     element.openingElement.attributes = elementAttributes.filter(attr => attr.name.name !== 'style');
-    if (element.children.length > 0) {
-        element.children.forEach(child => {
-            useUniqueId = modifySVGElements(child) || useUniqueId;
-        });
-    }
+    element.children.forEach(child => {
+        useUniqueId = modifySVGElementsRecursive(child) || useUniqueId;
+    });
     return useUniqueId;
 }
 const template = (variables, { tpl }) => {
@@ -50,8 +51,7 @@ const template = (variables, { tpl }) => {
     // variables.jsx는 prop이 포함된 jsx 정보를 가지고 있기 때문에 원본 파일 경로에서 import 후 export 처리
     const _ = require("lodash");
     const originSvgFilePath = `./${_.kebabCase(originSvgFileName)}.svg`;
-    /** svg파일의 하위 엘리먼트(재귀 호출)에 대한 전처리 작업 수행 */
-    const useUniqueId = modifySVGElements(variables.jsx);
+    const useUniqueId = modifySVGElementsRecursive(variables.jsx);
     if (useUniqueId) {
         return tpl `
       import { uid } from "uid";

package/dist/icons/custom/uniqueidscripts.mjs

@@ -3,7 +3,7 @@ import path from "path";
 const DEFAILT_DIR_PATH = "src/cds/icons/custom/default";
 const COLORED_DIR_PATH = "src/cds/icons/custom/colored";
 // uniqueId 치환은 template 내부 로직에서 처리
-const ID_PATTERN = /("(\w+_\${uniqueId})")|("(url\(#\w+_\${uniqueId}\))")/g;
+const UNIQUE_ID_PATTERN = /("(\w+_\${uniqueId})")|("(url\(#\w+_\${uniqueId}\))")/g;
 /** 경로 내 모든 tsx 파일에서 uniqueId를 replace하는 함수 */
 function replaceUniqueIds(dirPath) {
     const files = fs.readdirSync(dirPath);
@@ -13,9 +13,9 @@ function replaceUniqueIds(dirPath) {
             const stat = fs.statSync(filePath);
             if (stat.isFile()) {
                 let content = fs.readFileSync(filePath).toString();
-                if (content.match(ID_PATTERN) !== null) {
+                if (content.match(UNIQUE_ID_PATTERN) !== null) {
                     // uniqueId 템플릿 리터럴 replace 적용
-                    content = content.replaceAll(ID_PATTERN, (_, _idPattern, id, _urlPattern, url) => {
+                    content = content.replaceAll(UNIQUE_ID_PATTERN, (_, _idPattern, id, _urlPattern, url) => {
                         return `{\`${id || url}\`}`;
                     });
                     fs.writeFileSync(filePath, content);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.78.0",
+  "version": "1.78.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,