update ESLint (#636)

* update ESLint

* f

* f

* f

* c

* f

* f

* f

* f

* r

* u

* f

* f

* u

.changeset/itchy-insects-vanish.md

@@ -0,0 +1,10 @@
+---
+'@status-im/eslint-config': patch
+'@status-im/components': patch
+'@status-im/js': patch
+'@status-im/colors': patch
+'connector': patch
+'@status-im/icons': patch
+---
+
+update ESLint

.vscode/settings.json

@@ -1,7 +1,13 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "npm.packageManager": "pnpm",
+  "eslint.useESLintClass": true,
   "eslint.workingDirectories": [
+    "./packages/colors",
+    "./packages/icons",
+    "./packages/components",
+    "./packages/status-js",
+    "./apps/connector",
     {
       "mode": "auto",
       "#comment": "See https://github.com/microsoft/vscode-eslint/issues/1161 for reason (i.e. multiple .eslintrc config files)"

apps/connector/Jenkinsfile

@@ -62,10 +62,10 @@ pipeline {
           expression { changesDetected }
       }
       steps {
-          dir("${env.WORKSPACE}/apps/connector") {
+          dir("${env.WORKSPACE}") {
             script {
               nix.shell(
-                'pnpm build:chrome',
+                'pnpm turbo run build --filter=connector',
                 pure: false,
                 entryPoint: "${env.WORKSPACE}/apps/connector/shell.nix"
               )

apps/connector/eslint.config.mjs

@@ -0,0 +1,37 @@
+import configs, { tailwindcssConfigs } from '@status-im/eslint-config'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  ...configs,
+  ...tailwindcssConfigs,
+  {
+    files: ['*.ts', '*.tsx'],
+    rules: {
+      'no-constant-binary-expression': 'error',
+      'no-restricted-globals': ['error', 'process'],
+      'jsx-a11y/alt-text': [
+        1,
+        {
+          img: [],
+        },
+      ],
+    },
+  },
+  {
+    files: ['*.mjs'],
+    languageOptions: {
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+  },
+  {
+    files: ['*.js'],
+    languageOptions: {
+      parserOptions: {
+        ecmaVersion: 'latest',
+      },
+    },
+  },
+]

apps/connector/package.json

@@ -13,9 +13,10 @@
     "dev:chrome": "plasmo dev --target=chrome-mv3",
     "dev:safari": "plasmo dev --target=safari-mv3",
     "dev:firefox": "plasmo dev --target=firefox-mv3",
+    "build": "pnpm build:chrome",
     "build:chrome": "plasmo build --target=chrome-mv3",
     "build:firefox": "plasmo build --target=firefox-mv3 --zip",
-    "lint": "eslint ./src",
+    "lint": "eslint src",
     "format": "prettier --write .",
     "package": "plasmo package",
     "clean": "rimraf apps build .plasmo node_modules"
@@ -25,7 +26,7 @@
     "@plasmohq/storage": "^1.11.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-switch": "^1.1.0",
-    "@status-im/colors": "^0.4.0",
+    "@status-im/colors": "workspace:*",
     "cva": "^1.0.0-beta.1",
     "ethers": "^6.13.0",
     "plasmo": "0.88.0",
@@ -37,15 +38,14 @@
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "4.1.1",
     "@parcel/bundler-experimental": "^2.7.0",
-    "@status-im/eslint-config": "^0.3.0",
+    "@status-im/eslint-config": "workspace:*",
     "@tailwindcss/typography": "^0.5.13",
     "@types/chrome": "0.0.258",
     "@types/node": "20.11.5",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "autoprefixer": "^10.4.19",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.0",
     "postcss": "^8.4.38",
     "prettier": "3.2.4",
     "prettier-plugin-tailwindcss": "^0.6.1",

apps/connector/src/components/status-tag.tsx

@@ -9,8 +9,8 @@ const styles = cva({
   base: 'flex h-6 items-center gap-1 rounded-[20px] border px-2 text-13',
   variants: {
     status: {
-      on: 'border-success-/20 bg-success-/10 text-success-60',
-      off: 'border-danger-/20 bg-danger-/10 text-danger-60',
+      on: 'border-success-50/20 bg-success-50/10 text-success-60',
+      off: 'border-danger-50/20 bg-danger-50/10 text-danger-60',
     },
   },
 })

apps/connector/src/contents/provider.ts

@@ -127,7 +127,7 @@ export class Provider {
               return
             }
           }
-        } catch (error) {
+        } catch {
           // we don't reject here because incoming message is not from the proxy
           return
         }

eslint.config.mjs

@@ -0,0 +1,13 @@
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {
+    ignores: [
+      '**/dist',
+      '**/node_modules',
+      '**/protos',
+      '**/proto',
+      '**/coverage',
+      '**/storybook-static',
+    ],
+  },
+]

package.json

@@ -7,7 +7,8 @@
       "packages/status-js",
       "packages/colors",
       "packages/icons",
-      "packages/components"
+      "packages/components",
+      "apps/connector"
     ]
   },
   "keywords": [],
@@ -16,8 +17,8 @@
     "prepare": "husky install",
     "test": "turbo run test --filter=@status-im/* -- --run",
     "dev": "turbo run dev --filter=@status-im/* --parallel",
-    "build": "turbo run build --filter=@status-im/* && node --version",
-    "lint": "turbo run lint --filter=@status-im/* --filter=web",
+    "build": "turbo run build --filter=@status-im/* --filter=connector",
+    "lint": "turbo run lint --filter=@status-im/* --filter=connector",
     "typecheck": "turbo run typecheck",
     "format": "prettier --write .",
     "clean": "turbo run clean && rimraf node_modules",
@@ -32,8 +33,9 @@
     "@status-im/eslint-config": "workspace:*",
     "@tsconfig/strictest": "^2.0.0",
     "@types/prettier": "^2.7.2",
+    "eslint": "^9.14.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.0",
+    "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "@types/react": "^18.0.33",

packages/colors/eslint.config.mjs

@@ -0,0 +1,4 @@
+import configs from '@status-im/eslint-config'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [...configs]

packages/components/eslint.config.mjs

@@ -0,0 +1,4 @@
+import configs, { tailwindcssConfigs } from '@status-im/eslint-config'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [...configs, ...tailwindcssConfigs]

packages/components/package.json

@@ -31,7 +31,7 @@
     "preinstall": "npx only-allow pnpm",
     "dev": "vite build --watch --mode development",
     "build": "vite build",
-    "postbuild": "pnpm build:types && node --version",
+    "postbuild": "pnpm build:types",
     "build:types": "tsc --noEmit false --emitDeclarationOnly",
     "typecheck": "tsc",
     "lint": "eslint src",

packages/components/src/avatar/avatar.stories.tsx

@@ -14,6 +14,7 @@ const sizesAvatar = {
 }
 
 const renderVariant = (variant: AvatarProps['type']) => {
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
   const content = (props: any) => {
     const sizes = sizesAvatar[variant]
 
@@ -47,7 +48,7 @@ const meta = {
   },
 
   render: props => (
-    <div className="grid gap-4 theme-yellow">
+    <div className="grid gap-4">
       <h1 className="text-19">User Avatar</h1>
       {renderVariant('user')({
         ...props,

packages/components/src/icon-button/icon-button.stories.tsx

@@ -7,7 +7,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 const sizes = ['40', '32', '24'] as const
 
-// eslint-disable-next-line react/display-name
+// eslint-disable-next-line  @typescript-eslint/no-explicit-any
 const renderVariant = (variant: string) => (props: any) => (
   <div className="flex items-center gap-4">
     {sizes.map(size => (

packages/components/src/shortcut/shortcut.stories.tsx

@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 const variants = ['primary', 'secondary', 'gray'] as const
 
-// eslint-disable-next-line react/display-name
+// eslint-disable-next-line  @typescript-eslint/no-explicit-any
 const renderVariant = (variant: (typeof variants)[number]) => (props: any) => (
   <div className="flex items-center gap-2">
     <Shortcut {...props} variant={variant} icon={<CommandIcon />} />

packages/components/src/skeleton/skeleton.tsx

@@ -1,5 +1,6 @@
 import { cva, cx, type VariantProps } from 'cva'
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const styles = cva({
   base: 'animate-skeleton overflow-hidden',
 

packages/components/src/tag/tag.tsx

@@ -27,13 +27,7 @@ function Tag(
   props: Props & (ButtonProps | DivProps),
   ref: Ref<HTMLButtonElement | HTMLDivElement>,
 ) {
-  const {
-    size = '32',
-    icon,
-    iconPlacement = 'left',
-    label,
-    ...rest
-  } = props
+  const { size = '32', icon, iconPlacement = 'left', label, ...rest } = props
 
   const iconOnly = Boolean(icon && !label)
 

packages/components/src/types.ts

@@ -8,4 +8,4 @@ export type CustomisationColorType = keyof typeof customisation
 
 export type Prettify<T> = {
   [K in keyof T]: T[K]
-} & {} // eslint-disable-line @typescript-eslint/ban-types
+} & {}

packages/eslint-config/eslint.config.mjs

@@ -0,0 +1,9 @@
+import js from '@eslint/js'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {
+    ...js.configs.recommended,
+    files: ['**/*.js', '**/*.mjs', '**/*.cjs'],
+  },
+]