Update eslint from v8.46.0 to v9.17.0

eslint.config.mjs

@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-unresolved
+import tseslint from 'typescript-eslint';
+import baseConfig from '@peculiar/eslint-config-base';
+import reactConfig from '@peculiar/eslint-config-react';
+
+export default tseslint.config([
+  ...baseConfig,
+  ...reactConfig,
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  {
+    ignores: [
+      '**/dist/*',
+      '**/public/*',
+    ],
+  },
+]);

package.json

@@ -11,26 +11,19 @@
     "build": "yarn workspaces run build",
     "test:unit:coverage": "yarn workspaces run test:unit:coverage",
     "check:types": "yarn workspaces run check:types",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint": "yarn eslint",
     "prepare": "yarn build",
     "publish:version": "lerna publish",
     "publish:canary": "lerna publish --canary"
   },
   "devDependencies": {
     "@emotion/jest": "^11.13.0",
+    "@peculiar/eslint-config-base": "^0.0.2",
+    "@peculiar/eslint-config-react": "^0.0.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3 ",
     "@types/jest": "^29.5.0",
-    "@typescript-eslint/eslint-plugin": "5.38.1",
-    "@typescript-eslint/parser": "5.38.1",
-    "eslint": "8.46.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "17.0.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.8",
-    "eslint-plugin-react-hooks": "4.6.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",

packages/color/jest.config.js

@@ -1,8 +1,9 @@
+// eslint-disable-next-line no-undef
 module.exports = {
-  preset: "ts-jest",
-  testEnvironment: "jsdom",
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
   watchPlugins: [
-    "jest-watch-typeahead/filename",
-    "jest-watch-typeahead/testname",
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
   ],
 };

packages/color/src/color.ts

@@ -60,7 +60,6 @@ export class Color {
   palette(): Record<PaletteTypes, Color> {
     const [h, s, b] = this.toHsb();
     const steps = 5;
-
     let saturationTintStep = (s - this.saturationMinMax[0]) / steps;
     let saturationShadeStep = (s - this.saturationMinMax[1]) / steps;
     let brightnessTintStep = (this.brightnessMinMax[1] - b) / steps;

packages/color/src/get_luminance.ts

@@ -10,7 +10,6 @@ export function getLuminance(color: string | [r: number, g: number, b: number])
   let rgb: number[] = typeof color === 'string' ? hexToRgb(color) : color;
 
   rgb = rgb.map((val) => {
-    // eslint-disable-next-line no-param-reassign
     val /= 255; // normalized
 
     return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;

packages/color/src/hsb_to_rgb.ts

@@ -22,41 +22,47 @@ export function hsbToRgb(h: number, s: number, b: number): [r: number, g: number
       red = brightness;
       green = t;
       blue = p;
+
       break;
     }
 
     case 1: {
       red = q;
       green = brightness;
       blue = p;
+
       break;
     }
 
     case 2: {
       red = p;
       green = brightness;
       blue = t;
+
       break;
     }
 
     case 3: {
       red = p;
       green = q;
       blue = brightness;
+
       break;
     }
 
     case 4: {
       red = t;
       green = p;
       blue = brightness;
+
       break;
     }
 
     case 5: {
       red = brightness;
       green = p;
       blue = q;
+
       break;
     }
 

packages/color/src/rgb_to_hsb.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 const RGB_MAX = 255;
 const HUE_MAX = 360;
 const SV_MAX = 100;
@@ -27,13 +26,19 @@ export function rgbToHsb(r: number, g: number, b: number): [h: number, s: number
     switch (max) {
       case r:
         h = (g - b) / d + (g < b ? 6 : 0);
+
         break;
+
       case g:
         h = (b - r) / d + 2;
+
         break;
+
       case b:
         h = (r - g) / d + 4;
+
         break;
+
       default:
         break;
     }

packages/react-components/.storybook/preview.tsx

@@ -10,7 +10,7 @@
 import { themeLight, themeDark } from './themes';
 import './global.css';
 
-type ThemedDocsContainerProps = {
+interface ThemedDocsContainerProps {
   context: DocsContextProps;
   children?: React.ReactNode;
 };
@@ -24,7 +24,7 @@
     channel.on(DARK_MODE_EVENT_NAME, setDark);
 
     return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
   }, [channel, setDark]);
 
   return (
     <ThemeProvider
@@ -50,12 +50,14 @@
       {story()}
     </ThemeProvider>
   );
-}
+};
 
 const preview: Preview = {
   decorators: [ThemeWrapper],
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    actions: {
+      argTypesRegex: '^on[A-Z].*',
+    },
     darkMode: {
       dark: themeDark,
       light: themeLight,

packages/react-components/babel.config.js

@@ -1,5 +1,6 @@
+// eslint-disable-next-line no-undef
 module.exports = {
   presets: [
-    "@babel/preset-env",
+    '@babel/preset-env',
   ],
 };

packages/react-components/jest.config.js

@@ -1,9 +1,10 @@
+// eslint-disable-next-line no-undef
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: [
     '@testing-library/jest-dom/extend-expect',
-    '<rootDir>/src/setupTests.js'
+    '<rootDir>/src/setupTests.ts',
   ],
   watchPlugins: [
     'jest-watch-typeahead/filename',
@@ -14,7 +15,7 @@ module.exports = {
     '^.+\\.(js|jsx)$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!nanoid/.*)'
+    'node_modules/(?!nanoid/.*)',
   ],
   snapshotSerializers: [
     '@emotion/jest/serializer',

packages/react-components/src/Alert/alert.stories.tsx

@@ -9,7 +9,9 @@ const meta: Meta<typeof Alert> = {
   },
   tags: ['autodocs'],
   argTypes: {
-    children: { control: 'text' },
+    children: {
+      control: 'text',
+    },
   },
 };
 

packages/react-components/src/Alert/alert.test.tsx

@@ -4,7 +4,9 @@ import { Alert } from './index';
 
 describe('<Alert />', () => {
   it('should render with default styles', () => {
-    const { asFragment } = render(
+    const {
+      asFragment,
+    } = render(
       <Alert>
         Alert message
       </Alert>,
@@ -14,7 +16,9 @@ describe('<Alert />', () => {
   });
 
   it('should pass className', () => {
-    const { asFragment } = render(
+    const {
+      asFragment,
+    } = render(
       <Alert className="my-class-name">
         Alert message
       </Alert>,
@@ -24,7 +28,7 @@ describe('<Alert />', () => {
   });
 
   describe('variants', () => {
-    const variants: Array<React.ComponentProps<typeof Alert>['variant']> = [
+    const variants: React.ComponentProps<typeof Alert>['variant'][] = [
       'attention',
       'pending',
       'success',
@@ -34,7 +38,9 @@ describe('<Alert />', () => {
     variants.forEach((variant) => {
       describe(`variant "${variant}"`, () => {
         it('enable icon', () => {
-          const { asFragment } = render(
+          const {
+            asFragment,
+          } = render(
             <Alert variant={variant} disableIcon={false}>
               Message
               {variant}
@@ -45,7 +51,9 @@ describe('<Alert />', () => {
         });
 
         it('disable icon', () => {
-          const { asFragment } = render(
+          const {
+            asFragment,
+          } = render(
             <Alert variant={variant} disableIcon>
               Message
               {variant}

packages/react-components/src/Alert/alert.tsx

@@ -14,7 +14,7 @@ import {
 /**
  * Types.
  */
-type AlertOwnProps = {
+interface AlertOwnProps {
   /**
    * The content of the component.
    */