fix(eslint): config (#2334)

* fix(eslint): confict rules

Signed-off-by: Alexandre Philibeaux <[email protected]>

* fix: fix eslint config rules

Signed-off-by: Alexandre Philibeaux <[email protected]>

---------

Signed-off-by: Alexandre Philibeaux <[email protected]>

Author: philibea

.changeset/strange-pears-tell.md

@@ -0,0 +1,5 @@
+---
+"@scaleway/eslint-config-react": minor
+---
+
+fix conflict rules apply by formatter like prettier / biome

eslint.config.mjs

@@ -25,6 +25,14 @@ export default [
         defaultVersion: '18', // Default React version to use when the version you have installed cannot be detected.
         // If not provided, defaults to the latest React version.
       },
+      'import/resolver': {
+        typescript: {
+          project: [
+            './tsconfig.json', // Root config
+            './packages/**/tsconfig.json',
+          ],
+        },
+      },
     },
     languageOptions: {
       globals: {
@@ -35,7 +43,6 @@ export default [
   ...scw.map(config => ({ ...config, files: ['**/*.js'] })),
   {
     files: ['**/*.js'],
-
     languageOptions: {
       parser: babelParser,
       parserOptions: {
@@ -56,7 +63,9 @@ export default [
       sourceType: 'script',
 
       parserOptions: {
-        project: ['tsconfig.json'],
+        project: ['tsconfig.json', 'packages/**/tsconfig.json'],
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
       },
     },
   },
@@ -73,7 +82,7 @@ export default [
       sourceType: 'script',
 
       parserOptions: {
-        project: ['tsconfig.json'],
+        project: ['tsconfig.json', 'packages/**/tsconfig.json'],
       },
     },
 

packages/cookie-consent/src/CookieConsentProvider/CookieConsentProvider.tsx

@@ -1,6 +1,5 @@
-import type { SerializeOptions } from 'cookie'
 import cookie from 'cookie'
-import type { PropsWithChildren } from 'react'
+import type { SerializeOptions } from 'cookie'
 import {
   createContext,
   useCallback,
@@ -9,6 +8,7 @@ import {
   useMemo,
   useState,
 } from 'react'
+import type { PropsWithChildren } from 'react'
 import { uniq } from '../helpers/array'
 import { stringToHash } from '../helpers/misc'
 import { isCategoryKind } from './helpers'

packages/cookie-consent/src/CookieConsentProvider/index.tsx renamed to packages/cookie-consent/src/CookieConsentProvider/index.ts

@@ -43,12 +43,11 @@
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.7.0",
-    "eslint-plugin-deprecation": "3.0.0",
     "eslint-plugin-eslint-comments": "3.2.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.2",
-    "eslint-plugin-react-hooks": "5.0.0"
+    "eslint-plugin-react-hooks": "5.1.0"
   },
   "peerDependencies": {
     "eslint": ">= 9.x"

packages/eslint-config-react/package.json

@@ -37,11 +37,13 @@ export default [
           },
 
           groups: [
-            ['builtin', 'external'],
+            'builtin',
+            'external',
             'internal',
             'parent',
             'sibling',
             'index',
+            // "type",
           ],
           'newlines-between': 'never',
         },

packages/eslint-config-react/shared.mjs

@@ -41,6 +41,14 @@ export default [
       '@stylistic/arrow-parens': 'off',
       '@stylistic/multiline-ternary': 'off',
       '@stylistic/no-trailing-spaces': 'off',
+      '@stylistic/comma-style': 'off',
+      '@stylistic/func-call-spacing': 'off',
+      '@stylistic/jsx-wrap-multilines': 'off',
+      '@stylistic/member-delimiter-style': 'off',
+      '@stylistic/jsx-curly-brace-presence': 'off',
+      '@stylistic/jsx-curly-newline': 'off',
+      '@stylistic/jsx-one-expression-per-line': 'off',
+      '@stylistic/max-statements-per-line ': 'off',
       // -------------------------------------- ///
 
       '@stylistic/brace-style': defaultAirBnbRules['brace-style'],

packages/eslint-config-react/stylistic.mjs

@@ -1,6 +1,5 @@
 import { fixupConfigRules } from '@eslint/compat'
 import { FlatCompat } from '@eslint/eslintrc'
-import deprecation from 'eslint-plugin-deprecation'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import shared from './shared.mjs'
@@ -19,24 +18,27 @@ export default [
       'airbnb-base',
       'plugin:@typescript-eslint/recommended',
       'plugin:@typescript-eslint/recommended-requiring-type-checking',
+      'plugin:import/recommended',
       'plugin:import/typescript',
     ),
   ),
   ...airbnbTypescript,
   ...shared,
   {
-    plugins: {
-      deprecation,
-    },
-
     rules: {
+      /*******   WARN  ********/
+      '@typescript-eslint/no-deprecated': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-redundant-type-constituents': 'warn',
+      /***************************/
+
+      /*******   ERROR  ********/
       '@typescript-eslint/array-type': [
         'error',
         {
           default: 'array',
         },
       ],
-
       '@typescript-eslint/no-base-to-string': 'error',
       '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'error',
       '@typescript-eslint/no-unnecessary-condition': 'error',
@@ -57,15 +59,10 @@ export default [
           },
         },
       ],
-
-      '@typescript-eslint/no-explicit-any': 'warn',
       '@typescript-eslint/no-unused-vars': 'error',
       '@typescript-eslint/consistent-type-imports': 'error',
       '@typescript-eslint/consistent-type-exports': 'error',
       '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
-      '@typescript-eslint/no-redundant-type-constituents': 'warn',
-      'react/require-default-props': 'off',
-      'react/prop-types': 'off',
 
       'react/jsx-no-useless-fragment': [
         'error',
@@ -74,6 +71,13 @@ export default [
         },
       ],
 
+      /***************************/
+
+      /*******   OFF  ********/
+
+      'react/require-default-props': 'off',
+      'react/prop-types': 'off',
+
       // The following rules are enabled in Airbnb config, but are already checked (more thoroughly) by the TypeScript compiler
       // Some of the rules also fail in TypeScript files, for example: https://github.com/typescript-eslint/typescript-eslint/issues/662#issuecomment-507081586
       // Rules are inspired by: https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/eslint-recommended.ts

packages/eslint-config-react/typescript.mjs

@@ -1,5 +1,5 @@
-import type { ReactElement, ReactNode } from 'react'
 import { createContext, useCallback, useContext, useMemo, useRef } from 'react'
+import type { ReactElement, ReactNode } from 'react'
 import {
   DEFAULT_MAX_CONCURRENT_REQUESTS,
   KEY_IS_NOT_STRING_ERROR,

packages/use-dataloader/src/DataLoaderProvider.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest'
-import type { FormatDateOptions } from '../formatDate'
 import formatDate, { supportedFormats } from '../formatDate'
+import type { FormatDateOptions } from '../formatDate'
 
 const locales = ['en', 'fr', 'de', 'ro', 'es']
 

packages/use-i18n/src/__tests__/formatDate.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest'
-import type { FormatUnitOptions } from '../formatUnit'
 import formatUnit, { supportedUnits } from '../formatUnit'
+import type { FormatUnitOptions } from '../formatUnit'
 
 const locales = ['en', 'fr', 'ro']
 

packages/use-i18n/src/__tests__/formatUnit.test.ts

@@ -1,6 +1,6 @@
 import type { NumberFormatOptions } from '@formatjs/ecma402-abstract'
-import type { Cache } from '@formatjs/fast-memoize'
 import { memoize, strategies } from '@formatjs/fast-memoize'
+import type { Cache } from '@formatjs/fast-memoize'
 import IntlTranslationFormat from 'intl-messageformat'
 
 // Deeply inspired by https://github.com/formatjs/formatjs/blob/7406e526a9c5666cee22cc2316dad1fa1d88697c/packages/intl-messageformat/src/core.ts

packages/use-i18n/src/formatters.ts

@@ -7,7 +7,6 @@ import type {
 import { formatDistanceToNow } from 'date-fns/formatDistanceToNow'
 import { formatDistanceToNowStrict } from 'date-fns/formatDistanceToNowStrict'
 import type { BaseLocale } from 'international-types'
-import type { ReactElement, ReactNode } from 'react'
 import {
   createContext,
   useCallback,
@@ -16,6 +15,7 @@ import {
   useMemo,
   useState,
 } from 'react'
+import type { ReactElement, ReactNode } from 'react'
 import dateFormat, { type FormatDateOptions } from './formatDate'
 import unitFormat, { type FormatUnitOptions } from './formatUnit'
 import formatters, { type IntlListFormatOptions } from './formatters'

packages/use-i18n/src/usei18n.tsx

@@ -1,8 +1,8 @@
 import { act, renderHook } from '@testing-library/react'
-import type { History } from 'history'
 import { createMemoryHistory } from 'history'
-import type { ReactNode } from 'react'
+import type { History } from 'history'
 import { useLayoutEffect, useState } from 'react'
+import type { ReactNode } from 'react'
 import { MemoryRouter, Router } from 'react-router-dom'
 import { describe, expect, it, test } from 'vitest'
 import useQueryParams from '..'

packages/use-query-params/src/__tests__/index.test.tsx

@@ -1,5 +1,5 @@
-import type { Context } from '@segment/analytics-next'
 import { AnalyticsBrowser } from '@segment/analytics-next'
+import type { Context } from '@segment/analytics-next'
 import { render, screen, waitFor } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import SegmentProvider from '..'

packages/use-segment/src/__tests__/SegmentProvider.test.tsx

@@ -1,5 +1,5 @@
-import type { Context } from '@segment/analytics-next'
 import { AnalyticsBrowser } from '@segment/analytics-next'
+import type { Context } from '@segment/analytics-next'
 import { renderHook, waitFor } from '@testing-library/react'
 import type { ReactNode } from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

packages/use-segment/src/__tests__/index.tsx

@@ -4,8 +4,8 @@ import type {
   AnalyticsBrowserSettings,
   InitOptions,
 } from '@segment/analytics-next'
-import type { ReactNode } from 'react'
 import { createContext, useContext, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
 import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect'
 
 export type OnEventError = (error: Error) => Promise<void> | void

packages/use-segment/src/useSegment.tsx

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
+import * as fs from 'fs/promises'
 import { parse } from '@formatjs/icu-messageformat-parser'
 import type { ParserError } from '@formatjs/icu-messageformat-parser/error'
-import * as fs from 'fs/promises'
 import { globby } from 'globby'
 import { importFromString } from 'module-from-string'