[refactor] upgrade to ESLint 9

[add] Prettier CSS softer
[add] GitHub PR badges & GitPod extensions

Author: TechQuery

.eslintrc.json

@@ -0,0 +1,17 @@
+- icon: visualstudio
+  label: 'GitHub.dev'
+  message: 'PR-$prNumber'
+  color: 'blue'
+  url: 'https://github.dev/$owner/$repo/pull/$prNumber'
+
+- icon: github
+  label: 'GitHub codespaces'
+  message: 'PR-$prNumber'
+  color: 'black'
+  url: 'https://codespaces.new/$owner/$repo/pull/$prNumber'
+
+- icon: git
+  label: 'GitPod.io'
+  message: 'PR-$prNumber'
+  color: 'orange'
+  url: 'https://gitpod.io/?autostart=true#https://github.com/$owner/$repo/pull/$prNumber'

.github/pr-badge.yml

@@ -6,6 +6,9 @@ on:
 jobs:
     Build-and-Publish:
         runs-on: ubuntu-latest
+        permissions:
+            contents: write
+            id-token: write
         steps:
             - uses: actions/checkout@v4
 

.github/workflows/main.yml

@@ -0,0 +1,24 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+vscode:
+    extensions:
+        - yzhang.markdown-all-in-one
+        - jock.svg
+        - redhat.vscode-yaml
+        - clinyong.vscode-css-modules
+        - akamud.vscode-caniuse
+        - visualstudioexptteam.intellicode-api-usage-examples
+        - pflannery.vscode-versionlens
+        - christian-kohler.npm-intellisense
+        - esbenp.prettier-vscode
+        - rangav.vscode-thunder-client
+        - eamodio.gitlens
+        - github.vscode-pull-request-github
+        - github.vscode-github-actions
+tasks:
+    - init: pnpm i
+      command: pnpm build

.gitpod.yml

@@ -0,0 +1,71 @@
+// @ts-check
+import { fixupPluginRules } from '@eslint/compat';
+import eslint from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import reactPlugin from 'eslint-plugin-react';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import globals from 'globals';
+import tsEslint from 'typescript-eslint';
+import { fileURLToPath } from 'url';
+
+const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url));
+
+export default tsEslint.config(
+    // register all of the plugins up-front
+    {
+        plugins: {
+            '@typescript-eslint': tsEslint.plugin,
+            // @ts-expect-error https://github.com/jsx-eslint/eslint-plugin-react/issues/3699
+            react: fixupPluginRules(reactPlugin),
+            'simple-import-sort': simpleImportSortPlugin
+        }
+    },
+    // config with just ignores is the replacement for `.eslintignore`
+    { ignores: ['**/node_modules/**', '**/dist/**', '**/.parcel-cache/**'] },
+
+    // extends ...
+    eslint.configs.recommended,
+    ...tsEslint.configs.recommended,
+
+    // base config
+    {
+        languageOptions: {
+            globals: { ...globals.es2020, ...globals.browser, ...globals.node },
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir,
+                warnOnUnsupportedTypeScriptVersion: false
+            }
+        },
+        rules: {
+            'simple-import-sort/exports': 'error',
+            'simple-import-sort/imports': 'error',
+            'react/jsx-no-target-blank': 'warn',
+            'react/jsx-sort-props': [
+                'error',
+                {
+                    reservedFirst: true,
+                    shorthandLast: true,
+                    callbacksLast: true,
+                    noSortAlphabetically: true
+                }
+            ],
+            '@typescript-eslint/no-unused-vars': 'warn',
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/no-empty-object-type': 'off',
+            '@typescript-eslint/no-unsafe-declaration-merging': 'warn'
+        }
+    },
+    {
+        files: ['**/*.js'],
+        extends: [tsEslint.configs.disableTypeChecked],
+        rules: {
+            // turn off other type-aware rules
+            '@typescript-eslint/internal/no-poorly-typed-ts-props': 'off',
+
+            // turn off rules that don't apply to JS code
+            '@typescript-eslint/explicit-function-return-type': 'off'
+        }
+    },
+    eslintConfigPrettier
+);

eslint.config.mjs

@@ -47,12 +47,15 @@
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.25.7",
         "@babel/preset-typescript": "^7.25.7",
+        "@eslint/compat": "^1.2.0",
+        "@eslint/js": "^9.12.0",
         "@microsoft/api-extractor": "^7.47.11",
         "@parcel/config-default": "~2.12.0",
         "@parcel/packager-ts": "~2.12.0",
         "@parcel/transformer-less": "2.12.0",
         "@parcel/transformer-typescript-tsc": "~2.12.0",
         "@parcel/transformer-typescript-types": "~2.12.0",
+        "@softonus/prettier-plugin-duplicate-remover": "^1.0.1",
         "@storybook/addon-console": "^3.0.0",
         "@storybook/addon-essentials": "^7.6.20",
         "@storybook/addon-interactions": "^7.6.20",
@@ -67,20 +70,20 @@
         "@types/prismjs": "^1.26.4",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.1",
-        "@typescript-eslint/eslint-plugin": "^8.10.0",
-        "@typescript-eslint/parser": "^8.10.0",
         "@vitejs/plugin-react": "^4.3.2",
-        "eslint": "^8.57.1",
+        "eslint": "^9.12.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-react": "^7.37.1",
         "eslint-plugin-simple-import-sort": "^12.1.1",
+        "globals": "^15.11.0",
         "husky": "^9.1.6",
         "koapache": "^2.2.2",
         "less": "^4.2.0",
         "lint-staged": "^15.2.10",
         "parcel": "~2.12.0",
         "postcss-preset-env": "^10.0.7",
         "prettier": "^3.3.3",
+        "prettier-plugin-css-order": "^2.1.2",
         "process": "^0.11.10",
         "prop-types": "15.8.1",
         "react": "^18.3.1",
@@ -90,17 +93,22 @@
         "typedoc": "^0.26.10",
         "typedoc-plugin-mdn-links": "^3.3.3",
         "typescript": "~5.6.3",
+        "typescript-eslint": "^8.10.0",
         "vite": "^5.4.9"
     },
     "prettier": {
         "singleQuote": true,
         "trailingComma": "none",
         "arrowParens": "avoid",
-        "tabWidth": 4
+        "tabWidth": 4,
+        "plugins": [
+            "prettier-plugin-css-order",
+            "@softonus/prettier-plugin-duplicate-remover"
+        ]
     },
     "lint-staged": {
-        "*.{md,less,json,yml,ts,tsx}": "prettier --write",
-        "*.{js,jsx,ts,tsx}": "eslint --fix"
+        "*.{md,less,json,yml,js,mjs,ts,tsx}": "prettier --write",
+        "*.{js,ts,tsx}": "eslint --fix"
     },
     "browserslist": "> 0.5%, last 2 versions, not dead, IE 11",
     "targets": {