@team-monolith/cds 1.77.5 → 1.78.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/icons/custom/{svgrTemplate.js → svgrColoredTemplate.js} +34 -26
  2. package/dist/icons/custom/{svgrTemplateWithColorProp.js → svgrDefaultTemplate.js} +30 -19
  3. package/dist/icons/custom/uniqueidscripts.mjs +7 -7
  4. package/package.json +3 -3
  5. /package/dist/icons/custom/{svgrTemplate.d.ts → svgrColoredTemplate.d.ts} +0 -0
  6. /package/dist/icons/custom/{svgrTemplateWithColorProp.d.ts → svgrDefaultTemplate.d.ts} +0 -0
package/dist/icons/custom/{svgrTemplate.js → svgrColoredTemplate.js} RENAMED
@@ -1,15 +1,15 @@
1
1
  "use strict";
2
2
  /* eslint-disable */
3
+ const URL_PATTERN = /(url\(#\w+)(\))/;
3
4
  /**
4
5
  * svg에서 uniqueId 적용 및 중복 스타일 제거하는 함수
6
+ * svg의 하위 엘리먼트에 대한 재귀 호출
5
7
  * @returns {boolean} useUniqueId
6
8
  */
7
- function modifySVGElements(element) {
9
+ function modifySVGElementsRecursive(element) {
8
10
  let useUniqueId = false;
9
11
  const elementAttributes = element.openingElement.attributes;
10
- const styleAttribute = elementAttributes.find(attr => attr.name.name === 'style');
11
12
  // uniqueId 적용
12
- const urlPattern = /(url\(#\w+)(\))/;
13
13
  elementAttributes.forEach(attr => {
14
14
  if (attr.value.value) {
15
15
  // id attribute에 uniqueId 적용
@@ -18,35 +18,32 @@ function modifySVGElements(element) {
18
18
  useUniqueId = true;
19
19
  }
20
20
  // url 패턴에 매칭되는 attribute에 uniqueId 적용
21
- if (attr.value.value.match(urlPattern)) {
22
- attr.value.value = attr.value.value.replace(urlPattern, "$1_${uniqueId}$2");
21
+ if (attr.value.value.match(URL_PATTERN)) {
22
+ attr.value.value = attr.value.value.replace(URL_PATTERN, "$1_${uniqueId}$2");
23
23
  useUniqueId = true;
24
24
  }
25
25
  }
26
26
  });
27
27
  // 중복 스타일 제거
28
+ const styleAttribute = elementAttributes.find(attr => attr.name.name === 'style');
28
29
  if (styleAttribute) {
29
- const styleSet = new Set();
30
- const styleArr = [];
30
+ const styleMap = new Map();
31
31
  styleAttribute.value.expression.properties.forEach(prop => {
32
- if (!styleSet.has(prop.key.name)) {
33
- styleSet.add(prop.key.name);
34
- styleArr.push(prop);
32
+ const keyName = prop.key.name;
33
+ if (!styleMap.has(keyName)) {
34
+ styleMap.set(keyName, prop);
35
35
  }
36
36
  else if (prop.value.value.match(/^color\(.+\)$/)) {
37
- // 중복된 style중 color() 패턴인 값으로 덮어씌움
38
- const duplicatedStyle = styleArr.find(style => style.key.name === prop.key.name);
39
- if (duplicatedStyle) {
40
- duplicatedStyle.value.value = prop.value.value;
41
- }
37
+ // 중복된 스타일 중 color() 패턴인 값으로 덮어쓰기
38
+ styleMap.set(keyName, prop);
42
39
  }
40
+ // 중복된 스타일이고 color() 패턴이 아니면 기존 값 유지
43
41
  });
44
- styleAttribute.value.expression.properties = styleArr;
42
+ styleAttribute.value.expression.properties = Array.from(styleMap.values());
45
43
  }
46
- // 하위 엘리먼트에 대한 재귀호출
47
44
  if (element.children.length > 0) {
48
45
  element.children.forEach(child => {
49
- useUniqueId = modifySVGElements(child) || useUniqueId;
46
+ useUniqueId = modifySVGElementsRecursive(child) || useUniqueId;
50
47
  });
51
48
  }
52
49
  return useUniqueId;
@@ -61,21 +58,32 @@ const template = (variables, { tpl }) => {
61
58
  // variables.jsx는 prop이 포함된 jsx 정보를 가지고 있기 때문에 원본 파일 경로에서 import 후 export 처리
62
59
  const _ = require("lodash");
63
60
  const originSvgFilePath = `./${_.kebabCase(originSvgFileName)}.svg`;
64
- /** svg파일의 하위 엘리먼트(재귀 호출)에 대한 전처리 작업 수행 */
65
- const useUniqueId = modifySVGElements(variables.jsx);
66
- const uidImportString = useUniqueId ? "import { uid } from \"uid\";" : "";
67
- const reactApiString = useUniqueId ? "useMemo, forwardRef" : "forwardRef";
68
- const uniqueIdString = useUniqueId ? "const uniqueId = useMemo(uid, []);" : "";
61
+ const useUniqueId = modifySVGElementsRecursive(variables.jsx);
62
+ if (useUniqueId) {
63
+ return tpl `
64
+ import { uid } from "uid";
65
+ import React, { useMemo, forwardRef } from "react";
66
+ import svgImport from "${originSvgFilePath}";
67
+ export const ${customIconName} = forwardRef(
68
+ function ${customIconName}(
69
+ props: { className?: string },
70
+ ref: React.ForwardedRef<SVGSVGElement>
71
+ ): React.ReactElement {
72
+ const uniqueId = useMemo(uid, []);
73
+ return ${variables.jsx};
74
+ }
75
+ );
76
+ export const ${customSVGName} = svgImport;
77
+ `;
78
+ }
69
79
  return tpl `
70
- ${uidImportString}
71
- import React, { ${reactApiString} } from "react";
80
+ import React, { forwardRef } from "react";
72
81
  import svgImport from "${originSvgFilePath}";
73
82
  export const ${customIconName} = forwardRef(
74
83
  function ${customIconName}(
75
84
  props: { className?: string },
76
85
  ref: React.ForwardedRef<SVGSVGElement>
77
86
  ): React.ReactElement {
78
- ${uniqueIdString}
79
87
  return ${variables.jsx};
80
88
  }
81
89
  );
package/dist/icons/custom/{svgrTemplateWithColorProp.js → svgrDefaultTemplate.js} RENAMED
@@ -1,17 +1,16 @@
1
1
  "use strict";
2
2
  /* eslint-disable */
3
+ const BASE_COLOR = "#363636";
4
+ const URL_PATTERN = /(url\(#\w+)(\))/;
3
5
  /**
4
- * svg에서 uniqueId 적용 및 중복 스타일 제거하는 함수
6
+ * svg에서 uniqueId 적용 및 스타일 속성 제거하는 함수
7
+ * svg의 하위 엘리먼트에 대한 재귀 호출
5
8
  * @returns {boolean} useUniqueId
6
9
  */
7
- function modifySVGElements(element, uniqueIdSet) {
10
+ function modifySVGElementsRecursive(element, uniqueIdSet) {
8
11
  let useUniqueId = false;
9
- // 단색 아이콘의 경우 #363636 컬러값 고정 (remixicon 컬러값 반영), 배경색의 경우 white 또는 foreground에서 수동 적용
10
- const baseColor = "#363636";
11
12
  const elementAttributes = element.openingElement.attributes;
12
- const fillAttribute = elementAttributes.find(attr => attr.name.name === 'fill');
13
13
  // uniqueId 적용
14
- const urlPattern = /(url\(#\w+)(\))/;
15
14
  elementAttributes.forEach(attr => {
16
15
  if (attr.value.value) {
17
16
  // id attribute에 uniqueId 적용
@@ -20,22 +19,23 @@ function modifySVGElements(element, uniqueIdSet) {
20
19
  useUniqueId = true;
21
20
  }
22
21
  // url 패턴에 매칭되는 attribute에 uniqueId 적용
23
- if (attr.value.value.match(urlPattern)) {
24
- attr.value.value = attr.value.value.replace(urlPattern, "$1_${uniqueId}$2");
22
+ if (attr.value.value.match(URL_PATTERN)) {
23
+ attr.value.value = attr.value.value.replace(URL_PATTERN, "$1_${uniqueId}$2");
25
24
  useUniqueId = true;
26
25
  }
27
26
  }
28
27
  });
29
28
  // currentColor 변환
30
- if (fillAttribute && fillAttribute.value.value === baseColor) {
29
+ // 단색 아이콘의 경우 #363636 컬러값 고정 (remixicon 컬러값 반영), 배경색의 경우 white 또는 foreground에서 수동 적용
30
+ const fillAttribute = elementAttributes.find(attr => attr.name.name === 'fill');
31
+ if (fillAttribute && fillAttribute.value.value === BASE_COLOR) {
31
32
  fillAttribute.value.value = 'currentColor';
32
33
  }
33
34
  // color prop이 있는 단색 svg의 경우 스타일 속성 제거
34
35
  element.openingElement.attributes = elementAttributes.filter(attr => attr.name.name !== 'style');
35
- // 하위 엘리먼트에 대한 재귀호출
36
36
  if (element.children.length > 0) {
37
37
  element.children.forEach(child => {
38
- useUniqueId = modifySVGElements(child) || useUniqueId;
38
+ useUniqueId = modifySVGElementsRecursive(child) || useUniqueId;
39
39
  });
40
40
  }
41
41
  return useUniqueId;
@@ -50,21 +50,32 @@ const template = (variables, { tpl }) => {
50
50
  // variables.jsx는 prop이 포함된 jsx 정보를 가지고 있기 때문에 원본 파일 경로에서 import 후 export 처리
51
51
  const _ = require("lodash");
52
52
  const originSvgFilePath = `./${_.kebabCase(originSvgFileName)}.svg`;
53
- /** svg파일의 하위 엘리먼트(재귀 호출)에 대한 전처리 작업 수행 */
54
- const useUniqueId = modifySVGElements(variables.jsx);
55
- const uidImportString = useUniqueId ? "import { uid } from \"uid\";" : "";
56
- const reactApiString = useUniqueId ? "useMemo, forwardRef" : "forwardRef";
57
- const uniqueIdString = useUniqueId ? "const uniqueId = useMemo(uid, []);" : "";
53
+ const useUniqueId = modifySVGElementsRecursive(variables.jsx);
54
+ if (useUniqueId) {
55
+ return tpl `
56
+ import { uid } from "uid";
57
+ import React, { useMemo, forwardRef } from "react";
58
+ import svgImport from "${originSvgFilePath}";
59
+ export const ${customIconName} = forwardRef(
60
+ function ${customIconName}(
61
+ props: { className?: string, color?: string },
62
+ ref: React.ForwardedRef<SVGSVGElement>
63
+ ): React.ReactElement {
64
+ const uniqueId = useMemo(uid, []);
65
+ return ${variables.jsx};
66
+ }
67
+ );
68
+ export const ${customSVGName} = svgImport;
69
+ `;
70
+ }
58
71
  return tpl `
59
- ${uidImportString}
60
- import React, { ${reactApiString} } from "react";
72
+ import React, { forwardRef } from "react";
61
73
  import svgImport from "${originSvgFilePath}";
62
74
  export const ${customIconName} = forwardRef(
63
75
  function ${customIconName}(
64
76
  props: { className?: string, color?: string },
65
77
  ref: React.ForwardedRef<SVGSVGElement>
66
78
  ): React.ReactElement {
67
- ${uniqueIdString}
68
79
  return ${variables.jsx};
69
80
  }
70
81
  );
package/dist/icons/custom/uniqueidscripts.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  import fs from "fs";
2
2
  import path from "path";
3
- const defaultDirPath = "src/cds/icons/custom/default";
4
- const coloredDirPath = "src/cds/icons/custom/colored";
3
+ const DEFAILT_DIR_PATH = "src/cds/icons/custom/default";
4
+ const COLORED_DIR_PATH = "src/cds/icons/custom/colored";
5
5
  // uniqueId 치환은 template 내부 로직에서 처리
6
- const idPattern = /("(\w+_\${uniqueId})")|("(url\(#\w+_\${uniqueId}\))")/g;
6
+ const UNIQUE_ID_PATTERN = /("(\w+_\${uniqueId})")|("(url\(#\w+_\${uniqueId}\))")/g;
7
7
  /** 경로 내 모든 tsx 파일에서 uniqueId를 replace하는 함수 */
8
8
  function replaceUniqueIds(dirPath) {
9
9
  const files = fs.readdirSync(dirPath);
@@ -13,9 +13,9 @@ function replaceUniqueIds(dirPath) {
13
13
  const stat = fs.statSync(filePath);
14
14
  if (stat.isFile()) {
15
15
  let content = fs.readFileSync(filePath).toString();
16
- if (content.match(idPattern) !== null) {
16
+ if (content.match(UNIQUE_ID_PATTERN) !== null) {
17
17
  // uniqueId 템플릿 리터럴 replace 적용
18
- content = content.replaceAll(idPattern, (_, _idPattern, id, _urlPattern, url) => {
18
+ content = content.replaceAll(UNIQUE_ID_PATTERN, (_, _idPattern, id, _urlPattern, url) => {
19
19
  return `{\`${id || url}\`}`;
20
20
  });
21
21
  fs.writeFileSync(filePath, content);
@@ -24,5 +24,5 @@ function replaceUniqueIds(dirPath) {
24
24
  }
25
25
  });
26
26
  }
27
- replaceUniqueIds(defaultDirPath);
28
- replaceUniqueIds(coloredDirPath);
27
+ replaceUniqueIds(DEFAILT_DIR_PATH);
28
+ replaceUniqueIds(COLORED_DIR_PATH);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@team-monolith/cds",
3
- "version": "1.77.5",
3
+ "version": "1.78.1",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "sideEffects": false,
@@ -36,8 +36,8 @@
36
36
  "storybook": "storybook dev -p 6006",
37
37
  "build-storybook": "storybook build",
38
38
  "iconconvert": "node iconscripts.mjs",
39
- "svgr-default": "npx svgr src/cds/icons/custom/default -d src/cds/icons/custom/default --template src/cds/icons/custom/svgrTemplateWithColorProp.js",
40
- "svgr-colored": "npx svgr src/cds/icons/custom/colored -d src/cds/icons/custom/colored --template src/cds/icons/custom/svgrTemplate.js",
39
+ "svgr-default": "npx svgr src/cds/icons/custom/default -d src/cds/icons/custom/default --template src/cds/icons/custom/svgrDefaultTemplate.js",
40
+ "svgr-colored": "npx svgr src/cds/icons/custom/colored -d src/cds/icons/custom/colored --template src/cds/icons/custom/svgrColoredTemplate.js",
41
41
  "svgr-customicon": "npm run svgr-default && npm run svgr-colored && node src/cds/icons/custom/uniqueidscripts.mjs",
42
42
  "lint": "npx eslint src/"
43
43
  },