Merge pull request #40 from NaverPayDev/feat/28

svg 관련 rule 이관

Author: byhhh2

.changeset/calm-donuts-enjoy.md

@@ -0,0 +1,6 @@
+---
+"@naverpay/eslint-plugin": minor
+---
+
+- `@naverpay/svg-manager`와 의존관계가 있는 `optimize-svg-components`, `svg-unique-id` rule 추가
+- minimatch 가져오기 누락 수정

.github/workflows/ci.yaml

@@ -11,7 +11,6 @@ jobs:
             - uses: actions/checkout@v3
             - uses: pnpm/action-setup@v3
               with:
-                  version: 9
                   run_install: true
             - run: pnpm run prettier
             - run: pnpm run lint
@@ -23,6 +22,5 @@ jobs:
             - uses: actions/checkout@v3
             - uses: pnpm/action-setup@v3
               with:
-                  version: 9
                   run_install: true
             - run: pnpm run test

packages/eslint-plugin/README.md

@@ -37,5 +37,7 @@ npm install @naverpay/eslint-plugin -D
 | Name                                                             | Description                                     | 🔧  |
 | :--------------------------------------------------------------- | :---------------------------------------------- | :-- |
 | [memo-react-components](docs/memo-react-components.md)     | 주어진 경로의 React 컴포넌트들을 자동으로 memoize 합니다.             | 🔧  |
