Apply shared eslint/typescript config & upgrade to typescript v5 (#2096)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue
<!-- Please link to issue if one exists -->

- Fixes #1748 
- Fixes #1432 

## Summary
<!-- Please brief explanation of the changes made -->

- https://github.com/channel-io/shared-configs 팀 공용 설정 파일을 바탕으로 configs/
하위에 레포지토리 공용 eslint, typescript config를 설정합니다.
  - supports/ 하위보다 더 명확한 디렉토리명이라고 판단하여 이름 변경
- 전반적으로 중복되는 설정들을 공용 설정으로 이동하고 제거했습니다.

## Details
<!-- Please elaborate description of the changes -->

- eslint의 import/order 규칙을 단순하게 통일하게 되면서 일부 order 변경이 있습니다
- 브라우저용/노드용 패키지를 구분하여 typescript config를 만들었습니다.
- tsconfig의 include 패턴에 와일드카드를 사용하여 단순화했습니다. 와일드 카드를 사용할 필요가 없는 케이스도
마찬가지로 단순화했습니다. (`src/**/*` -> `src`)
- tsconfig의 exclude 패턴에 불필요한 패턴을 정리했습니다 (예: node_modules)
- typescript 버전을 v5.4로 업데이트합니다.
  - `ttypescript` : 패키지가 v5와 호환되지 않아서 ts-patch 라이브러리로 대체합니다
  - cevek/ttypescript#147

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

No

## References
<!-- Please list any other resources or points the reviewer should be
aware of -->

- https://github.com/channel-io/shared-configs

.stylelintignore

@@ -0,0 +1,3 @@
+*.cjs
+*.json
+*.txt

configs/eslint-config-bezier/index.js

@@ -0,0 +1,41 @@
+/**
+ * @type {import('eslint').Linter.Config}
+ */
+module.exports = {
+  extends: ['@channel.io/eslint-config/web'],
+  plugins: [
+    '@channel.io/eslint-plugin',
+    'import-newlines',
+    'jest',
+  ],
+  parser: "@typescript-eslint/parser",
+  env: {
+    node: true,
+  },
+  rules: {
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always',
+        alphabetize: { order: 'asc' },
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+        pathGroupsExcludedImportTypes: ['react', 'react-dom'],
+        pathGroups: [{
+          pattern: '{react,react-dom}',
+          group: 'external',
+          position: 'before',
+        }],
+      },
+    ],
+    'import-newlines/enforce': ['error', { items: 1 }],
+    'sort-imports': [
+      'error',
+      {
+        ignoreDeclarationSort: true,
+      },
+    ],
+    '@typescript-eslint/consistent-type-imports': ['error', { fixStyle: 'inline-type-imports' }],
+    '@typescript-eslint/consistent-type-exports': ['error', { fixMixedExportsWithInlineTypeSpecifier: true }],
+    '@typescript-eslint/naming-convention': 'off',
+  }
+}

configs/eslint-config-bezier/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "eslint-config-bezier",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Common ESLint configuration.",
+  "main": "index.js",
+  "dependencies": {
+    "@channel.io/eslint-config": "^2.0.4",
+    "@channel.io/eslint-plugin": "^1.2.3",
+    "eslint-plugin-import-newlines": "^1.3.4",
+    "eslint-plugin-jest": "^22.21.0"
+  }
+}

supports/tsconfig/eslint.json → configs/tsconfig/browser.json

@@ -1,8 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@channel.io/typescript-config/web.json",
   "compilerOptions": {
-    "types": ["@types/node"],
-    "noEmit": true,
-    "allowJs": true
+    "allowJs": true,
   }
 }

configs/tsconfig/node.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@channel.io/typescript-config/node.json",
+  "compilerOptions": {
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "allowJs": true,
+  }
+}

configs/tsconfig/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "tsconfig",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Common Typescript configuration.",
+  "dependencies": {
+    "@channel.io/typescript-config": "^0.0.1"
+  }
+}

