feat: bump to React 18, user-event v14, remove reach/auto-id (#1497)

* feat: bump to react 18

* feat: bump userEvent to v14

* refactor: use react useid over reach auto id

* refactor: fix lint and types

* test(filterspopover): temporarily disable chromatic

* test: await story play userevents

* refactor(jest): don't throw error on console error

.storybook/components/TokenSpecimen/TokenSpecimen.tsx

@@ -5,6 +5,7 @@ import './TokenSpecimen.css';
 type Props = {
   name: string;
   value: any;
+  children?: React.ReactNode;
   comment?: string;
   inlineStyles?: Record<string, string>;
   variant?: string;

.storybook/pages/AlongDemo/AlongDemo.stories.ts

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 import type React from 'react';
 
 import { AlongDemo } from './AlongDemo';
@@ -17,6 +17,6 @@ export const WatchPage: StoryObj<Args> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const nextPageButton = await canvas.findByText('Hogwarts');
-    nextPageButton.click();
+    userEvent.click(nextPageButton);
   },
 };

.storybook/pages/AlongDemo/AlongDemo.tsx

@@ -1,6 +1,5 @@
-import { useId } from '@reach/auto-id';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useId, useState } from 'react';
 
 import styles from './AlongDemo.module.css';
 import globalStyles from './GlobalStyles.module.css';

.storybook/pages/WireframeDemo/WireframeDemo.stories.ts

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 import type React from 'react';
 
 import { WireframeDemo } from './WireframeDemo';
@@ -20,6 +20,6 @@ export const WatchPage: StoryObj<Args> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const nextPageButton = await canvas.findByText('Hogwarts');
-    nextPageButton.click();
+    userEvent.click(nextPageButton);
   },
 };

.storybook/pages/WireframeDemo/WireframeDemo.tsx

@@ -1,6 +1,5 @@
-import { useId } from '@reach/auto-id';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useId, useState } from 'react';
 
 import globalStyles from './GlobalStyles.module.css';
 import styles from './WireframeDemo.module.css';

docs/CODE_GUIDELINES.md

@@ -567,6 +567,7 @@ EDS follows specific front-end API naming conventions. Authoring a consistent AP
 EDS adheres to the following API naming conventions:
 
 ### Variants
+
 The default option should be the one most commonly used in order to reduce friction for developers using the components.
 
 - `variant` should be used for primary _stylistic_ variations of a component, such as (e.g. `<Card variant="bordered">` or `<Button variant="secondary">`). `variant` should be used if there is primarily one variable used to manipulate the component style.
@@ -596,16 +597,10 @@ The default option should be the one most commonly used in order to reduce frict
 
 ID attributes used for accessibility (e.g. associating `<label>` and `<input>` elements) should be unique and stable.
 
-We currently use [@reach/auto-id](https://www.npmjs.com/package/@reach/auto-id) `useId` hook for ID generation. To ensure stable results, they cannot be invoked within conditionals or callbacks.
-
-- `useId()` is the most common usage.
+We currently use the [`useId` hook](https://reactjs.org/docs/hooks-reference.html#useid) for ID generation. To ensure stable results, they cannot be invoked within conditionals or callbacks.
 
 ```tsx
 const generatedId = useId();
-
-// ensuring the id is of type string
-const generatedId = useId(props.id);
-const checkboxId = String(generatedId);
 ```
 
 ## Tools <a name="accessibility-tools"></a>

jest/jest.setup.ts

@@ -1,19 +1 @@
 import '@testing-library/jest-dom';
-import { format } from 'util';
-
-/**
- * Ensure `console.error` calls throw an error in tests
- */
-function throwOnConsoleError() {
-  console.error = function (...args: unknown[]) {
-    const [firstArg, ...restArgs] = args;
-
-    if (firstArg instanceof Error) {
-      throw firstArg;
-    }
-
-    throw new Error(format(firstArg, ...restArgs));
-  };
-}
-
-throwOnConsoleError();

package.json

@@ -76,12 +76,11 @@
     }
   ],
   "peerDependencies": {
-    "react": ">= 16.8.0"
+    "react": ">= 18"
   },
   "dependencies": {
     "@headlessui/react": "1.7.5",
     "@popperjs/core": "^2.11.6",
-    "@reach/auto-id": "^0.18.0",
     "@tippyjs/react": "^4.2.6",
     "clsx": "^1.2.1",
     "lodash.debounce": "^4.0.8",
@@ -119,14 +118,14 @@
     "@storybook/testing-library": "^0.0.13",
     "@storybook/testing-react": "^1.3.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.4.0",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^18.11.18",
-    "@types/react": "^17.0.53",
+    "@types/react": "^18.0.28",
     "@types/react-beautiful-dnd": "^13.1.3",
-    "@types/react-dom": "^17.0.18",
+    "@types/react-dom": "^18.0.11",
     "@types/react-portal": "^4.0.4",
     "axe-core": "4.4.3",
     "chromatic": "^6.15.0",
@@ -155,8 +154,8 @@
     "postcss-nested": "^6.0.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^2.8.4",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "size-limit": "^8.1.2",
     "snake-case": "^3.0.4",
     "standard-version": "^9.5.0",

src/components/Accordion/Accordion.test.tsx

@@ -1,7 +1,7 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import { userEvent } from '@storybook/testing-library';
 import { composeStories } from '@storybook/testing-react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Accordion } from './Accordion';
 import * as stories from './Accordion.stories';
@@ -11,31 +11,34 @@ const { Default } = composeStories(stories);
 describe('<Accordion />', () => {
   generateSnapshots(stories);
 
-  it('should open and close Accordion panel clicking Accordion button', () => {
+  it('should open and close Accordion panel clicking Accordion button', async () => {
+    const user = userEvent.setup();
     render(<Default />);
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
     const accordionButton = screen.getByTestId('accordion-button');
-    userEvent.click(accordionButton);
+    await user.click(accordionButton);
     expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
-    userEvent.click(accordionButton);
+    await user.click(accordionButton);
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
   });
 
-  it('should open and close Accordion panel with space and enter keys on the Accordion button', () => {
+  it('should open and close Accordion panel with space and enter keys on the Accordion button', async () => {
+    const user = userEvent.setup();
     render(<Default />);
     const accordionButton = screen.getByTestId('accordion-button');
     accordionButton.focus();
-    userEvent.keyboard('{space}');
+    await user.keyboard(' ');
     expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
-    userEvent.keyboard('{space}');
+    await user.keyboard(' ');
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
-    userEvent.keyboard('{enter}');
+    await user.keyboard('{enter}');
     expect(screen.getByTestId('accordion-panel')).toBeInTheDocument();
-    userEvent.keyboard('{enter}');
+    await user.keyboard('{enter}');
     expect(screen.queryByTestId('accordion-panel')).not.toBeInTheDocument();
   });
 
-  it('should call onClose callback when accordion closes', () => {
+  it('should call onClose callback when accordion closes', async () => {
+    const user = userEvent.setup();
     const onClose = jest.fn();
     render(
       <Accordion headingAs="h2">
@@ -48,7 +51,7 @@ describe('<Accordion />', () => {
       </Accordion>,
     );
     const accordionButton = screen.getByTestId('accordion-button');
-    userEvent.click(accordionButton);
+    await user.click(accordionButton);
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 });