+| [optimize-svg-components](docs/optimize-svg-components.md)     | 주어진 경로의 svg 컴포넌트들을 [svgo](https://github.com/svg/svgo) 기반으로 최적화합니다.             | 🔧  |
 | [prevent-default-import](docs/prevent-default-import.md)                       | 패키지 목록을 받아, 해당 패키지 default import를 금지합니다.                      | 🔧  |
 | [sort-exports](docs/sort-exports.md)                       | 파일에 있는 모든 export 문을 정렬합니다.                      | 🔧  |
+| [svg-unique-id](docs/svg-unique-id.md)                       | 주어진 경로의 SVG 컴포넌트들에 고유한 id를 부여하는 HOC를 추가합니다.                     | 🔧  |

packages/eslint-plugin/docs/optimize-svg-components.md

@@ -0,0 +1,104 @@
+# `@naverpay/optimize-svg-components`
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+주어진 경로의 SVG 컴포넌트들을 최적화합니다.
+
+## 필수 패키지
+
+`@naverpay/svg-manager` 패키지가 필요합니다.  
+
+```sh
+npm i @naverpay/svg-manager -D
+```
+
+> **왜 필요한가요?**
+>
+> - `@naverpay/svg-manager`는 SVG 관련 타입과 HOC 등을 정의합니다.
+> - 해당 규칙이 불필요한 환경에서 설치되는 것을 방지하고자, 규칙을 사용되는 곳에서만 의존성을 설치합니다.
+
+## 설명
+
+주어진 경로의 svg 컴포넌트들을 [svgo](https://github.com/svg/svgo) 기반으로 최적화합니다.
+
+### SVG 컴포넌트 예시
+
+```tsx
+const IconCheckFill = (props: SVGStyleProps) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={props.width || '100%'}
+        height={props.height || '100%'}
+        viewBox={props.viewBox || '0 0 22 22'}
+        style={props.style || {}}
+    >
+        <g fill="none" fillRule="evenodd">
+            <path
+                fill={props.fill || '#03c75a'}
+                d="M11 .5C5.21.5.5 5.21.5 11S5.21 21.5 11 21.5 21.5 16.79 21.5 11 16.79.5 11 .5"
+            />
+            <path
+                fill="#FFF"
+                d="M8.754 14.847l-3.027-2.995c-.116-.114-.182-.27-.182-.434 0-.163.066-.32.182-.434.244-.24.635-.24.878 0l2.589 2.56 6.2-6.131c.244-.24.635-.24.878 0 .117.114.182.27.182.434 0 .163-.065.32-.182.434l-6.639 6.566c-.117.115-.275.18-.44.18-.164 0-.322-.065-.439-.18z"
+            />
+        </g>
+    </svg>
+)
+```
+
+단, 다음과 같은 특징이 있는 컴포넌트는 최적화에서 제외합니다.
+
+- props로 id가 존재하는 경우
+- 내부에 [classnames](https://www.npmjs.com/package/classnames)로 클래스를 정의한 경우
+- 요소에 한글을 포함한 경우
+- 이미 최적화되었다고 판단된 경우 ([주의사항](#주의사항) 참고)
+
+## 옵션
+
+### `pathGroups: [array]`:
+
+svg 컴포넌트의 경로를 설정합니다
+
+**Properties of the objects**
+| property | required | type | description |
+|----------------|:--------:|--------|---------------|
+| path | ✅ | string | 그룹에 속할 minimatch pattern |
+| excludes | | Array\<string\> | path에서 제외할 파일명 |
+
+### (Optional) `excludes: [array]`:
+
+전체 경로에서 pathGroups에 속하지만 제외하고자 하는 파일 경로를 지정합니다.
+
+```json
+"excludes": ["/src/assets/*.stories.tsx"]
+```
+
+## 주의사항
+
+최적화 후 아래 주석이 `@autogenerated`됩니다.
+해당 주석을 제거하면 최적화 여부를 판단할 수 없으므로 중복하여 린트가 실행될 수 있습니다.
+따라서 린트 실행하여 최적화된 컴포넌트에서 자동 생성된 주석은 유지할 것을 권장합니다.
+
+```js
+/* @autogenerated optimization completed by @naverpay/optimize-svg-components */
+```
+
+## 예시
+
+```json
+"@naverpay/optimize-svg-components": [
+    "warn",
+    {
+        "pathGroups": [
+            {
+                "path": "/src/assets/*.tsx",
+            },
+            {
+                "path": "/src/components/assets/*.tsx",
+                "excludes": ["IconExample.tsx"],
+            }
+        ],
+        "excludes": ["/src/**/*.stories.tsx"]
+    }
+]
+```

packages/eslint-plugin/docs/svg-unique-id.md

@@ -0,0 +1,43 @@
+# `@naverpay/svg-unique-id`
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+주어진 경로의 SVG 컴포넌트들에 고유한 id를 부여하는 HOC를 추가합니다.
+
+## 필수 패키지
+
+`@naverpay/svg-manager` 패키지가 필요합니다.  
+
+```sh
+npm i @naverpay/svg-manager -D
+```
+
+> **왜 필요한가요?**
+>
+> - `@naverpay/svg-manager`는 SVG 관련 타입과 HOC 등을 정의합니다.
+> - 해당 규칙이 불필요한 환경에서 설치되는 것을 방지하고자, 규칙을 사용되는 곳에서만 의존성을 설치합니다.
+
+## 설명
+
+SVG 컴포넌트 내부 요소의 id가 동일할 때, SVG 컴포넌트를 같은 화면에서 여러 번 사용하게 된다면
+SVG 내부 요소가 제대로 그려지지 않을 수 있습니다.  
+id 중복 문제를 해결하기 위해 `<SvgUniqueID />` Wrapper로 SVG 컴포넌트를 감쌉니다.
+
+## 옵션
+
+### `paths: [array]`:
+
+대상 파일 경로
+
+## Examples
+
+```json
+"@naverpay/svg-unique-id": [
+    "warn",
+    {
+        "paths": [
+            "/packages/common-bi/src/assets/*.tsx"
+        ]
+    }
+]
+```

packages/eslint-plugin/lib/constants/index.js

@@ -0,0 +1,11 @@
+const SVG_OPTIMIZED_COMMENT_CONTENT = '@autogenerated optimization completed by @naverpay/optimize-svg-components'
+const SVG_OPTIMIZE_COMPLETED_COMMENT = `/* ${SVG_OPTIMIZED_COMMENT_CONTENT} */`
+const PROPS_IDENTIFIER_NAME = 'props'
+const FIRST_RANGE = [0, 0]
+
+module.exports = {
+    PROPS_IDENTIFIER_NAME,
+    SVG_OPTIMIZED_COMMENT_CONTENT,
+    SVG_OPTIMIZE_COMPLETED_COMMENT,
+    FIRST_RANGE,
+}