Migrates ESLint to v9 (#2570)

* migrate eslint to v9

* with changesets

* add back an export

* update config

* another import

* es6

.changeset/khaki-actors-dream.md

@@ -0,0 +1,7 @@
+---
+'@lg-tools/storybook-decorators': patch
+'@leafygreen-ui/toast': patch
+'@leafygreen-ui/lib': patch
+---
+
+Relints files according to ESLint migration

.changeset/perfect-parrots-kick.md

@@ -0,0 +1,5 @@
+---
+'@lg-tools/lint': major
+---
+
+Upgrades ESLint to v9

.eslintrc.js

@@ -1,2 +1,2 @@
-const config = require('@lg-tools/lint/config/eslint.config');
+const config = require('@lg-tools/lint/config/eslint.config.mjs');
 module.exports = { ...config };

.prettierignore

@@ -9,3 +9,4 @@ storybook-static
 **/tsconfig.json
 **/tsdoc.json
 packages/**/stories.js*
+.turbo

.vscode/settings.json

@@ -3,8 +3,9 @@
   "editor.formatOnSave": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "prettier.configPath": "node_modules/@lg-tools/lint/config/prettier.config.js",
+  "eslint.lintTask.options": "--config ./tools/lint/eslint.config.mjs",
+  "eslint.useFlatConfig": true,
   "eslint.lintTask.enable": true,
-  "eslint.lintTask.options": "--config ./tools/lint/eslint.config.js",
   "eslint.format.enable": true,
   "eslint.runtime": "node",
   "eslint.workingDirectories": ["./"],

packages/lib/src/createSyntheticEvent/createSyntheticEvent.spec.tsx

@@ -1,8 +1,9 @@
 import React, { ChangeEvent, useRef } from 'react';
 import { render } from '@testing-library/react';
-import { createSyntheticEvent, HTMLElementProps } from '..';
 import userEvent from '@testing-library/user-event';
 
+import { createSyntheticEvent, HTMLElementProps } from '..';
+
 const MyInputComponent = ({ onChange }: HTMLElementProps<'input'>) => {
   const inputRef = useRef<HTMLInputElement>(null);
 

packages/lib/src/createUniqueClassName/createUniqueClassName.spec.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import createUniqueClassName from '.';
-import { TestComponent } from './testComponent';
 import { getByTestId, render } from '@testing-library/react';
 
+import { TestComponent } from './testComponent';
+import createUniqueClassName from '.';
+
 const renderTestComponent = () => {
   return render(React.createElement(TestComponent));
 };
@@ -14,6 +15,7 @@ describe('packages/lib/createUniqueClassName', () => {
       const expectedUuidLength = 8;
       const result = createUniqueClassName();
       expect(result.startsWith(lgPrefix)).toBe(true);
+      // eslint-disable-next-line jest/valid-expect
       expect(result.length == lgPrefix.length + expectedUuidLength);
     });
 

packages/lib/src/createUniqueClassName/index.ts

@@ -25,6 +25,7 @@ const createUniqueClassName = (prefix: string = ''): string => {
   } else {
     classNameRegistry.set(prefix, [uniqueClassName]);
   }
+
   return uniqueClassName;
 };
 

packages/lib/src/createUniqueClassName/testComponent.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import createUniqueClassName from '.';
 
 const className1 = createUniqueClassName();

packages/lib/src/helpers/consoleOnce/index.ts

@@ -3,5 +3,5 @@ import once from 'lodash/once';
 export const consoleOnce = {
   error: once(console.error),
   warn: once(console.warn),
-  log: once(console.log),
+  log: once(console.log), // eslint-disable-line no-console
 };

packages/lib/src/index.spec.ts

@@ -80,6 +80,7 @@ describe('packages/lib', () => {
     });
   });
 
+  // eslint-disable-next-line jest/no-disabled-tests
   test.skip('enforceExhaustive', () => {
     (color: 'red' | 'blue') => {
       switch (color) {

packages/lib/src/index.ts

@@ -1,12 +1,11 @@
-import * as typeIs from './typeIs';
 import createUniqueClassName from './createUniqueClassName';
-import getNodeTextContent from './getNodeTextContent';
 import DarkModeProps, { Theme } from './DarkModeProps';
-import { type LgIdProps } from './LgIdProps';
+import getNodeTextContent from './getNodeTextContent';
 import getTheme from './getTheme';
-export * from './helpers';
-export { validateChildren, isComponentType } from './validateChildren';
+import { type LgIdProps } from './LgIdProps';
+import * as typeIs from './typeIs';
 export { createSyntheticEvent } from './createSyntheticEvent';
+export * from './helpers';
 export type {
   Concat,
   DeepKeys,
@@ -22,8 +21,9 @@ export type {
   RecursiveRecord,
   ValuesOf,
 } from './types';
+export { isComponentType, validateChildren } from './validateChildren';
 
-export { typeIs, createUniqueClassName, getNodeTextContent, getTheme, Theme };
+export { createUniqueClassName, getNodeTextContent, getTheme, Theme, typeIs };
 export type { DarkModeProps, LgIdProps };
 
 /** Helper type to extract an HTML element's valid props */

packages/lib/src/validateChildren.tsx

@@ -1,6 +1,7 @@
+import React, { ReactElement } from 'react';
 import isObject from 'lodash/isObject';
 import isUndefined from 'lodash/isUndefined';
-import React, { ReactElement } from 'react';
+
 import { consoleOnce } from '.';
 
 /** Helper type to check if element is a specific React Component  */

packages/toast/src/ControlledToast/ControlledToast.spec.tsx

@@ -88,7 +88,7 @@ describe('packages/toast/controlled', () => {
     test('does not render when `open` is true and component is unmounted', async () => {
       const { queryByTestId } = render(
         <ToastProvider>
-          {false && (
+          {false && ( // eslint-disable-line  no-constant-binary-expression
             <Toast
               open={true}
               title="Test 1"