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/eslint.config.mjs

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

apps/connector/package.json

@@ -25,7 +25,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 +37,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",

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

@@ -16,7 +16,7 @@
     "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",
+    "build": "turbo run build --filter=@status-im/*",
     "lint": "turbo run lint --filter=@status-im/* --filter=web",
     "typecheck": "turbo run typecheck",
     "format": "prettier --write .",
@@ -32,8 +32,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 config from '@status-im/eslint-config'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [...config]

packages/components/eslint.config.mjs

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

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="theme-yellow grid gap-4">
       <h1 className="text-19">User Avatar</h1>
       {renderVariant('user')({
         ...props,

packages/components/src/button/button.tsx

@@ -88,7 +88,7 @@ function Button(
 
 const styles = cva({
   base: [
-    'inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1 text-center font-medium transition-all',
+    'inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1 border-4 text-center font-medium transition-all',
     'outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-customisation-50 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-neutral-100',
     'disabled:pointer-events-none disabled:cursor-default disabled:opacity-[.3]',
   ],

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/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
+} & {}