package.json

@@ -4,7 +4,7 @@
   "license": "Apache-2.0",
   "workspaces": [
     "packages/*",
-    "supports/*"
+    "configs/*"
   ],
   "scripts": {
     "build": "turbo run build",
@@ -29,8 +29,7 @@
     "@swc/jest": "^0.2.36",
     "@types/jest": "^29.5.12",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.32.0",
-    "eslint-config-bezier": "workspace:*",
+    "eslint": "^8.57.0",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -41,7 +40,7 @@
     "syncpack": "^12.3.0",
     "ts-node": "^10.9.2",
     "turbo": "^1.12.4",
-    "typescript": "^4.9.5"
+    "typescript": "^5.4.2"
   },
   "engines": {
     "node": "18.18.2",

packages/bezier-codemod/.eslintrc.cjs

@@ -1,3 +1,6 @@
+/**
+ * @type {import('eslint').Linter.Config}
+ */
 module.exports = {
   root: true,
   extends: ['bezier'],
@@ -7,30 +10,5 @@ module.exports = {
   },
   rules: {
     'no-restricted-imports': 'off',
-    'sort-imports': [
-      'error',
-      {
-        ignoreDeclarationSort: true,
-      },
-    ],
-    'import/order': [
-      'error',
-      {
-        'newlines-between': 'always',
-        alphabetize: { order: 'asc' },
-        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
-        pathGroupsExcludedImportTypes: ['react'],
-        pathGroups: [
-          {
-            pattern: 'react',
-            group: 'external',
-            position: 'before',
-          },
-        ],
-      },
-    ],
-    'react/react-in-jsx-scope': 'off',
-    'react/jsx-props-no-spreading': 'off',
-    '@typescript-eslint/naming-convention': 'off',
   },
 }

packages/bezier-codemod/tsconfig.eslint.json

@@ -1,8 +1,12 @@
 {
-  "extends": "tsconfig/eslint.json",
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+  },
   "include": [
-    "src/**/*",
-    ".eslintrc.cjs",
-    "jest.config.cjs",
+    "src",
+    ".*.cjs",
+    "*.cjs",
   ],
+  "exclude": ["src/**/fixtures/*"]
 }

packages/bezier-codemod/tsconfig.json

@@ -1,23 +1,15 @@
 {
-	"extends": "tsconfig/script.json",
+	"extends": "tsconfig/node.json",
 	"compilerOptions": {
 		"outDir": "dist",
-		"module": "node16",
-		"moduleResolution": "node16",
-		"moduleDetection": "force",
-		"target": "es2020",
-		"lib": ["DOM", "DOM.Iterable", "es2020"],
-    "esModuleInterop": true,
 		"jsx": "react",
 		"declaration": true,
-		"strict": true,
-		"skipLibCheck": true,
 	},
 	"include": [
     "src",
   ],
 	"exclude": [
-    "node_modules",
-		"src/**/fixtures/*"
+    "src/**/fixtures/*",
+    "src/**/*.test.ts",
   ],
 }

packages/bezier-figma-plugin/.eslintrc.js

@@ -1,3 +1,6 @@
+/**
+ * @type {import('eslint').Linter.Config}
+ */
 module.exports = {
   root: true,
   extends: ['bezier'],
@@ -6,40 +9,7 @@ module.exports = {
     project: './tsconfig.eslint.json',
   },
   rules: {
-    '@typescript-eslint/naming-convention': 'off',
     'no-restricted-imports': 'off',
     'no-restricted-globals': 'off',
-    'sort-imports': [
-      'error',
-      {
-        ignoreDeclarationSort: true,
-      },
-    ],
-    'import/order': [
-      'error',
-      {
-        'newlines-between': 'always',
-        alphabetize: { order: 'asc' },
-        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
-        pathGroupsExcludedImportTypes: ['react', 'react-dom'],
-        pathGroups: [
-          {
-            pattern: 'react',
-            group: 'external',
-            position: 'before',
-          },
-          {
-            pattern: 'react-dom',
-            group: 'external',
-            position: 'before',
-          },
-          {
-            pattern: '@channel.io/**/*',
-            group: 'external',
-            position: 'after',
-          },
-        ],
-      },
-    ],
   },
 }

packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx

@@ -1,15 +1,14 @@
 import React, { useCallback } from 'react'
 
-import {
-  useLocation,
-  useNavigate,
-} from 'react-router-dom'
-
 import {
   Button,
   Text,
   VStack,
 } from '@channel.io/bezier-react'
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom'
 
 function ExtractSuccess() {
   const navigate = useNavigate()

packages/bezier-figma-plugin/src/ui/components/Home.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from 'react'
 
-import { useNavigate } from 'react-router-dom'
-
 import { HexahedronIcon } from '@channel.io/bezier-icons'
 import {
   ListItem,
   VStack,
 } from '@channel.io/bezier-react'
+import { useNavigate } from 'react-router-dom'
 
 function Home() {
   const navigate = useNavigate()

packages/bezier-figma-plugin/src/ui/components/IconExtract.tsx

@@ -4,8 +4,6 @@ import React, {
   useState,
 } from 'react'
 
-import { useNavigate } from 'react-router-dom'
-
 import {
   Button,
   FormControl,
@@ -18,6 +16,7 @@ import {
   TextField,
   VStack,
 } from '@channel.io/bezier-react'
+import { useNavigate } from 'react-router-dom'
 
 import config from '../../config'
 import type { PluginMessage } from '../../types/Message'

packages/bezier-figma-plugin/src/ui/index.tsx

@@ -1,14 +1,13 @@
 import React from 'react'
 
+import { AppProvider } from '@channel.io/bezier-react'
 import { createRoot } from 'react-dom/client'
 import {
   MemoryRouter,
   Route,
   Routes,
 } from 'react-router-dom'
 
-import { AppProvider } from '@channel.io/bezier-react'
-
 import ExtractSuccess from './components/ExtractSuccess'
 import Home from './components/Home'
 import IconExtract from './components/IconExtract'

packages/bezier-figma-plugin/tsconfig.eslint.json

@@ -1,13 +1,12 @@
 {
-  "extends": "tsconfig/eslint.json",
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+  },
   "include": [
+    "src",
     ".*.js",
-    "src/**/*",
     "*.js",
     "*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
   ]
 }

packages/bezier-figma-plugin/tsconfig.json

@@ -1,16 +1,10 @@
 {
+  "extends": "tsconfig/browser.json",
   "compilerOptions": {
-    "target": "es2017",
-    "moduleResolution": "node",
-    "lib": ["es2017", "dom"],
-    "jsx": "react",
-    "strict": true,
-    "skipLibCheck": true,
-    "allowSyntheticDefaultImports": true,
     "typeRoots": [
       "../../node_modules/@types",
       "../../node_modules/@figma"
     ]
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src"],
 }

packages/bezier-icons/.eslintrc.js

@@ -1,35 +1,11 @@
+/**
+ * @type {import('eslint').Linter.Config}
+ */
 module.exports = {
   root: true,
   extends: ['bezier'],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: './tsconfig.eslint.json',
   },
-  rules: {
-    'sort-imports': [
-      'error',
-      {
-        ignoreDeclarationSort: true,
-      },
-    ],
-    'import/order': [
-      'error',
-      {
-        'newlines-between': 'always',
-        alphabetize: { order: 'asc' },
-        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
-        pathGroupsExcludedImportTypes: ['react'],
-        pathGroups: [
-          {
-            pattern: 'react',
-            group: 'external',
-            position: 'before',
-          },
-        ],
-      },
-    ],
-    'react/react-in-jsx-scope': 'off',
-    'react/jsx-props-no-spreading': 'off',
-    '@typescript-eslint/naming-convention': 'off',
-  },
 }