chore: update dependecies relating to react, typescript and eslint (#867

)

Co-authored-by: Michael Marszalek <[email protected]>

.eslintrc.js

@@ -47,6 +47,8 @@ module.exports = {
     'react/display-name': 'off',
     'import/no-unresolved': 'error',
     'import/namespace': ['error', { allowComputed: true }],
+    'import/no-named-as-default': 'off',
+    '@next/next/no-html-link-for-pages': ['error', '/storefront/pages/'],
     'import/order': [
       'warn',
       {

docs-components/Table/TokenTable/TokensTable.tsx

@@ -44,6 +44,7 @@ const TokensTable = (tokenTable: TokenTableProps) => {
       '$' + tokenTable.componentName + '-',
     );
 
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
     const rows: { row: (string | JSX.Element | unknown)[] }[] = [];
 
     Object.entries(row).map(([key, value]) => {

package.json

@@ -47,7 +47,7 @@
     "@rollup/plugin-image": "^3.0.1",
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^14.0.0",
-    "@rollup/plugin-typescript": "^8.5.0",
+    "@rollup/plugin-typescript": "^11.1.4",
     "@storybook/addon-a11y": "^7.4.0",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-interactions": "^7.4.0",
@@ -60,23 +60,23 @@
     "@svgr/cli": "^6.5.1",
     "@svgr/core": "^6.5.1",
     "@svgr/rollup": "^6.5.1",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/jest-dom": "6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.0.0",
     "@types/node": "^18.11.11",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/rimraf": "^3.0.2",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "5.36.1",
-    "@typescript-eslint/parser": "5.36.1",
+    "@typescript-eslint/eslint-plugin": "6.7.3",
+    "@typescript-eslint/parser": "6.7.3",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "classnames": "^2.3.1",
-    "eslint": "8.22.0",
+    "eslint": "8.50.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-import-resolver-typescript": "3.5.0",
+    "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-prettier": "4.2.1",
@@ -110,7 +110,7 @@
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.2.2",
     "typescript-plugin-css-modules": "^5.0.0"
   }
 }

packages/react/src/components/Chip/Group/Group.tsx

@@ -29,7 +29,7 @@ export const Group = forwardRef<HTMLUListElement, ChipGroupProps>(
       <ChipGroupContext.Provider value={{ size }}>
         {React.Children.toArray(children).map((child, index) =>
           React.isValidElement(child) ? (
-            <li key={`${child.toString()}-${index}`}>{child}</li>
+            <li key={`chip-${index}`}>{child}</li>
           ) : null,
         )}
       </ChipGroupContext.Provider>

packages/react/src/components/Popover/Popover.test.tsx

@@ -35,22 +35,16 @@ describe('Popover', () => {
       const popoverTrigger = screen.getByRole('button', { name: 'Open' });
 
       expect(screen.queryByText('Popover text')).not.toBeInTheDocument();
-      await act(async () => {
-        await user.click(popoverTrigger);
-      });
+      await act(async () => user.click(popoverTrigger));
       expect(screen.queryByText('Popover text')).toBeInTheDocument();
     });
 
     it('should close popover on trigger click when open', async () => {
-      await act(() => {
-        render({ initialOpen: true });
-      });
+      render({ initialOpen: true });
       const popoverTrigger = screen.getByRole('button', { name: 'Open' });
 
       expect(screen.queryByText('Popover text')).toBeInTheDocument();
-      await act(async () => {
-        await user.click(popoverTrigger);
-      });
+      await act(async () => user.click(popoverTrigger));
       expect(screen.queryByText('Popover text')).not.toBeInTheDocument();
     });
 
@@ -67,9 +61,7 @@ describe('Popover', () => {
     });
 
     it('should close popover on ESC pressed click when open', async () => {
-      await act(() => {
-        render({ initialOpen: true });
-      });
+      render({ initialOpen: true });
 
       expect(screen.queryByText('Popover text')).toBeInTheDocument();
       await act(async () => {
@@ -79,10 +71,9 @@ describe('Popover', () => {
     });
   });
 
-  it('should show popover content when initialOpen=true', async () => {
-    await act(() => {
-      render({ initialOpen: true });
-    });
+  it('should show popover content when initialOpen=true', () => {
+    render({ initialOpen: true });
+
     expect(screen.queryByText('Popover text')).toBeInTheDocument();
   });
 
@@ -122,10 +113,8 @@ describe('Popover', () => {
 
   test.each(popoverVariants)(
     'should render popover with correct variant when variant is %s',
-    async (variant) => {
-      await act(() => {
-        render({ variant: variant, initialOpen: true });
-      });
+    (variant) => {
+      render({ variant: variant, initialOpen: true });
       const otherColors = popoverVariants.filter((v) => v !== variant);
 
       const popoverContent = screen.getByRole('dialog');

packages/react/src/components/Select/Select.test.tsx

@@ -40,6 +40,7 @@ const sortedOptions: SingleSelectOption[] = [
   singleSelectOptions[2],
   singleSelectOptions[0],
 ];
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const optionSearch = jest.fn((_o, _k) => sortedOptions);
 jest.mock('./utils', () => ({
   optionSearch: (

packages/react/src/components/legacy/LegacyTextField/TextField.tsx

@@ -127,6 +127,7 @@ export const LegacyTextField = forwardRef<
       values: NumberFormatValues,
       sourceInfo: SourceInfo,
     ): void => {
+      /* eslint-disable-next-line */
       if (sourceInfo.source === 'event' && onChange) {
         const parsedEvent = replaceTargetValueWithUnformattedValue({
           values,

packages/react/src/utility-components/AnimateHeight/AnimateHeight.test.tsx

@@ -59,7 +59,7 @@ describe('AnimateHeight', () => {
     const { container, rerender } = render({ open: false });
     rerender(<AnimateHeight open />);
     expect(container.firstChild).toHaveClass('openingOrClosing');
-    await act(jest.runAllTimers);
+    await act(() => jest.runAllTimers);
     await waitFor(() => {
       expect(container.firstChild).not.toHaveClass('openingOrClosing');
     });
@@ -70,7 +70,7 @@ describe('AnimateHeight', () => {
     const { container, rerender } = render({ open: true });
     rerender(<AnimateHeight open={false} />);
     expect(container.firstChild).toHaveClass('openingOrClosing');
-    await act(jest.runAllTimers);
+    await act(() => jest.runAllTimers);
     await waitFor(() => {
       expect(container.firstChild).not.toHaveClass('openingOrClosing');
     });

storefront/components/Tokens/TokenColor/TokenColor.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import classes from './TokenColor.module.css';
-import cn from 'classnames';
 
 interface TokenColorProps {
   value: string;